leaflet学习笔记-贝塞尔曲线绘制(八)

前言

两点之间的连线是很常见的,但是都是直直的一条线段,为了使连线更加平滑,我们可以使用曲线进行连线,本功能考虑使用贝塞尔曲线进行连线绘制,最后将线段的两端节点连接,返回一个polygon。

贝塞尔简介

给定不同的点 P0 和 P1,线性贝塞尔曲线只是这两点之间的一条线。

相当于线性插值。

Turf.bezierSpline()简介

接受一条线,通过应用贝塞尔样条算法返回一个弯曲的版本

官方例子

var line = turf.lineString([[-76.091308, 18.427501],[-76.695556, 18.729501],[-76.552734, 19.40443],[-74.61914, 19.134789],[-73.652343, 20.07657],[-73.157958, 20.210656]
]);var curved = turf.bezierSpline(line);

参数说明

line:input LineString

options:{

resolution:点之间的时间(毫秒)

sharpness:衡量样条路径应该有多弯曲的一个度量

}

具体可以查看官方的bezierSpline函数

UseBezierSpline.js完整代码

import { onBeforeUnmount, reactive, ref } from 'vue'
import * as turf from '@turf/turf'/*** @Description 接受一条线,通过应用贝塞尔样条算法返回一个弯曲的版本(贝塞尔曲线)* @param mainMap 地图对象* @param drawComplete 完成绘制的回调函数* @Param bezierOptions* @Param bezierOptions.resolution 点之间的时间(毫秒)* @Param bezierOptions.sharpness 衡量样条路径应该有多弯曲的一个度量* @param drawLayer 绘制图形的layer* @Author ZhangJun* @Date  2024-01-11 09:55:12* @return void**/
export default function useBezierSpline(mainMap, drawComplete = null, bezierOptions = {}, drawLayer = undefined) {//默认的贝塞尔配置参数合并let bezierOptions_config = reactive({resolution: 1000,sharpness: 0.85,...bezierOptions,})//绘制事件状态let status = ref('start')// 记录当前状态是否可以拖动绘制let isDragging = true//拖动绘制的坐标let drawPath = []//拖动绘制的线let drawLine = reactive(null)//鼠标正在移动的点let movePoint//最终绘制的polygon,最终返回的就是它的轮廓坐标let polygon_draw = reactive(null)//鼠标提示let mouseEventPopup = new L.popup({ className: 'customPopup', closeButton: false })if (mainMap) {//关闭的时候一定要销毁onBeforeUnmount(() => {closeDraw()mainMap?.removeLayer(drawLayer)})if (!drawLayer) {drawLayer = L.featureGroup([])drawLayer.addTo(mainMap)}//初始化事件let initEvents = () => {isDragging = false//按下鼠标确定需要添加的节点(暂停中)mainMap.on('mousedown', (e) => {isDragging = falselet { lat, lng } = e.latlngdrawPath = [...drawPath, [lng, lat]]//如果才开始点击第一次,就创建一个polyline,后面需要动态需改它的pathif (drawPath?.length === 1) {status.value = 'start'//添加绘制linedrawLine = L.polyline(drawPath, { color: 'red' }).addTo(mainMap)}})//松开鼠标开始拖动绘制(开始绘制)mainMap.on('mouseup', (e) => {isDragging = true})//鼠标移动绘制(绘制中)mainMap.on('mousemove', (e) => {if (isDragging) {let { lat, lng } = e.latlngmovePoint = [lng, lat]//动态生成贝塞尔曲线的featurelet splineFeature = generationBezierSpline(drawPath, movePoint)if (splineFeature) {let tempCoords = turf.getCoords(turf.flip(splineFeature))//将生成的贝塞尔曲线的坐标传给polyline,在地图上刷新渲染drawLine?.setLatLngs(tempCoords)}}mouseEventPopup?.setLatLng(e.latlng)?.setContent('右键结束绘制')//如果还没有添加就直接先添加一下if (!mainMap.hasLayer(mouseEventPopup)) {//打开方向的popupmouseEventPopup?.openOn(mainMap)}})//右键结束(结束绘制)mainMap.on('contextmenu', (e) => {let coords = turf.getCoords(turf.flip(drawLine.toGeoJSON()))//生成polygonpolygon_draw = L.polygon(coords, { color: 'green' })clearDrawLayer()addLayersToDrawLayer([polygon_draw])//移除曲线mainMap?.removeLayer(drawLine)status.value = 'end'//绘制完成的回调if (typeof drawComplete === 'function') {let result = getResult(polygon_draw)drawComplete(result)}})}//移除事件let removeEvents = () => {//按下鼠标mainMap?.off('mousedown')//抬起鼠标mainMap?.off('mouseup')//拖拽事件mainMap?.off('mousemove')//右键事件mainMap?.off('contextmenu')}//开始绘制let startDraw = () => {//禁止拖动地图mainMap?.dragging?.disable()//初始化事件initEvents()}//清除原来绘制的内容let clearDrawLayer = () => {drawPath = []drawLayer?.clearLayers()}//添加要素到drawLayerlet addLayersToDrawLayer = (features = []) => {features?.forEach(feature => {drawLayer.addLayer(feature)})}/*** @Description 生成曲线* @Param originalPath 已经确定的点坐标集合* @Param lastPoint 最后一个坐标点,一般为移动的点坐标* @Author ZhangJun* @Date  2024-01-11 10:36:11* @return void**/let generationBezierSpline = (originalPath = drawPath, lastPoint = movePoint) => {if (originalPath?.length > 0) {//加入最后一个点let line = turf.lineString([...originalPath, lastPoint], bezierOptions_config)return turf.bezierSpline(line)}return null}//关闭绘制功能let closeDraw = () => {//清空绘制的几何clearDrawLayer()//一定要移除事件,否则事件之间会有干扰removeEvents()//移除popupmainMap?.closePopup(mouseEventPopup)//激活拖拽功能mainMap?.dragging?.enable()}//获取最终的polygon的轮廓坐标let getResult = (feature = polygon_draw) => {if (feature) {//获取输入 feature 并将它们的所有坐标从 [x, y] 翻转为 [y, x]。let featureCollection = turf.flip(feature.toGeoJSON())return turf.getCoords(featureCollection)}return []}return { status, getResult, closeDraw, drawLayer, bezierOptions_config, startDraw }}return {}
}

