一些关于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])
},