vue+leaflet笔记之地图量测

本文介绍了Web端使用Leaflet开发库进行距离量测的一种方法 (底图来源:天地图)，结合leaflet-measure-path插件能够快速的实现地图量测功能。显示效果如下图所示。

---

开发环境

Vue开发库：3.2.37 & Leaflet开发库：1.9.3

Leaflet主要插件：leaflet-measure-path

---

代码简介

插件简介与安装

leaflet-measure-path是一个在路径的上显示测量结果的插件(目前支持线、面和圆圈)，优点是简单易用，缺点是线要素的长度信息标注在最后一个点的位置觉得不太合理，测量精度的话勉强够用。

官方文档 https://github.com/ProminentEdge/leaflet-measure-path

# 插件安装
npm i leaflet-measure-path
# 插件安装(国内镜像,速度较快)
npm --registry https://registry.npm.taobao.org install leaflet-measure-path
# 引入地图量测插件 leaflet-measure-path
import 'leaflet-measure-path/leaflet-measure-path.css'
import 'leaflet-measure-path/leaflet-measure-path.js'

使用简介

图形量测

创建一些基础图形，然后利用leaflet-measure-path中的方法和属性，对图形进行量测，效果如下图所示 。

// 创建一个矢量面,并显示多边形的测量值
let polygon = L.polygon([[57.69, 11.89], [57.697, 11.88], [57.71, 11.89], [57.71, 11.91], [57.69, 11.91]], { showMeasurements: true }).addTo(map);
// 创建一个矢量面,当光标悬停在多边形上时,显示测量值的多边形
let polygonWithHover = L.polygon([[57.668, 11.89], [57.675, 11.88], [57.688, 11.89], [57.688, 11.91], [57.668, 11.91]], { showMeasurements: true, measurementOptions: { showOnHover: true } }).addTo(map);
// 创建一条折线,并显示测量值(对测量值格式化) 
L.polyline([[57.67, 11.85], [57.677, 11.86], [57.68, 11.85], [57.69, 11.86],],{showMeasurements: true, color: 'green', measurementOptions: {showTotalDistance:false,formatDistance: function valFormat(val) {// 测量值保留一位小数return '测量值:' + val.toFixed(1)}}}).addTo(map);
// 创建一个圆,并显示测量值
let circle = L.circle([57.699, 11.86], {color: 'red',fillColor: '#f03',fillOpacity: 0.5,radius: 300,showMeasurements: true,
}).addTo(map);

此外，measurementOptions还提供了几个别的属性：

属性	默认值	说明	备注
showOnHover: Boolean	false	为true时，当用户将光标悬停在图形上时，测量值才会显示
showTotalDistance: Boolean	true	为false时，则不会显示多段线的总长度
minDistance: Number	30	线段测量时，要素中的线段必须具有的最小长度	实测，不生效
formatDistance: Function	/	覆盖内置函数，该函数以米为单位格式化地图中显示的字符串的距离	对显示测量值格式化
formatArea: Function	/	覆盖内置函数，该函数将面积（平方米）格式化为地图中显示的字符串	对显示测量值格式化

动态量测

在地图上动态绘制线或面，进行长度或面积的量测。

详细源码(Vue3)

源代码下载地址 链接：https://pan.baidu.com/s/1axmOSj3cc8ve26_aODISeg?pwd=GIS6
提取码：GIS6

<template><div class="app-contain"><!-- leaflet 地图容器 --><div id="myMap"></div><div class="controls"><el-button color="#626aef" @click="handMeasureDistance()">距离量算</el-button><el-button color="#626aef" @click="handMeasureArea()">面积量算</el-button><el-button color="#626aef" @click="handMeasureClear()">清空</el-button></div></div>
</template><script setup>
// 引入本地标记图片
import deleteIconUrl from '/@/assets/images/deleteIcon.png'
// 引入样式
import L from 'leaflet';
import 'leaflet/dist/leaflet.css'// 鼠标提示控件
import './store/MouseTips'
import './store/MouseTips.css'
// 引入地图量测插件 leaflet-measure-path
import 'leaflet-measure-path/leaflet-measure-path.css'
import 'leaflet-measure-path/leaflet-measure-path.js'
// 标记点
let deleteIcon = L.icon({iconUrl: deleteIconUrl,iconSize: [14, 14], // 图标大小iconAnchor: [7, 7], // 图标偏移量，否则无法居住显示
});
import { onMounted } from 'vue'
// 天地图TK
let tdtKey = 'YOURS_TK'
// 地图
let map = null;
// 创建鼠标提示控件
let mouseTips = L.control.mouseTips({show: true,message: '鼠标单击左键加点，双击结束'
});
// 距离测量方法
let distanceMeasure = {points: [],color: "red",layers: L.layerGroup(),polyline: null,polylineGroup: [],marker: null,markerGroup: [],init: function () {distanceMeasure.points = [];distanceMeasure.polyline = null;distanceMeasure.marker = null;map.on('click', distanceMeasure.click).on('dblclick', distanceMeasure.dblclick);},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: distanceMeasure.color });distanceMeasure.polyline.addTo(distanceMeasure.layers);distanceMeasure.layers.addTo(map);distanceMeasure.points.pop();},dblclick: function (e) { // 双击结束// 移除鼠标绘制提示mouseTips.hide()distanceMeasure.polyline.addTo(distanceMeasure.layers);distanceMeasure.polylineGroup.push(distanceMeasure.polyline)map.off('click', distanceMeasure.click).off('mousemove', distanceMeasure.mousemove).off('dblclick', distanceMeasure.dblclick);},destory: function () {if (distanceMeasure.polyline) {// map.removeLayer(distanceMeasure.polyline);distanceMeasure.polylineGroup.forEach(element => {map.removeLayer(element);});}if (distanceMeasure.marker) {// distanceMeasure.marker.remove();distanceMeasure.markerGroup.forEach(element => {element.remove()})}}
}
// 面积测量方法
let areaMeasure = {points: [],color: "red",layers: L.layerGroup(),polygon: null,polygonGroup: [],marker: null,markerGroup: [],init: function () {areaMeasure.points = [];areaMeasure.polygon = null;areaMeasure.marker = null;map.on('click', areaMeasure.click).on('dblclick', areaMeasure.dblclick);},close: function (latlng) {areaMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) {if (areaMeasure.polygon)map.removeLayer(areaMeasure.polygon);if (areaMeasure.marker)areaMeasure.marker.remove();});areaMeasure.markerGroup.push(areaMeasure.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: areaMeasure.color });areaMeasure.polygon.addTo(areaMeasure.layers);areaMeasure.layers.addTo(map);areaMeasure.points.pop();},dblclick: function (e) { // 双击结束// 移除鼠标绘制提示mouseTips.hide()areaMeasure.polygon.addTo(areaMeasure.layers);areaMeasure.polygonGroup.push(areaMeasure.polygon)areaMeasure.close(e.latlng);map.off('click', areaMeasure.click).off('mousemove', areaMeasure.mousemove).off('dblclick', areaMeasure.dblclick);},destory: function () {if (areaMeasure.polygon) {areaMeasure.polygonGroup.forEach(element => {map.removeLayer(element);});}if (areaMeasure.marker) {areaMeasure.markerGroup.forEach(element => {element.remove()})}}
}
// 地图初始化
const initMap = () => {//影像地图const sourceMap = L.tileLayer(`https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}`)// 注记const tiandituText = L.tileLayer(`http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tdtKey}`)const layers = L.layerGroup([sourceMap, tiandituText])map = L.map('myMap', {  //需绑定地图容器div的idattributionControl: false,zoomControl: true, // 显示缩放控件// 最小显示等级minZoom: 1,// 最大显示等级maxZoom: 18,crs: L.CRS.EPSG3857,//设置坐标系类型  EPSG3857伪墨卡托投影scrollWheelZoom: true, //默认开启鼠标滚轮缩放// 限制显示地理范围maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180)),// 限制显示地理范围layers: [layers] // 图层}).setView([30, 120], 6)// 添加比例尺L.control.scale({ maxWidth: 240, metric: true, imperial: false, position: 'bottomleft' }).addTo(map);
}
// 距离量测
const handMeasureDistance = () => {// 鼠标绘制提示mouseTips.addTo(map).show();distanceMeasure.init()
}
// 面积量测
const handMeasureArea = () => {// 鼠标绘制提示mouseTips.addTo(map).show();areaMeasure.init()
}
// 清空量测内容
const handMeasureClear = () => {// 鼠标绘制提示mouseTips.addTo(map).hide();// 销毁测量组件distanceMeasure.destory()areaMeasure.destory()
}
onMounted(() => {initMap()
})
</script><style scoped>
#myMap {width: 94vw;height: 96vh;
}.controls {position: absolute;top: 0px;left: 200px;padding: 15px;z-index: 1000;
}
</style>