ArcGis 4.8 Javascript: эффект наведения на границы состояния карты - PullRequest
Новая
       15

ArcGis 4.8 Javascript: эффект наведения на границы состояния карты

0 голосов
/ 27 сентября 2018

Я создаю Карту со всеми государственными границами США и хочу показывать состояние выделения при наведении курсора на любой штат.ArcGis предоставляет нам функцию выделения при наведении курсора, но иногда кажется, что она работает некорректно и также не интерактивна.Ниже приведен код, который я использую: - 

<script>
    var dojoConfig = {
      has: {
        "esri-featurelayer-webgl": 1
      }
    }
  </script>
<script src="https://js.arcgis.com/4.8/"></script>
<script>
    require([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer",
          "dojo/domReady!"
        ], function(
          Map, MapView, FeatureLayer
        ) {


        var povLayer = new FeatureLayer({
            url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_States_Generalized/FeatureServer/0",
            outFields: ["*"],
            labelingInfo: {
                symbol: {
                  type: "text",
                  color: "black",
                  haloColor: "black",
                  font: {
                    family: "sans-serif",
                    size: 8,
                    weight: "bold"
                  }
                },
                labelPlacement: "above-center",
                labelExpressionInfo: {
                  expression: "$feature.STATE_ABBR"
                }
            },
            renderer: {
                type: "simple",
                symbol: {
                    type: "simple-fill",
                    color: "hsla(282, 31%, 67%, 0.1)",
                    outline: {
                        color: [251,164,93,255],
                        width: 0.75,
                        type: "esriSLS",
                        style: "esriSLSSolid"
                    }
                }
            }
        });

        var map = new Map({
            basemap: "dark-gray",
            layers: [povLayer]
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-99.244309, 40.004476],
            zoom: 5
        });

        view.when(function() {
          povLayer.when(function() {
            var renderer = povLayer.renderer.clone();
            renderer.type = "unique-value";
            renderer.field = "state_name";
            renderer.symbol.width = 1;
            renderer.symbol.color = [128, 128, 128, 0.8];
            renderer.symbol.cap = "round";
            povLayer.renderer = renderer;
          });
        });

        let highlight = null;
        view.whenLayerView(povLayer).then(function(layerView) {
            view.on('pointer-move', (event) => {
                view.hitTest(event)
                    .then((res) => {

                        // remove the previous highlight
                        if (highlight) {
                            highlight.remove();
                            highlight = null;
                        }
                        if (res.results.length) {

                            var feature = res.results.filter((result) => {
                                return result.graphic.layer === povLayer;
                            })[0].graphic;
                            feature.popupTemplate = povLayer.popupTemplate;
                            id = feature.attributes.FID;
                            highlight = layerView.highlight([id]);
                        }

                    });
            });
        });

    });
</script>

После этого я получаю функцию выделения, как это enter image description here

Есть ли другой способкак я могу показать некоторый интерактивный эффект при наведении?

Заранее спасибо.

...