首页 > 其他分享 >记录一次关于使用leaflet draw 插件叠加图层删除绘制层无法删除的问题

记录一次关于使用leaflet draw 插件叠加图层删除绘制层无法删除的问题

时间:2022-10-11 18:34:45浏览次数:62  
标签:插件 多边形 删除 draw 区域 下级 绘制

问题描述

业务逻辑是这样的:再地图上已经绘制了一个多边形区域,然后需要再绘制的区域下再绘制下级区域,使用插件可以正常绘制并保存绘制数据,然后再回显编辑的时候,此时地图展示了上级多边形区域(该区域未追加到draw FeatureGroup 下)以及下级区域(该区域已经追加到draw FeatureGroup下)。当我使用draw的删除控件删除下级区域时候,发现下级区域无法删除。

图片展示

image
image
image

分析

  • 首先是去draw 的GitHub 看issure,找寻半天没有发现(可能是自己没找到),然后提了一个issure
  • 考虑是层级问题,于是去找leaflet文档看有没有设置层级的方法,此时我找到了setZIndex()方法,尝试后无果
  • 再次审查元素,绘制出的图像都是svg ,再dom上能看到path,于是想怎么去改变层级,暂时未找到(为什么想到层级问题,因为我用鼠标放上去的时候,鼠标指向的是图中的黄色多边形,只有审查的时候能找到蓝色多边形)
  • 接着我去测试新添加下级区域能否删除,我发现新增时使用绘制控件绘制的下级多边形是可以删除的且用鼠标指向是绘制区域的多边形,那我就思考了为什么新增可以,它的操作流程下来的层级是没问题的
  • 在再次审查元素,我发现新增下级区域使用绘制控件绘制的下级多边形再dom里面的path是再黄色多边形的上面。这时候我感觉应该找到方法了
  • 最后,再编辑时,我延迟300毫秒追加绘制的蓝色多边形到地图上,让蓝色多边形的层级高于了黄色多边形,于是也解决了不能删除的问题

标签:插件,多边形,删除,draw,区域,下级,绘制
From: https://www.cnblogs.com/YangJieCheng/p/16780194.html

相关文章

  • VS插件Git的使用
    1、克隆代码。2、新建自己的分支3、切换分支4、代码更改文件数5、代码暂存至本地6、本地代码暂存次数7、代码推送至远程8、查看修改记录9、查看某次提......
  • Jquery删除表格除第一行和最后一行之外的所有行
    $("#tableIdtr:not(:first):not(:last)").html("");其中#tableId为表格的id或者是$("#tableIdtr:not(:first):not(:last)").empty("");......
  • Redis 的数据过期了就会马上删除么?
    Redis的数据过期了就会马上删除么?我在3A服务器平台购买了服务器,部署了相关环境,正好可以解答一下这个问题先说结论,并不会立马删除,Redis有两种删除过期数据的策略:定期选......
  • IDEA翻译插件(Translation)不能用啦?
    不知道大家最近有没有发现,Translation不能用了。因为Google那边的原因,这个插件的接口,访问不通了。我当时本来是打算寻找一些替代品,比如:有道。但是毕竟不是内置的,而且,我......
  • eclipse 安装sts插件
    1、在线安装http://download.springsource.com/release/TOOLS/update/e4.16/a、查看eclise版本,把对应的版本修改下b、点击help-installnewsoftware,输入name和url,勾选......
  • VSCode 插件 vsix格式文件 离线安装
    场景 有些时候内网不能上网,则需要从共享目录直接安装下载好的vsix格式文件一、假设已经有了vsix离线文件(下载vsix暂不了解,后抽空补)二、文件放在vscode的安装目录......
  • idea翻译插件不可用解决方法
    最近许多人的ieda翻译插件(Translation)使用不了,在hosts文件加上地址即可解决C:\Windows\System32\drivers\etc  220.181.174.33translate.googleapis.com ......
  • DW CS4 的 jQuery_api_for_dw4插件下载
    最近一直在找jQuery插件,都不能用。今天同事给了一个,发现确实能用,挺方便,放到cnblogs上来,提供下载。也方便自己以后找的麻烦。呵呵。。​ ----------------------------......
  • Edge浏览器插件推荐
    起因:本来是给老妈下音乐,要把m4a格式转成mp3的,结果在一堆需要注册登录、数量限制、下载龟速的在线网站里,发现了edge插件【即时工具】,批量处理、转化,一键下载速度还很快,然后......
  • vuex-persistedstate 持久化插件用来解决数据刷新问题
    vuex-persistedstate持久化插件用来解决数据刷新数据丢失问题1.指定需要持久化的statenpminstallvuex-persistedstate--save引入及配置在store下的index.js中impo......