Mapbox -悬停在多边形上根本不起作用.如何让它与矢量数据的工作?

Question

我不能让hover工作。

下面是我的代码。当我将鼠标移到地图上时，控制台中会显示正确的多边形id。

map.on('mousemove', 'aa_winter_sports_polygons', (e) => { // layer you want to listen on
if (e.features.length > 0) {
console.log(e.features.length); // this works and give 1 when defined
if (hoveredStateId !== null) {
console.log('hoveredStateId is NOT null and is: '+hoveredStateId); // this works and give an id #
map.setFeatureState(
{ 
source: 'aa_winter_sports_polygons', 
sourceLayer: "aa_winter_sports_polygons_source_layer",
id: hoveredStateId
},
{ 
hover: false 
}
);              
console.log('e.features[0].aa_winter_sports_polygin_id: '+JSON.stringify(e.features[0].properties.aa_winter_sports_polygin_id)); // with works and gives a polygon number.
}
hoveredStateId = e.features[0].properties.aa_winter_sports_polygin_id;
map.setFeatureState(
{ 
source:     'aa_winter_sports_polygons', 
sourceLayer: "aa_winter_sports_polygons_source_layer",
id: hoveredStateId
},
{ 
hover: true 
}
);
}
});

添加图层如下;

map.addLayer({
'id': 'aa_winter_sports_polygons',
'type': 'fill', 
'source': 'aa_winter_sports_polygons', 
'source-layer': aa_winter_sports_polygons_source_layer, // for vector layers
'paint': {
'fill-color': '#93E7FB', 
'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
0.5,
1
]
}
});

同样，浅蓝色的多边形在我的地图上显示得很好。当我将鼠标移动到多边形上时，所有的数字都会显示在控制台上。aa_winter_polygons_id为整数。当添加源时，我尝试了promoteId:'aa_winter_sports_polygin_id'，但没有更改。

Answer 1

feature-state与id一起工作，而不是与properties一起工作。

我建议您从id中获取hoveredStateId，如Mapbox示例所写，而不是从properties->aa_winter_sports_polygin_id中检查您是否正确获取id。

hoveredStateId = e.features[0].id;

Answer 2

你可以先检查两件事

1. 确保传递给sourceLayer的值与map.addLayer中的源层名称匹配。

2. 确保在添加事件侦听器之前定义了hoveredStateId。