Создаю систему визуализации передвижения машин на карте,
нужно чтобы машины меняли свое местоположение на карте, когда с сервера приходят данные (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);
}
});
Если правильно понимаю необходимо создать слой, напихать туда меток, а при необходимости удалить.
Код очень костыльный.
Как я могу правильно создать метки и корректно их удалить при необходимости?
(Если информации недостаточно или требует уточнения пишите, попробую поправить:)
Сборка персонального компьютера от Artline: умный выбор для современных пользователей