利用Leaflet在vue中加载天地图（一）基础使用、marker标记、geojson行政划分vue项目利用leafle

前言

vue项目中要使用到天地图，但是找了好久还是没有找到简单明了的教程，最后结合网上关于leaflet的组件（因为组件的写法太复杂，进行参考并自行修改了一波）），终于解决了，记录一下，日后有需要的时候可以方便查找。

参考组件：Leaflet.ChineseTmsProviders：npm.taobao.org/package/lea…

一、加载

加载Leaflet依赖

npm install leaflet --save

引入Leaflet依赖

import L from 'leaflet'
require('leaflet/dist/leaflet.css')

引入天地图底图

import Provider from './chinatmsproviders' // 前往我的GitHub地址自行下载

chinatmsproviders.js文件基于参考组件进行了修改，可以任意选择引用地图，我这边引入了天地图、高德、谷歌等，使用的时候写名相应的地图名称即可

使用天地图

1、dom中添加地图：注意，要显示出地图，要确定地图的div存在，即宽高已说明

<div id="myMap" class="map-box"></div>

2、在mounted中挂载插件，methods中添加地图

一定要在mounted中挂在和添加地图，或者在created中使用nextTick回调函数，确保dom选然后再进行地图相关操作。

mounted(){
  Provider(L) // 挂载插件
  this.getMap() // 先挂载了才能进行地图加载
},
methods:{
    getMap(){
        let myCenter = new L.LatLng(30.42,120.30) // 设置地图中心
        let map = L.map('myMap',{
            center: myCenter,
            zoom: 9
        })
        L.tileLayer.chinaProvider('TianDiTu.Normal.Map',{maxZoom:18,minZoom:5,key:this.mapKey}).addTo(map);
        L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion',{maxZoom:18,minZoom:5,key:this.mapKey}).addTo(map); // 设置地图图层，可以按需引入；this.mapKey是自己的天地图key值
    }
}

地图就加载出来了

二、地图标记

地图标记很简单，一个添加 addLayer() ，一个清空 removeLayer()

data () {
    return {
      mapKey:'', //你的key
      marker: [],
      mapData: [
        {name:'标记1',tips:'这是标记1',lat:30.16, lng:120.53},
        {name:'标记2',tips:'这是标记2',lat:30.40, lng:120.26},
        {name:'标记3',tips:'这是标记3',lat:30.04, lng:120.41},
        {name:'标记4',tips:'这是标记4',lat:30.03, lng:120.85},
        {name:'标记5',tips:'这是标记5',lat:30.18, lng:120.45},
        {name:'标记6',tips:'这是标记6',lat:30.46, lng:120.24},
      ]
    }
},
methods:{
    getMap(){
        ……
        this.getPointer(map)
    },
    getPointer(map){
      let _this = this // 防止变量冲突
      if(this.marker){
          this.marker.map(res=>{
              map.removeLayer(res) // 清空标记
          })
      }
      this.mapData.map((res,index)=>{
          let marker = L.marker([res.lat,res.lng]).addTo(map); // 设置标记经纬度
          map.addLayer(marker) // 添加标记
          marker.setIcon(L.icon({   // 标记配置-详见leaflet官网
              iconUrl: require('./icon.png'), // 使用require加载标记图
              iconSize: [20,25],
          }))
          if(index == 0){
            marker.bindPopup(res.tips).openPopup() // 默认展开标记点击弹窗
            marker.bindTooltip(res.name).openTooltip(); //默认展开tooltip
          }else{
            marker.bindPopup(res.tips) // 标记点击弹窗
            marker.bindTooltip(res.name) //标记悬浮弹窗
          }
          // 自定义其他事件
          marker.on('click', ()=>{
            console.log(res.name+'标记的可自定义点击事件');
          });
          this.marker.push(marker) // 保存标记，便于清空
      })
    }
}

效果图

三、划分行政区

若要在地图上进行行政划分，使用geojson即可 1、在网上找到所要划分的行政区域的geojson（小白直接搜索：geojson下载，这是个固定格式的文件，不同城市的不同geo，不是自己写的方法啥的……） 2、直接引用即可

import geoJson from './geojson' // 引入

getMap(){
    ……
    L.geoJson(geoJson).addTo(map) // 一句话就行了
}