我无法让悬停工作。
下面是我的代码。当我将鼠标移到地图上时,控制台中会显示正确的多边形 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'
但没有变化。