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@1.0.4

接着: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);

   this.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;
  }

  

posted @ 2019-04-25 14:21  阴翳公子  阅读(3350)  评论(0编辑  收藏  举报