![](/img/trans.png)
[英]Getting popuptemplate from feature layer to pop up when selecting row from table using ArcGIS API for JavaScript?
[英]Adding feature table from WMS layer in Geoserver using ArcGIS Javascript API
我想知道我想做的事是否可能。 我試圖將功能表添加到我的網站,該功能表是使用ArcGIS Javascript API編寫的。 我已經設法從Geoserver鏈接了我的圖層並在地圖上查看了此信息,但是我正努力將自己的記錄顯示在網站的表格中。
到目前為止,這是我的代碼:
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
類是僅與要素圖層一起使用的小部件,因此使用wmslayer對象設置為其featurelayer參數設置來創建其實例是錯誤的。
如果必須使用featureTable小部件,則可以執行以下操作。
獲取ArcGIS shapefile或其他受支持的類型。
使用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
用ags api for js編寫代碼
以下是一個示例:
<!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.