下載leaflet與leaflet.pm
leaflet 用於根據座標自動繪製等操作,leaflet.pm可實現用戶手動繪製。
leaflet.pm 參考網址:https://www.npmjs.com/package/leaflet.pm
leaflet 參考網址:https://leafletjs.com/reference-1.6.0.html
npm install leaflet.pm
npm install leaflet
引入,在項目main.js中
import 'leaflet/dist/leaflet.css'
// 引入Leaflet對象 掛載到Vue上,便於全局使用,也可以單獨頁面中單獨引用
import * as L from 'leaflet'
import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'
Vue.config.productionTip = false;
Vue.L = Vue.prototype.$L = L
/* leaflet icon */
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'),
})
初始化地圖
初始化
map = L.map('map',{
center: [40.02404009136253, 116.50641060224784], // 地圖中心
zoom: 14, //縮放比列
zoomControl: false, //禁用 + - 按鈕
doubleClickZoom: false, // 禁用雙擊放大
attributionControl: false // 移除右下角leaflet標識
});
引入圖層,可以引入多個圖層
L.tileLayer(
"http://mt0.google.cn/vt/lyrs=y@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga",
).addTo(this.map);
初始化綜合代碼
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: ""
};
},
mounted() {
this.initDate();
},
methods: {
initDate() {
this.map = L.map("map", {
center: [40.02404009136253, 116.50641060224784], // 地圖中心
zoom: 14, //縮放比列
zoomControl: false, //禁用 + - 按鈕
doubleClickZoom: false, // 禁用雙擊放大
attributionControl: false // 移除右下角leaflet標識
});
let name = L.tileLayer(
"http://mt0.google.cn/vt/lyrs=y@160000000&hl=zh-CN&gl=CN&src=app&y={y}&x={x}&z={z}&s=Ga",
).addTo(this.map);
// this.map.removeLayer(name) // 移除圖層
}
}
};
</script>
<style lang="stylus" scoped>
#map {
width: 100%;
height: calc(100vh);
z-index: 1;
}
</style>
添加繪製按鈕功能及獲取對應座標
引入leafle.pm原生組件
this.map.pm.addControls({
position: "topleft",
drawPolygon: false, // 添加繪製多邊形
drawMarker: false, //添加按鈕以繪製標記
drawCircleMarker: false, //添加按鈕以繪製圓形標記
drawPolyline: false, //添加按鈕繪製線條
drawRectangle: true, //添加按鈕繪製矩形
drawCircle: false, // 添加按鈕繪製圓圈
editMode: true, // 添加按鈕編輯多邊形
dragMode: true, // 添加按鈕拖動多邊形
cutPolygon: true, // 添加一個按鈕以刪除圖層裏面的部分內容
removalMode: true // 清除圖層
});
// 設置繪製後的線條顏色等
this.map.pm.setPathOptions({
color: "orange",
fillColor: "green",
fillOpacity: 0.4
});
this.map.pm.setLang('zh'); //設置語言 en, de, it, ru, ro, es, fr, pt_br, zh , nl
綁定自己的按鈕
<!----template>
<template>
<div>
<button class="draw" @click="draw()">繪製</button>
<button class="disDraw" @click="disDraw()">關閉繪製</button>
<div id="map"></div>
</div>
</template>
<!----js>
draw() {
this.map.pm.enableDraw("Polygon", {
snappable: false,
});
// this.map.pm.enableDraw("Marker", { snappable: false });
// this.map.pm.enableDraw("CircleMarker", { snappable: false });
},
disDraw() {
this.map.pm.disableDraw("Polygon");
// this.map.pm.disableDraw('Marker');
// this.map.pm.disableDraw('CircleMarker');
}
<!----style>
.draw {
display: flex;
z-index: 2;
width: 100px;
height: 50px;
position: absolute;
left: 50px;
justify-content: center;
align-items: center;
}
.disDraw {
display: flex;
z-index: 2;
width: 100px;
height: 50px;
position: absolute;
left: 200px;
justify-content: center;
align-items: center;
}
獲取繪製的座標
getlatLngs() {
//pm:drawstart 開始第一個點的時候調用
//pm:drawend 禁止繪製時調用
//pm:create 創建完成時調用
this.map.on("pm:drawstart", e => {
console.log(e, "first");
});
this.map.on("pm:drawend", e => {
console.log(e, "禁止繪製");
});
this.map.on("pm:create", e => {
console.log(e, "繪製完成時調用");
console.log(e.layer._latlngs[0], "繪製座標")
});
},
編輯功能
繪製完成添加可編輯功能
layer爲需要改變的圖層
layer.pm.enable({
allowSelfIntersection: false,
preventMarkerRemoval: false, // 禁止右鍵刪除點
});
監聽編輯事件
layer.on('pm:edit', e => {
console.log(e, "拖動");
console.log(e.target._latlngs[0], "拖動後的座標")
});
layer.on('pm:edit', e => {
console.log(e, "拖動");
console.log(e.target._latlngs[0], "拖動後的座標")
});
layer.on('pm:vertexadded', e =>{
console.log(e, "添加頂點")
});
全局編輯開啓關閉
// 開啓全體編輯按鈕
map.pm.toggleGlobalEditMode();
// 禁用全局編輯按鈕
map.pm.disableGlobalEditMode()
// 全局編輯切換
map.pm.toggleGlobalEditMode()
// 判斷是否全局編輯,有返回值
map.pm.globalEditEnabled()
拖動
map.pm.toggleGlobalDragMode()
// 是否啓用全局拖動模式
alert(map.pm.globalDragModeEnabled())
刪除
map.pm.toggleGlobalRemovalMode();
切割
//開啓
map.pm.Draw.Cut.enable({
allowSelfIntersection: false
});
// 關閉
map.pm.Draw.Cut.disable()
// 切換
map.pm.Draw.Cut.toggle();
// 監聽切割事件
layer.on("pm:cut", e =>{
console.log(e, "切割");
})
後期會把全部源碼上傳到碼雲或CSDN資源