Обновление всплывающих данных в Mapbox GL JS - PullRequest
Новая
       7

Обновление всплывающих данных в Mapbox GL JS

0 голосов
/ 11 февраля 2020

Я создаю флот-трекер с Mapbox GL JS, он получает данные с Geo Json и вставляет в карту, как Добавить живые данные в реальном времени, я также интегрировал пример локатора магазина Mapbox Теперь я могу обновлять боковую панель и точки на карте в реальном времени. Модификация, которую я хотел бы сделать, это не отображать только одно всплывающее окно, а всплывающее окно для каждого значка, расположенного там. Я хотел бы знать, как обновить эти всплывающие окна, потому что при создании я создаю новое всплывающее окно при каждом движении объекта, но не закрывает предыдущее. Вот функция, которую я использую для всплывающих окон 

function createPopUp(currentFeature, data) {     
    var popUps = document.getElementsByClassName('mapboxgl-popup');
    //if (popUps[0]) popUps[0].remove();
    //  mapboxgl.Popup.remove();

    if (map.getZoom() > 9) {
    var popup = new mapboxgl.Popup({closeOnClick: false})
      .setLngLat(currentFeature.geometry.coordinates)
      .setHTML('<h3> Aeronave: '+ currentFeature.properties.dev_id + '</h3>' +
        '<h4> Curso: ' + currentFeature.properties.curso + 'º<br> Altitude: ' + currentFeature.properties.alt + ' ft<br> Sinal: ' + currentFeature.properties.rssi +'</h4>')
      .addTo(map)
      .setMaxWidth("fit-content(10px)");
      } else{if (popUps[0]) popUps[0].remove()};
  }

Если я раскомментирую строку popUps [0], она будет отображать только 1 всплывающее окно, я также попытался динамически изменить число между [] числом активных отслеживаемых устройств, оно уменьшило количество всплывающих окон, но все равно повторяет некоторые всплывающие окна с одним идентификатором. Также я пытался изменить имя класса через .addClasName, но это не сработало.

Спасибо

1 Ответ

0 голосов
/ 18 марта 2020

Не видя, как вы вызываете метод createPopUp в контексте вашего приложения, трудно точно определить, что происходит не так. Я не уверен, почему каждый раз при перемещении карты создается новое всплывающее окно, поэтому похоже, что вы вызываете этот метод в событии Map#on('move'). При этом я предполагаю, что вы перебираете все свои функции и вызываете метод createPopUp для каждой из них, чтобы инициализировать все всплывающие окна.

Вместо того, чтобы использовать массив узлов DOM, сгенерированных с помощью var popUps = document.getElementsByClassName('mapboxgl-popup');, я бы рекомендовал указывать уникальное и воспроизводимое имя класса для каждого элемента всплывающего окна при инициализации. Похоже, что каждая из ваших функций имеет свойство dev_id, поэтому вы можете сделать что-то вроде: 

var popup = new mapboxgl.Popup({closeOnClick: false, className: `mapbox-gl-popup-${dev_id}`})

Если вам нужно изменить всплывающее окно для определенной функции в будущем, вы можете создать помощника функция для извлечения соответствующего узла DOM: 

function retrievePopUp(feature) {
  return document.getElementsByClassName(`mapboxgl-popup-${feature.properties.dev_id}`);
}
...