Найти несколько объектов в слое под позицией мыши - PullRequest
Новая
       37

Найти несколько объектов в слое под позицией мыши

0 голосов
/ 26 апреля 2020

Я хочу видеть все функции в графическом слое, которые соответствуют 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 это было, но я справляюсь с трудностями.

1 Ответ

0 голосов
/ 27 апреля 2020

В новой версии API, 4.x, то, что обычно было целью GraphicLayer (обработка функций на стороне клиента), стало частью FeatureLayer или других слоев, таких как GeoJSONLayer или CSVLayer.

Теперь рекомендуется использовать FeatureLayer,

Обычно при создании с клиентской графикой обычно рекомендуется создавать FeatureLayer с его свойством source, так как FeatureLayer имеет больше возможностей, чем GraphicsLayer, включая визуализацию, запросы и маркировку.

ArcGIS JavaScript API - GraphicLayer

Что касается визуализации, вы можете использовать кластеризацию на FeatureLayer.

Посмотрите на этот пример, который я сделал для вас на основе ArcGIS JavaScript Примеры - кластеризация точек . 

<!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>

В этом примере, если вы выберите, включена ли кластеризация, он покажет, сколько функций имеется, а если кластеризация отключена, вы получите все функции.

...