我想使用 Mapbox 在同一层中绘制多个点,并且所有这些点都将拥有自己的属性,例如颜色和标签。并且在单击单个点时,它应该显示一个带有该点 ID 的弹出窗口。
这是否可以实现,到目前为止,我一直在循环点数组,并且对于每个点,我正在创建一个单独的源和图层。
for(let i = 0; i < buildings.length; i++){
let mapSource = map.getSource(buildings[i].building_id);
if(!mapSource){
map.addSource(buildings[i].building_id, {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': buildings[i].centroid.coordinates
}
}
});
}
let mapLayer = map.getLayer(buildings[i].building_id);
if(!mapLayer){
map.addLayer({
'id': buildings[i].building_id,
'type': 'circle',
"paint": {
"circle-radius": 6,
"circle-color": SectionColors[buildings[i].section[0]]
},
"source": buildings[i].building_id
});
}
let mapLabel = map.getLayer(`${buildings[i].building_id}-label`);
if(!mapLabel){
map.addLayer({
'id': `${buildings[i].building_id}-label`,
'type': 'symbol',
'source': buildings[i].building_id,
'layout': {
'text-field': `${buildings[i].building_id}`,
'text-size': 14,
'text-variable-anchor': ["left"],
'text-radial-offset': 0.3, …Run Code Online (Sandbox Code Playgroud)