[英]Adding feature table from WMS layer in Geoserver using ArcGIS Javascript API
I wonder if what I am trying to do is even possible. 我想知道我想做的事是否可能。 I am trying to add a feature table to my website which has been written using ArcGIS Javascript API.
我试图将功能表添加到我的网站,该功能表是使用ArcGIS Javascript API编写的。 I have managed to link my layer from Geoserver and view this on the map but I am struggling to show my records in a table within my website.
我已经设法从Geoserver链接了我的图层并在地图上查看了此信息,但是我正努力将自己的记录显示在网站的表格中。
This is my code so far: 到目前为止,这是我的代码:
require([
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"esri/layers/WMSLayer",
"esri/layers/WMSLayerInfo",
"esri/geometry/Extent",
"esri/graphicsUtils",
"esri/tasks/query",
"esri/symbols/PictureMarkerSymbol",
"esri/map",
"dojo/dom",
"dojo/parser",
"dojo/ready",
"dojo/on",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer"
], function (
FeatureLayer, FeatureTable, WMSLayer, WMSLayerInfo, Extent, graphicsUtils, Query, PictureMarkerSymbol, Map,
dom, parser, ready, on, ContentPane, BorderContainer
) {
parser.parse();
ready(function(){
var map = new Map("map",{
basemap: "streets",
extent: new Extent({xmax: -1.1487, xmin: 51.065,
ymax: -1.1274, ymin: 51.097,
"spatialReference":{"wkid":27700,"latestWkid":4326}
})
});
//Load a FeatureTable to the application once map loads
map.on("load", loadTable);
function loadTable(){
// editable FeatureLayer
var wmsLayer = new WMSLayer("", {
mode: WMSLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true,
id: "fLayer2"
});
var wmsLayer = new WMSLayer("http://localhost:8080/geoserver/RSAC/ows?service=wfs&version=1.0.0&request=GetCapabilities", {
format: "png",
resourceInfo: {
copyright: "GeoServer",
description: "RSAC fields",
extent: new Extent(-1.1487, 51.065, -1.1274, 51.097, {wkid: 4326}),
featureInfoFormat: "text/plain",
getFeatureInfoURL: "http://localhost:8080/geoserver/RSAC/ows",
getMapURL: "http://localhost:8080/geoserver/RSAC/ows",
hasAttributionData: true,
layerInfos: [
new WMSLayerInfo({
name: "RSAC:Field_boundary_WGS84_updated",
title: "Field_boundary_WGS84",
queryable: true,
showPopup: true
})
],
spatialReferences:[3857],
version: "1.3.0"
},
version: "1.3.0",
visibleLayers: [
"RSAC:Field_boundary_WGS84_updated"
]
});
wmsLayer.on("error", function (response){
console.log("Error: %s", response.error.message);
});
map.addLayer(wmsLayer);
// set a selection symbol for the featurelayer
var selectionSymbol = new PictureMarkerSymbol("https://sampleserver6.arcgisonline.com/arcgis/rest/services/RedlandsEmergencyVehicles/FeatureServer/1/images/3540cfc7a09a7bd66f9b7b2114d24eee", 48 ,48);
wmsLayer.setSelectionSymbol(selectionSymbol);
// listen to featurelayer click event to handle selection
// from layer to the table.
// when user clicks on a feature on the map, the corresponding
// record will be selected in the table.
wmsLayer.on("click", function(evt) {
var idProperty = wmsLayer.id,
feature,
featureId,
query;
if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
feature = evt.graphic,
featureId = feature.attributes[idProperty];
query = new Query();
query.returnGeometry = false;
query.id = [featureId];
query.where = "1=1";
wmsLayer.selectFeatures(query, wmsLayer.SELECTION_NEW);
}
});
// Redlands police vehicle locations layer
// this layer is an editable layer
map.addLayer(wmsLayer);
//create new FeatureTable and set its properties
var wmsLayer = new FeatureTable({
featureLayer : wmsLayer,
map : map,
editable: true,
syncSelection: true,
dateOptions: {
datePattern: 'M/d/y',
timeEnabled: true,
timePattern: 'H:mm',
},
// use fieldInfos object to change field's label (column header),
// change the editability of the field, and to format how field values are displayed
// you will not be able to edit callnumber field in this example.
fieldInfos: [
{
name: 'id',
alias: 'Polygon Id',
editable: false //disable editing on this field
},
{
name: 'photos',
alias: 'photos',
},
],
// add custom menu functions to the 'Options' drop-down Menu
menuFunctions: [
{
label: "Field_boundary_WGS84",
callback: function(evt){
console.log(" -- evt: ", evt);
// set definition expression on the layer
// show only available emergency vehicles
wmsLayer.setDefinitionExpression("status = 0");
// call FeatureTable.refresh() method to re-fetch features
// from the layer. Table will only show records that meet
// layer's definition expression creteria.
wmsLayer.refresh();
}
},{
label: "Show All Field Boundaries",
callback: function(evt){
console.log(" -- evt: ", evt);
wmsLayer.setDefinitionExpression("1=1");
myFeatureTable.refresh();
}
}]
}, 'myTableNode');
myFeatureTable.startup();
// listen to refresh event
myFeatureTable.on("refresh", function(evt){
console.log("refresh event - ", evt);
});
}
});
});
FeatureTable
class is a widget only working with feature layer.So it is wrong to create its instance with a wmslayer object setting to its featurelayer parameter. FeatureTable
类是仅与要素图层一起使用的小部件,因此使用wmslayer对象设置为其featurelayer参数设置来创建其实例是错误的。
If you have to use the featureTable widget,you can do the following. 如果必须使用featureTable小部件,则可以执行以下操作。
get ArcGIS shapefile or other supported types. 获取ArcGIS shapefile或其他受支持的类型。
use the shapefile to publish feature service with arcgis server,so you can have a feature service.say: https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/california_census_blocks/FeatureServer/0
使用shapefile与arcgis服务器发布要素服务,因此您可以拥有要素服务。例如:
https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/california_census_blocks/FeatureServer/0
: https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/california_census_blocks/FeatureServer/0
code with ags api for js 用ags api for js编写代码
Following is an example: 以下是一个示例:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Using FeatureTable</title> <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"> <script src="https://js.arcgis.com/3.20/"></script> <style> html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; } </style> <script> require([ "esri/layers/FeatureLayer", "esri/dijit/FeatureTable", "esri/geometry/webMercatorUtils", "esri/map", "dojo/dom-construct", "dojo/dom", "dojo/parser", "dojo/ready", "dojo/on", "dojo/_base/lang", "dijit/registry", "dijit/form/Button", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/form/TextBox" ], function( FeatureLayer, FeatureTable, webMercatorUtils, Map, domConstruct, dom, parser, ready, on, lang, registry, Button, ContentPane, BorderContainer, TextBox ) { parser.parse(); ready(function() { var myFeatureLayer; var map = new Map("map", { basemap: "dark-gray" }); map.on("load", loadTable); function loadTable() { // Create the feature layer myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer/0", { mode: FeatureLayer.MODE_ONDEMAND, visible: true, outFields: [ "Collected", "Status", "Spp_Code", "Height", "Cmn_Name", "Sci_Name", "Street", "Native" ], id: "fLayer" }); //set map extent on(myFeatureLayer, "load", function(evt) { var extent = myFeatureLayer.fullExtent; if (webMercatorUtils.canProject(extent, map)) { map.setExtent(webMercatorUtils.project(extent, map)); } }); map.addLayer(myFeatureLayer); myFeatureTable = new FeatureTable({ "featureLayer": myFeatureLayer, "outFields": [ "Collected", "Spp_Code", "Height", "Cmn_Name", "Sci_Name", "Native" ], fieldInfos: [{ name: 'Spp_Code', alias: 'Species Code', }, { name: 'Cmn_Name', alias: 'Common Name', }, { name: 'Sci_Name', alias: 'Scientific Name', } ], "map": map }, 'myTableNode'); myFeatureTable.startup(); } }); }); </script> </head> <body class="claro esri"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%"> <div id="map"></div> </div> <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%"> <div id="myTableNode"></div> </div> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.