Mapbox 鼠标悬停圆圈使用特征状态改变颜色

Question

我在鼠标悬停在 Mapbox 地图上时更改标记颜色时遇到问题。
0.47 版本的 mapbox-gl.js 允许您使用 feature-state 更改动态样式的功能。

这适用于 Mapbox 示例：https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

然而，在我的示例中，当特征标记的 feature-state 发生变化时，样式似乎永远不会被触发。

我已经设法使用 map.setFilter 函数使鼠标悬停工作，但是当我添加 1000 多个标记时，这变得非常低效和缓慢。

任何提示将不胜感激，非常感谢。

请看我的示例代码...

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Create a hover effect</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        /* #map { position:absolute; top:0; bottom:0; width:100%; } */
        #map { width:100%; height: 500px; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY29kYm9kIiwiYSI6IjhjbFE1aUUifQ.Gimi98Oh3Uex9WQZlb5Wkw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-0.1507524, 51.5140731],
    zoom: 9
});
var hoveredStateId =  null;

map.on('load', function () {
    map.addSource("sites", {
        "type": "geojson",
        "data": {
          "type": "FeatureCollection",
          "features": [
            {
              "type": "Feature",
              "geometry": {
                "type": "Point",
                "coordinates": [
                  -0.1407524,
                  51.5240731
                ]
              },
              "properties": {
                "id": 2,
                "name": "Oxford Street"
              }
            }
          ]
        }
    });

    // The feature-state dependent fill-opacity expression will render the hover effect
    // when a feature's hover state is set to true.
    map.addLayer({
        'id': 'sites-bold',
        'type': 'circle',
        'source': 'sites',
        'layout': {},
        'paint': {
          'circle-radius': 10,
          // 'circle-color': '#ff442b',
          'circle-color': ['case',
            ['boolean', ['feature-state', 'hover'], false],
              'red',
              'blue'
            ],
          'circle-opacity': 0.6,
          'circle-stroke-color': 'cyan',
          'circle-stroke-width': 1
        }
      });


    // When the user moves their mouse over the state-fill layer, we'll update the
    // feature state for the feature under the mouse.
    map.on("mousemove", "sites-bold", function(e) {
      // console.log('in', e.features)
      if (e.features.length > 0) {
          // if (this.hoveredStateId) {
          //     map.setFeatureState({source: 'sites', id: this.hoveredStateId}, { hover: false});
          // }
          this.hoveredStateId = e.features[0].properties.id;
          console.log('in-f-id', this.hoveredStateId)
          map.setFeatureState({source: 'sites', id: this.hoveredStateId}, { hover: true});
          console.log('in-f', e.features[0])
      }
      console.log('in', map.getFeatureState({source: 'sites', id: this.hoveredStateId}))
    });

    // When the mouse leaves the state-fill layer, update the feature state of the
    // previously hovered feature.
    map.on("mouseleave", "sites-bold", function() {
      console.log('out-id', this.hoveredStateId)
      // if (this.hoveredStateId) {
          map.setFeatureState({source: 'sites', id: this.hoveredStateId}, { hover: false});
      // }
      console.log('out', map.getFeatureState({source: 'sites', id: this.hoveredStateId}))
      hoveredStateId =  null;
    });
});
</script>

</body>
</html>

Answer 1

要使用 setFeatureState，您需要为数据源中的每个要素设置唯一 ID。所以从字面上看，您需要做的就是像这样添加一个 ID：

map.addSource("sites", {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "id": 2,
          "geometry": {
            "type": "Point",
            "coordinates": [
              -0.1407524,
              51.5240731
            ]
          },
          "properties": {
            "id": 2,
            "name": "Oxford Street"
          }
        }
      ]
    }
});

注意功能上的 id 属性。将它嵌套在 properties 中是不够的；它必须位于该功能的顶层。该方法的文档应在本周发布下一个版本时更新。

Mapbox 鼠标悬停圆圈使用特征状态改变颜色

Mapbox mouseover circle to change color using feature-state

styling

mapbox