Question

我正在创建具有所有美国州边界的地图，并希望将鼠标悬停在任何州上时显示突出显示的州。 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>

在此之后，我将获得像这样的突出显示功能

还有其他方法可以显示交互式悬停效果吗？

谢谢。

Answer 1

您可以使用mapView的highlightOptions更改突出显示效果。
请查看this example，以获得更多的交互选项。

ArcGis 4.8 Javascript：悬停在地图状态边界上的效果

1 个答案: