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似乎很难过。 / p>

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

相反（或并行）＆＃34;合并＆＃34;所有创建的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/

修改

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

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

Answer 2

如果要存储对正在创建的实际图层的引用，可以从layeradd实例上的L.GeoJSON事件中访问它们：

var geojson = new L.GeoJSON().on(
    'layeradd', function (e) {
        console.log(e.layer);
    }
).addTo(map);

// This addData call will fire the handler above twice
// because it adds two features.
geojson.addData({
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "Point",
            "coordinates": [90, 0]
        }
    }, {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "Point",
            "coordinates": [-90, 0]
        }
    }]
});

Answer 3

如果有人仍在寻找另一种简短的方法来更新GeoJSON，则可以尝试这样的操作


//function to clear the previous geojson feature
function clearMap() {
    map.eachLayer(function(layer){
        if(layer.myTag && layer.myTag === 'previousLayer'){
            lmap.removeLayer(layer);
        }
    });
}

function geojsonUpdate(geojsonData){
 var geojsonLayer = L.geoJson(geojsonData, {
    onEachFeature: function (feature, layer) {
        layer.myTag = 'previousLayer'
      );
    },
  });
 geojsonLayer.addTo(lmap);
 lmap.fitBounds(geojsonLayer.getBounds());
}

//function call
clearMap();
geojsonUpdate(data);

就地更新Leaflet GeoJSON功能

3 个答案: