大家好，我是一名前端实习生。准备在掘金上写一点自己的经验留给自己以后看
是这样的
现在公司的产品用的是openlayers，老大说要改成leaflet的，但还是用vue2.于是我就接下重担!可我从来没有做过关于地图的前端开发，于是就找到了掘金
在掘金果然找到了一篇很详细的文章！于是我就按照作者的，从头抄了一遍。[这里是链接]Vue-CLI and Leaflet (1)：显示一个地图 - 掘金 (juejin.cn)反正很详细就是了。作者把对地图的操作都封装在了map.js里
所以我其实就只要把map.js复制过去就可以了。准备工作完成后就开始任务了。
首先是要能控制这个网格的生成和消失。反正就是弄个子组件，用elementui的switch开关来控制，然后方法写在父组件里，子组件用$parents触发就行，或者是自定义事件。我粗略看了下，网格的生成比较麻烦，得去找获取网格数据的接口。找半天找到了，调试一下发现好像不对。
经纬度好像是反过来的。额晕倒,可能是openlayers和leaflet的不一样？暂时蒙在鼓里
那就翻转一下吧
hh看着就好笨的方法，先用着，然后逐一渲染多边形（其实是矩形）。在循环里用之前在map.js里包装好的createPolygon方法（L.polygon， polygon.addTo(map);），反正就好了，看图！
然后就是去除这些网格，我问了那篇很详细的文章的作者。要用remove()来去除，可是如果要用remove首先得有一个对象啊。。。。于是我又开始了笨方法。当删除时就把this.map() remove掉然后所有初始化操作再来一遍。先交差。删除的时候会有0.几s的白屏。
额因为又有新需求了，所以先放一放。快下班的时候，想把这个解决掉，在csdn上看到了一个((9条消息) leaflet清除图层（vue）_黄-小智的博客-CSDN博客_leaflet删除图层)
清除图层只需要给图层赋值给变量，使用remove()即可清除。他是这样说的也就是说我要把一个个生成多边形的操作当做变量存储起来，一共九百多个网格，就存进一个数组里。
那么删除也很简单了只要把数组遍历出来，然后挨个remove就可以了
然后看效果吧
赶快下班
