千家信息网

Cesium怎么实现简单的箭头效果

发表于:2024-11-18 作者:千家信息网编辑
千家信息网最后更新 2024年11月18日,本篇内容介绍了"Cesium怎么实现简单的箭头效果"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在m
千家信息网最后更新 2024年11月18日Cesium怎么实现简单的箭头效果

本篇内容介绍了"Cesium怎么实现简单的箭头效果"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

/**

* 计算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是相对于当前坐标的偏移米数
//返回值可以是 Carte sian3 坐标,也可以是经纬度坐标

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方向的偏移距离,调用函数,就能计算出新的点位置,将点连接成线,就能实现简单箭头的效果。

"Cesium怎么实现简单的箭头效果"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!

0