Question

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

我知道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

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});    
})

Answer 2

turf.bbox函数接受GeoJSON作为Object，它不知道Mapbox。

当您通过传递完整的GeoJSON（而不是传递URL）创建Source时，Mapbox GeoJSON Source将完整的GeoJSON对象私有存储在._data中，因此您可以这样做：

turf.bbox(map.getSource('mylayer')._data);

然而._data可能会在任何新版本中随时更改，而不会在发行说明中详细说明，因为它是私有API。

有一个公开API map.querySourceFeatures：

map.querySourceFeatures('mylayer');

但它只会返回当前视图中的功能，并且在通过geojson-vt平铺之后意味着即使在查看整个世界时仍然无法保证返回所有功能。

Answer 3

不是将URL传递给addSource，而是首先下载它，然后传递完整的GeoJSON对象。

$.getJSON('/boundaries.geojson', (geojson) => {
   map.addSource('mylayer', {
       type: 'geojson',
       data: geojson
   });
   map.fitBounds(turf.bbox(geojson), {padding: 20});
}

将jQuery与任何其他请求库一起使用。

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

3 个答案: