我正在尝试更改标记的颜色,该标记是一个圆圈,正在使用图层上的 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)
})
}
但是,当我将侧边栏元素悬停时,什么也没有发生。它甚至不会引发错误。
我有什么遗漏吗?谢谢。
最佳答案
我也遇到了这个问题。
似乎您需要在 geojson 中的特征级别有一个 id。不在属性中:
{
"type": "FeatureCollection",
"features": [
{
"id": 4459,
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
8.64543,
50.163105
]
},
"properties": {
"id": "NOT HERE",
"name": "Test",
"foo": "bar",
}
}
]
}
将 id 移至功能解决了该问题。
关于javascript - setFeatureState 不更新 Mapbox 中的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56856964/