实时更新多边形传单

Question

我正在尝试从外部geojson文件显示多边形，数据会加载，但不会实时更新。

添加了多边形，但在级别更改后的间隔后颜色未更新。

这里是我的代码：

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，则多边形的颜色会发生变化，但不会删除先前的多边形。

geoJson文件：

{
"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

我对多边形进行“实时”处理的方式是清理先前的多边形并创建一个新的多边形。考虑到这一点，您将需要跟踪已创建的图层（如在数组中），清除该图层的方法（或清除所有图层，有leaflet method for that）和设置timeOut的方法。调用更新方法。

我之所以说是“实时”，是因为目前，我一直在向后端请求使用timeOut函数进行更新。

首先，当您收到geojson绘制多边形时，将其添加到地图中，并使用update方法调用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
})