最近在做百度地图绘图功能的时候遇到一个问题,就是地图上的多边形是可以编辑的,但是在与绘制海量点结合使用的时候发现海量点的层级跑到了上面而多边形的层级在下面,导致多边形无法响应点击事件,研究了好久,翻变了百度地图的API也没找到解决方法,今天用了一个野路子,虽然解决了问题,但总觉得这种解决问题的方法不规范,如果大家有更合适的方法,欢迎分享
一、百度地图层级问题
百度地图默认的层级关系是后绘制的图形层级更高,所以要想让某个图形层级最高就最后绘制,我在项目中也是这个做的,但是项目中海量点需要反复删除并绘制,这种情况下不知道为什么,海量点的层级就跑到了最上面了
一、功能描述
页面分两个表单,第一个表单查询点的数据,第二个表单查询保存过的多边形数据和保存的点数据。
第一次选择多边形模板的时候,编辑功能是正常的,但是第二次在选择的时候多边形点击事件就不触发了,我怀疑是层级关系的问题,百度了很多也没找到原因,最后我查看了百度地图的DOM结构
我发现页面中的多边形是用svg绘制(红色边框内的代码)的而海量点使用canvas绘制的(绿色边框内的代码),两者没有zindex样式属性(图片中的zIndex是我用代码后加上的),所以我找到地图中的svg,全部添加了z-index样式为9999,这样果然起作用了,多边形永远都在海量点上面显示,也可以触发点击事件了。
$("#mapContainer").find("svg").css("z-index",9999)
方法很不规范但是也解决了问题,如果有更好的方法,欢迎分享。