Cesium开发：简单箭头画法

在mapbox-gl上，可以借助turf.js实现简单箭头的画法，Cesium调用本身的api，同样能够实现箭头的画法。
实现的方式，也是先计算两个点相对于北向的角度，再根据角度计算一定距离的点坐标，从而达到实现箭头的效果。
Cesium计算相对于北向的角度，是根据矩阵来进行计算的，这里参考了网上了一篇博客。
具体的实现代码函数：
原文链接：

https://blog.csdn.net/zy123698745/article/details/102798042
/*** 计算a点和b点的角度（偏转角）* @param lng_a  a点经度* @param lat_a  a点维度* @param lng_b  b点经度* @param lat_b  b点维度* @returns 角度*/function courseAngle(lng_a, lat_a, lng_b, lat_b) {//以a点为原点建立局部坐标系（东方向为x轴,北方向为y轴,垂直于地面为z轴），得到一个局部坐标到世界坐标转换的变换矩阵var localToWorld_Matrix =
Cesium.Transforms.eastNorthUpToFixedFrame(new Cesium.Cartesian3.fromDegrees(lng_a, lat_a));
//求世界坐标到局部坐标的变换矩阵
var worldToLocal_Matrix =
Cesium.Matrix4.inverse(localToWorld_Matrix, new Cesium.Matrix4());
//a点在局部坐标的位置，其实就是局部坐标原点var localPosition_A =
Cesium.Matrix4.multiplyByPoint(worldToLocal_Matrix,
new Cesium.Cartesian3.fromDegrees(lng_a, lat_a),
new Cesium.Cartesian3());//B点在以A点为原点的局部的坐标位置
var localPosition_B =
Cesium.Matrix4.multiplyByPoint(worldToLocal_Matrix,
new Cesium.Cartesian3.fromDegrees(lng_b, lat_b),
new Cesium.Cartesian3());//弧度
var angle =
Math.atan2((localPosition_B.y-localPosition_A.y),
(localPosition_B.x-localPosition_A.x))//角度var theta = angle*(180/Math.PI);if (theta < 0) {theta = theta + 360;}
return theta;
}

不过，上边计算的是对应于x轴的角度，也就是相对于东边方向的角度，换算成相对偏北的角度，需要减去90度。
已知点，根据角度和距离，计算另一个点，同样是参照官方的矩阵计算方式。

//_ca_coord是Cesium  Cartesian3 坐标
//local_coord是相对于当前坐标的偏移米数
//返回值可以是Cartesian3 坐标，也可以是经纬度坐标function ComputeLngLat(_ca_coord, local_coord) {//同样是建立局部坐标系const _localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame(_ca_coord);
//根据偏移的三个方向距离，计算新的坐标点const _new_ca = Cesium.Matrix4.multiplyByPoint(_localToWorld_Ma trix, Cesium.Cartesian3.fromElements(local_coord[1], local_coord[0], local_coord[2]), new Cesium.Cartesian3());//返回不同的坐标类型，自由控制return _new_ca;return Cesium.Cartographic.fromCartesian(_new_ca);}

计算出两个点的北向偏移角，根据箭头所要偏移的角度和米数，通过三角函数sin和cos，计算出x方向和y方向的偏移距离，调用函数，就能计算出新的点位置，将点连接成线，就能实现简单箭头的效果。
详细的步骤可以参照文章开头的mapbox-gl中箭头的画法。

参考文章：

https://blog.csdn.net/zy123698745/article/details/102798042
更多文章，请关注公众号查看！

Cesium开发：简单箭头画法相关推荐

Cesium开发工具篇 | 07回顾总结
到目前为止,Cesium开发课程的篇幅已经学完四分之三了,大家如果有什么问题可以私信我或者扫描以下二维码进群沟通,若群二维码失效,可扫描最下方的公众号二维码,加我为好友并备注加群.有时会比较忙来不及回 ...
Cesium开发基础笔记总结（加载影像、加载地形数据、加载矢量）
Cesium开发基础笔记总结学习总结于GIS李胜老师博客 Cesium开发基础01加载影像数据加载影像数据 Cesium中的影像图层类: 无论是二维地图还是三维地图,如果缺少了底图影像或电子地图, ...
HiLink LiteOS IoT芯片让IoT开发简单高效
HiLink & LiteOS & IoT芯片让IoT开发简单高效华为HiLink & LiteOS & IoT芯片使能三件套,让IoT开发更简单高效.下一代智能手 ...
记事本写python怎么运行-Python开发简单记事本
摘要: 本文是使用Python,结合Tkinter开发简单记事本. 本文的操作环境:ubuntu,Python2.7,采用的是Pycharm进行代码编辑,个人很喜欢它的代码自动补齐功能. 最近很想对p ...
python一般用来开发什么-python主要用来做什么？Python开发简单吗？
python主要用来做什么?Python开发简单吗?Python技术可做web开发.Python技术可做数据分析.Python技术可做人工智能.将Python用于机器学习,流行的Python机器学习库 ...
中科院计算所开源Easy Machine Learning：让机器学习应用开发简单快捷 By 机器之心2017年6月13日 13:05 今日，中科院计算所研究员徐君在微博上宣布「中科院计算所开源了
中科院计算所开源Easy Machine Learning:让机器学习应用开发简单快捷 By 机器之心2017年6月13日 13:05 今日,中科院计算所研究员徐君在微博上宣布「中科院计算所开源了 E ...
电脑编程用户注册界面java_用JSP/Servlet开发简单的用户注册系统
用JSP/Servlet开发简单的用户注册系统 2.4界面编程实现通过JavaBeans封装了大部分的逻辑或数据操作功能.这样,JSP页面中就可以减少很多Java代码,从而使得JSP的建立和修改变得 ...
WindowsPhone7开发简单豆瓣网应用程序之界面设计
WindowsPhone7开发简单豆瓣网应用程序之界面设计最近自学了一点WindowsPhone7的知识,自己就利用豆瓣网API开发了一个小的搜索程序.好了!先看看程序运行效果吧! (启动界面) ( ...
SpringMVC+Spring4+Mybatis3集成，开发简单Web项目+源码下载
转载自 SpringMVC+Spring4+Mybatis3集成,开发简单Web项目+源码下载基本准备工作 1.安装JDK1.6以上版本,安装与配置 2.下载mybatis-3.2.0版:htt ...
好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...

Cesium开发：简单箭头画法

Cesium开发：简单箭头画法相关推荐

最新文章

热门文章