SuperMap iClient for Leaflet+leaflet.polylinemeasure实现leaflet图上距离量测

最新推荐文章于 2024-04-30 16:35:21 发布

巨脸怪

最新推荐文章于 2024-04-30 16:35:21 发布

阅读量1k

点赞数 1

分类专栏： supermap Leaflet 文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_43334519/article/details/128475889

版权

supermap 同时被 2 个专栏收录

11 篇文章 4 订阅

订阅专栏

Leaflet

4 篇文章 0 订阅

订阅专栏

本文是借助leaflet.polylinemeasure插件+SuperMap iClient for Leaflet开发实现leaflet地图中距离量测功能，该插件除了能够测量两点间的距离外还包含了测量点的方位角信息，同时该插件还能对测量点进行增添、删除、移动、继续绘制等操作，具有很强的交互性，除此之外该插件显示的测量线段并不是普通的直线段，而是模拟大圆路径的弧线段（这一点在长距离的测量时较为明显），并且在测量过程中用户可以根据需要切换距离单位。传送门：GitHub、npm。

效果图：

一、插件说明

1.使用方法

鼠标左击“绘制”控件后即可在地图上使用鼠标左键添加需要测量的点位，绘制完成后可以双击鼠标左键或者按下Esc键即可终止本次绘制，如需再次绘制只需重复上述操作。

清除绘制：点击“清除”控件或者按下Esc键。

插入测量点：按住Ctrl键，同时鼠标左击任意两个点之间的箭头即可添加测量点。

删除测量点：按住Shift键，同时鼠标左击需要删除的点即可删除该点。

移动测量点：鼠标左键选中需要移动的点并拖动鼠标即可移动该点。

继续绘制：按住Ctrl键，同时单击某条线段的第一个或最后一个点即可继续绘制该条线段。

2.插件安装

npm i leaflet.polylinemeasure

3.部分配置项及事件说明

//Default options：
  position: "bottomright", //控件在屏幕中的位置，'topright', 'topleft', 'bottomright', 'bottomleft'
  unit: "metres", //初始单位
  showClearControl: true, //是否显示清除控件
  showUnitControl: true, //是否显示更改度量单位的控件
  showBearings: true, //是否显示方位
  clearMeasurementsOnStop: true, //取消选择控件时清除所有测量（当标绘为取消时是否清除图中现有的测量结果）
  bearingTextIn: "In", //入射角标签文字，默认为"In"(这里用“入射角”可能不太合适，其实就是当前点和上一个点的夹角，正北为起始0°)
  bearingTextOut: "Out", //出射角标签文字，默认为"Out"（其实就是当前点和下一个即将绘制的点的方位角）
  measureControlTitleOn: "开始绘制", //要打开控件的提示标签内容
  measureControlTitleOff: "停止绘制", //要关闭控件的提示标签内容
  measureControlLabel: "&#8614", //度量控件的标签符号（无需修改）
  clearControlLabel: "&times", //清除控件的标签符号（无需修改）
  distanceShowSameUnit: false, //如果距离小于1 km/mi/nm，则在工具提示中保持相同的单位(建议设置为“false”)
  unitControlTitle: {
    //要显示在“单位控制”按钮上的标题文本
    text: "更改单位",
    metres: "米",
    landmiles: "英里",
    nauticalmiles: "海里",
  },
  unitControlLabel: {
    //要在“单位控制”按钮和测量标签中显示的单位符号
    metres: "m",
    kilometres: "km",
    feet: "ft",
    landmiles: "mi",
    nauticalmiles: "nm",
  },
  tempLine: {
    // 临时虚线的样式设置
    color: "#68FFFF", // 虚线颜色
    weight: 2, // 线宽
  },
  fixedLine: {
    // 给实线设置样式
    color: "#00F8F6", // 颜色
    weight: 2, // 线宽
  },
  startCircle: {
    // 指示多段线起点的圆标记的样式设置
    color: "#000", // 圆边框的颜色
    weight: 1, //圆边框的宽度
    fillColor: "#0f0", // 圆的填充颜色
    fillOpacity: 1, // 填充圆的不透明度
    radius: 3, // 圆的半径
  },
  intermedCircle: {
    // 指示起点和终点之间点的圆的样式
    color: "#000", // 圆边框的颜色
    weight: 1, // 圆边框的宽度
    fillColor: "#ff0", //  圆的填充颜色
    fillOpacity: 1, // 填充圆的不透明度
    radius: 3, //  圆的半径
  },
  currentCircle: {
    // 在绘制直线期间指示多段线最新点的圆标记的样式设置
    color: "#000",
    weight: 1,
    fillColor: "#f0f",
    fillOpacity: 1,
    radius: 3,
  },
  endCircle: {
    // 终点圆的样式
    color: "#000",
    weight: 1,
    fillColor: "#f00",
    fillOpacity: 1,
    radius: 3,
  }