UseBezierSpline.js使用

if (wizMap?.map) {let { startDraw, closeDraw, status: temp, getResult } = useBezierSpline(wizMap?.map)getCoords = getResult//当前绘制状态(是否完成绘制)status.value = temponMounted(() => {//需要这种处理,不然会有异常nextTick(() => {startDraw()})})
}

效果

贝塞尔曲线


本文为学习笔记,仅供参考

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

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

相关文章

大模型学习之书生·浦语大模型4——基于Xtuner大模型微调实战

基于Xtuner大模型微调实战 Fintune简介 海量数据训练的base model指令微调Instructed LLM 增量预训练微调 增量数据不需要问题,只需要答案,只需要陈述类的数据 指令跟随微调 指定角色指定问题给对应的user指定答案给assistant LIaMa2InternLM 不同的模…

金三银四-JVM核心知识高频面试题

又要快到一年一度的金三银四,开始复习啦~! 每天一点点。。 目录 一、JVM中的垃圾收集器有哪些,它们的工作原理是什么? 二、JVM中的类加载器有哪些,它们各自的作用是什么? 三、JVM中垃圾回收的…

Linux第24步_安装windows下的VisualStudioCode软件

Windows下的VSCode安装后,还需要安装gcc编译器和g编译器。 gcc:编译C语言程序的编译器; g:编译C代码的编译器; 1、在Windows下安装VSCode; 双击“VSCodeUserSetup-x64-1.50.1.exe”,直到安装完成。 2、…

c++学习笔记-STL案例-演讲比赛管理系统1

目录 1演讲比赛需求 1.1 比赛规则 1.2 程序功能 2.项目创建 2.1 创建新项目 2.2 添加文件 3.3 文件添加成功 3.创建管理类 3.1 功能描述 3.2 创建文件 4 菜单功能 4.1 功能描述 4.2 添加成员函数 4.3 菜单功能实现 4.4 main()函数中调用 4.5 实现结果 5 退出系…

C++力扣题目104--二叉树的最大深度

给定一个二叉树,找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明: 叶子节点是指没有子节点的节点。 示例: 给定二叉树 [3,9,20,null,null,15,7], 返回它的最大深度 3 。 思路 看完本篇可以一起做了如下…

【C++11/C++17】左值与右值

左值和右值是C中的两个重要概念,它们涉及到变量的存储位置和生命周期。 左值(Lvalue) 左值表示一块具有确定地址的内存单元。它表示一个具体的、明确存在的存储单元。可以被取地址运算符(&)获取其地址。变量、数…

pytorch详细探索各种cnn卷积神经网络

目录 torch.nn.functional子模块详解 conv1d 用法和用途 使用技巧 适用领域 参数 注意事项 示例代码 conv2d 用法和用途 使用技巧 适用领域 参数 注意事项 示例代码 conv3d 用法和用途 使用技巧 适用领域 参数 注意事项 示例代码 conv_transpose1d 用法…

electron+vue编辑Office Word?

