ArcGIS выделяет графику

Question

в моей программе я создал полигоны на графическом слое из координат моего mapView. При наведении курсора на многоугольник я хочу выделить этот многоугольник оранжевым цветом.

require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Search",
        "dojo/dom",
        "esri/renderers/UniqueValueRenderer",
        "esri/symbols/SimpleLineSymbol"
    ], function (Map, MapView, Graphic, GraphicsLayer, Search, dom, UniqueValueRenderer, SimpleLineSymbol) {
        map = new Map({
            basemap: "streets-navigation-vector"
        });
        var center = app.addresses[0].center;
        view = new MapView({
            container: "viewDiv",
            map: map,
            center: center, // longitude, latitude
            zoom: 15,
            highlightOptions: {
                color: "orange"
            }
        });



        var search = new Search({
            view: view,
            container: "search"
        });
        graphicsLayer = new GraphicsLayer();

        map.add(graphicsLayer);
        var i = 0;
        app.addresses.forEach(function (address) {
            var polygon = {
                type: "polygon",
                rings: address.polygon_rings
            };

            address.polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: address.parking_zone
            });

            graphicsLayer.add(address.polygonGraphic);
            i++;
        });

        view.on("click", function(event){
            var screenPoint = {
                x: event.x,
                y: event.y
            };

            view.hitTest(screenPoint).then(function (response) {
                if (response.results.length) {
                    var graphic = response.results.filter(function (result) {
                        // check if the graphic belongs to the layer of interest
                        return result.graphic.layer === graphicsLayer;
                    })[0].graphic;
                    // do something with the result graphic
                    ToggleSelectedAddress(parseInt(graphic.uid));
                }
            });
        });

        view
            .when()
            .then(function() {
                return graphicsLayer.when();
            })
            .then(function(layer) {
                // Set up an event handler for pointer-down (mobile)
                // and pointer-move events (mouse)
                // and retrieve the screen x, y coordinates
                return view.whenLayerView(layer);
            })
            .then(function(layerView) {
                view.on("pointer-move", eventHandler);
                view.on("pointer-down", eventHandler);

                function eventHandler(event) {
                    // the hitTest() checks to see if any graphics in the view
                    // intersect the x, y coordinates of the pointer
                    view.hitTest(event).then(getGraphics);
                }

                let highlight;

                function getGraphics(response) {
                    // the topmost graphic from the hurricanesLayer
                    // and display select attribute values from the
                    // graphic to the user
                    if (response.results.length) {
                        const graphic = response.results.filter(function(result) {
                            if(result.graphic.layer === graphicsLayer){
                                layerView.highlight(result.graphic);
                            }
                            return result.graphic.layer === graphicsLayer;
                        })[0].graphic;

                        if(highlight) {
                            console.log("highlighted");
                            highlight.remove();
                        }
                        // highlight all features belonging to the same hurricane as the feature
                        // returned from the hitTest
                        highlight = layerView.highlight(graphic);
                    } else {
                        // remove the highlight if no features are
                        // returned from the hitTest
                        highlight.remove();
                        highlight = null;
                    }
                }
            });
    });

Я даже пытался создать функции, которые изменяют символ на этой графике многоугольника, но безуспешно. Я думаю, что оператор else в конце никогда не выполняется. Это означает, что hitTest почти всегда возвращает результат. Я немного отладил это и увидел, что результатом являются улицы, здания и тому подобное. После фильтрации этих результатов я получаю правильную графику, которую я выделю sh. Однако layerView.highlight (graphi c) не работает. Вот как я создаю свой mapView:

view = new MapView({
            container: "viewDiv",
            map: map,
            center: center, // longitude, latitude
            zoom: 15,
            highlightOptions: {
                color: "orange"
            }
        });

Когда я беру наведенный график c и меняю его символ на оранжевый, он подсвечивается, но не выделяется, когда я нахожу элемент ( поскольку оператор else {} почти никогда не выполняется). Может кто-нибудь объяснить, почему hitTest всегда возвращает результат и почему .highlight () не работает?

Answer 1

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

if (highlight) {
  return;
}

на

if (highlight) {
  highlight.remove();
}

Это означает, что если выделенная функция выделена, удалите ее. Затем выделите новый хитовый объект.

hitTest

возвращает самый верхний объект из каждого слоя, который пересекает указанные экранные координаты

( ArcGIS Do c - MapView hitTest ).

Вот модификация кода из примера ArcGIS,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Access features with pointer events - 4.14</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ], function(Map, MapView, FeatureLayer) {
        const hurricanesLayer = new FeatureLayer({
          url:
            "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/1",
          outFields: ["*"]
        });
        const map = new Map({
          basemap: "dark-gray",
          layers: [hurricanesLayer]
        });
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-61.125537, 35.863534],
          zoom: 4,
          highlightOptions: {
            color: "orange"
          }
        });
        view
          .when()
          .then(function() {
            return hurricanesLayer.when();
          })
          .then(function(layer) {
            const renderer = layer.renderer.clone();
            renderer.symbol.width = 4;
            renderer.symbol.color = [128, 128, 128, 0.8];
            layer.renderer = renderer;
            // Set up an event handler for pointer-down (mobile)
            // and pointer-move events (mouse)
            // and retrieve the screen x, y coordinates
            return view.whenLayerView(layer);
          })
          .then(function(layerView) {
            view.on("pointer-move", eventHandler);
            view.on("pointer-down", eventHandler);

            function eventHandler(event) {
              // the hitTest() checks to see if any graphics in the view
              // intersect the x, y coordinates of the pointer
              view.hitTest(event).then(getGraphics);
            }

            let highlight, currentYear, currentName;

            function getGraphics(response) {
              // the topmost graphic from the hurricanesLayer
              if (response.results.length) {
                const features = response.results.filter(function(result) {
                  return result.graphic.layer === hurricanesLayer;
                });
                if (features.length) {
                  const graphic = features[0].graphic;
                  if (highlight) {
                    highlight.remove();
                  }
                  highlight = layerView.highlight(graphic);
                  return;
                }
              }
              // remove the highlight if no features, of the layer, are
              // returned from the hitTest
              highlight.remove();
              highlight = null;
            }
          });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>