vue+Leaflet.PM插件实现创建和编辑几何图形(点、线、面、圆等)

 

场景
Vue+Leaflet实现加载OSM显示地图:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394在上面加载显示OSM的基础上,使用Leaflet.pm插件实现在页面上绘制、编辑、剪切、移动几何元素。Leaflet.pm插件
用于创建和编辑几何图层的插件可绘制、编辑、拖动、剪切和捕捉图层支持标记、CircleMarkers、折线、多边形、圆形、矩形、LayerGroups、GeoJSON 和 MultiPolygonsnpm以及文档地址:https://www.npmjs.com/package/leaflet.pm在线演示地址:https://geoman.io/leaflet-geoman/实现
1、首先已经安装并引入了leaflet,其次安装leaflet.pmnpm i leaflet.pm页面中引入import 'leaflet.pm';
import 'leaflet.pm/dist/leaflet.pm.css';
3、地图上添加组件,并设置哪些按钮显示
// 添加绘制工具this.map.pm.setLang("zh");this.map.pm.addControls({position: "topleft",drawPolygon: true, //绘制多边形drawMarker: false, //绘制标记点drawCircleMarker: false, //绘制圆形标记drawPolyline: true, //绘制线条drawRectangle: false, //绘制矩形drawCircle: false, //绘制圆圈editMode: true, //编辑多边形dragMode: true, //拖动多边形cutPolygon: true, //添加⼀个按钮以删除多边形⾥⾯的部分内容removalMode: true, //清除多边形});
4、设置样式、设置事件
// 全局设置绘制样式this.map.pm.setPathOptions({color: "orange",fillColor: "green",fillOpacity: 0.4,});// 或者单独设置绘制样式var options = {// 连接线标记之间的线        templineStyle: {color: "red",},// 提⽰线从最后⼀个标记到⿏标光标的线        hintlineStyle: {color: "red",dashArray: [5, 5],},// 绘制完成的样式        pathOptions: {color: "orange",fillColor: "green",},};// 激活绘制多边形功能-1、单独设置某个模式的样式this.map.pm.enableDraw("Polygon", options);// 启用绘制--多边形功能this.map.pm.enableDraw("Polygon", {snappable: true, //启⽤捕捉到其他绘制图形的顶点snapDistance: 20, //顶点捕捉距离      });// 关闭绘制--注意也可以关闭其他模式的绘制功能this.map.pm.disableDraw("Polygon");// 绘制事件监听this.map.on("pm:drawstart", (e) => {console.log(e, "绘制开始第一个点");});this.map.on("pm:drawend", (e) => {console.log(e, "禁⽌绘制、绘制结束");});this.map.on("pm:create", (e) => {console.log(e, "绘制完成时调⽤");if (e.shape == "Circle") {console.log(e.layer._latlng, e.layer._radius, "绘制坐标");} else {console.log(e.layer._latlngs[0], "绘制坐标");}});this.map.on("pm:globalremovalmodetoggled", (e) => {console.log(e, "清除图层时调用");});
5、其他属性、事件说明等参考官方说明

完整代码 

<template><div id="map"class="map"></div>
</template><script>
import "leaflet/dist/leaflet.css";
import L from"leaflet";
import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";
export default {name: "leafletPm",data() {return {map: null,OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",};},mounted() {this.initMap();},methods: {initMap() {this.map = L.map("map");this.map.setView([34.03, -118.15], 13);let tileLayer = L.tileLayer(this.OSMUrl);tileLayer.addTo(this.map);// 添加绘制工具this.map.pm.setLang("zh");this.map.pm.addControls({position: "topleft",drawPolygon: true, //绘制多边形drawMarker: false, //绘制标记点drawCircleMarker: false, //绘制圆形标记drawPolyline: true, //绘制线条drawRectangle: false, //绘制矩形drawCircle: false, //绘制圆圈editMode: true, //编辑多边形dragMode: true, //拖动多边形cutPolygon: true, //添加⼀个按钮以删除多边形⾥⾯的部分内容removalMode: true, //清除多边形      });// 全局设置绘制样式this.map.pm.setPathOptions({color: "orange",fillColor: "green",fillOpacity: 0.4,});// 或者单独设置绘制样式var options = {// 连接线标记之间的线        templineStyle: {color: "red",},// 提⽰线从最后⼀个标记到⿏标光标的线        hintlineStyle: {color: "red",dashArray: [5, 5],},// 绘制完成的样式        pathOptions: {color: "orange",fillColor: "green",},};// 激活绘制多边形功能-1、单独设置某个模式的样式this.map.pm.enableDraw("Polygon", options);// 启用绘制--多边形功能this.map.pm.enableDraw("Polygon", {snappable: true, //启⽤捕捉到其他绘制图形的顶点snapDistance: 20, //顶点捕捉距离      });// 关闭绘制--注意也可以关闭其他模式的绘制功能this.map.pm.disableDraw("Polygon");// 绘制事件监听this.map.on("pm:drawstart", (e) => {console.log(e, "绘制开始第一个点");});this.map.on("pm:drawend", (e) => {console.log(e, "禁⽌绘制、绘制结束");});this.map.on("pm:create", (e) => {console.log(e, "绘制完成时调⽤");if (e.shape == "Circle") {console.log(e.layer._latlng, e.layer._radius, "绘制坐标");} else {console.log(e.layer._latlngs[0], "绘制坐标");}});this.map.on("pm:globalremovalmodetoggled", (e) => {console.log(e, "清除图层时调用");});},},
};
</script><style scoped>
.map {width: 100%;height: 400px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469685.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手动实现h5移动端点击全屏按钮横屏展示图片,左右滑动切换,处理页面会随着手指滑动问题

页面提供全屏按钮,全屏展示的容器 <div class"container"><button click"openSwiper">点击全屏查看</button><!-- 大图 --><divclass"full"v-if"showSwiper"touchstart"handleTouchStart"touch…

Vue2+3 —— Day3/4

Day3 Vue生命周期 和 生命周期的四个阶段 Vue生命周期的四个阶段&#xff1a; 从创建到销毁的整个阶段中&#xff0c;Vue提供好了一系列函数&#xff08;8个&#xff09;&#xff1b; 并且在经历生命周期的对应阶段时&#xff0c;会自动帮你调用这些函数 这8个函数称为生命…

Redis集群模式之Redis Sentinel vs. Redis Cluster

在分布式系统环境中&#xff0c;Redis以其高性能、低延迟和丰富的数据结构而广受青睐。随着数据量的增长和访问需求的增加&#xff0c;单一Redis实例往往难以满足高可用性和扩展性的要求。为此&#xff0c;Redis提供了两种主要的集群模式&#xff1a;Redis Sentinel和Redis Clu…

机器学习———特征工程

1 特征工程概念 特征工程就是对特征进行相关的处理&#xff0c;一般使用pandas来进行数据清洗和数据处理、使用sklearn来进行特征工程&#xff0c;特征工程是将任意数据(如文本或图像)转换为可用于机器学习的数字特征&#xff0c;比如:字典特征提取(特征离散化)、文本特征提取…

服务器数据恢复—分区结构被破坏的reiserfs文件系统数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器中有一组由4块SAS硬盘组建的RAID5阵列&#xff0c;上层安装linux操作系统统。分区结构&#xff1a;boot分区LVM卷swap分区&#xff08;按照顺序&#xff09;&#xff0c;LVM卷中划分了一个reiserfs文件系统作为根分区。 服务器故障…

vue3+vite搭建脚手架项目本地运行electron桌面应用

1.搭建脚手架项目 搭建Vue3ViteTs脚手架-CSDN博客 2.创建完项目后&#xff0c;安装所需依赖包 npm i vite-plugin-electron electron26.1.0 3.根目录下创建electron/main.ts electron/main.ts /** electron/main.ts */import { app, BrowserWindow } from "electron&qu…

C++ | Leetcode C++题解之第556题下一个更大元素III

题目&#xff1a; 题解&#xff1a; class Solution { public:int nextGreaterElement(int n) {int x n, cnt 1;for (; x > 10 && x / 10 % 10 > x % 10; x / 10) {cnt;}x / 10;if (x 0) {return -1;}int targetDigit x % 10;int x2 n, cnt2 0;for (; x2 …

大数据技术之Hadoop :我是恁爹

就如上图中的技术分类&#xff0c;大数据技术主要解决的就是海量数据的存储和计算问题。 这两个问题的解决方案最先被 Google 被提出&#xff0c;用于解决 Google 搜索引擎海量的网页存储和索引的构建。对应的技术就是日后被人所熟知的 HDFS 和 MapReduce。 不关注大数据的可…

云计算:定义、类型及对企业的影响

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 云计算&#xff1a;定义、类型及对企业的影响 云计算&#xff1a;定义、类型及对企业的影响 云计算&#xff1a;定义、类型及对企…

如何优化Elasticsearch的查询性能?

优化Elasticsearch查询性能可以从以下几个方面进行&#xff1a; 合理设计索引和分片&#xff1a; 确保设置合理的分片和副本数&#xff0c;考虑数据量、节点数和集群大小。根据数据量和节点数量调整分片数量&#xff0c;避免使用过多分片&#xff0c;因为每个分片都需要额外的…

星期-时间范围选择器 滑动选择时间 最小粒度 vue3

星期-时间范围选择器 功能介绍属性说明事件说明实现代码使用范例 根据业务需要&#xff0c;实现了一个可选择时间范围的周视图。用户可以通过鼠标拖动来选择时间段&#xff0c;并且可以通过快速选择组件来快速选择特定的时间范围。 如图&#xff1a; 功能介绍 时间范围选择&…

光流法与直接法在SLAM中的应用

本文总结视觉SLAM中常用的光流法与直接法 1、Lucas-Kanade光流法 相机所拍摄到的图像随相机视角的变化而变化&#xff0c;这种变化也可以理解为图像中像素的反向移动。“光流”&#xff08;Optical Flow&#xff09;是指通过分析连续图像帧来估计场景中像素或特征点的运动的技…

SSE (Server-Sent Events) 服务器实时推送详解

Server-Sent Events 一、什么是 SSE ?二、SSE 的工作原理三、SSE 的基本配置1.HTTP 请求和响应头设置2.SSE 字段介绍3.SSE 事件数据流示例 四、SseEmitter 的基本配置1.SseEmitter 介绍及用法2.使用 SseEmitter 示例11)编写核心 SSE Client2)编写 Controller3)前端接收与处理 …

AI大模型:重塑软件开发流程的优势、挑战及应对策略

随着人工智能技术的飞速发展&#xff0c;AI大模型正在深刻影响着软件开发的各个环节。本文将详细分析AI在软件开发流程中带来的优势&#xff0c;面临的挑战&#xff0c;以及开发者的应对策略。 一、AI在软件开发流程中的优势 提高开发效率 AI大模型能够自动生成高质量的代码…

《重学Java设计模式》之 原型模式

原型模式主要解决的问题就是创建重复对象&#xff0c;而这部分对象内容本身比较复杂&#xff0c;生成过程可能从库或者RPC接口中获取数据的耗时较长&#xff0c;因此采用克隆的方式节省时间。 案例&#xff1a;上机考试抽题&#xff0c;要求打乱题目、答案数据 工厂结构 选择题…

Java项目实战II基于Spring Boot的药店管理系统的设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着医疗行业的快速发展和人们对健康需…

html+js+css实现拖拽式便签留言

前些日子在网上冲浪时&#xff0c;看到一个便签式留言墙&#xff0c;让人耳目一新。心想这个看着不错&#xff0c;额想要。于是便开始搜寻是否有相应开源插件&#xff0c;想将其引入自己的博客中。但是搜寻了一圈&#xff0c;都没有符合预期的,要么功能不符合。有的功能符合&am…

模型压缩相关技术概念澄清(量化/剪枝/知识蒸馏)

1.模型压缩背景 随着深度学习技术的不断发展&#xff0c;模型的规模和复杂度也随之增加。大型模型往往具有更高的精度和更强的泛化能力&#xff0c;但在实际应用中&#xff0c;模型的大小却成为了一个制约因素。模型体积过大会导致存储、传输和推理速度等方面的瓶颈&#xff0…

Linux入门:环境变量与进程地址空间

一. 环境变量 1. 概念 1️⃣基本概念&#xff1a; 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数 如&#xff1a;我们在编写C/C代码的时候&#xff0c;在链接的时候&#xff0c;从来不知道我们的所链接的动态静态库在哪里&#x…

Mysql前言

文章目录 Mysql 数据库简介SQL 基础语法什么是 SQL语句SQL 的作用SQL 语句的分类SQL 通用语法查询状态 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Mysql专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月12日18点20分 SQL是数据库…