Стиль Mapbox меняет / ломает при увеличении при добавлении слоя - PullRequest
Новая
       11

Стиль Mapbox меняет / ломает при увеличении при добавлении слоя

0 голосов
/ 12 июня 2018

У меня есть карта mapbox, инициализированная со стилем outdoors-v9 (пробовал другие стили, такое же поведение).Когда я добавляю слой на карту - маркер или источник геоджона и масштабирую карту, стиль меняется или ломается, я не уверен, какой именно.

Это карта до увеличения enter image description here

и после увеличения enter image description here

здесьфункции, которые инициируют карту и добавляют маркеры 

mapboxgl.accessToken = "pk.*******";


buildMap: function() {
  const _self = this;
  _self.map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/outdoors-v9",
    center: [-95.712891, 37.09024],
    zoom: 3
  });

  _self.map.on('load', function() {
    _self.map.addSource('route', {
      'type': 'geojson',
      'data': {
            "type": "FeatureCollection",
            "features": []
      } 
    });

    _self.map.addLayer({
        'id': 'route',
        'source': 'route',
        'type': 'line',
        'layout': {
          'line-join': 'round',
          'line-cap': 'round'
        },
        'paint': {
          'line-color': '#47576A',
          'line-width': 3
        }
      });
  });
}

... 

const coords = [addressData.longitude, addressData.latitude];

const marker = new mapboxgl.Marker().setLngLat(coords).addTo(this.map);

Я использую Vue.js для рендеринга карты.Версия Mapbox v0.45.0

Любая помощь или рекомендации высоко ценятся

Ответы [ 3 ]

0 голосов
/ 14 января 2019

У меня та же ошибка.Это происходит, если вы поместите карту или маркер в реактивный экземпляр vue.js.

0 голосов
/ 26 июня 2019
Свойства

Vue data() являются реактивными, они имеют getters и setters, поэтому при загрузке объекта карты или добавлении векторного слоя листов (geojson) Vue пытается добавить геттеры и сеттеры к map & map.layers, что приводит к аварийному завершению работы vue & vue-dev-tools и нарушению работы карты.

Если вы включите любой растровый слой, он будет работать успешно, поскольку растровые плитки загружаются через mapbox.css, тогда как векторные плиткиgeojson, добавляются к объекту map.

Самое простое решение - определить нереактивную переменную в vue, а затем повторно использовать ее везде.

0 голосов
/ 16 июня 2018

Кажется, проблема была связана с тем, что я помещаю экземпляр маркера в наблюдаемое (поле данных vuejs).После отправки экземпляра маркера в массив проблема исчезла.Этот комментарий на самом деле не отвечает, почему это происходит, но надеюсь, что он поможет кому-то еще, кто может столкнуться с той же проблемой

...