//Events：
map.on("polylinemeasure:toogle", (e) => {
  console.log("toogle", e);
});
map.on("polylinemeasure:start", (currentLine) => {
  console.log("start", currentLine);
}); //开始绘制时执行
map.on("polylinemeasure:resume", (currentLine) => {
  console.log("resume", currentLine);
}); //继续绘制时执行
map.on("polylinemeasure:finish", (currentLine) => {
  console.log("finish", currentLine);
}); //结束绘制时执行
map.on("polylinemeasure:change", (currentLine) => {
  console.log("change", currentLine);
}); //绘制发生变化时执行
map.on("polylinemeasure:clear", (e) => {
  console.log("clear", e);
}); //清除测量结果时执行
map.on("polylinemeasure:add", (e) => {
  console.log("add", e);
}); //添加测量点时执行
map.on("polylinemeasure:insert", (e) => {
  console.log("insert", e);
}); //插入测量点时执行
map.on("polylinemeasure:move", (e) => {
  console.log("move", e);
}); //移动已绘制的点时执行（alt键+鼠标左键移动）
map.on("polylinemeasure:remove", (e) => {
  console.log("remove", e);
}); //移除已绘制的点时执行

二、使用步骤

1.引入依赖

import { polylineMeasure } from "leaflet.polylinemeasure";
import "leaflet.polylinemeasure/Leaflet.PolylineMeasure.css";

2.具体逻辑

<script setup>
import { polylineMeasure } from "leaflet.polylinemeasure";
import "leaflet.polylinemeasure/Leaflet.PolylineMeasure.css";

let LFpolylineMeasure = L.control.polylineMeasure({options});
LFpolylineMeasure.addTo(map);
</script>

3.完整代码

/*待Leaflet页面挂载完成后将此页面组件加载即可*/
<template></template>

<script setup>
import { polylineMeasure } from "leaflet.polylinemeasure";
import "leaflet.polylinemeasure/Leaflet.PolylineMeasure.css";

