(已关闭)Leaflet.js:如何仅在我选择的特定对象上编辑几何图形?

(Closed) Leaflet.js: How I can Do Editing Geometry On Specific Object I Select Only?((已关闭)Leaflet.js:如何仅在我选择的特定对象上编辑几何图形?)
本文介绍了(已关闭)Leaflet.js:如何仅在我选择的特定对象上编辑几何图形?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我很兴奋,和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:如何仅在我选择的特定对象上编辑几何图形?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Flask + PyMySQL giving error no attribute #39;settimeout#39;(FlASK+PyMySQL给出错误,没有属性#39;setTimeout#39;)
FastAPI + Tortoise ORM + FastAPI Users (Python) - Relationship - Many To Many(FastAPI+Tortoise ORM+FastAPI用户(Python)-关系-多对多)
Inserting NaN value into MySQL Database(将NaN值插入MySQL数据库)
How to make node.js mysql connection pooling available on startup(如何使node.js MySQL连接池在启动时可用)
Window functions not working in pd.read_sql; Its shows error(窗口函数在pd.read_sql中不起作用;它显示错误)
in sqlite update trigger with multiple if/Case Conditions(在具有多个IF/CASE条件的SQLite UPDATE触发器中)