leaflet学习笔记-带有方位角信息的圆的绘制(七)

前言

项目中有一个需求,就是需要绘制一个圆,并且绘制的时候还要设置方位角,最后返回圆的坐标集合和方位角。本功能使用Leaflet-Geoman+Turf.js+leaflet实现。

方位角简介

在陆地导航中,方位角通常表示为 alpha、α,并定义为从北基线或子午线顺时针测量的水平角。方位角也被更广泛地定义为从任何固定参考平面或容易建立的基准方向线顺时针测量的水平角度。
今天,方位角的参考平面通常是真北,测量为 0° 方位角,但也可以使用其他角度单位(grad、mil)。 在 360 度圆上顺时针移动,东方位角为 90°,南方位角为 180°,西方位角为 270°。也有例外:一些导航系统使用南方作为参考矢量。任何方向都可以作为参考向量,只要明确定义即可。
很常见的是,方位角或罗盘方位在一个系统中表示,其中北或南可以是零,并且可以从零顺时针或逆时针测量角度。
首先说明的参考方向始终是北或南,最后说明的转向方向是东或西。选择方向,使它们之间的角度为正,介于 0 和 90 度之间。如果方位恰好在基点之一的方向上,则使用不同的符号。

**注意:**项目中我们规定正北为0° 方位角,顺时针逐渐增加,直到360° 方位角

Leaflet-Geoman简介

我的理解就是一个leaflet的绘制插件,具体可以查看Leaflet-Geoman官网,本功能就是使用它绘制Circle

Turf.js简介

Turf.js 是一个用于地理空间计算的 JavaScript 库。它提供了许多地理空间操作的函数,如点线面的创建、缓冲区计算、距离计算、区域合并等,方便在前端应用中处理地理空间数据和实现地图相关功能。Turf.js 不依赖于任何地图库,可以在任何 JavaScript 环境中使用。

绘制Circle可以使用Leaflet-Geoman绘制,但是方位角的话不能直接获取,所以我想用turf.js里面的**bearing**,取两点,找出它们之间的地理方位,即从北线(0度)开始测量的角度。这两点就是绘制的圆的圆心(start),鼠标移动的坐标点(end),这样就能实时得到方位角了。

UseWindCircle.js完整代码

