Mapbox 倾斜后悬停时高亮显示填充拉伸特征？

我想在将鼠标悬停在填充拉伸特征上时高亮显示这些特征。 与此相关的样式是直接使用表达式和特征状态的，但是我在检索正确的特征时遇到了困难

当鼠标悬停在上方时，有在线代码可用于更改功能状态，这似乎很简单，因此我对其进行了调整：

var hover_id = null;
const feature_state = { hover: true }

map.on('mousemove', '3d-buildings', (e) => {
  
    // Get features under cursor, following render order
    const features = map.queryRenderedFeatures(e.point);

    // Check that features are not empty
    if (features.length > 0) {

        // Clean up previously hovered feature
        if (hover_id) {
            map.removeFeatureState({source: "composite", sourceLayer: 'building', id: hover_id});
        }

        // Set feature state of the new hovered feature
        hover_id = features[0].id;
        map.setFeatureState({source: 'composite', sourceLayer: 'building', id: hover_id}, feature_state);

        console.log(hover_id)
  }
});

虽然这一功能最初运行良好，但当我使用鼠标右键倾斜相机时，它就会停止工作。倾斜后，最前面的元素不再被选中（其他元素似乎被选中并打印出ID，但地图上没有显示任何内容，也不会抛出错误）。 另一个相关的注意事项是，只有在放大相当远的距离后才能选择正确的功能-有一个很大的缩放范围，其中建筑物已经渲染到屏幕上，但似乎没有被queryRenderedFeatures拾取。这是预期的行为吗

预期行为： map.queryRenderedFeatures（…）[0]选择最前面的特征，与相机倾斜无关

---

摄像机倾斜影响特征选择的可能原因是什么？这是一个bug还是我误用了API？

我认为您面临的问题与tilt无关，而是添加和删除状态，而不是更改状态的值。必须在图层定义中声明状态，使用表达式更改颜色，然后只需更改状态的值

这里你有一把小提琴，是我创造出来展示的

相关代码如下：

让mapConfig={
纽约：{
来源：[-74.044514,40.689259,39]，
中心：[-74.0137,40.70346,0]，
缩放：16.2，
投球：60分，
轴承：35
}
}
mapboxgl.accessToken='将您的令牌放在这里'；
设point=mapConfig.NYC；
var map=new mapboxgl.map({
风格：'mapbox://styles/mapbox/streets-v11',
中心：点，中心，
缩放：point.zoom，
音高：点，音高，
方位：点方位，
容器：“映射”，
反别名：是的，
哈希：对
});
map.on（'style.load'，function（）{
if（map.getSource（'composite'））{
map.addLayer({
“id”：“3d建筑”，
'来源'：'复合'，
“源层”：“建筑”，
“类型”：“填充拉伸”，
“minzoom”：14，
“油漆”：{
“填充拉伸颜色”：[
“案例”，
['boolean'，['feature-state'，'hover']，false]，
#ff0000",，
"ddd"
],
“填充拉伸高度”：[“编号”、[“获取”、“高度”]、5]，
“填充拉伸底座”：[“编号”、[“获取”、“最小高度”]、0]，
“填充拉伸不透明度”：1
}
}"道路标签";；
}
放手；
map.on（'mousemove'，函数（e）{
//157001066
var features=map.queryRenderedFeatures（即点{
图层：['3d-buildings']
});
如果（功能[0]）{
mouseout（）；
鼠标悬停（功能[0]）；
}否则{
mouseout（）；
}
});
映射on（'mouseout'，函数（e）{
mouseout（）；
});
函数mouseout（）{
如果（！fHover）返回；
map.getCanvasContainer（）.style.cursor='default'；
map.setFeatureState({
来源：fHover.source，
sourceLayer:fHover.sourceLayer，
id:fHover.id
}, {
悬停：错误
});
}
功能鼠标盖（功能）{
fHover=特征；
map.getCanvasContainer（）.style.cursor='pointer'；
map.setFeatureState({
来源：fHover.source，
sourceLayer:fHover.sourceLayer，
id:fHover.id
}, {
悬停：对
});
}
});

如果此答案解决了您的问题，请将其标记为已接受答案，这样也会帮助其他用户知道它是正确的解决方案