网站常规后台,阿里云做网站买什么,有口碑的南昌网站制作,网络运维工程师简历范文前言 项目中有一个需求#xff0c;就是需要绘制一个圆#xff0c;并且绘制的时候还要设置方位角#xff0c;最后返回圆的坐标集合和方位角。本功能使用Leaflet-GeomanTurf.jsleaflet实现。 方位角简介 在陆地导航中#xff0c;方位角通常表示为 alpha、α#xff0c;并定…前言 项目中有一个需求就是需要绘制一个圆并且绘制的时候还要设置方位角最后返回圆的坐标集合和方位角。本功能使用Leaflet-GeomanTurf.jsleaflet实现。 方位角简介 在陆地导航中方位角通常表示为 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.jsexport 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 startcenterPosition 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 endlet { 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()结束绘制绘制完成会进入上面的回调函数并返回我们要的圆的轮廓坐标还有方向角{directionxxx,coords:[]} 效果如下 本文为学习笔记仅供参考