一、leaflet项目中使用
1. 安装并引入
安装 npm install leaflet -S,然后main.js全局设置
import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
delete L.Icon.Default.prototype._getIconUrl
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')
})
2. 初始化地图
引入leaflet : import L from ‘leaflet’
this.map = L.map('map',{
center: [19.15, 110.49], // 地图中心
zoom: 17, // 缩放比列
zoomControl: false, // 禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false // 移除右下角leaflet标识
});
3. 引入图层
L.tileLayer(
'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
).addTo(this.map);
4. 初始化代码
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
import L from 'leaflet'
export default {
data() {
return {
map: "",
layerDom: null
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
this.map = L.map("map", {
center: [19.15, 110.49], // 默认的地图中心点
minZoom: 1, // 最小缩放级别
maxZoom: 17, // 最大缩放级别
zoom: 17, // 缩放比列
zoomControl: false, // 禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false // 移除右下角leaflet标识
});
this.layerDom = L.tileLayer(
"http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
).addTo(this.map);
// this.map.removeLayer(this.layerDom) // 移除地图图层
}
}
};
</script>
<style lang="scss" scoped>
#map {
width: 100%;
height: 100vh;
}
</style>
二、地图点线面绘制、删除
点位的绘制
// 1. 定义保存点位的数组变量
pointMarkerList: []
// 2. 绘制点位
addMarker() {
// 资源下图
this.removeMarkerLin()
// 点击地图绘制点位
this.map.once('click', e => {
// 点位上图,数组保存
this.pointMarkerList = []
const marker = L.marker([e.latlng.lat, e.latlng.lng], { id: this.videoSearchID }).addTo(this.mixMap)
this.pointMarkerList.push(marker)
}
点位的删除
removeMarkerLin(){
this.pointMarkerList.forEach(item => {
item.remove()
})
this.pointMarkerList = []
}
线的绘制
// 1. 定义保存线的相关变量
markerList: [], // 绘制过程和最终存的点
addLineArr: [], // 绘制过程中存取的线
lineList: [] // 最终存的线的数
// 2. 绘制
createLine() {
this.removeLine()
this.$message.success('请在地图上进行路线打点,双击结束打点')
this.map.once('click', e => {
this.addLineArr.push([e.latlng.lat, e.latlng.lng])
const marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(this.map)
this.markerList.push(marker)
this.map.on('click', e => {
this.addLineArr.push([e.latlng.lat, e.latlng.lng])
// 绘点
const marker = L.marker([e.latlng.lat, e.latlng.lng], { icon: this.mixMarkerPoint }).addTo(this.map)
this.markerList.push(marker)
// 绘线
const line = L.polyline(this.addLineArr, { color: '#fc6a00', dashArray: '5,10' }).addTo(this.map)
this.lineList.push(line)
})
this.map.once('dblclick', e => {
this.addLineArr.push([e.latlng.lat, e.latlng.lng])
// 绘点
const marker = L.marker([e.latlng.lat, e.latlng.lng], { icon: this.mixEndPoint }).addTo(this.map)
this.markerList.push(marker)
// 绘线
const line = L.polyline(this.addLineArr, { color: '#fc6a00', dashArray: '5,10' }).addTo(this.map)
this.lineList.push(line)
// 结束绘制
this.map.off('click')
})
})
}
线的删除
removeLine(){
this.markerList.forEach(item => {
this.map.removeLayer(item)
})
this.lineList.forEach(item => {
this.map.removeLayer(item)
})
this.addLineArr = []
this.markerList = []
this.lineList = []
}
面的绘制
// 1. 定义保存面的相关变量
points: [], // 画的过程中的点
lines: {}, // 画的过程中生成的多边形
tempLines: {}, // 鼠标移动中生成的多边形(实际是一条线段)
polygonList: {}, // 双击结束生成多边形
facelines: [], // 存储画的多边形
facetempLines: [], // 存储移动的多边形
facepolygonList: [], // 存储结束生成的多边形
// 2. 绘制
createFace() {
this.removePolygon()
this.$message.success('请在地图绘制多边形,双击结束自动生成')
this.lines = L.polyline([], { color: '#fc6a00', fillColor: '#fc6a00', fillOpacity: 0.2 })
this.tempLines = L.polyline([], { color: '#fc6a00', fillColor: '#fc6a00', fillOpacity: 0.2 })
this.map.addLayer(this.lines)
this.map.addLayer(this.tempLines)
this.map.on('click', e => {
this.points.push([e.latlng.lat, e.latlng.lng])
this.lines.addLatLng(e.latlng)
this.map.addLayer(this.lines)
this.facelines.push(this.lines)
})
this.map.on('mousemove', e => {
if (this.points.length > 0) {
this.tempLines.setLatLngs([this.points[this.points.length - 1], [e.latlng.lat, e.latlng.lng]])
this.map.addLayer(this.tempLines)
this.facetempLines.push(this.tempLines)
}
})
this.map.on('dblclick', e => {
this.polygonList = L.polygon([this.points], {
color: '#fc6a00',
fillColor: '#fc6a00',
fillOpacity: 0.2,
id: this.videoSearchID
}).addTo(this.map)
this.map.addLayer(this.polygonList)
this.facepolygonList.push(this.polygonList)
this.points = []
this.lines.setLatLngs([])
this.map.off('click')
})
}
面的删除
removePolygon(){
this.points.forEach(item => {
this.map.removeLayer(item)
})
this.facelines.forEach(item => {
this.map.removeLayer(item)
})
this.facetempLines.forEach(item => {
this.map.removeLayer(item)
})
this.facepolygonList.forEach(item => {
this.map.removeLayer(item)
})
this.points = []
this.facelines = []
this.facetempLines = []
this.facepolygonList = []
}