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

Question

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

我明白 turf.js's bbox method可以帮助解决这个问题，但我不确定如何将 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

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

所以你需要处理 sourcedata 事件。

bbox 的输入参数函数是有效的 GeoJson object .

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

举个例子:
map.addSource('mylayer', {
类型:'geojson'，
数据:'/boundaries.geojson'
});
map .addLayer({
"id": "mylayer",
“类型”:“填充”，
"source": "mylayer",
'画': {
'填充颜色': '#088',
“填充不透明度”:0.6
}
});
map.on('sourcedata', function (e) {
if (e.sourceId !== 'mylayer' || !e.isSourceLoaded) 返回
var f = map.querySourceFeatures('mylayer')
if (f.length === 0) 返回
var bbox = turf.bbox({
类型:'功能集合'，
特点: f
});
map.fitBounds(bbox, {padding: 20});
})