Question

我正在尝试更改标记的颜色，该标记是一个圆形，正在使用图层上的paint属性进行绘制。

遵循本教程：
https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

我已将circle-color设置为依赖于feature-state：

          map.addLayer({
        id: "singles",
        type: "circle",
        source: "users",
        filter: ["!has", "point_count"],
        paint: {
            'circle-radius': {
                'base': 10,
                'stops': [[5, 20], [15, 500]]
            },
            'circle-color':  ["case",
            ["boolean", ["feature-state", "hover"], false],
            '#ddffc8',
            '#ff0000'
            ],
          }
      });

然后，当有人将鼠标悬停在侧边栏上时，我想更新功能状态并更改颜色：

function highlightMarkersOnHoverOnSidebar (markers, map) {
  let marks = markers
  Array.from(document.querySelectorAll('.sideBarItems')).map( (x, i) => {

    x.addEventListener('mouseenter', function(){

      map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: true});
    }, false)

    x.addEventListener('mouseleave', function(){
      map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: false});

    }, false)
  })
}

但是，当我将侧边栏元素悬停时，什么也没有发生。它甚至没有引发错误。

有什么我想念的吗？谢谢。

Answer 1

您是否在geoJson中使用featureCollection？那给我带来了一些问题。

Answer 2

我也遇到了这个问题。似乎您需要一个 id 在您的 geojson 中的功能级别。不在属性中：

{
  "type": "FeatureCollection",
  "features": [
    {
      "id": 4459,
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          8.64543,
          50.163105
        ]
      },
      "properties": {
        "id": "NOT HERE",
        "name": "Test",
        "foo": "bar",
      }
    }
  ]
}

将 id 移动到功能解决了问题。

setFeatureState不更新Mapbox中的值

2 个答案: