Vue leaflet 使用vue2leaflet

在Vue中直接使用leaflet也可以，但是用vue2leaflet更加方便，直接用组件化的方式来加载marker，control等。
先安装：

npm install vue2-leaflet leaflet --save

然后再引入CSS，设置图标(如果不设置图标，marker无法正常显示，不引人css会导致leaflet地图显示错乱)

import 'leaflet/dist/leaflet.css'

import L from "leaflet";

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

然后再直接在vue组件中使用

<template>
  <div class="container">
   
    <l-map style="width: 100%; height: 100%;" :zoom="zoom" :center="center">
      <l-tile-layer :url="tile1" :attribution="attribution1"></l-tile-layer>
      <l-tile-layer :url="tile2" :attribution="attribution2"></l-tile-layer>
      <l-marker :lat-lng="marker">
        <l-popup :content="text"></l-popup>
      </l-marker>
    </l-map>
    <div class="search-tool">
      <el-input v-model="no" placeholder="编号搜索"></el-input>
      <el-checkbox v-model="onlyException" style="margin-left: 5px">只显示异常</el-checkbox>
      <el-button icon="el-icon-search" round style="margin-left: 5px"></el-button>
    </div>

    <div class="operations">
      <el-button>围栏设置</el-button>
    </div>
  </div>
</template>

<script>

  import {LMap, LTileLayer, LMarker, LPopup} from 'vue2-leaflet';
  import L from "leaflet";

  export default {
    data: () => {
      return {
        no: "",
        onlyException: false,
        center: L.latLng(33.413220, 110.219482),
        zoom: 13,
        tile1: "http://t3.tianditu.gov.cn/DataServer?T=vec_w&tk=token&x={x}&y={y}&l={z}",
        attribution1: "xxxxx",
        tile2: "http://t3.tianditu.gov.cn/DataServer?T=cva_w&tk=token&x={x}&y={y}&l={z}",
        attribution2: "xxxxx",
        marker: L.latLng(33.413220, 110.219482),
        text: "sdsd"
      }
    },
    mounted() {
     
    },
    methods: {
     
    },
    components: {LMap, LTileLayer, LMarker, LPopup}
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .search-tool {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2012;
    display: flex;
    align-items: center;
    background-color: azure;
    padding: 5px;
  }

  .operations {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2012;
    padding: 5px;
    background-color: azure;
  }
</style>

注意瓦片地图的地址根据自己的地图来源和格式填写。
附：vue2leaflet的官方地址https://korigan.github.io/Vue2Leaflet/#/