Масштаб Mapbox для активных данных - PullRequest
Новая
       12

Масштаб Mapbox для активных данных

0 голосов
/ 15 марта 2019

Я новичок в javascript, и у меня есть следующее изображение mapbox. Радиокнопка фильтрует тепловую карту.

enter image description here

Когда произойдет фильтр, я бы хотел, чтобы карта была увеличена до центра тепловой карты и не оставалась статичной. Код ниже: 

    <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>

Я перепробовал все возможные методы. Любые выводы / решения будут полезны.

Спасибо.

1 Ответ

0 голосов
/ 15 марта 2019

Вы должны фильтровать объекты данных и сохранять только те элементы, которые соответствуют фильтру.Например, те, которые Connor атрибут == true.

Тогда у вас есть те элементы, которые являются активными данными, которые будут отображаться на вашей карте.Вы должны построить границу с ними (activeDataBounds) и использовать map.fitBounds(activeDataBounds), чтобы центрировать карту там, где вы хотите.

Посмотрите здесь, чтобы узнать, как создать границы из ваших активных данных https://docs.mapbox.com/mapbox-gl-js/api/#lnglatbounds

Вы должны перебрать массив activeData и использовать метод LngLatBounds extend для построения желаемых границ.

...