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 = thisvar 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])},

总结

以上是生活随笔为你收集整理的Leaflet地图初始化地图（谷歌+天地图混合图层）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。