vueleaflet示例实现简单量算工具功能附源码下载
vueleaflet示例实现简单量算工具功能附源码下载
- 运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。
- 运行工具：vscode或者其他工具。
- 配置方式：下载demo源码，vscode打开，然后顺序执行以下命令： （1）下载demo环境依赖包命令：npm i （2）启动demo命令：npm run dev （3）打包demo命令： npm run build:release
示例效果
本篇实现借助了一个插件leaflet-measure-path，插件的下载地址： github.com/ProminentEd… * 核心源码
<template>
<div id="map" ref="mapDiv"></div>
<div style="position: absolute; top: 50px; left: 60px; z-index: 999">
<button type="button" id="areameasure_btn">面积量算</button>
</div>
<div style="position: absolute; top: 50px; left: 160px; z-index: 999">
<button type="button" id="distanceMeasure_btn">距离量算</button>
</div>
<div style="position: absolute; top: 50px; left: 260px; z-index: 999">
<button type="button" id="clear_btn">清空</button>
</div>
<div class="titleContainer center">
<span>vue+leaflet示例:实现简单量算工具功能</span>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import shanchu from "@/assets/shanchu.png";
// const mapDiv = ref(null);
let map = null;
onMounted(() => {
// 待加载的 JS 文件数组
const files = [
"./lib/measure/Leaflet.Editable.js",
"./lib/measure/leaflet-measure-path.js",
];
loadScripts(files, function () {
console.log("All scripts loaded");
initMap();
});
});
const loadScripts = (files, callback) => {
if (files.length === 0) {
callback();
return;
}
const file = files.shift();
const script = document.createElement("script");
script.onload = function () {
loadScripts(files, callback);
};
script.src = file;
document.head.appendChild(script);
};
const initMap = () => {
map = L.map("map");
L.tileLayer(
"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
{ crossOrigin: true }
).addTo(map);
map.setView(L.latLng(22.95186415, 113.90271877), 14); //设置缩放级别及中心点
//面积量算
$("#areameasure_btn").click(function () {
areaMeasure.destory();
areaMeasure.init();
});
//距离量算
$("#distanceMeasure_btn").click(function () {
distanceMeasure.destory();
distanceMeasure.init();
});
//清空
$("#clear_btn").click(function () {
distanceMeasure.destory();
areaMeasure.destory();
});
const deleteIcon = L.icon({
iconUrl: shanchu,
iconSize: [16, 16],
});
// 面积测量方法
const areaMeasure = {
points: [],
//markers:[],
color: "red",
layers: L.layerGroup(),
polygon: null,
marker: null,
init: function () {
areaMeasure.points = [];
areaMeasure.polygon = null;
areaMeasure.marker = null;
map.on("click", areaMeasure.click).on("dblclick", areaMeasure.dblclick);
L.DomUtil.addClass(map._container,'leaflet-cursor-crosshair');
},
close: function (latlng) {
areaMeasure.marker = L.marker(latlng, { icon: deleteIcon })
.addTo(map)
.on("click", function (e) {
//console.log('marker',e);
if (areaMeasure.polygon) map.removeLayer(areaMeasure.polygon);
if (areaMeasure.marker) areaMeasure.marker.remove();
});
//areaMeasure.markers.push(marker);
},
click: function (e) {
map.doubleClickZoom.disable();
// 添加点信息
areaMeasure.points.push(e.latlng);
// 添加面
map.on("mousemove", areaMeasure.mousemove);
},
mousemove: function (e) {
areaMeasure.points.push(e.latlng);
if (areaMeasure.polygon) map.removeLayer(areaMeasure.polygon);
areaMeasure.polygon = L.polygon(areaMeasure.points, {
showMeasurements: true,
color: "red",
});
//areaMeasure.polygon.addTo(map);
areaMeasure.polygon.addTo(areaMeasure.layers);
areaMeasure.layers.addTo(map);
areaMeasure.points.pop();
},
dblclick: function (e) {
// 双击结束
console.log("双击结束", e);
areaMeasure.polygon.addTo(areaMeasure.layers);
areaMeasure.close(e.latlng);
//areaMeasure.polygon.enableEdit();
//map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon);
map
.off("click", areaMeasure.click)
.off("mousemove", areaMeasure.mousemove)
.off("dblclick", areaMeasure.dblclick);
L.DomUtil.removeClass(map._container,'leaflet-cursor-crosshair');
},
destory: function () {
if (areaMeasure.polygon) map.removeLayer(areaMeasure.polygon);
if (areaMeasure.marker) areaMeasure.marker.remove();
L.DomUtil.removeClass(map._container,'leaflet-cursor-crosshair');
},
};
// 距离测量方法
const distanceMeasure = {
points: [],
//markers:[],
color: "red",
layers: L.layerGroup(),
polyline: null,
marker: null,
init: function () {
distanceMeasure.points = [];
distanceMeasure.polyline = null;
distanceMeasure.marker = null;
map
.on("click", distanceMeasure.click)
.on("dblclick", distanceMeasure.dblclick);
L.DomUtil.addClass(map._container,'leaflet-cursor-crosshair');
},
close: function (latlng) {
distanceMeasure.marker = L.marker(latlng, { icon: deleteIcon })
.addTo(map)
.on("click", function (e) {
//console.log('marker',e);
if (distanceMeasure.polyline)
map.removeLayer(distanceMeasure.polyline);
if (distanceMeasure.marker) distanceMeasure.marker.remove();
});
},
click: function (e) {
map.doubleClickZoom.disable();
// 添加点信息
distanceMeasure.points.push(e.latlng);
// 添加线
map.on("mousemove", distanceMeasure.mousemove);
},
mousemove: function (e) {
distanceMeasure.points.push(e.latlng);
if (distanceMeasure.polyline) map.removeLayer(distanceMeasure.polyline);
distanceMeasure.polyline = L.polyline(distanceMeasure.points, {
showMeasurements: true,
color: "red",
});
distanceMeasure.polyline.addTo(distanceMeasure.layers);
distanceMeasure.layers.addTo(map);
distanceMeasure.points.pop();
},
dblclick: function (e) {
// 双击结束
console.log("双击结束", e);
distanceMeasure.polyline.addTo(distanceMeasure.layers);
distanceMeasure.close(e.latlng);
//distanceMeasure.polygon.enableEdit();
//map.on('editable:vertex:drag editable:vertex:deleted', distanceMeasure.polygon.updateMeasurements, distanceMeasure.polygon);
map
.off("click", distanceMeasure.click)
.off("mousemove", distanceMeasure.mousemove)
.off("dblclick", distanceMeasure.dblclick);
L.DomUtil.removeClass(map._container,'leaflet-cursor-crosshair');
},
destory: function () {
if (distanceMeasure.polyline) map.removeLayer(distanceMeasure.polyline);
if (distanceMeasure.marker) distanceMeasure.marker.remove();
L.DomUtil.removeClass(map._container,'leaflet-cursor-crosshair');
},
};
};
</script>
<style scoped>
# vueleaflet示例实现简单量算工具功能附源码下载
width: 100vw;
height: 100vh;
}
.titleContainer {
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.45);
height: 50px;
width: 100vw;
z-index: 999;
font-size: 14px;
color: #fff;
font-size: 28px;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.leaflet-cursor-crosshair {
cursor:crosshair;
}
</style>
