VUE2 项目 引入 leaflet.draw全过程

leaflet.draw的参考文档：http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html   这个网址不稳定，多刷新几遍就出来了

leaflet.draw源码：https://github.com/Leaflet/Leaflet.draw

首先确保你已经创建好一个VUE项目了，并且已经安装好淘宝镜像了，并且之前也已经安装过leaflet了(这里主要推荐你安装vue2leaflet，因为安装vue2leaflet的过程中，你就把leaflet安装上去了)

然后CMD：cnpm install leaflet-draw

接着：cnpm install

就可以运行项目了

我的代码如下

TestMap.vue

　　这个时候，页面打开是这样的，对应的工具栏显示错乱（如果没有错乱，就不用往下看了）

解决方案：在main.js里面引入leaflet.draw.css文件

import '[email protected]@leaflet-draw/dist/leaflet.draw.css'

解释下，这个文件路径为啥名字是这样的，是因为执行cnpm install leaflet-draw命令 之后，

你项目的node_modules文件夹内就装进去了leaflet.draw的插件，装这个插件的文件夹叫[email protected]@leaflet-draw

所以这个插件最终路径是放在node_modules文件夹下的[email protected]@leaflet-draw文件夹里面的

在之前的templates文件中css部分写入

.sr-only {
    display: none;
  }

　　

转载于:https://www.cnblogs.com/yingyigongzi/p/10768226.html