一些關(guān)于leaflet地圖比較基礎(chǔ)的知識(shí)代碼

注意map這個(gè)div寬高一定要給的，天地圖key可以去天地圖官網(wǎng)申請(qǐng)

<template><div><div id="map" style="width：1200px; height:800px "></div></div> </template> <script> //引入一些leafelt相關(guān)文件 import L from 'leaflet' import 'leaflet/dist/leaflet.css' //關(guān)鍵，不引入會(huì)錯(cuò)位 import LChinaTilelayer from 'vue2-leaflet-chinatilelayer' //關(guān)鍵， 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', {//衛(wèi)星圖谷歌id: 'layer_tiandi',detectRetina: true,zIndex: 3,maxZoom: 21,minZoom: 19})var yxmap2 = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {//衛(wèi)星圖天地id: 'layer_tiandi',detectRetina: true,zIndex: 4,maxZoom: 18,minZoom: 2,key: '天地圖key'})var yxmap_group = L.layerGroup([yxmap2, yxmap1]) //衛(wèi)星圖天地+谷歌創(chuàng)建為一個(gè)圖層組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', {//標(biāo)注天地id: 'layer_tiandi',detectRetina: true,zIndex: 3,maxZoom: 21,minZoom: 5,key: '天地圖key'})//衛(wèi)星影像地圖，矢量地圖var baseMaps = {影像地圖: yxmap_group,矢量地圖: slmap}var ygMaps = {標(biāo)注: 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標(biāo)識(shí)})L.control.layers(baseMaps, ygMaps).addTo(this.map) //右上角的切換地圖this.map.setVies(p1,12) //初始化地圖中心經(jīng)緯度，縮放級(jí)別}, } </script>

leaflet位置跳轉(zhuǎn)動(dòng)態(tài)效果

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

總結(jié)

以上是生活随笔為你收集整理的Leaflet地图初始化地图（谷歌+天地图混合图层）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。