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

这篇具有很好参考价值的文章主要介绍了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:[]})

效果如下

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


本文为学习笔记,仅供参考文章来源地址https://www.toymoban.com/news/detail-821567.html

到了这里,关于leaflet学习笔记-带有方位角信息的圆的绘制(七)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于SpringBoot和Leaflet的地震台网信息预警可视化

    目录 前言 一、后台管理设计与实现 1、Model层 2、业务层 3、控制层 二、前端预警可视化设计与实现 1、网页结构 2、数据绑定 三、效果展示 总结         在之前的几篇博客中,我们讲解了如何在Leaflet中进行预警信息提示效果,以及基于XxlCrawler进行中国地震台网信息的采

    2024年04月27日
    浏览(32)
  • 141:vue+leaflet 利用高德逆地理编码,点击地图标记marker,popup地址信息

    第141个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中利用高德逆地理编码,点击地图标记marker,popup地址信息 。主要利用高德地图的api将坐标转化为地址,然后在点击的位置,弹出弹窗,在里面显示出地址信息。 直接复制下面的 vue+leaflet源代码,操作2分钟即

    2024年01月24日
    浏览(49)
  • vue+leaflet笔记之热力图

    本文介绍了Web端使用 Leaflet 开发库展示热力图方法 (底图来源:天地图),结合leaflet.heat插件可以很容易的做出热力图,通过调整其配置参数可以优化热力图的显示,以达到最佳的可视化效果,显示效果如下图所示。 Vue 开发库:3.2.37 Leaflet 开发库:1.9.3 Leaflet主要插件: leaflet

    2024年02月10日
    浏览(81)
  • 如何全方位了解购房信息?VR全景技术为您解答

    在存量房贷利率下调政策下,房子逐渐回归到居住属性,在对于有购房刚需的客户来说,无疑是一大利好政策,此类客户有着强烈的看房购房需求,那么该如何全方位的了解购房信息呢? 房企通过VR全景展示、3D样板房、VR数字沙盘等功能,将线下房源实景展示在网上,三维、

    2024年02月09日
    浏览(50)
  • 【信息安全案例】——信息内容安全(学习笔记)

    📖 前言:在数字化时代,信息内容安全问题越来越引起人们的关注。信息内容安全主要包括对数据的机密性、完整性和可用性的保护,以及对用户隐私的保护等方面。针对信息内容安全的威胁,采取科学有效的安全措施和技术手段至关重要。本文介绍信息内容安全的相关概

    2024年02月07日
    浏览(43)
  • 【信息安全案例】——网络信息面临的安全威胁(学习笔记)

    📖 前言:2010年,震网病毒(Stuxnet)席卷全球工业界。其目标是从物理上摧毁一个军事目标,这使得网络武器不仅仅只存在于那个人类创造的空间。网络武器的潘多拉魔盒已经打开。 🕤 1.1.1 信息的定义 被交流的知识 关于客体(如事实、概念、事件、思想、过程等)的知识

    2023年04月24日
    浏览(48)
  • 信息物理系统技术-学习笔记

    一.信息物理系统的概念 信息物理系统(cyber-physical system,CPS)这一术语,最早由美国国家航空航天局于1992年提出。信息物理系统是控制系统,嵌入式系统的扩展与延伸,其涉及的相关底层理论技术源于对嵌入式技术的应用与提升。然而,随着信息化和工业化的 深度融合发展

    2024年02月11日
    浏览(43)
  • 《信息安全技术》学习笔记02

    目录 一、计算机病毒概念 二、计算机病毒的主要特征: 三、计算机病毒分类 1.按照感染位置/传染途径: 2.按照操作系统类型: 3.按照寄生方式: 4.常见的恶意代码术语: 四、计算机病毒结构一般结构为: 五、计算机病毒的发展趋势: 计算机病毒的分析与防范 一、PE文件病

    2024年02月02日
    浏览(57)
  • 网络安全/信息安全—学习笔记

    网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域,都有攻与防两面性,例如 Web 安全技术,既有 Web 渗透,也有

    2024年02月11日
    浏览(51)
  • .NET Core反射获取带有自定义特性的类,通过依赖注入根据Attribute元数据信息调用对应的方法

    前段时间有朋友问道一个这样的问题,.NET Core中如何通过Attribute的元数据信息来调用标记的对应方法。我第一时间想到的就是通过C#反射获取带有Custom Attribute标记的类,然后通过依赖注入(DI)的方式获取对应服务的方法并通过反射动态执行类的方法,从而实现更灵活的编程

    2023年04月15日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包