Leaflet地图初始化地图（谷歌+天地图混合图层）

一些关于leaflet地图比较基础的知识代码

注意map这个div宽高一定要给的，天地图key可以去天地图官网申请

<template>
  <div>
    <div id="map" style="width：1200px; height:800px "></div>
  </div>
</template>
<script>
//引入一些leafelt相关文件
import L from 'leaflet'
import 'leaflet/dist/leaflet.css' //关键，不引入会错位
import LChinaTilelayer from 'vue2-leaflet-chinatilelayer' //关键，
require('@/utils/Leaflet.fullscreen.js') //全屏
import 'leaflet-easybutton'
import 'leaflet.pm' //leafletmp插件
import 'leaflet.pm/dist/leaflet.pm.css'
import axios from 'axios'

methods:{
    initMap() {
      var that = this
      var p1 = [39.90553, 116.391305] //天安门
      var yxmap1 = L.tileLayer.chinaProvider('Google.Satellite.Map', {
        //卫星图谷歌
        id: 'layer_tiandi',
        detectRetina: true,
        zIndex: 3,
        maxZoom: 21,
        minZoom: 19
      })
      var yxmap2 = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
        //卫星图天地
        id: 'layer_tiandi',
        detectRetina: true,
        zIndex: 4,
        maxZoom: 18,
        minZoom: 2,
        key: '天地图key'
      })
      var yxmap_group = L.layerGroup([yxmap2, yxmap1]) //卫星图天地+谷歌创建为一个图层组
      var slmap = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
        //矢量图天地
        id: 'layer_tiandi2',
        detectRetina: true,
        zIndex: 3,
        maxZoom: 21,
        minZoom: 2,
        key: '天地图key'
      })
      var bzmap = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
        //标注天地
        id: 'layer_tiandi',
        detectRetina: true,
        zIndex: 3,
        maxZoom: 21,
        minZoom: 5,
        key: '天地图key'
      })


      //卫星影像地图，矢量地图
      var baseMaps = {
        影像地图: yxmap_group,
        矢量地图: slmap
      }
      var ygMaps = {
        标注: bzmap
      }

      this.map = L.map('map', {
        center: p1,
        zoom: 9,
        layers: yxmap_group,
        zoomControl: false,
        attributionControl: true,
        dragging: true,
        touchZoom: true,
        scrollWheelZoom: true,
        doubleClickZoom: true,
        boxZoom: true,
        tap: true,
        keyboard: true,
        attributionControl: false // 右下角leaflet标识
      })
      L.control.layers(baseMaps, ygMaps).addTo(this.map) //右上角的切换地图
       this.map.setVies(p1,12)                     //初始化地图中心经纬度，缩放级别
    },
}
</script>

leaflet位置跳转动态效果

    leafeltFly() { //fly效果
      this.map.flyTo([39.61103, 108.46267])
    },