技术标签: 学习 笔记 arcgis leaflet学习笔记 vue.js
项目中有一个需求,就是需要绘制一个圆,并且绘制的时候还要设置方位角,最后返回圆的坐标集合和方位角。本功能使用Leaflet-Geoman+Turf.js+leaflet实现。
在陆地导航中,方位角通常表示为 alpha、α,并定义为从北基线或子午线顺时针测量的水平角。方位角也被更广泛地定义为从任何固定参考平面或容易建立的基准方向线顺时针测量的水平角度。
今天,方位角的参考平面通常是真北,测量为 0° 方位角,但也可以使用其他角度单位(grad、mil)。 在 360 度圆上顺时针移动,东方位角为 90°,南方位角为 180°,西方位角为 270°。也有例外:一些导航系统使用南方作为参考矢量。任何方向都可以作为参考向量,只要明确定义即可。
很常见的是,方位角或罗盘方位在一个系统中表示,其中北或南可以是零,并且可以从零顺时针或逆时针测量角度。
首先说明的参考方向始终是北或南,最后说明的转向方向是东或西。选择方向,使它们之间的角度为正,介于 0 和 90 度之间。如果方位恰好在基点之一的方向上,则使用不同的符号。
**注意:**项目中我们规定正北为0° 方位角,顺时针逐渐增加,直到360° 方位角
我的理解就是一个leaflet的绘制插件,具体可以查看Leaflet-Geoman官网,本功能就是使用它绘制Circle
Turf.js 是一个用于地理空间计算的 JavaScript 库。它提供了许多地理空间操作的函数,如点线面的创建、缓冲区计算、距离计算、区域合并等,方便在前端应用中处理地理空间数据和实现地图相关功能。Turf.js 不依赖于任何地图库,可以在任何 JavaScript 环境中使用。
绘制Circle可以使用Leaflet-Geoman绘制,但是方位角的话不能直接获取,所以我想用turf.js里面的**bearing**,取两点,找出它们之间的地理方位,即从北线(0度)开始测量的角度。这两点就是绘制的圆的圆心(start),鼠标移动的坐标点(end),这样就能实时得到方位角了。
/**
* @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 {
}
}
//风圈使用的hook
let {
startDraw: startWindCircle,
closeDraw: closeWindCircle,
units,
steps,
} = useWindCircle(props.lMap, undefined, e => {
alert(JSON.stringify(e))
})
使用startWindCircle()开始绘制,closeWindCircle()结束绘制,绘制完成会进入上面的回调函数,并返回我们要的圆的轮廓坐标还有方向角({direction:xxx,coords:[]})
效果如下
本文为学习笔记,仅供参考
文章浏览阅读122次。还是A+BTime Limit: 2000/1000 MS (Java/Others)Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 24568Accepted Submission(s): 11729Problem Description读入两个小于10000的正整数A和B,计算A+B。...
文章浏览阅读419次。HEADERS:在BASIC的基础上,额外记录了请求和响应的头信息。FULL:记录所有请求和响应的明细,包括头信息、请求体、元数据。BASIC:仅记录请求的方法,URL以及响应状态码和执行时间。NONE:不记录任何日志信息,这是默认值。配置Feign日志有两种方式;方式二:java代码实现。注解中声明则代表某服务。方式一:配置文件方式。_feign 日志设置
文章浏览阅读155次。将容器管理的持久性 Bean 用于面向服务的体系结构本文将介绍如何使用 IBM WebSphere Process Server 对容器管理的持久性 (CMP) Bean的连接和持久性逻辑加以控制,使其可以存储在非关系数据库..._javax.ejb.objectnotfoundexception: no such entity!
文章浏览阅读1.5k次。基础java练习题一、递归实现跳台阶从第一级跳到第n级,有多少种跳法一次可跳一级,也可跳两级。还能跳三级import java.math.BigDecimal;import java.util.Scanner;public class Main{ public static void main(String[]args){ Scanner reader=new Scanner(System.in); while(reader.hasNext()){ _java 递归例题
文章浏览阅读1.5k次,点赞6次,收藏6次。目录1.串应用- 计算一个串的最长的真前后缀题目描述输入输出样例输入样例输出题解2.字符串替换(string)题目描述输入输出样例输入样例输出题解3.可重叠子串 (Ver. I)题目描述输入输出样例输入样例输出题解4.字符串操作(string)题目描述输入输出样例输入样例输出题解1.串应用- 计算一个串的最长的真前后缀题目描述给定一个串,如ABCDAB,则ABCDAB的真前缀有:{ A, AB,ABC, ABCD, ABCDA }ABCDAB的真后缀有:{ B, AB,DAB, CDAB, BCDAB_对存储在string数组内的所有以字符‘a’开始并以字符‘e’结尾的单词做加密处理。
文章浏览阅读68次。西安交通大学/算法设计与问题求解/树与二叉树/MOOC_算法设计与问题求解西安交通大学
文章浏览阅读1.6k次。问题:在Vue项目中出现如下错误提示:[Vue warn]: Computed property "totalPrice" was assigned to but it has no setter. (found in <Anonymous>)代码:<input v-model="totalPrice"/>原因:v-model命令,因Vue 的双向数据绑定原理 , 会自动操作 totalPrice, 对其进行set 操作而 totalPrice 作为计..._computed property "totalprice" was assigned to but it has no setter.
文章浏览阅读60次。十分暴力而简洁的解决方式:读取P和T的位置并自动生成唯一正确答案,将题给测点与之对比,不一样就给我爬!_basic 1003 case 1
文章浏览阅读422次。原标题:详解将Web项目War包部署到Tomcat服务器基本步骤详解将Web项目War包部署到Tomcat服务器基本步骤1 War包War包一般是在进行Web开发时,通常是一个网站Project下的所有源码的集合,里面包含前台HTML/CSS/JS的代码,也包含Java的代码。当开发人员在自己的开发机器上调试所有代码并通过后,为了交给测试人员测试和未来进行产品发布,都需要将开发人员的源码打包成Wa..._/opt/bosssoft/war/medical-web.war/web-inf/web.xml of module medical-web.war.
文章浏览阅读3k次,点赞3次,收藏13次。# -*- coding: utf-8 -*-# 简述:这里有四个数字,分别是:1、2、3、4#提问:能组成多少个互不相同且无重复数字的三位数?各是多少?def f(n):list=[]count=0for i in range(1,n+1):for j in range(1, n+1):for k in range(1, n+1):if i!=j and j!=k and i!=k:list.a..._python求从0到9任意组合成三位数数字不能重复并输出
文章浏览阅读1k次,点赞3次,收藏2次。<el-table-column prop="studentSex" label="性别" :formatter="sex"></el-table-column>然后就在vue的methods中写方法就OK了methods: { sex(row,index){ if(row.studentSex == 1){ return '男'; }else{ return '女'; }..._elementui table 性别
文章浏览阅读1.1k次。java文件操作之移动文件到指定的目录_java中怎么将pro.txt移动到design_mode_code根目录下