在鼠标位置下的图层中查找多个要素 arcgis online

Question

我想查看 graphicsLayer 中与鼠标 x,y 匹配的所有功能。 hitTest() 方法适用于最上面的一个：

        mapView.on("pointer-move", function(event) {        // HANDLE HOVER
            let screenPoint={ x: event.x, y: event.y }; 
            mapView.hitTest(screenPoint).then(function(response) {
                if (response.results.length) {
                     DO SOMETHING...
                     }
                });

但是，当我缩小时，这些点会合二为一。我怎么知道还有其他人并可以访问他们？

Google地球曾经有一个功能，可以自动将它们显示在一个圆圈中。如果 arcGis 有那个就好了，但我正在努力做到这一点。

Answer 1

在 API、4.x 的新版本中，通常 GraphicLayer 的目的（处理客户端功能）成为 FeatureLayer 或其他的一部分GeoJSONLayer 或 CSVLayer.

层

现在推荐使用FeatureLayer,

It is generally preferred to construct a FeatureLayer with its source property when working with client-side graphics since the FeatureLayer has more capabilities than the GraphicsLayer, including rendering, querying, and labeling.

ArcGIS JavaScript API - GraphicLayer

关于可视化，您可以在 FeatureLayer 上使用聚类。

看看我根据ArcGIS JavaScript Examples - Point clustering.

为你做的这个例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>FeatureLayer Cluster - 4.15</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/Graphic",
        "esri/geometry/Point",
        "esri/widgets/Legend",
        "esri/widgets/Expand"
      ], function(
        Map,
        MapView,
        FeatureLayer,
        Graphic,
        Point,
        Legend,
        Expand
      ) {
        function getRandomNumber(min, ref) {
          return Math.random() * ref + min;
        }

        function getGraphics() {
          const graphics = [];
          let location = null;
          // generate random points features
          let oid = 0;
          for (let i = 0; i <= getRandomNumber(20, 50); i++) {
            location = new Point({
              latitude: getRandomNumber(10, 50),
              longitude: -getRandomNumber(50, 50)
            });
            for (let j = 0; j <= getRandomNumber(0, 50); j++) {
              graphics.push(
                new Graphic({
                  geometry: location,
                  attributes: {
                    OBJECTID: oid,
                    name: `${i}-${j}`
                  }
                })
              );
              oid++;
            }
          }
          return graphics;
        }

        const graphics = getGraphics();

        function popupTemplateContent(feature) {
          const location = feature.graphic.geometry;
          return `lat:${location.latitude.toFixed(2)} lon:${location.longitude.toFixed(2)}`;
        }

        const clusterConfig = {
          type: "cluster",
          clusterRadius: "100px",
          popupTemplate: {
            content: "{cluster_count} features."
          }
        };

        function createLayer() {
          return new FeatureLayer({
            source: graphics,
            objectIdField: "OBJECTID",
            fields: [
              {
                name: "OBJECTID",
                type: "oid"
              },
              {
                name: "name",
                type: "string"
              }
            ],
            featureReduction: clusterConfig,
            popupTemplate: {
              title: '{name}',
              content: popupTemplateContent
            },
            renderer: {
              type: "simple",
              field: "mag",
              symbol: {
                type: "simple-marker",
                size: 4,
                color: "#fc3232",
                outline: {
                  color: [50, 50, 50]
                }
              }
            }
          });
        }

        const layer = createLayer();

        const view = new MapView({
          map: new Map({
            basemap: "gray-vector"
          }),
          container: "viewDiv",
          zoom: 2,
          center: [-75, 35]
        });

        view
          .when()
          .then(addLayerToView)
          .catch(function(e) {
            console.error("Creating FeatureLayer failed", e);
          });

        function addLayerToView() {
          view.map.add(layer);
        }

        const legend = new Legend({
          view: view,
          container: "legendDiv"
        });

        const infoDiv = document.getElementById("infoDiv");
        view.ui.add(
          new Expand({
            view: view,
            content: infoDiv,
            expandIconClass: "esri-icon-layer-list",
            expanded: true
          }),
          "top-left"
        );

        const toggleButton = document.getElementById("cluster");

        toggleButton.addEventListener("click", function() {
          const fr = layer.featureReduction;
          layer.featureReduction =
            fr && fr.type === "cluster" ? null : clusterConfig;
          toggleButton.innerText =
            toggleButton.innerText === "Enable Clustering"
              ? "Disable Clustering"
              : "Enable Clustering";
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <div id="infoDiv" class="esri-widget">
      <button id="cluster" class="esri-button">Disable Clustering</button>
      <div id="legendDiv"></div>
    </div>
  </body>
</html>

在示例中，当您 select 如果启用聚类，它将显示有多少特征，如果关闭聚类，您将获得所有特征。

在鼠标位置下的图层中查找多个要素 arcgis online

Find multiple features in a layer under mouse position arcgis onlne

arcgis

arcgis-js-api