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

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

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

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

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

然后在引入

<script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

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

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
<script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>

后面我换成了

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>

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