(已关闭)Leaflet.js：如何仅在我选择的特定对象上编辑几何图形？ [英] (Closed) Leaflet.js: How I can Do Editing Geometry On Specific Object I Select Only?

问题描述

我很兴奋，和Leaflet.JS在gis地图上玩得很开心。我是新手。我也非常感谢@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.我不知道如何将我选择的原始几何图形从Layer复制到DrawLayer。

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

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

我希望谁是铁杆，谁已经在Leaflet.JS上找到了简单的方法，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,
      });

    });
  },

2022年4月3日更新

有人可以帮助我如何使用编辑模式以编程方式将几何图形传递给图形项吗？假设我有如下所示的几何图形：-

...... {&Q；类型：&Q；要素&Q；，"；geometry"；：{"；type"；："；Polygon"；，&Q；坐标&Q；：[[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.6887，54.5696]，[16.6991，54.5692]，[16.7126，54.5542]，[16.7392，54.5384]，[16.7481，54.5276]，[16.7392，54.5177]，[16.7566，54.4946]，[16.764，54.4861]，[16.7933，54.4874]，[16.8275，54.4648]，[16.8211，54.4563]，...... . ，&Q；属性：{&Q；ID&Q；：4，"；nazwa"；："；zachodniopomorskie"；}，&Q；ID&Q；：3}

如何以编程方式将此多边形(几何图形)传递到dranItems层？

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

推荐答案

挣扎了几天后，我终于找到了完成任务的解决方案。它不是很漂亮，但至少我填得还可以，我需要的都在那里。

我使用

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

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

传递给dranItems的原始几何图形

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

在图纸层上拉回以进行编辑。当我将原始几何体上的样式调整为不可见时。可编辑的几何体只能在用户认为这是他/她现在正在编辑的原始几何体的舞台上看到。

  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)。：)

然后我用这个技巧删除了dranItems层中的所有对象

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

仅此而已。

这篇关于(已关闭)Leaflet.js：如何仅在我选择的特定对象上编辑几何图形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！