（十八）ArcGIS JS 不通过查询获取图层中的所有要素

小灰灰 2021-09-17 03:18 621阅读 0赞

### 前言 ###

在很多应用场景下，需要将服务中的要素重新用PictureMarkerSymbol符号化，我们需要一次性获取服务中图层的所有要素.  
    如果通过传统的异步查询，时间消耗很大，并且还需要手动的修改服务器的要素最大返回数值。可以说是繁琐和耗时的一种方法。

### 思路 ###

FeatureLayer是对数据进行操作的理想图层加载方式。FeatureLayer中是继承于GraphicsLayer，继承关系如下：

esri/layers/Layer
    |_esri/layers/GraphicsLayer
      |_esri/layers/FeatureLayer

在FeatureLayer中，有属性Graphics如下：  
![在这里插入图片描述][20181128201916241.png]

那么，可以通过Featurelayer.graphics获取图层中的graphic，进而获取geometry，并进行符号化。

### 实现 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
        <script src="https://js.arcgis.com/3.25/"></script>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            html,body,#mapDiv{
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="mapDiv"></div>
        <script>
            require([
                "dojo/ready",
                "dojo/parser",
                "esri/map",
                "esri/layers/FeatureLayer",
                "esri/symbols/PictureMarkerSymbol",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "dojo/domReady!"
            ], function(ready,parser,Map,FeatureLayer,PictureMarkerSymbol,ArcGISDynamicMapServiceLayer) {
                parser.parse();
                var map = new Map("mapDiv");
                var baseLayer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/wfMap/ngstreet/MapServer");
                var dynamicLayer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/wfMap/ngstreetShape/MapServer");
                var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/wfMap/ngstreetShape/MapServer/2",{
                    mode: FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["*"]
                });
                var szPictureSymbol =  new PictureMarkerSymbol('./images/loc.png', 16, 16);
                featureLayer.setSelectionSymbol(szPictureSymbol);
    
                map.addLayers([baseLayer,dynamicLayer,featureLayer]);
                console.log(featureLayer);
                console.log(featureLayer.graphics);
    
            })
        </script>
    </body>
    </html>

在控制台输出数据中，输出featherLayer时，graphics中有值，但是在单独输出featurelayer.graphics时，数组为空，无法取到其中的值。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]  
    经过翻查官方文档  
    需要在添加`update-end`事件完成之后，才可以拿到graphics

map.addLayer(featureLayer);
    //添加“update-end”事件
    map.on("update-end", function(){
     console.log(featureLayer.graphics);
    });

输出结果：  
![在这里插入图片描述][20181128202050855.png]

### 后续 ###

在后面的实战中发现，每次地图发生变换都会执行`update-end`事件，为了避免代码被重复执行，做此优化：

var handle = map.on("update-end", function(){
       console.log(featureLayer.graphics);
       //操作....
       handle.remove();
    });

[20181128201916241.png]: /images/20210726/a66324d921344b61a01b391396b6b7c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/a0df2bed95a1475096288a283b6fd99f.png
[20181128202050855.png]: /images/20210726/7abd0e5a2f51451b966b182e0ba7d81d.png