Sticky Zoom для GeoJson - PullRequest
Новая
       21

Sticky Zoom для GeoJson

1 голос
/ 07 мая 2019

Динамическая загрузка геоджона для карты хлороплета. Когда я увеличиваю и панорамирую, все хорошо, но если я выбираю другой Cell Carrier, который воспроизводит Chloropleth, он всегда возвращается к исходному Zoom / Center по умолчанию.

Как я могу реализовать «липкое увеличение», чтобы сохранить границы сеанса?

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


var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    center: [-100, 38],
    zoom: 3
});

if (document.getElementById('hfldBounds').value != 'null') {
    map.fitBounds(document.getElementById('hfldBounds').value);
};

map.on('zoom', function (e) {
   document.getElementById('hfldBounds').value  = map.getBounds();
});

В идеале пользователь выбирает оператора, который отображает карту. Они увеличивают и панорамируют, а затем хотят увидеть, что другой носитель имеет в тех же границах, чтобы сменить носитель, получить новые данные geoJson, но сохранить прежние экстенты карты.

1 Ответ

0 голосов
/ 10 мая 2019

Я наконец-то решил это сам, поэтому выложу решение здесь: 

<script>
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v10',
            center: [-100, 38],
            zoom: 3
        });

        map.on('zoom', function (e) {
            sessionStorage.setItem('bounds', map.getBounds());
        });

        map.on('drag', function (e) {
            sessionStorage.setItem('bounds', map.getBounds());
        });

        if (sessionStorage.getItem('bounds') != null) {
                let bounds = sessionStorage.getItem('bounds');
                var araBounds = bounds.toString().split(',');
                var swX = parseFloat(araBounds[0].replace('LngLatBounds(LngLat(',''));
                var swY = parseFloat(araBounds[1].replace(')',''));
                var neX = parseFloat(araBounds[2].replace('LngLat(',''));
                var neY = parseFloat(araBounds[3].replace('))', ''));

                var ne = new mapboxgl.LngLat(neX, neY);
                var sw = new mapboxgl.LngLat(swX, swY);

                var box = new mapboxgl.LngLatBounds(sw, ne);
                map.fitBounds(box);
            };
</script>
  1. загрузить карту
  2. сохранить границы переменной сеанса при перемещении или панорамировании
  3. проверка границ и создание нового объекта границ.
  4. использование объекта границ с map.fitBounds () для возврата к вашим предыдущим экстентам.
...