如何獲取arcgis server發佈的FeatureLayer圖層中各要素,並根據名稱着重標出該要素?

原創

新月清光

2020-06-28 07:32

需求：已知根據數據後臺查詢到要素名稱，想通過該名稱查詢要素多邊形，不通過arcgis for jsp 提供的查詢按鈕實現。

這裏只是一個demo，具體實施得結合自己的項目。

首先引入引用文件：

<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<script src="https://js.arcgis.com/3.29/"></script>

接下來是添加arcgis api的引用函數及地圖顯示設置

 var map, dialog;
      require([
        "esri/map", "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
        "esri/Color", "dojo/number", "dojo/dom-style",
        "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, Graphic, esriLang,
        Color, number, domStyle,
        TooltipDialog, dijitPopup
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-80.94, 33.646],
          zoom: 8,
          slider: false
        });

然後添加要素圖層，即FeatureLayer圖層，這裏面outFields用於過濾哪些字段，symbol爲顯示樣式

var southCarolinaCounties = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
        });
        southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");
        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,255,255,0.35]),
            1
          ),
          new Color([125,125,125,0.35])
        );
        southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));
        map.addLayer(southCarolinaCounties);

然後設定一個被選中要素的顯示樣式，即高亮顯示的樣式

var highlightSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,0,0]), 3
          ),
          new Color([125,125,125,0.35])
        );

接下面便是核心，即如何根據要素塊的名稱獲取要素，並將該要素高亮顯示，c表示整個FeatureLayer中地理要素，其中包括屬性及空間位置，插件內部定義的

 map.on("load", function(){
  //我們需要用到的就是下面的代碼
   var handle = southCarolinaCounties.on("update-end", function(){
    var c = southCarolinaCounties.graphics;
    //打印所有的要素塊
    console.log(c);
    //定義需要找到的塊名稱
    var name = "Lee";
    //遍歷所有的要素，找到該要素，在該要素位置新建一個高亮圖層
    for(i=0;i<=c.length;i++){
     if(c[i].attributes.NAME == name){
      var highlightGraphic = new Graphic(c[i].geometry,highlightSymbol);
      map.graphics.add(highlightGraphic);   
     }
    }    
    //每次地圖發生變換都會執行update-end事件，handle.remove()是爲了避免代碼被重複執行
    handle.remove();
   });
});

效果如下：
當name =“Lee”
當name = “Cherokee”
完整代碼如下：