Как правильно создать метки в openLayers?

189
01 января 2019, 11:30

OpenLayers (мониторинг транспорта)

Создаю систему визуализации передвижения машин на карте,
нужно чтобы машины меняли свое местоположение на карте, когда с сервера приходят данные (setInterval примерно раз в 5 сек).

Сейчас для создания меток машин я использую следующий код:

$.ajax({
  url: '../backCall/doccoord.php',
  success: function (data) {
    // Массив с названиями переменных всех созданных меток
    window.varNameArray = [];
    var sample = JSON.parse(data);
    $.each(sample, function (key, val) {
      // Основная информация
      var sampleId = val["id"],
          sampleLng = val["lng"],
          sampleLat = val["lat"],
          sampleName = val["name"],
          varName = 'iconFeature' + sampleId;
      varNameArray.push(varName);
      eval(`
        window.`+ varName +` = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([`+ sampleLng +`, `+ sampleLat +`], 'EPSG:4326', 'EPSG:3857')),
        name: '`+ val["name"] +`',
        population: 4000,
        rainfall: 500
        });
        vectorSource.addFeature(`+ varName +`);
      `);
    });
    setInterval(function () {
      // Удаление меток
      $.each(varNameArray, function(key, val) {
        vectorSource.removeFeature(eval(val));
      });
      $.ajax({
        url: '../backCall/doccoord.php',
        success: function (data) {
          var sample = JSON.parse(data);
          $.each(sample, function (key, val) {
            // Основная информация
            var sampleId = val["id"],
                sampleLng = val["lng"],
                sampleLat = val["lat"],
                sampleName = val["name"],
                varName = 'iconFeature' + sampleId;
            // Чтобы удалить метку корректно 500ms
            eval(`
              window.`+ varName +` = new ol.Feature({
              geometry: new ol.geom.Point(ol.proj.transform([`+ sampleLng +`, `+ sampleLat +`], 'EPSG:4326', 'EPSG:3857')),
              name: '`+ val["name"] +`',
              population: 4000,
              rainfall: 500
              });
              vectorSource.addFeature(`+ varName +`);
            `); 
          });
        }
      });
    }, 1000);
  }
});

Если правильно понимаю необходимо создать слой, напихать туда меток, а при необходимости удалить.
Код очень костыльный.

Как я могу правильно создать метки и корректно их удалить при необходимости?
(Если информации недостаточно или требует уточнения пишите, попробую поправить:)

READ ALSO
Как показать Preloader до загрузки iframe?

Как показать Preloader до загрузки iframe?

Можно отследить событие onload в котором удалить preloaderМожно еще добавит картинку через background

178
Переместить фигуру с помощью циклов в Javascript

Переместить фигуру с помощью циклов в Javascript

Прошу помощи с учебной задачейНе прошу писать все решение, подскажите хоть как в данной задаче в JS выразить мысль (дальше разберусь):

191
Вопрос по jQuery (js)

Вопрос по jQuery (js)

есть такой вопрос:

209
Как сделать карусель (отзывов) используя FancyBox 3?

Как сделать карусель (отзывов) используя FancyBox 3?

Не в виде всплывающего окна, а именно как карусел

165