Mapbox缩放到活动数据

Question

我是javascript的新手，我有以下的mapbox图片。 radiobutton过滤热图。

当滤镜发生时，我希望地图放大到热图的中心，而不是保持静态。代码如下：

    <script>

map.on('load', function() {
    d3.json('onlinejsonconvert.geojson', function(err, data) {
    if (err) throw err;

    map.addSource('tortoise', { type: 'geojson', data: data });
    map.addLayer({
        "id": "tortoise",
        "type": "heatmap",
        "source": "tortoise",
        "maxzoom": 22,
        "paint": {
        }
    }, 'terrain');

  document.getElementById('filters').addEventListener('change', function(e) {
  var name = e.target.value;

  if (name === 'all') {
    filterDay = ['!=', ['string', ['get', 'individual-local-identifier']], 'placeholder'];
  } else if (name === 'Sparkey') {
    filterDay = ['match', ['get', 'individual-local-identifier'], ['Sparkey'], true, false];
  } else if (name === 'Charles') {
    filterDay = ['match', ['get', 'individual-local-identifier'], ['Charles'], true, false];
  } else if (name === 'Chrissie') {
    filterDay = ['match', ['get', 'individual-local-identifier'], ['Chrissie'], true, false];
  } else if (name === 'Karlitos') {
    filterDay = ['match', ['get', 'individual-local-identifier'], ['Karlitos'], true, false];
  } else if (name === 'Connor') {
    filterDay = ['match', ['get', 'individual-local-identifier'], ['Connor'], true, false];
  } else {
    console.log('error');
  }

  map.setFilter('tortoise', ['all', filterDay,]);
});


});
});
</script>

我已经尝试了所有可能的方法。任何线索/解决方案都会有所帮助。

谢谢。

Answer 1

您必须过滤数据对象并仅保留与过滤器匹配的元素。例如Connor属于== true的那些。

然后你有那些元素，这些元素将显示在你的地图上。你必须与它们建立一个界限（activeDataBounds）并使用map.fitBounds(activeDataBounds)将地图居中放在你想要的地方。

看看这里，看看如何从活动数据https://docs.mapbox.com/mapbox-gl-js/api/#lnglatbounds创建边界

您必须遍历activeData数组并使用LngLatBounds extend方法构造所需的边界。