arcgis api通过绘制矩形查询要素

实现的效果就是在图层上拖动绘制矩形框，框选图层中的要素，然后统计选中的要素个数，并获取到要素中的属性值。

根据arcgis api for js的官网改写的，官网中用到了一个table组件，我修改之后是使用alert提示信息显示的查询结果，原文地址：https://developers.arcgis.com/javascript/latest/sample-code/highlight-features-by-geometry/

代码：

首先需要引入的文件

import Map from "@arcgis/core/Map"
import FeatureLayer from "@arcgis/core/layers/FeatureLayer"
import MapView from "@arcgis/core/views/MapView"
import CSVLayer from "@arcgis/core/layers/CSVLayer"
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel"
import Basemap from "@arcgis/core/Basemap"
import * as geometryEngineAsync from "@arcgis/core/geometry/geometryEngineAsync";

定义的方法：

        initmap(){
              // Use the states featurealayer as a basemap
        const states = new FeatureLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",
          renderer: {
            type: "simple",
            symbol: {
              type: "simple-fill",
              color: "#f0ebe4",
              outline:{
                color: "#DCDCDC",
                 "0.5px"
              }
            }
          },
          spatialReference: {
            wkid: 102003
          },
          effect: "drop-shadow(-10px, 10px, 6px gray)",
        });

        // national parks csv layer
        const csvLayer = new CSVLayer({
          url: "https://ubatsukh.github.io/arcgis-js-api-demos/devsummit2021/csvLayer-nps/data/nps_establishments.csv",
          delimiter: ",",
          popupTemplate: {
            title: "{unit_name}",
            content:
              "Established on <b>{date_est}</b> <br/><br/> {description}"
          },
        //   renderer: setRenderer()
        });

        let csvLayerView;
        csvLayer.when(() => {
          view.whenLayerView(csvLayer).then(function (layerView) {
            csvLayerView = layerView;
          });
        })
        .catch(errorCallback);

        const map = new Map({
          basemap: new Basemap({
            baseLayers: [states]
          }),
          layers: [csvLayer]
        });

        // initialize the view with USA Contiguous Albers Equal Area Conic
        // projection and set the extent to the states
        const view = new MapView({
          container: "viewDiv",
          map: map,
          extent: {
            type: "extent",
            spatialReference: {
              wkid: 102003
            },
            xmax: 2275062,
            xmin: -2752064,
            ymax: 1676207,
            ymin: -1348080,
          },
          constraints: {
            snapToZoom: false,
            minScale: 50465153
          },
          spatialReference: {
            wkid: 102003
          },
          background: {
            color: "white"
          }
        });

        // polygonGraphicsLayer will be used by the sketchviewmodel
        // show the polygon being drawn on the view
        const polygonGraphicsLayer = new GraphicsLayer();
        map.add(polygonGraphicsLayer);

        // add the select by rectangle button the view
        view.ui.add("select-by-rectangle", "top-left");
        const selectButton = document.getElementById("select-by-rectangle");


        // click event for the select by rectangle button
        selectButton.addEventListener("click", () => {
          view.popup.close();
          sketchViewModel.create("rectangle");
        });


        // add the clear selection button the view
        view.ui.add("clear-selection", "top-left");
        document.getElementById("clear-selection").addEventListener("click", () => {
        
          polygonGraphicsLayer.removeAll();
        });

        // create a new sketch view model set its layer
        const sketchViewModel = new SketchViewModel({
          view: view,
          layer: polygonGraphicsLayer
        });

        // Once user is done drawing a rectangle on the map
        // use the rectangle to select features on the map and table
        sketchViewModel.on("create", async (event) => {
          if (event.state === "complete") {
            // this polygon will be used to query features that intersect it
            const geometries = polygonGraphicsLayer.graphics.map(function(graphic){
              return graphic.geometry
            });
            const queryGeometry = await geometryEngineAsync.union(geometries.toArray());
            selectFeatures(queryGeometry);
          }
        });

        // This function is called when user completes drawing a rectangle
        // on the map. Use the rectangle to select features in the layer and table
        function selectFeatures(geometry) {
          if (csvLayerView) {
            // create a query and set its geometry parameter to the
            // rectangle that was drawn on the view
            const query = {
              geometry: geometry,
              outFields: ["*"]
            };

            // query graphics from the csv layer view. Geometry set for the query
            // can be polygon for point features and only intersecting geometries are returned
            csvLayerView.queryFeatures(query)
              .then((results) => {
                if (results.features.length === 0) {
                  clearSelection();
                } else {
                  
                alert("选中的要素个数为："+results.features.length  );
                // alert(results.features);
                var re = "";
                 for(var i=0;i<results.features.length;i++){
                  var feature = results.features[i];
                  re += feature.attributes["unit_name"]+"|";
                }
                alert(re);
                }
              })
              .catch(errorCallback);
          }
        }

        function errorCallback(error) {
          console.log("error happened:", error.message);
        }

    }

用到的html代码：

 <div class="body">
       <div id="viewDiv"></div>
    <div id="select-by-rectangle" class="esri-widget esri-widget--button esri-widget esri-interactive"
        title="Select features by rectangle">
      <span class="esri-icon-checkbox-unchecked"></span>
    </div>
    <div id="clear-selection" class="esri-widget esri-widget--button esri-widget esri-interactive"
        title="Clear selection">
      <span class="esri-icon-erase"></span>
    </div>
    
    </div>

