（已关闭）Leaflet.js：如何在仅选择的特定对象上编辑几何图形？

Question

我非常兴奋，并且在 GIS 绘图方面使用 Leaflet.JS 玩得很开心。我是新手。我也非常感谢 @Grzegorz T. 兄弟的善意并帮助我向我介绍 Leaflet.JS。

现在，我计划仅在我选择的特定对象上编辑几何图形。我已经想到了流程和结果如何，但过程？？？（哈哈哈..）。我也已经知道 Leaflet.JS 上的 DrawItems 函数，但我会使用。

在我这样做之前，让我先描述一下简单的流程...

A. 我只是使用 jsfiddle1 @Grzegorz T B.

添加了DrawItems

...
{ 'DrawLayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
...

    //Add Draw Control//
    map.addControl(new L.Control.Draw({
        edit: {
            featureGroup: drawnItems,
            poly: {
                allowIntersection: false
            }
        },
        draw: {
            polygon: {
                allowIntersection: false,
                showArea: true
            }
        }
    }));

    //Draw Objects//
    map.on(L.Draw.Event.CREATED, function (event) {
        var layer = event.layer;
        drawnItems.addLayer(layer);
    });

    //Get Leaflet Object ID 
    drawnItems.on('click', function(event) {
      console.log("from drawnItems: " + event.layer._leaflet_id);
    });
        

  //Get Geometry from Layer & ID

  //Edit Only This Objects

  //Save This Editing Back to Original Layer & ID

我在这部分

，我看到一个问题是： 1。我不知道如何将从图层中选择的原始几何图形复制到 DrawLayer。

2.仅隐藏原始图层上的此几何图形（id），直到编辑结束或取消。 （也许将不透明度更改为不可见）

3。完成编辑并保存后，如何保存回原始图层并将结果显示到地图。

我希望谁是硬核，谁已经在 Leaflet.JS 上找到了简单的方法，可以帮助我解决这个肮脏的问题工作....

更新 3/3/2022

我找到了如何重新设置我选择的对象（几何图形）的样式，这是以下内容的封面： 2.仅隐藏原始图层上的此几何图形（id），直到编辑结束或取消。 （也许将不透明度更改为不可见）

代码如下：-

  onEachFeature: function (feature, layer) {           
    //restyle the geom when display
    layer.setStyle({
      fillColor: "white",
      weight: 2,
      color: "#eb4034",
      fillOpacity: 0.7,
    });

    layer.on("mouseover", function (e) {
      // style
      this.setStyle({
        fillColor: "#eb4034",
        weight: 2,
        color: "#eb4034",
        fillOpacity: 0.7,
      });
    });
    layer.on("mouseout", function () {
      // style
      this.setStyle({
        fillColor: "#3388ff",
        weight: 2,
        color: "#3388ff",
        fillOpacity: 0.1,
      });
    });
    layer.on("click", function () {
      this.setStyle({
        fillColor: "transparent",
        weight: 0,
        color: "transparent",
        fillOpacity: 0,
      });

    });
  },

更新 4/3/2022

任何人都可以帮助我如何在编辑模式下以编程方式将几何图形传递给绘图项目？假设我有如下所示的任何几何形状：

-...... {“类型”：“特征”，“几何”：{“类型”：“多边形”，“坐标”：[[[16.3716,54.4414]，[16.3946,54.4477 ],[16.4315,54.487],[16.4797,54.5164],[16.4968,54.5231],[16.5299,54.5407],[16.6145,54.5598],[16.688 7,54.5696],[16.6991,54.5692],[16.7126,54.5542],[16.7392,54.5384],[16.7481,54.5276],[16.7392,54.517 7],[16.7566,54.4946],[16.764,54.4861],[16.7933,54.4874],[16.8275,54.4648],[16.8211,54.4563],…… ………… ,"properties":{"id":4,"nazwa":"zachodniopomorskie"},"id":3}

如何以编程方式将此多边形（几何图形）传递到 DrawingItems 层？

请帮助我，并提前感谢您阅读此消息。

Answer 1

经过几天的努力，我终于找到了完成任务的解决方案。它并不漂亮，但至少我填得还不错，我需要的一切都在那里。

我使用

layer.on("click", function(e) {

从原始图层获取几何图形和 id。我通过使用

geojsonLayer = L.geoJson(oriGeom);
geojsonLayer.getLayers()[0].addTo(drawnItems);

在绘图图层上绘制回来进行编辑来 传递给 DrawingItems 的原始几何图形同时，我将原始几何体的样式调整为不可见，可编辑几何体只能在用户“认为”这是他/她现在正在编辑的原始几何体上看到

  onEachFeature: function (feature, layer) {           
    //restyle the geom when display
    layer.setStyle({
      fillColor: "white",
      weight: 2,
      color: "#eb4034",
      fillOpacity: 0.7,
    });

    layer.on("mouseover", function (e) {
      // style
      this.setStyle({
        fillColor: "#eb4034",
        weight: 2,
        color: "#eb4034",
        fillOpacity: 0.7,
      });
    });
    layer.on("mouseout", function () {
      // style
      this.setStyle({
        fillColor: "#3388ff",
        weight: 2,
        color: "#3388ff",
        fillOpacity: 0.1,
      });
    });
    layer.on("click", function () {
      this.setStyle({
        fillColor: "transparent",
        weight: 0,
        color: "transparent",
        fillOpacity: 0,
      });

。通过使用Python类通过搜索ID并将原始坐标替换为仅新坐标（editGeom）:)

然后我通过这个技巧删除drawnItems层内的所有对象

  document.querySelector(".leaflet-draw-edit-remove").click(); //fake click Delete
  document.querySelector("ul li:last-child a").click(); //fake click Save All

就这样。