/*** @ClassName UseWindCircle.js* @Description 风圈绘制操作hook* @Author ZhangJun* @Date  2024/1/9 15:38**/
import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'
import * as turf from '@turf/turf'
import { ref, onUnmounted, reactive } from 'vue'
import BigNumber from 'bignumber.js'export function useWindCircle(mainMap, geometryType = 'Circle', drawComplete = null, drawLayer = undefined) {//绘制完成后的要素几何图层let targetFeatureLayer = null//绘制事件状态let status = ref('start')//生成圆的坐标的精度let steps = ref(10)//生成圆的单位距离let units = ref('kilometers')//meters//方向角let direction = ref(null)//绘制的圆的坐标集合let coords = ref([])//用于标记方向的popuplet directionPopup = new L.popup({ closeButton: false })//圆心坐标let centerPosition = nullif (mainMap) {//关闭的时候一定要销毁onUnmounted(() => {closeDraw()mainMap?.removeLayer(drawLayer)})if (!drawLayer) {drawLayer = L.featureGroup([])drawLayer.addTo(mainMap)}// 添加绘制工具mainMap.pm.setLang('zh')mainMap.pm.addControls({position: 'topleft',drawPolygon: false, //绘制多边形drawMarker: false, //绘制标记点drawCircleMarker: false, //绘制圆形标记drawPolyline: false, //绘制线条drawRectangle: false, //绘制矩形drawCircle: false, //绘制圆圈editMode: false, //编辑多边形dragMode: false, //拖动多边形cutPolygon: false, //添加⼀个按钮以删除多边形⾥⾯的部分内容removalMode: false, //清除多边形})// 全局设置绘制样式mainMap.pm.setPathOptions({color: 'orange',fillColor: 'green',fillOpacity: 0.4,})//初始化事件let initEvents = () => {//绘制开始(可以多次绘制)mainMap.on('pm:drawstart', ({ workingLayer }) => {//中心点改变就进这里workingLayer.on('pm:centerplaced', (e) => {status.value = 'start'centerPosition = e.latlng//打开方向的popupdirectionPopup?.setLatLng(centerPosition).openOn(mainMap)})})mainMap.on('mousemove', (e) => {if (centerPosition) {let latLng = e.latlnglet startPoint = turf.point([centerPosition.lng, centerPosition.lat])let endPoint = turf.point([latLng.lng, latLng.lat])//获取圆心和现在鼠标坐标的中心点数据let popupPosition = turf.midpoint(startPoint, endPoint)let [lng, lat] = popupPosition.geometry.coordinates//计算现在的方向位置,并赋值方向let direction_temp = getDirection(centerPosition, latLng)direction.value = new BigNumber(direction_temp).toFixed(2)setPopupContent({ lat, lng }, `<b>风向:</b>${direction.value}°`)}})//绘制完成mainMap.on('pm:create', (e) => {//清除上一个绘制的缓冲区clearDrawLayer()status.value = 'end'let { layer } = etargetFeatureLayer = layerlayer.remove()addLayersToDrawLayer([targetFeatureLayer])mainMap.pm.enableDraw(geometryType)mainMap.closePopup(directionPopup)//绘制完成的回调if (typeof drawComplete === 'function') {let result = getResult(targetFeatureLayer)drawComplete(result)}})mainMap.on('pm:globalremovalmodetoggled', (e) => {console.log(e, '清除图层时调用')})}//移除事件let removeEvents = () => {//取消时间的监听mainMap?.off('pm:drawstart')mainMap?.off('pm:create')mainMap?.off('mousemove')}//清除原来绘制的内容let clearDrawLayer = () => {drawLayer?.clearLayers()targetFeatureLayer = null}//添加要素到drawLayerlet addLayersToDrawLayer = (features = []) => {features?.forEach(feature => {drawLayer.addLayer(feature)})}//关闭绘制功能let closeDraw = () => {mainMap.pm.disableDraw(geometryType)//清空绘制的几何clearDrawLayer()//一定要移除事件,否则事件之间会有干扰removeEvents()}//开始绘制let startDraw = (type = geometryType) => {//初始化事件initEvents()if (type !== geometryType) {geometryType = type}if (type) {//默认绘制几何mainMap.pm.enableDraw(type)}}//设置需要显示的方位popup内容let setPopupContent = (latLng, content = '') => {directionPopup.setLatLng(latLng).setContent(content)}//获取缓冲区的坐标集合let getResult = (target = targetFeatureLayer) => {if (target) {let { lat, lng } = target.getLatLng()let center = [lng, lat]let radius = target.getRadius()let options = { steps: steps.value, units: units.value, properties: { foo: 'bar' } }let circle = turf.circle(center, radius, options)if (circle?.geometry) {//获取输入 feature 并将它们的所有坐标从 [x, y] 翻转为 [y, x]。let temp = turf.flip(circle)coords.value = turf.getCoords(temp)return { direction: direction.value, coords: coords.value }}}return { direction: direction.value, coords: coords.value }}//取两点,找出它们之间的地理方位,即从北线(0度)开始测量的角度。let getDirection = (start = centerPosition, end) => {start = [start.lng, start.lat]end = [end.lng, end.lat]return turf.bearing(start, end, { final: true })}return { status, closeDraw, drawLayer, startDraw, steps, units, coords, direction }}return {}
}

UseWindCircle.js使用

//风圈使用的hook
let {startDraw: startWindCircle,closeDraw: closeWindCircle,units,steps,
} = useWindCircle(props.lMap, undefined, e => {alert(JSON.stringify(e))
})

使用startWindCircle()开始绘制,closeWindCircle()结束绘制,绘制完成会进入上面的回调函数,并返回我们要的圆的轮廓坐标还有方向角({direction:xxx,coords:[]})

效果如下


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

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

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

相关文章

2023年全国职业院校技能大赛(高职组)“云计算应用”赛项赛卷⑥

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷6 目录 需要竞赛软件包环境以及备赛资源可私信博主&#xff01;&#xff01;&#xff01; 2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷6 模块一…

字符串处理(将字符串中符合十六进制数据格式的数字和字符按照其对应的十进制数值进行累加) C语言xdoj704

