就地更新传单 GeoJSON 功能 [英] in-place Update Leaflet GeoJSON feature

问题描述

我希望 GeoJSON.addData() 会返回新创建的 GeoJSON 对象的 subLayer，但它没有.为什么我需要这样的东西?

I was hoping that GeoJSON.addData() would return the newly created subLayer of the GeoJSON object, but it does not. Why Do I need something like this?

(目前使用 Leaflet 1.0Beta2)

(currently using Leaflet 1.0Beta2)

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

I am using Leaflet GeoJson to show live data in a GeoJSON (point, line, polygon). It is a CRUD interface (Create, Update and Delete). I receive WebSocket messages with GeoJSON data, each one with a GUID.

我是 CREATE 的情况，我只是对适当的层执行 GeoJSon.AddData().

I the case of a CREATE I just do a GeoJSon.AddData() to the appropriate layer.

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

But for the UPDATE and DELETE I want a handle for the layer that was added to the GeoJSON so that I can update its location, or update the Geometry. addData is not giving me this handle. And it is really hard to get it from onEachFeature() or from pointToLayer()

目前，我确实有一种可行但丑陋的方法.我要做的是用 GeoJSon.eachLayer(fn) 搜索整个图层每当发生更新或删除时.好像有点贵.

Currently, I do have a way that works but ugly. I have to do is search the entire layer with GeoJSon.eachLayer(fn) whenever an update or delete occurs. It seems a bit expensive.

{即使 Leaflet 不是真正为这种实时数据显示而设计的，它也能正常工作，如果你不能用它来观看大量传感器数据，物联网，这似乎很可悲)，就像我们正在做的那样.

{even if Leaflet is not truly engineered for this live r/t display of data, it is working, and it seems sad if you cannot use it for watching a lot of sensor data, IoT) as we are doing.

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);
        }
    });
}

推荐答案

取而代之的是(或并行地)将所有创建的 GeoJSON 功能合并"到单个 Leaflet GeoJSON 图层组中(您可以使用 addData)，为什么不首先在其自己的 Leaflet GeoJSON 层中创建每个功能，以便它为您提供您正在寻找的句柄(然后您可以简单地将这个句柄记录在一个对象/映射中，键是您的 objectID 例如)?

Instead (or in parallel) of "merging" all created GeoJSON features into a single Leaflet GeoJSON layer group (which you do with addData), why not creating first each feature in its own Leaflet GeoJSON layer, so that it gives you the handle you are looking for (then you could simply record this handle in an object / mapping with the key being your objectID for example)?

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

If desired, you could even still merge the individual layers into your single GeoJSON layer group after that.

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/

Demo (not using GeoJSON): http://jsfiddle.net/ve2huzxw/94/

更简单的解决方案是通过 GeoJSON 图层组的 onEachFeature 函数存储对每个单独图层的引用:

A slightly more simple solution would be to store the reference to each individual layer through the onEachFeature function of the GeoJSON layer group:

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);
}

这篇关于就地更新传单 GeoJSON 功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！