使用 ArcGIS Javascript API 从地理服务器中的 WMS 图层添加要素表

Question

我想知道我正在尝试做的事情是否可能。我正在尝试向我的网站添加一个使用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);
      });
    }
  });
});

Answer 1

FeatureTable类是仅使用要素图层的微件。因此，使用其要素图层参数的 wmslayer 对象设置创建其实例是错误的。

如果必须使用特征表小部件，则可以执行以下操作。

1. 获取 ArcGIS 形状文件或其他受支持的类型。

   • 在地理服务器中获取 WMS Layer的相应数据。
   • 将数据转换为 Shapfile 或 ArcGIS 中支持的其他格式。

2. 使用 shapefile 通过 ArcGIS Server 发布要素服务，以便获得要素服务https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/california_census_blocks/FeatureServer/0。

3. 使用 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>