Electron 桌面应用是基于 Chromium 内核的,而谷歌Chrome取消了对PPAPI插件支持后,在线Office方案纷纷失效,只能更换国产浏览器在低版本浏览器苟延残喘,不能用于electronvue项目。 经过小编不断的寻找,终于找到一款至今…

redis主从复制、哨兵与集群

目录 一、概述 二、redis主从复制 1、概念 2、主从复制的作用 3、主从复制流程 4、搭建Redis 主从复制实验 ①在三台服务器上安装redis (1)关闭防火墙和安全机制 (2)修改内核参数 (3)安装redis …

自旋框的使用

1. 自旋框 实例化 //实例化单精度自旋框QSpinBox* spinBox new QSpinBox(this);//实例化双精度自旋框QDoubleSpinBox* doubleSpinBox new QDoubleSpinBox(this);1.1 单精度自旋框 QSpinBox 1.1.1 单精度自旋框的基本函数 QSpinBox_QDoubleSpinBox Dialog.cpp #include "…

网络安全保险发展起始阶段的挑战及应对措施

文章目录 前言一、网络安全保险的有序发展二、当前我国网络安全保险发展的初期态势(一)网络安全风险类型(二)网络安全保险的作用(三)与外国网络安全保费的规模对比 三、我国网络安全保险发展初期面临的挑战…

vue中常用的指令修饰符

vue中常用的指令修饰符有哪些 在Vue.js中,指令修饰符用于在指令后面以点号(.)形式添加特殊后缀,以表示对指令的特定行为或修饰。 以下是一些常用的Vue.js指令修饰符: 1. v-on ()指令修饰符&am…

vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标

前言&#xff1a; 整理vue/vue3项目中修改界面浏览器上面的文字和图标的方法。 效果&#xff1a; vue2/vue3: 默认修改 public/index.html index.html <!DOCTYPE html> <html lang"en"><head><link rel"icon" type"image/sv…

报考PMI-ACP总费用是多少?费用明细!

ACP认证是由美国项目管理协会&#xff08;PMI&#xff09;推出的针对敏捷项目管理专业人士的资格认证&#xff0c;由于其高含金量受到了不少小伙伴的追捧。那么这个证书考试费多少钱呢&#xff1f;贵不贵呢&#xff1f;我们来一起探讨下。 PMI-ACP认证考试费用分为三个部分&am…

PostgreSQL 低级错误集锦 (不定时更新)

低级错误真的浪费时间且菜&#xff0c;希望不再犯低级重复错误。 1.to_date()函数日期转换报错 SQL语句&#xff1a; SELECT job_date FROM data_check WHERE data_type S; 查询结果&#xff1a; job_date | ---------- 2023-01-28| 我希望用update语句更新job_date字段&…

golang中的字符串拼接

go中常见的字符串拼接方法 假设我们现在要实现这样一个拼接函数&#xff1a; 将字符串重复n次拼接起来&#xff0c;返回一个新字符串。 方法一&#xff1a;使用运算符 func simpleSplice(s string, n int) string {newStr : ""for i : 0; i < n; i {newStr s}…

一种基于嵌入式的卫星基带信号处理系统的制作方法

一种基于嵌入式的卫星基带信号处理系统的制作方法 随着卫星通信技术的不断发展&#xff0c;卫星基带信号处理系统的性能和稳定性要求也越来越高。传统的卫星基带信号处理系统通常采用分立器件和通用处理器&#xff0c;存在着体积庞大、功耗高、集成度低等问题。为了解决这些问题…

C++_vector类

目录 一、vector的模拟实现 1、vector的组成结构 2、vector尾插数据 2.1 析构函数 3、迭代器实现 4、resize 5、删除数据 5.1 迭代器失效 6、指定位置插入数据 6.1 迭代器失效 7、迭代器构造和resize构造 8、深浅拷贝 结语&#xff1a; 前言&#xff1a; vect…

Linux踢掉远程用户

在Linux系统中&#xff0c;要踢掉远程用户&#xff0c;可以使用以下步骤&#xff1a; 首先&#xff0c;使用 who 或 w 命令查看当前登录的用户及其相关信息&#xff0c;包括IP地址和终端&#xff08;TTY&#xff09;。例如&#xff0c;输入 who 或 w 后回车。找到要踢掉的用户…

vue前端开发自学demo-input标签数据双向绑定

vue前端开发自学demo-input标签数据双向绑定&#xff01;今天为大家 展示的内容是&#xff0c;前端开发常见的&#xff0c;form表单里面的&#xff0c;一些输入数据的元素&#xff0c;动态绑定数据的案例。比如input,以及checkbox的状态绑定案例。 首先&#xff0c;老规矩&…