Обновление листовки полигонов в реальном времени

Question

Я пытаюсь отобразить многоугольник из внешнего гео-файла json, данные загружаются, но не обновляют многоугольник в реальном времени.

Многоугольник добавляется, но цвет не обновляется после интервала, когда уровень меняется.

Вот мой код:

L.realtime({
 url: 'js/areas.json',
 crossOrigin: true,
 type: 'json'
}, {
interval: 60 * 1000,
onEachFeature: function (feature, latlng) {

 var level = feature.properties.level;

 if (level == 0) {

 var polygon = L.polygon(latlng._latlngs, {
   color: '#51F03B',
   opacity: 0.3,
   fillOpacity: 0.1
 }).addTo(map);
} else if (level == 1) {

var polygon = L.polygon(latlng._latlngs, {
  color: '#F43B19',
  opacity: 0.3,
  fillOpacity: 0.1
 }).addTo(map);
}
return polygon;
},
updateFeature: function (feature, oldLayer, newLayer) {

 var level = feature.properties.level;
 if (!oldLayer) {
 return;
 }

 if (level== 0) {
  oldLayer.setStyle({color: '#51F03B'});
 } else if (level == 1) {
  oldLayer.setStyle({color: '#F43B19'});
 }
 return oldLayer;
 }
});

Если я не return oldLayer, цвет многоугольника меняется, но не удаляется предыдущий многоугольник.

geo Json file:

{
"type": "FeatureCollection",
"features": [{
    "type": "Feature",
    "properties": {
        "level": 0,
        "id": 1
    },
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-75.360297, 6.071571],
            [-76.005083, 6.063846],
            [-76.051694, 6.511708],
            [-75.298149, 6.573451]
        ]]
    }
}]
}

Я показываю маркеры и многое другое таким образом, но я не знаю, отличаются ли их полигоны.

Answer 1

То, как я работал с «в реальном времени» с полигоном, заключалось в очистке предыдущего полигона и создании нового. Имея это в виду, вам нужно будет отслеживать слои, которые вы создали (например, в массиве), метод, чтобы очистить этот слой (или очистить все слои, для этого есть метод листовки ) и метод для установки timeOut для вызова метода обновления.

Я говорю «в режиме реального времени», потому что в настоящее время я продолжаю запрашивать у сервера обновление с использованием функции timeOut .

сначала, когда вы получили гео json рисовать многоугольник, добавьте его на карту и вызовите setTimeout с вашим методом обновления.

секунда, вам понадобится метод для удаления старого слой, что-то вроде этого:

const resetPolygonArray = polygonId => { 
    myPolygon = polygonArray.filter(polygon => {
        if (polygon.id != polygonId) {
            return myPolygon
        } else {
        map_machiney.removeLayer(myPolygon.geojson)
        }
    })
}

, хотя вы можете использовать этот массив для хранения многоугольника и связанного с ним маркера, например, такую ​​структуру:

polygonArray.push({
    id: polygonId,
    geojson: geojson,
    marker: marker
})