效果:
下载安装
在components下新建LMap.vue
这个页面包括可以切换天地图和谷歌地图
代码:
<template>
<div class="container">
<div id="map"></div>
<div class="control" v-show="showControl">
<div class="control-button" @click="zoomIn">
<i class="el-icon-plus"></i>
</div>
<div class="control-button" @click="zoomOut">
<i class="el-icon-minus"></i>
</div>
<div class="control-button" @click="fullScreen">
<i class="el-icon-full-screen"></i>
</div>
</div>
</div>
</template>
<script>
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
export default{
props:{
showControl:{ //定义一个属性,用于判断是否显示右侧控制键
type:Boolean, //定义属性类型
default: true //属性的默认值
}
},
data(){
return{
isSupport: false,
isFullScreen: false,
map: null,
username: localStorage.getItem("userId"),
mapResourceList: [// 有切图的账户
"35"
],
maxZoom: 20,
mapLayer: {
name: '天地图',
layers: {
'天地图': [
L.tileLayer("http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=ab8ff1ae1ca029103e4dc130b366ce26", {
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
}),
L.tileLayer("http://t1.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=ab8ff1ae1ca029103e4dc130b366ce26", {
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
})
],
'谷歌地图': [
L.tileLayer("https://so.wo-123.cn/maps/vt?lyrs=y&gl=cn&x={x}&y={y}&z={z}", {
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
})
]
},
thisLayers: []
}
}
},
mounted() {
this.isSupport = document.fullscreenEnabled;
this.initMap();
// 如果当前账户有航拍高清切图,则在地图上加载切图
if(-1 != this.mapResourceList.indexOf(this.username)){
this.mapLayer.layers['天地图'].push(
L.tileLayer(`http://******/mapResources/gaoqing/******/{z}/{x}/{y}.png`, {
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]})
);
}
//注册监听,监听是否全屏
document.addEventListener("fullscreenchange", this.screenchange , true);
let that = this;
//注册监听,监听F11
document.addEventListener("keydown", function(e){
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 122) {
//捕捉F11键盘动作
e.preventDefault(); //阻止F11默认动作
that.fullScreen();
}
} , true);
},
methods: {
initMap() {
this.map = L.map("map", {
center: [32.340655, 118.85065], // 地图中心
zoom: 10, //缩放比列
minZoom: 1,
maxZoom: this.maxZoom,
zoomControl: false, //禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false, // 移除右下角leaflet标识
});
let layerName = this.mapLayer.name;
for(let i=0; i<this.mapLayer.layers[layerName].length; i++){
this.mapLayer.layers[layerName][i].options.maxZoom = this.maxZoom;
this.mapLayer.layers[layerName][i].addTo(this.map);
this.mapLayer.thisLayers.push(this.mapLayer.layers[layerName][i]);
}
},
zoomIn(){
this.map.zoomIn();
},
zoomOut(){
map.value.zoomOut();
},
screenchange(){
if (this.isSupport) {
document.fullscreenElement ? this.isFullScreen = true : this.isFullScreen = false
}
},
fullScreen(){
if (this.isSupport) {
if (document.fullscreenElement) {
//document.exitFullscreen()退出全屏模式的方法
document.exitFullscreen();
this.isFullScreen = false;
} else {
//requestFullscreen(),请求全屏的方法
document.documentElement.requestFullscreen();
this.isFullScreen = true;
}
}
}
}
}
</script>
<style lang="css" scoped>
.container {
width: 100%;
height: 100%;
position: relative;
}
#map {
width: 100%;
height: 100%;
}
.control {
background-color: #ffffff;
position: absolute;
right: 1.25rem;
bottom: 40%;
z-index: 999;
border-radius: .125rem;
font-size: 1.375rem;
color: #404040;
}
.control-button {
width: 2.3125rem;
height: 2.3125rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.control-button:nth-child(n+1) {
border-top: .0625rem solid rgba(0,0,0,0.15);
}
</style>
在别的页面引用地图
<template>
<div>
<LMap ref="lmap"></LMap>
</div>
</template>
<script>
import LMap from "../components/LMap.vue";
import * as L from "leaflet";
import * as turf from "@turf/turf";
export default {
components: {
LMap,
},
}
</script>
就这样就可以了
上面那个包含了选择天地图和谷歌地图的切换,下面这个就是简单地图页面
在components下新建LMap.vue
<template>
<div class="container">
<div id="map"></div>
<div class="control">
<div class="control-button" @click="zoomIn">
<i class="el-icon-plus"></i>
</div>
<div class="control-button" @click="zoomOut">
<i class="el-icon-minus"></i>
</div>
<div class="control-button" @click="fullScreen">
<i class="el-icon-full-screen"></i>
</div>
</div>
</div>
</template>
<script >
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";
export default{
data(){
return{
isSupport:false,
map: null,
maxZoom: 20,
username: localStorage.getItem("userId"),
mapResourceList: [// 有切图的账户
"35"
]
}
},
mounted() {
this.isSupport = document.fullscreenEnabled;
this.initMap();
// 如果当前账户有航拍高清切图,则在地图上加载切图
if(-1 != this.mapResourceList.indexOf(this.username)){
let layer = L.tileLayer(`http://****/gaoqing/****/{z}/{x}/{y}.png`, {
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]}).addTo(this.map);
layer.options.maxZoom = 20;
}
},
methods: {
initMap() {
this.map = L.map("map", {
center: [32.340655, 118.85065], // 地图中心
zoom: 10, //缩放比列
minZoom: 1,
maxZoom: this.maxZoom,
zoomControl: false, //禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false, // 移除右下角leaflet标识
});
L.tileLayer("http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=ab8ff1ae1ca029103e4dc130b366ce26", {
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
}).addTo(this.map);
L.tileLayer("http://t1.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=ab8ff1ae1ca029103e4dc130b366ce26", {
subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
}).addTo(this.map);
},
fullScreen(){
if (this.isSupport) {
// if (document.fullscreenElement) {
//document.exitFullscreen()退出全屏模式的方法
// } else {
//requestFullscreen(),请求全屏的方法
document.documentElement.requestFullscreen();
this.isSupport =false
}else {
document.exitFullscreen();
this.isSupport =true
}
},
zoomIn() {
this.map.zoomIn();
},
zoomOut() {
this.map.zoomOut();
}
}
}
</script>
<style lang="less" scoped>
.container {
width: 100%;
height: 100%;
position: relative;
}
#map {
width: 100%;
height: 100%;
}
.control {
background-color: #ffffff;
position: absolute;
right: 1.25rem;
bottom: 40%;
z-index: 999;
border-radius: .125rem;
font-size: 1.375rem;
color: #404040;
}
.control-button {
width: 2.3125rem;
height: 2.3125rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.control-button:nth-child(n+1) {
border-top: .0625rem solid rgba(0,0,0,0.15);
}
</style>