let LFpolylineMeasure = L.control.polylineMeasure({
  position: "bottomright", //控件在屏幕中的位置，'topright', 'topleft', 'bottomright', 'bottomleft'
  unit: "metres", //初始单位
  showClearControl: true, //是否显示清除控件
  showUnitControl: true, //是否显示更改度量单位的控件
  showBearings: true, //是否显示方位
  clearMeasurementsOnStop: true, //取消选择控件时清除所有测量（当标绘为取消时是否清除图中现有的测量结果）
  bearingTextIn: "In", //入射角标签文字，默认为"In"(这里用“入射角”可能不太合适，其实就是当前点和上一个点的夹角，正北为起始0°)
  bearingTextOut: "Out", //出射角标签文字，默认为"Out"（其实就是当前点和下一个即将绘制的点的方位角）
  measureControlTitleOn: "开始绘制", //要打开控件的提示标签内容
  measureControlTitleOff: "停止绘制", //要关闭控件的提示标签内容
  measureControlLabel: "&#8614", //度量控件的标签符号（无需修改）
  clearControlLabel: "&times", //清除控件的标签符号（无需修改）
  distanceShowSameUnit: false, //如果距离小于1 km/mi/nm，则在工具提示中保持相同的单位(建议设置为“false”)
  unitControlTitle: {
    //要显示在“单位控制”按钮上的标题文本
    text: "更改单位",
    metres: "米",
    landmiles: "英里",
    nauticalmiles: "海里",
  },
  unitControlLabel: {
    //要在“单位控制”按钮和测量标签中显示的单位符号
    metres: "m",
    kilometres: "km",
    feet: "ft",
    landmiles: "mi",
    nauticalmiles: "nm",
  },
  tempLine: {
    // 临时虚线的样式设置
    color: "#68FFFF", // 虚线颜色
    weight: 2, // 线宽
  },
  fixedLine: {
    // 给实线设置样式
    color: "#00F8F6", // 颜色
    weight: 2, // 线宽
  },
  startCircle: {
    // 指示多段线起点的圆标记的样式设置
    color: "#000", // 圆边框的颜色
    weight: 1, //圆边框的宽度
    fillColor: "#0f0", // 圆的填充颜色
    fillOpacity: 1, // 填充圆的不透明度
    radius: 3, // 圆的半径
  },
  intermedCircle: {
    // 指示起点和终点之间点的圆的样式
    color: "#000", // 圆边框的颜色
    weight: 1, // 圆边框的宽度
    fillColor: "#ff0", //  圆的填充颜色
    fillOpacity: 1, // 填充圆的不透明度
    radius: 3, //  圆的半径
  },
  //   currentCircle: {
  //     // 在绘制直线期间指示多段线最新点的圆标记的样式设置
  //     color: "#000",
  //     weight: 1,
  //     fillColor: "#f0f",
  //     fillOpacity: 1,
  //     radius: 3,
  //   },
  endCircle: {
    // 终点圆的样式
    color: "#000",
    weight: 1,
    fillColor: "#f00",
    fillOpacity: 1,
    radius: 3,
  },
});
LFpolylineMeasure.addTo(map);

map.on("polylinemeasure:toogle", (e) => {
  console.log("toogle", e);
});
map.on("polylinemeasure:start", (currentLine) => {
  console.log("start", currentLine);
}); //开始绘制时执行
map.on("polylinemeasure:resume", (currentLine) => {
  console.log("resume", currentLine);
}); //继续绘制时执行
map.on("polylinemeasure:finish", (currentLine) => {
  console.log("finish", currentLine);
}); //结束绘制时执行
map.on("polylinemeasure:change", (currentLine) => {
  console.log("change", currentLine);
}); //绘制发生变化时执行
map.on("polylinemeasure:clear", (e) => {
  console.log("clear", e);
}); //清除测量结果时执行
map.on("polylinemeasure:add", (e) => {
  console.log("add", e);
}); //添加测量点时执行
map.on("polylinemeasure:insert", (e) => {
  console.log("insert", e);
}); //插入测量点时执行
map.on("polylinemeasure:move", (e) => {
  console.log("move", e);
}); //移动已绘制的点时执行（alt键+鼠标左键移动）
map.on("polylinemeasure:remove", (e) => {
  console.log("remove", e);
}); //移除已绘制的点时执行
/*
使用方法：
鼠标左击“绘制”控件后即可在地图上使用鼠标左键添加需要测量的点位，绘制完成后可以双击鼠标左键或者按下Esc键即可终止本次绘制，如需再次绘制只需重复上述操作。
清除绘制：点击“清除”控件或者按下Esc键。
插入测量点：按住Ctrl键，同时鼠标左击任意两个点之间的箭头即可添加测量点。
删除测量点：按住Shift键，同时鼠标左击需要删除的点即可删除该点。
移动测量点：鼠标左键选中需要移动的点并拖动鼠标即可移动该点。
继续绘制：按住Ctrl键，同时单击某条线段的第一个或最后一个点即可继续绘制该条线段。
*/
</script>

<style>
</style>

总结

以上是基于Vue3框架+leaflet.polylinemeasure插件实现Leaflet图上距离量测功能相关代码，如有疏漏欢迎评论区指出，如果感觉对您有用，还请点一个免费的小👍，多谢~

巨脸怪

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SuperMap iClient for Leaflet+leaflet.polylinemeasure实现leaflet图上距离量测

借助leaflet.polylinemeasure插件实现Leafllet图上距离量测功能
复制链接

扫一扫