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

问题描述

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

图片展示

分析

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