完整代码：

<template>
    <div class="body">
       <div id="viewDiv"></div>
    <div id="select-by-rectangle" class="esri-widget esri-widget--button esri-widget esri-interactive"
        title="Select features by rectangle">
      <span class="esri-icon-checkbox-unchecked"></span>
    </div>
    <div id="clear-selection" class="esri-widget esri-widget--button esri-widget esri-interactive"
        title="Clear selection">
      <span class="esri-icon-erase"></span>
    </div>
    
    </div>


</template>

<script>
import Map from "@arcgis/core/Map"
import FeatureLayer from "@arcgis/core/layers/FeatureLayer"
import MapView from "@arcgis/core/views/MapView"
import CSVLayer from "@arcgis/core/layers/CSVLayer"
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel"
import Basemap from "@arcgis/core/Basemap"
import * as geometryEngineAsync from "@arcgis/core/geometry/geometryEngineAsync";


export default {

    methods:      
    {
        initmap(){
              // Use the states featurealayer as a basemap
        const states = new FeatureLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",
          renderer: {
            type: "simple",
            symbol: {
              type: "simple-fill",
              color: "#f0ebe4",
              outline:{
                color: "#DCDCDC",
                 "0.5px"
              }
            }
          },
          spatialReference: {
            wkid: 102003
          },
          effect: "drop-shadow(-10px, 10px, 6px gray)",
        });

        // national parks csv layer
        const csvLayer = new CSVLayer({
          url: "https://ubatsukh.github.io/arcgis-js-api-demos/devsummit2021/csvLayer-nps/data/nps_establishments.csv",
          delimiter: ",",
          popupTemplate: {
            title: "{unit_name}",
            content:
              "Established on <b>{date_est}</b> <br/><br/> {description}"
          },
        //   renderer: setRenderer()
        });

        let csvLayerView;
        csvLayer.when(() => {
          view.whenLayerView(csvLayer).then(function (layerView) {
            csvLayerView = layerView;
          });
        })
        .catch(errorCallback);

        const map = new Map({
          basemap: new Basemap({
            baseLayers: [states]
          }),
          layers: [csvLayer]
        });

        // initialize the view with USA Contiguous Albers Equal Area Conic
        // projection and set the extent to the states
        const view = new MapView({
          container: "viewDiv",
          map: map,
          extent: {
            type: "extent",
            spatialReference: {
              wkid: 102003
            },
            xmax: 2275062,
            xmin: -2752064,
            ymax: 1676207,
            ymin: -1348080,
          },
          constraints: {
            snapToZoom: false,
            minScale: 50465153
          },
          spatialReference: {
            wkid: 102003
          },
          background: {
            color: "white"
          }
        });

        // polygonGraphicsLayer will be used by the sketchviewmodel
        // show the polygon being drawn on the view
        const polygonGraphicsLayer = new GraphicsLayer();
        map.add(polygonGraphicsLayer);

        // add the select by rectangle button the view
        view.ui.add("select-by-rectangle", "top-left");
        const selectButton = document.getElementById("select-by-rectangle");


        // click event for the select by rectangle button
        selectButton.addEventListener("click", () => {
          view.popup.close();
          sketchViewModel.create("rectangle");
        });


        // add the clear selection button the view
        view.ui.add("clear-selection", "top-left");
        document.getElementById("clear-selection").addEventListener("click", () => {
        
          polygonGraphicsLayer.removeAll();
        });

        // create a new sketch view model set its layer
        const sketchViewModel = new SketchViewModel({
          view: view,
          layer: polygonGraphicsLayer
        });

        // Once user is done drawing a rectangle on the map
        // use the rectangle to select features on the map and table
        sketchViewModel.on("create", async (event) => {
          if (event.state === "complete") {
            // this polygon will be used to query features that intersect it
            const geometries = polygonGraphicsLayer.graphics.map(function(graphic){
              return graphic.geometry
            });
            const queryGeometry = await geometryEngineAsync.union(geometries.toArray());
            selectFeatures(queryGeometry);
          }
        });

        // This function is called when user completes drawing a rectangle
        // on the map. Use the rectangle to select features in the layer and table
        function selectFeatures(geometry) {
          if (csvLayerView) {
            // create a query and set its geometry parameter to the
            // rectangle that was drawn on the view
            const query = {
              geometry: geometry,
              outFields: ["*"]
            };

            // query graphics from the csv layer view. Geometry set for the query
            // can be polygon for point features and only intersecting geometries are returned
            csvLayerView.queryFeatures(query)
              .then((results) => {
                if (results.features.length === 0) {
                  clearSelection();
                } else {
                  
                alert("选中的要素个数为："+results.features.length  );
                // alert(results.features);
                var re = "";
                 for(var i=0;i<results.features.length;i++){
                  var feature = results.features[i];
                  re += feature.attributes["unit_name"]+"|";
                }
                alert(re);
                }
              })
              .catch(errorCallback);
          }
        }

        function errorCallback(error) {
          console.log("error happened:", error.message);
        }

    }
    },

    mounted(){
        this.initmap();
    },
   
}
</script>

<style scoped>

       
       .body{
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #viewDiv {
        height: 100%;
        width: 100%;
      }

     
</style>