Mapbox Choropleth地图无法正常工作



我试图用mapbox gl-js制作一个chroropleth映射。它可以与下面的代码配合使用,但也有点"童车";。当我把鼠标悬停在地图上时,弹出窗口只是偶尔出现。

有没有办法只在每个功能的中间显示弹出窗口?

我是mapbox和javascript的新手,这是我在这里的第一个帮助请求,所以很抱歉给您带来不便。

mapboxgl.accessToken = 'xxx';
const map = new mapboxgl.Map({
container: 'map',
style: 'xxx',
center: [8.798, 53.122],
zoom: 8.15
});
map.on('load', () => {
map.addSource('members', {
type: 'vector',
url: 'xxx'
});
map.addLayer({
'id': 'members_1',
'type': 'fill',
'source': 'members',
'source-layer': 'final_mitgliederV1_1-bcbjyn',
'paint': {
'fill-opacity': 0
}
},       
);
// Create a popup, but don't add it to the map yet.
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.on('mouseenter', 'members_1', (e) => {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
// Copy coordinates array.
const coordinates = e.features[0].geometry.coordinates.slice();
const description = e.features[0].properties.m_Mitglieder;
var members = e.features[0].properties.m_members;

var description2 = "" +
"<div id='header'>" +
"<div class='tooltip'>" + members + "</div>" + "Mitglieder: ";
// Ensure that if the map is zoomed out such that multiple

// Populate the popup and set its coordinates
// based on the feature found.
popup.setLngLat(e.lngLat).setHTML(description2).addTo(map);
});
map.on('mouseleave', 'members_1', () => {
map.getCanvas().style.cursor = '';
popup.remove();
});
});

发现错误:必须是"mousemove"而不是"mouseenter">

最新更新