Установка маркера mapbox-gl для события click приводит к появлению на карте странных артефактов в VueJS - PullRequest
Новая
       43

Установка маркера mapbox-gl для события click приводит к появлению на карте странных артефактов в VueJS

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

версия mapbox-gl-js: 0.53.1

браузер: Google Chrome версии 73.0.3683.86 (официальная сборка) (64-разрядная версия) и Firefox66.0.2 (64-разрядная версия)

ОС: MacOS Mojave 10.14.4

Действия для запуска поведения

  1. Реализация mapbox в VueJSОдностраничное приложение
  2. Выбор объекта на маркере Выбранный объект вызывает событие щелчка с this.currentMap.on('click', layerId, callbackFunc)
  3. callbackFunc запускает описанную ниже функцию для установки маркера на карте.Артефакты появляются только тогда, когда маркер установлен на карте, а не при событии щелчка
  4. Карта удаляется и слушатели уничтожаются, но при создании нового экземпляра mapbox все еще отображаются артефакты;только полная перезагрузка браузера очищает его до повторного нажатия на элемент

Элементы находятся на слое, созданном из определенного источника (ниже): 

{
      'type': 'FeatureCollection',
      'features': [{
        'type': 'Feature',
        'geometry': {
          'type': 'Point',
          'coordinates': [X, Y]
        },
        'properties': o
      }, ...]
    }

и определенный слойниже: 

 {
         'id': <layerId>,
         'type': 'circle',
         'source': <sourceId>,
         'minzoom': <displayAtZoomLevel>,
         'icon-allow-overlap': true,
         'paint': {
           // make circles larger as the user zooms from <displayAtZoomLevel> to z22
          'circle-radius': {
            'base': 2,
            'stops': [[<displayAtZoomLevel>, 3], [22, 180]]
           },
           // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
          'circle-color': '#fff',
          'circle-stroke-width': 1,
          'circle-stroke-color': '#204da2'
       }
    }

Ожидаемое поведение

Карта должна отображаться как обычно с маркером

enter image description here

Фактическое поведение

Карта показывает зашифрованные артефакты, особенно на дорогах и т. Д., Когда маркер карты добавляется с использованием следующего кода: 

setMarker (markerContext, { lng, lat }, requestRouteCallback) {
    let lngLat = [Number(lng), Number(lat)]
    if (lngLat.length) {
      const marker = new mapboxgl.Marker().setLngLat(lngLat).addTo(this.currentMap)
      if (markerContext === 'start') {
        if (this.startEndMarkers.start) {
          this.startEndMarkers.start.remove()
        }
        this.startEndMarkers.start = marker
      } else if (markerContext === 'end') {
        if (this.startEndMarkers.end) {
          this.startEndMarkers.end.remove()
        }
        this.startEndMarkers.end = marker
      }
      this.currentMap.flyTo({ center: lngLat, zoom: 12, curve: 2 })
    }
}

Карта показывает это:

enter image description here

Первоначально опубликовав это на github Mapbox GL, можно было предположить, что карта рисует пунктирные дорожки на улицах.Я обнаружил, что это происходит, когда на карте происходит какое-то движение, например, панорамирование или масштабирование.Если я помещу маркер на карту, не вызывая никакого движения, артефакты не появятся.

1 Ответ

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

Пока что я нашел способ решить проблему, но я до сих пор не знаю точно, почему.

Я передаю объект события какой-то другой функции по щелчку и извлекаю элемент карты из объекта события.

Если я глубоко клонирую объект в объекте события перед передачей его другим функциям, артефакты не появляются.

...