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([])

  //用于标记方向的popup
  let directionPopup = new L.popup({ closeButton: false })

  //圆心坐标
  let centerPosition = null

  if (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

          //打开方向的popup
          directionPopup?.setLatLng(centerPosition).openOn(mainMap)
        })
      })

      mainMap.on('mousemove', (e) => {
        if (centerPosition) {
          let latLng = e.latlng

          let 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 } = e
        targetFeatureLayer = layer
        layer.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
    }

    //添加要素到drawLayer
    let 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:[]}）

效果如下

---

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