4

我正在使用 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 对象”。

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

4

3 回答 3

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

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

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

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

  3. 举个例子：

    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});    
    })
于 2018-03-22T10:08:39.873 回答
0

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

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

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

但是._data，由于它是一个私有 API，因此可能会在任何新版本中随时更改，而无需在发行说明中详细说明。

有一个公共 API map.querySourceFeatures：

map.querySourceFeatures('mylayer');

但它只会返回当前视图中的特征，并且在被 geojson-vt 平铺后意味着即使在查看整个世界时也不能保证返回所有特征。

于 2018-03-19T01:22:09.317 回答
0

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

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

使用任何其他请求库替换 jQuery。

于 2018-03-19T23:06:26.077 回答