Turf.js 查找使用 Mapbox GL JS 加载的数据边界框？

Question

我正在使用 Mapbox GL JS 从某些页面上的外部 URL 加载 GeoJSON。我想自动使地图适合我正在加载的多边形的边界。

我知道turf.js 的 bbox 方法可以帮助解决这个问题，但我不确定如何将 GeoJSON 加入turf.bbox调用中。

这是我现在的代码：

map.addSource('mylayer', {
    type: 'geojson',
    data: '/boundaries.geojson'
});
map.addLayer({
    "id": "mylayer",
    "type": "fill",
    "source": "mylayer",
    'paint': {
        'fill-color': '#088',
        'fill-opacity': 0.6
    }
});
var bbox = turf.bbox('mylayer');
map.fitBounds(bbox, {padding: 20});

但它失败了turf.min.js:1 Uncaught Error: Unknown Geometry Type。文档说需要bbox“任何 GeoJSON 对象”。

我该如何正确地做到这一点？我显然宁愿不加载外部文件两次。

Answer 1

1) 从远程源加载数据是异步的。也就是说，您正在尝试在数据加载之前对其进行分析。

所以你需要处理这个sourcedata事件。

2)bbox函数的输入参数是一个有效的GeoJson object。

3) 如前所述， 对Turf.js一无所知Mapbox，因此您还需要从源读取加载的数据。

4）举个例子：

map.addSource('mylayer', {
    type: 'geojson',
    data: '/boundaries.geojson'
});
map.addLayer({
    "id": "mylayer",
    "type": "fill",
    "source": "mylayer",
    'paint': {
        'fill-color': '#088',
        'fill-opacity': 0.6
    }
});

map.on('sourcedata', function (e) {
  if (e.sourceId !== 'mylayer' || !e.isSourceLoaded) return
  var f = map.querySourceFeatures('mylayer')
  if (f.length === 0) return
  var bbox = turf.bbox({
    type: 'FeatureCollection',
    features: f
  });
  map.fitBounds(bbox, {padding: 20});    
})