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

<template>
  <div class="map"></div>
</template>
 
<script>
import * as Vue2Leaflet from 'vue2-leaflet';
//import { LMap, LTileLayer, LMarker, LPopup, LTooltip,LFeatureGroup } from 'vue2-leaflet';
import LeafletDraw from '_leaflet-draw@1.0.4@leaflet-draw'
 
export default {
  name: 'testMap',
  components: {
    // LMap,
    // LTileLayer,
    // LMarker,
    // LPopup,
    // LTooltip,
    // LFeatureGroup
  },
  data () {
    return {
     map:null,
     normal:null,
     stat:null,
    };
  },
  methods: {
 
  },
  mounted() {
    this.map=L.map(this.$el,{
      drawControl: true
    }).setView([31.87, 120.55],8);
    L.tileLayer('http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    {
        attribution: '高德'
    }
    ).addTo(this.map);
    var drawnItems = new L.FeatureGroup();
    this.map.addLayer(drawnItems);
     var drawControl = new L.Control.Draw({
         edit: {
             featureGroup: drawnItems
         }
     });
    this.map.addControl(drawControl);

　　　map.on(L.Draw.Event.CREATED, function (event) {
　　　var layer = event.layer;

　　　drawnItems.addLayer(layer);
　　　});

  }
};
</script>
 
<style scoped>
.map{
  width:100%;
  height:calc(100vh);
}
.sr-only {
    display: none;
  }
</style>

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

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

import '_leaflet-draw@1.0.4@leaflet-draw/dist/leaflet.draw.css'

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

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

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

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

.sr-only {
    display: none;
  }