Сохранение границ окна карты в localStorage, а затем загрузка их при обновлении / перезагрузке - PullRequest
Новая
       41

Сохранение границ окна карты в localStorage, а затем загрузка их при обновлении / перезагрузке

0 голосов
/ 16 апреля 2019

Я использую mapbox-gl-js для своего проекта. в настоящее время он работает отлично, за исключением того, что при перезагрузке карта возвращается к начальным границам, которые я установил. Я хочу, чтобы при обновлении страницы mapbox возвращался к границам, с которых страница была перезагружена.

Для этого я попытался сохранить границы в localStorage, но почему-то это не работает. Я сделал условие if, если границы присутствуют в локальном хранилище, используйте эти границы, в противном случае получите границы из встроенной функции mapbox. 

retrieveMapData() {
    const savedBounds = localStorage.getItem('bounds');
    if (savedBounds) {
      return savedBounds;
    } else {
      this.bounds = this.getMap().getBounds();
    }
    this.createPolygon();

  }

  createPolygon() {
    localStorage.setItem('bounds', this.bounds);
    this
      .mapDataManager
      .getData(this.bounds)
      .subscribe((data) => {
        this.setSource('markerSource', this.prepareGeoJsonData(data));
      });
  }

Я ожидаю, что mapbox проверит, существуют ли границы в localStorage, если они есть, загрузите эти границы, если нет, загрузите границы из встроенной функции.

В настоящее время условие if полностью не работает.

1 Ответ

1 голос
/ 25 апреля 2019

Решение, через которое я пришел:

Нам нужно сосредоточиться на центре карты, а не на границах.

Поэтому я просто использовал getCenter () чтобы получить центр карты и сохранить его в localStorage

Теперь границы автоматически рассчитываются и обновляются.

Вот рабочий код: 

this.mapInstance = new mapboxgl.Map({
      container: 'map',
      minZoom: 0,
      maxZoom: 18,
      center: this.getCenterOfMap(),
      zoom: this.getZoomValueOfMap(),
      style: this.style.streets
    });

getCenterOfMap () {
    try {
      this.savedCenter = JSON.parse(localStorage.getItem('center'));
    } catch (exception) {
      console.log('Exception: ', exception);
    }
    if (this.savedCenter) {
      return this.savedCenter;
    } else {
      return this.defaultCenter;
    }
  }
...