Блог

Главная - Вопросы по программированию - Сохранение границ окна mapbox в localStorage и последующая загрузка их при обновлении / перезагрузке

Сохранение границ окна mapbox в localStorage и последующая загрузка их при обновлении / перезагрузке

#angular #typescript #mapbox #mapbox-gl-js #bounds

#угловатый #typescript #картографический ящик #mapbox-gl-js #границы

Вопрос:

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

Для этого я попытался сохранить границы в localStorage, но почему-то это не работает. Я поставил условие if, что если границы присутствуют в localstorage, используйте эти границы, иначе получите границы из встроенной функции 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. не работает, как в savedBounds, равно нулю? или что-то еще?

2. На самом деле, проблема в том, что я получаю границы, но мне нужно преобразовать их в координаты и центрировать на них карту. Как я могу преобразовать границы в координаты?

3. Попробуйте использовать bounds.getCenter() или даже лучше map.getCenter() , если это объект bounds или map.

4. map.getBounds().toArray() ?

5. Или даже попробуйте hash: true в качестве опции карты

Ответ №1:

Решение, которое я нашел, это:

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

Поэтому я просто использовал 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;
    }
  }