dva如何引入百度地图,并绘制、编辑矢量图形区域

前两天接到一个需求,由于是从来没有接触过的,所以记录一下,防止时间久了就遗忘了。

需求是:引入百度地图,并在地图上绘制多边形区域,并且对绘制出的多边形区域进行编辑和删除操作

接到这个需求,立马看了一下百度地图api文档,看了一下示例,心想这不是很简单嘛。结果是我眼高手低了,哈哈哈。为什么呢?因为官方给的demo不是在vue和react中引入的,所以不涉及先后加载的问题。但是在vue和react中就存在这种问题。然后我立马上网搜了一下方法,网上也有很多文章说了如何引入,其基本思想就是先保证百度地图被成功引入之后,再创建地图示例,按照网上的方法,我成功的把地图展示出来了!!!
但是问题又来了,要绘制多边形。这时候就需要用到百度地图api的辅助工具image
但是这个要引入另一个js文件和css文件,这个官网也给了demo。但是问题在于使用的这个鼠标绘制功能要保证成功引入下面的

然后在引入

不然页面会报BMapGLLib undefined
这两个引入成功之后,就可以暂时愉快的玩耍啦,为什么说是暂时愉快的玩耍呢,因为引入这两个文件之后,可以在地图上面绘制矢量图形了。但是!!!你没有办法给矢量图形绑定事件overlaycomplete!!!所以无法获取绘制结束之后你想要的数据。一开始我以为是因为渲染的问题才会出现这个问题,后面发现不是的,问题其实在于引入的地图类型!!!对,就是这个


后面我换成了



绑定鼠标绘制成功事件overlaycomplete就成功啦!!!
然后就可以愉快的进行绘制,并且拿到绘制成功之后的矢量图形数据啦,然后根据具体业务,得到对应的参数就好啦
以上只是绘制,有时候业务需求可能还会涉及到矢量图形的编辑,首先要保证矢量图形是在可编辑的状态,怎么设置编辑,这个官方示例上面都有,我就不一一说明了。重点在于,编辑成功之后的矢量图形数据怎么获取,这个时候需要用到lineupdate,需要给矢量图形对象绑定图形状态改变的事件,这样就可以拿到你想要的数据了!!!
ok,以上的问题就全部解决了,希望能对你们有所帮助

你可能感兴趣的:(前端,react.js,百度地图api)