题目描述&#xff1a; 输入由数字和字符构成的字符串&#xff08;不包含空格&#xff09;&#xff0c;将字符串中符合十六进制数据格式的数字和字符按照其对应的十进制数值进行累加&#xff0c;并输出累加结果&#xff0c;如果字符串中不含有任何满足十六进制格式的字符&#x…

铭文 LaunchPad 平台 Solmash 推出早鸟激励计划

为感谢用户对Solmash的支持&#xff0c;Solmash 特别推出“Solmash早鸟激励计划”&#xff0c;以回馈社区的早期参与者&#xff0c;这是专为已经参与Staking Pool或Honest Pool的用户推出的激励。 Solmash NFT激励 被列入早鸟计划的用户&#xff0c;可通过点击&#xff1a;sol…

RTL编码(1)——概述

一、RTL级描述 RTL&#xff08;Register Transfer Level&#xff09;级&#xff1a;寄存器&#xff0b;组合逻辑&#xff0c;其功能与时序用Verilog HDL&#xff08;以下简称Verilog&#xff09;或VHDL代码描述。 RTL描述包含了同步数字电路最重要的三个特征&#xff1a;组合逻…

单目测距(车辆测距+前车碰撞预警)-基于yolov8/yolov7/yolov5——毕业设计

一、开发环境 部署平台&#xff1a;英伟达的Jetson Nano 环境&#xff1a;Linux ROS 语言&#xff1a;C 设备&#xff1a;1920*1080像素的摄像头、开发板。 模型&#xff1a;yolo-v8s 二、单目测距实现思路 0、标定相机和车辆&#xff08;假设已经标定完成&#xff09; 1、通…

Python实战:计算向量夹角及相关系数

文章目录 一、实战概述二、计算向量夹角&#xff08;一&#xff09;思路分析&#xff08;二&#xff09;代码实现1、创建程序&#xff0c;计算向量夹角2、运行程序&#xff0c;查看结果 三、计算向量相关系数&#xff08;一&#xff09;相关系数概念&#xff08;二&#xff09;…

c++全排列

目录 next_permutation()函数 例 perv_permutation()函数 例 next_permutation()函数 next_pernutation()函数用于生成当前序列的下一个排序。它按照字典序对序列进行重新排序&#xff0c;如果存在下一个排列&#xff0c;则将当前序列更改为下一个排列&#xff0c;并返回t…

DataX的安装使用

DataX概述&#xff1a; DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台&#xff0c;实现包括 MySQL、Oracle、HDFS、Hive、OceanBase、HBase、OTS、ODPS 等各种异构数据源之间高效的数据同步功能。DataX采用了框架 插件 的模式&#xff0c;目前已开源&#xff0c;代…

一键去背景怎么去?使用这些智能抠图软件即可已经去背景

作为一名设计师&#xff0c;我们的工作不仅仅是追逐创意的火花&#xff0c;为品牌和产品打造独特的形象。在美好的表象之下&#xff0c;有一项常常让我们苦恼的“必修课”——抠图。抠图是设计过程中不可或缺的一环&#xff0c;它要求我们对图像进行精细的处理&#xff0c;以确…

物联网通讯协议NB-lot和LoRa差异分析

像把大象装冰箱一样&#xff0c;物联网&#xff0c;万物互联也是要分步骤的。 一、感知层(信息获取层)&#xff0c;即利用各种传感器等设备随时随地获取物体的信息; 二、网络层(信息传输层)&#xff0c;通过各种电信网络与互联网的融合&#xff0c;将物体的信息实时准确地传递…

C++力扣题目257--二叉树的所有路径

给你一个二叉树的根节点 root &#xff0c;按 任意顺序 &#xff0c;返回所有从根节点到叶子节点的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [1,2,3,null,5] 输出&#xff1a;["1->2->5","1->3"]示例 …

pytorch12:GPU加速模型训练

目录 1、CPU与GPU2、数据迁移至GPU2.1 to函数使用方法 3、torch.cuda常用方法4、多GPU并行运算4.1 torch.nn.DataParallel4.2 torch.distributed加速并行训练 5、gpu总结 1、CPU与GPU CPU&#xff08;Central Processing Unit, 中央处理器&#xff09;&#xff1a;主要包括控制…