就地更新Leaflet GeoJSON功能

Question

我希望GeoJSON.addData()会返回新创建的GeoJSON对象的subLayer,但事实并非如此.为什么我需要这样的东西？

(目前使用Leaflet 1.0Beta2)

我使用Leaflet GeoJson在GeoJSON(点,线,多边形)中显示实时数据.它是一个CRUD界面(创建,更新和删除).我收到带有GeoJSON数据的WebSocket消息,每个消息带有一个GUID.

我是CREATE的情况我只是在适当的层上做GeoJSon.AddData().

但对于UPDATE和DELETE,我想要一个添加到GeoJSON的图层的句柄,以便我可以更新其位置,或更新几何.addData没有给我这个句柄.从onEachFeature()或pointToLayer()获取它真的很难

目前,我确实有一种方法可行,但很难看.我需要做的是每当发生更新或删除时使用GeoJSon.eachLayer(fn)搜索整个图层.看起来有点贵.

{即使Leaflet没有真正设计用于这种实时r/t数据显示,它正在工作,如果你不能像我们一样使用它来观察大量的传感器数据,IoT似乎很难过.

this.delete = function (layerName, feature) {
    if (!(layerName in self.myLayers)) {
        alert("live.display: Missing Layer: " + layerName);
        return;
    }
    var layerInfo = Live.myLayers[layerName];
    var base = layerInfo.layer;
    var id = feature.properties.objectID;
    this.find(layerName, id, function (layer) {
        this.removeLayer(layer);
        Tools.debug(16, "live.delete:", "killed object: " + id);
    });
}
this.find = function (layerName, id, action) {
    var base = Live.myLayers[layerName].layer;
    base.eachLayer(function (feature) {
        if (!("objectID" in feature.feature.properties)) { return; }
        var objectID = feature.feature.properties.objectID;
        if (objectID == id) {
            action.call(base, feature);
        }
    });
}

Answer 1

相反(或并行)将所有创建的GeoJSON特征"合并"到单个Leaflet GeoJSON图层组(您使用它addData),为什么不在其自己的Leaflet GeoJSON图层中创建第一个每个特征,以便它为您提供句柄寻找(然后你可以简单地在一个对象/映射中记录这个句柄,objectID例如你的密钥)？

如果需要,您甚至可以在此之后将各个图层合并到单个GeoJSON图层组中.

var myGeoJsonLayerGroup = L.geoJson().addTo(map);
var myFeaturesMap = {};

function addNewFeatureToGeoJsonLayerGroup(newGeoJsonData) {
  var newGeoJSONfeature = L.geoJson(newGeoJsonData);
  myFeaturesMap[newGeoJsonData.properties.objectID] = newGeoJSONfeature;
  myGeoJsonLayerGroup.addLayer(newGeoJSONfeature);
}

function updateFeature(updatedGeoJsonData) {
  var updatedFeature = myFeaturesMap[updatedGeoJsonData.properties.objectID];
  updatedFeature.clearLayers(); // Remove the previously created layer.
  updatedFeature.addData(updatedGeoJsonData); // Replace it by the new data.
}

function deleteFeature(deletedGeoJsonData) {
  var deletedFeature = myFeaturesMap[deletedGeoJsonData.properties.objectID];
  myGeoJsonLayerGroup.removeLayer(deletedFeature);
}

演示(不使用GeoJSON):http://jsfiddle.net/ve2huzxw/94/

编辑:

稍微简单的解决方案是通过onEachFeatureGeoJSON图层组的功能将引用存储到每个单独的图层:

var myFeaturesMap = {};

var myGeoJsonLayerGroup = L.geoJson({
    onEachFeature: function (feature, layer) {
        myFeaturesMap[feature.properties.objectID] = layer;
    }
}).addTo(map);

function addNewFeatureToGeoJsonLayerGroup(newGeoJsonData) {
    myGeoJsonLayerGroup.addData(newGeoJsonData);
}

function updateFeature(updatedGeoJsonData) {
    deleteFeature(updatedGeoJsonData); // Remove the previously created layer.
    addNewFeatureToGeoJsonLayerGroup(updatedGeoJsonData); // Replace it by the new data.
}

function deleteFeature(deletedGeoJsonData) {
    var deletedFeature = myFeaturesMap[deletedGeoJsonData.properties.objectID];
    myGeoJsonLayerGroup.removeLayer(deletedFeature);
}