Mapbox带聚合标记的地图调用fitBounds自动适配边界问题

我已基于Mapbox官方聚类示例完成了地图、标记点及聚合功能的开发，现在需要实现地图自动缩放/飞行到标记点群组的效果，但遇到了无法从GeoJSON数据源中提取坐标数组以调用fitBounds方法的问题。

现有代码示例：

const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v11',
center: [-103.5917, 40.6699],
zoom: 3
});
 
map.on('load', () => {
// 添加带聚类的GeoJSON数据源
map.addSource('earthquakes', {
type: 'geojson',
data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});
 
// 聚类点图层
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'earthquakes',
filter: ['has', 'point_count'],
paint: {
'circle-color': [
'step',
['get', 'point_count'],
'#51bbd6',
100,
'#f1f075',
750,
'#f28cb1'
],
'circle-radius': [
'step',
['get', 'point_count'],
20,
100,
30,
750,
40
]
}
});
 
// 聚类计数文本图层
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'earthquakes',
filter: ['has', 'point_count'],
layout: {
'text-field': ['get', 'point_count_abbreviated'],
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
'text-size': 12
}
});
 
// 非聚类点图层
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'earthquakes',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#11b4da',
'circle-radius': 4,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff'
}
});
});

两种可行实现方法 #

方法一：预加载GeoJSON数据并计算边界 #

当数据源为远程URL时，直接通过map.getSource('earthquakes').getData()获取的是URL而非解析后的GeoJSON对象，因此可以先手动加载数据，计算所有点的边界范围后再添加数据源：

const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v11',
center: [-103.5917, 40.6699],
zoom: 3
});
 
// 预加载GeoJSON数据
fetch('https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson')
.then(response => response.json())
.then(geoJsonData => {
map.on('load', () => {
// 添加数据源
map.addSource('earthquakes', {
type: 'geojson',
data: geoJsonData,
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});
 
// 省略原有图层添加代码（聚类点、计数文本、非聚类点图层）...
 
// 计算所有点的边界
const bounds = new mapboxgl.LngLatBounds();
geoJsonData.features.forEach(feature => {
bounds.extend(feature.geometry.coordinates);
});
 
// 自动缩放至边界范围，可设置padding调整边距
map.fitBounds(bounds, {
padding: 50,
duration: 1000 // 可选，设置动画时长
});
});
});

方法二：通过已加载的数据源提取特征计算边界 #

利用Mapbox的querySourceFeatures方法，在数据源加载完成后获取所有非聚类的原始点特征，再计算边界：

const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v11',
center: [-103.5917, 40.6699],
zoom: 3
});
 
map.on('load', () => {
map.addSource('earthquakes', {
type: 'geojson',
data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});
 
// 省略原有图层添加代码...
 
// 监听数据源加载完成事件
map.on('sourcedata', (e) => {
if (e.sourceId === 'earthquakes' && e.isSourceLoaded) {
// 获取所有非聚类的原始点特征
const features = map.querySourceFeatures('earthquakes', {
filter: ['!', ['has', 'point_count']]
});
 
// 计算边界
const bounds = new mapboxgl.LngLatBounds();
features.forEach(feature => {
bounds.extend(feature.geometry.coordinates);
});
 
// 飞行至边界范围
map.flyTo({
bounds: bounds,
padding: 50,
duration: 1500
});
 
// 只执行一次，移除监听
map.off('sourcedata', arguments.callee);
}
});
});

内容的提问来源于stack exchange，提问作者Matt B