假设我有以下 Mapbox 地图代码:
mapboxgl.accessToken = '<token>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9',
center: [-96, 37.8],
zoom: 2,
interactive: true
});
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"id": 1,
"color": "#007cbf",
"text": "1"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-78.03238901390978, 39.913188059745586]
},
"properties": {
"id": 2,
"color": "red",
"text": "2"
}
}
]
}
map.on('style.load', function (e) {
map.addSource('markers', {
"type": "geojson",
"data": geojson
});
geojson.features.forEach(function(marker){
map.addLayer({
"id": String(marker.properties.id)+'-circle',
"source": "markers",
"type": "circle",
"paint": {
"circle-radius": 20,
"circle-color": marker.properties.color,
"circle-opacity": 0.8,
"circle-stroke-width": 0,
},
"filter": ["==", "id", marker.properties.id],
});
map.addLayer({
"id": String(marker.properties.id)+'-text',
"source": "markers",
"type": "symbol",
"layout": {
'text-field': marker.properties.text,
'text-size': 20
},
"filter": ["==", "id", marker.properties.id]
})
});
});
如何缩放地图以适应地图上的一组点?我找不到 mapboxgl 的任何解决方案。另外,我不能 100% 确定我应该为每个标记创建一个单独的图层,但我找不到一种方法将所有标记放入一个图层中。提前致谢。