1、安装相关依赖
npm install leaflet --save
npm install proj4leaflet esri-leaflet --save
2、引入对象
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e71025c05a3ec952adec8f5495ac28f0.png#pic_center)
import Vue from 'vue'
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";
Vue.config.productionTip = false;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
iconUrl: require("leaflet/dist/images/marker-icon.png"),
shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});
require("proj4");
require("proj4leaflet");
3、自定义地图图层(百度)
3.1 引入地图
var gisUrl = "https://gis.10010.com:8219/dugis-baidu/tile?x={x}&y={y}&z={z}&type=BD09&ApiAuthorization=baidu-8f34e4fabcf34fbdbdf171868337ae35";
var gisMap = L.tileLayer(gisUrl, {
subdomains: "0123456789",
maxZoom: 21,
minZoom: 3,
tms: true,
}),
var baiduCRS = new L.Proj.CRS(
"EPSG:900913",
"+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs",
{
resolutions: (function () {
var level = 20;
var res = [];
res[0] = Math.pow(2, 18);
for (var i = 1; i < level; i++) {
res[i] = Math.pow(2, 18 - i);
}
return res;
})(),
origin: [0, 0],
bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]),
}
);
this.map = L.map("leaflet_map", {
crs: baiduCRS,
center: [23.143262, 113.39896],
zoom: 12,
layers: [gisMap],
zoomControl: false,
});
3.2 地图类型
var normalMapUrl = "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1";
var satelliteMapUrl = "http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46";
var normalMap = L.tileLayer(normalMapUrl, {
subdomains: "0123456789",
maxZoom: 21,
minZoom: 3,
tms: true,
}),
satelliteMap = L.tileLayer(satelliteMapUrl, {
subdomains: '0123456789',
maxZoom: 21,
minZoom: 3,
tms: true
}),
var baseLayers = {
"常规地图": normalMap,
"卫星地图": satelliteMap
}
L.control.layers(baseLayers).addTo(this.map);
3.3 图层
var normalMapUrl = "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
annotionMapUrl = "http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl";
var normalMapOp = L.tileLayer(normalMapUrl, {
subdomains: "0123456789",
maxZoom: 21,
minZoom: 3,
opacity: 0.6,
tms: true,
}),
annotionMap = L.tileLayer(annotionMapUrl, {
subdomains: '0123456789',
maxZoom: 21,
minZoom: 3,
tms: true
});
var overlayLayers = {
"标注": annotionMap,
"半透明": normalMapOp
}
L.control.layers(overlayLayers).addTo(this.map);
3.4 增加控制层级控件
L.control.zoom(
{
zoomInTitle: "放大",
zoomOutTitle: "缩小",
}
).addTo(this.map);
4、组件拆分
<template>
<div>
<div id="leaflet_map" :style="style"></div>
</div>
</template>
<script>
require("proj4");
require("proj4leaflet");
export default {
name: "leafletMap",
props: {
width: {
type: String,
default: "100vw",
},
height: {
type: String,
default: "100vh",
},
top: {
type: String,
default: "0",
},
left: {
type: String,
default: "0",
},
maxZoom: {
type: Number,
default: 21,
},
minZoom: {
type: Number,
default: 3,
}
},
data() {
return {
map: null,
baiduCRS: null,
zoomLevel: 0,
mouseDown: false,
centerPoint: {}
};
},
computed: {
style() {
return
'width:' + this.width +
';height: ' + this.height +
';margin-top:' + this.top +
';margin-left:' + this.left;
}
},
mounted() {
this.addMap();
},
methods: {
getMap() {
return this.map;
},
setEvent() {
this.map.on('mouseup', (e) => {
this.mouseDown = false;
this.zoomLevel = this.map.getZoom();
this.centerPoint = this.map.getCenter()
})
this.map.on('mousedown', (e) => {
this.mouseDown = true;
})
// this.map.on('mousemove', (e) => {
// if(!this.mouseDown) {
// return ;
// }
// console.log(e.latlng);
// })
},
addMap() {
var baiduCRS = new L.Proj.CRS(
"EPSG:900913",
"+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs",
{
resolutions: (function () {
var level = 20;
var res = [];
res[0] = Math.pow(2, 18);
for (var i = 1; i < level; i++) {
res[i] = Math.pow(2, 18 - i);
}
return res;
})(),
origin: [0, 0],
bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]),
}
);
var normalMapUrl =
"http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
satelliteMapUrl =
"http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46",
annotionMapUrl =
"http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl",
gisUrl =
"https://gis.10010.com:8219/dugis-baidu/tile?x={x}&y={y}&z={z}&type=BD09&ApiAuthorization=baidu-8f34e4fabcf34fbdbdf171868337ae35";
var normalMap = L.tileLayer(normalMapUrl, {
subdomains: "0123456789",
maxZoom: this.maxZoom,
minZoom: this.minZoom,
tms: true,
}),
gisMap = L.tileLayer(gisUrl, {
subdomains: "0123456789",
maxZoom: this.maxZoom,
minZoom: this.minZoom,
tms: true,
}),
normalMapOp = L.tileLayer(normalMapUrl, {
subdomains: "0123456789",
maxZoom: this.maxZoom,
minZoom: this.minZoom,
opacity: 0.6,
tms: true,
}),
satelliteMap = L.tileLayer(satelliteMapUrl, {
subdomains: '0123456789',
maxZoom: this.maxZoom,
minZoom: this.minZoom,
tms: true
}),
annotionMap = L.tileLayer(annotionMapUrl, {
subdomains: '0123456789',
maxZoom: this.maxZoom,
minZoom: this.minZoom,
tms: true
});
var baseLayers = {
"地图": normalMap,
"影像": satelliteMap
}
var overlayLayers = {
"标注": annotionMap,
"半透明": normalMapOp
}
this.map = L.map("grid_map", {
crs: baiduCRS,
center: [23.143262, 113.39896],
layers: [gisMap],
zoomControl: false,
});
L.control.layers(baseLayers, overlayLayers).addTo(this.map);
L.control
.zoom({
zoomInTitle: "放大",
zoomOutTitle: "缩小",
})
.addTo(this.map);
this.setEvent();
},
},
};
</script>
<style lang="less">
#leaflet_map {
position: fixed;
top: 0;
}
</style>