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))
})