如何结合Turf.js获取Mapbox GL JS加载数据的边界框？

我明白你的需求啦——加载外部GeoJSON多边形后让地图自动适配它的边界，用Turf.js的bbox确实是正确的思路，但问题出在你现在直接把URL传给了Mapbox的source，没法直接拿到GeoJSON的内容传给Turf。下面给你一步步的解决方案：

核心思路 #

你需要先手动加载GeoJSON数据（而不是让Mapbox自动加载），这样才能拿到完整的GeoJSON对象传给Turf计算边界，之后再把数据添加到地图source里，最后调用地图的fitBounds方法适配视野。

完整代码示例 #

// 先加载外部GeoJSON数据
fetch('/boundaries.geojson')
  .then(response => response.json())
  .then(geojson => {
    // 用Turf.js计算GeoJSON的边界框
    const bounds = turf.bbox(geojson);
    
    // 让地图适配这个边界框，可以调整padding参数留边距
    map.fitBounds(bounds, {
      padding: 50, // 可选，给地图边缘留50px的空白
      duration: 1000 // 可选，动画过渡时长，毫秒
    });
    
    // 把GeoJSON添加到地图source和layer
    map.addSource('mylayer', {
      type: 'geojson',
      data: geojson // 这里用加载好的GeoJSON对象，不是URL
    });
    
    map.addLayer({
      id: 'mylayer',
      type: 'fill',
      source: 'mylayer',
      paint: {
        'fill-color': '#088',
        'fill-opacity': 0.5 // 补全你之前截断的部分，示例加个透明度
      }
    });
  })
  .catch(error => {
    console.error('加载GeoJSON失败:', error);
  });

关键说明 #

• 为什么不能直接用URL？因为map.addSource里传URL时，Mapbox是异步加载数据的，你没法直接拿到加载后的GeoJSON对象传给Turf，所以必须自己先加载数据。
• turf.bbox(geojson)会返回一个数组：[minLng, minLat, maxLng, maxLat]，这个格式正好是map.fitBounds需要的参数。
• fitBounds的可选参数（比如padding）可以让地图边界和多边形之间留一些空白，体验更好。

额外提醒 #

确保你已经在页面中引入了Turf.js的脚本，比如：

<script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>

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