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;

  }

巴特西

VUE2 项目引入 leaflet.draw全过程

最新文章

热门文章

巴特西

VUE2 项目 引入 leaflet.draw全过程

最新文章

热门文章

VUE2 项目引入 leaflet.draw全过程