leaftlet官方文档 https://leafletjs.com/reference.html
1.安装
npm install leaflet --s
npm i leaflet-draw --s
2.利用leaftlet引入地图
import * as L from 'leaflet'
import 'leaflet-draw'
初始化地图
<template>
<div class="left-let-page">
<div id="map"></div>
</div>
</template>
<script>
export default {
data () {
return {
map: null
}
},
mounted () {
this.initDate()
},
methods: {
initDate () {
let map = L.map("map", {
minZoom: 3,
maxZoom: 14,
center: [40.02404009136253, 116.50641060224784], // 地图中心
zoom: 14, //缩放比列
zoomControl: false, //禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false, // 移除右下角leaflet标识
crs: L.CRS.EPSG3857
});
this.map = map; //data上需要挂载
window.map = map;
L.tileLayer(
"http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
).addTo(map);
}
}
}
</script>
<style scoped lang='less'>
.left-let-page {
#map {
width: 100%;
height: 100vh;
margin: auto;
}
}
</style>
3.引入百度地图
首先引入两个自定地图坐标系proj4leaflet+proj4转换插件
安装
npm install proj4 --save
npm install proj4leaflet --save
在assets目录下新建文件夹并创建tileLayer.baidu.js，编写百度地图底图调用插件代码：
/*
*tileLayer.baidu.js
*/
// 引用
// require('proj4')
// require('proj4leaflet')
import 'proj4';
import 'proj4leaflet';
import * as L from 'leaflet';
// const titleD = 'http://127.0.0.1:8886/{z}/{x}/{y}.png'
// const titleD = 'https://api.map.baidu.com/getscript?v=3.0&ak=7pQwLpGQZr0SdQ3vlDp8gu7ExEqjKRG1'
const titleD = 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles='
var urlPath = titleD;
//请引入 proj4.js 和 proj4leaflet.js
L.CRS.Baidu = 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 () {
let level = 19
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])
});
L.tileLayer.baidu = function (option) {
option = option || {};
var layer;
var subdomains = '0123456789';
switch (option.layer) {
//单图层
case "vec":
default:
layer = L.tileLayer(urlPath, {
name: option.name, subdomains: subdomains, tms: true
});
// layer = L.tileLayer('http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=' + (option.bigfont ? 'ph' : 'pl') + '&scaler=1&p=1', {
// name: option.name, subdomains: subdomains, tms: true
// });
break;
case "img_d":
layer = L.tileLayer('http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46', {
name: option.name, subdomains: subdomains, tms: true
});
break;
case "img_z":
layer = L.tileLayer('http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=' + (option.bigfont ? 'sh' : 'sl') + '&v=020', {
name: option.name, subdomains: subdomains, tms: true
});
break;
case "custom"://Custom 各种自定义样式
//可选值：dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish
option.customid = option.customid || 'midnight';
// layer = L.tileLayer('http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=' + option.customid, {
// name: option.name, subdomains: "012", tms: true
// });
layer = L.tileLayer(urlPath, {
name: option.name, subdomains: subdomains, tms: true
});
break;
case "time"://实时路况
var time = new Date().getTime();
layer = L.tileLayer('http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&level={z}&time=' + time + '&label=web2D&v=017', {
name: option.name, subdomains: subdomains, tms: true
});
break;
//合并
case "img":
layer = L.layerGroup([
L.tileLayer.baidu({ name: "底图", layer: 'img_d', bigfont: option.bigfont }),
L.tileLayer.baidu({ name: "注记", layer: 'img_z', bigfont: option.bigfont })
]);
break;
}
return layer;
};
使用百度地图地图
//引用tileLayer.baidu.js
import "@/assets/tileLayer.baidu.js"// 初始化地图
ininMap() {
let map = L.map("map", {
minZoom: 3,
maxZoom: 18,
center: [40.02404009136253, 116.50641060224784], // 地图中心
zoom: 8,
zoomControl: false,
attributionControl: true,
crs: L.CRS.Baidu
});
this.map = map;
L.tileLayer.baidu({ layer: 'vec' }).addTo(map);
},
4.利用leaflet-draw实现地图交互
// 初始化绘制控件
initDrawCtrl() {
var editableLayers =new L.FeatureGroup();
this.map.addLayer(editableLayers);
//初始化绘制控件
this.drawControl = new L.Control.Draw({
position: 'topright',//控件位置 'topleft'(默认), 'topright', 'bottomleft' or 'bottomright'
draw: {
polyline: true,
polygon: true,
rectangle: true,
circle: true,
marker: true,
},
edit:{
featureGroup:editableLayers,
remove:false
}
}).addTo(this.map);// 要添加到 L.map 对象中
// 添加绘制完监听事件
this.map.on(L.Draw.Event.CREATED, this.drawCreatedBack);
// 结束绘制监听
this.map.on(L.Draw.Event.DRAWSTOP, function() {
console.log('结束绘制')
});
},
drawCreatedBack(e) {
// 绘制的图形图层对象
let drawLayer = e.layer;
// 判断当前没有图层组，需先添加
if(!this.drawLayerGrounp) {
//图层组
this.drawLayerGrounp = new L.FeatureGroup();
// 添加
this.map.addLayer(this.drawLayerGrounp);
}
// 添加到图层组
this.drawLayerGrounp.addLayer(drawLayer);
//以下代码为获取框选图形顶点坐标
var locationArray = e.layer.getLatLngs()[0];
let polygonArray = Array();
var midArray = Array();
var firstX = locationArray[0].lat;
var firstY = locationArray[0].lng;
for(var i =0;i<locationArray.length;i++){
var x = locationArray[i].lat;
var y = locationArray[i].lng;
midArray.push(x);
midArray.push(y);
polygonArray.push(midArray);
midArray = Array();
}
midArray.push(firstX);
midArray.push(firstY);
polygonArray.push(midArray);//我们要的就是这个数组
let polygon = L.polygon(polygonArray);
console.log(polygon)
},
5.复现已经绘制好的区域
drawArea(){
var latlngs = [[39.98335556743195,116.38727241416927],[39.98364840496984, 116.42397156518888],[39.95423178384607, 116.42408778347149],[39.95490801733468, 116.37905853264955]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(this.map);
this.map.fitBounds(polygon.getBounds());
}
6.效果展示
效果
网友评论