箭头坐标轴和圆坐标轴

为了实现Cesium 对模型的拖拽平移和旋转，需要以模型为中心建立箭头坐标轴（沿坐标轴方向移动）和圆坐标轴（沿圆弧方向旋转）。

实现思路

利用Cesium的矩阵运算，创建primitive，操作矩阵实现各种坐标轴。箭头坐标轴比圆坐标轴简单很多，Cesium内置了箭头材质，更改材质即可。

绘制箭头坐标

Cesium中添加图形的两种方法，一种是entities，一种是primitives。后者更适合开发，主要用到modelmatrix属性。添加箭头可以理解为添加同一个坐标起点的本地沿坐标轴方向的三条箭头线。
宽度和长度可根据需求自己调节。主要更改material即可。

// 创建x方向的箭头var arrowx = viewer.entities.add({name:"arrowx",polyline:{positions:Cesium.Cartesian3.fromDegreesArrayHeights([lon,lat,hei,lon+0.00003,lat,hei]),width:25,arcType:Cesium.ArcType.NONE,material:new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED),},});

依次画出y、z坐标。

绘制圆坐标

绘制圆坐标的话，用primitive来画，要用到modelmatrix。用线画圆可以调节圆的宽度。可以创建圆后，拿到圆的坐标，再用线绘制。
绘制圆，granularity越小，密度越大。

  var circle = new Cesium.CircleOutlineGeometry({center:Cesium.Cartesian3.fromDegrees(lan,lat,height),radius:3.0,granularity:0.001});

取坐标,存入数组

  var geometry = new Cesium.CircleOutlineGeometry.createGeometry(circle);var Positions = geometry.attributes.position.values;var Pos = [].slice.call(Positions);

把坐标转换为position

  var erll =  Positions.length/3;var erl = [];for (var  h=0;h<erll;h++){erl[h] =[];}var k =0;for (var p = 0;p<erll;p++){for (var q = 0;q<3;q++){erl[p][q]= Pos[k];k++;if(k>Positions.length-1){break;}}}var posCirle = [];for (var t= 0;t<erl.length;t++){var car3 = new Cesium.Cartesian3();posCirle.push(new Cesium.Cartesian3(erl[t][0],erl[t][1],erl[t][2]));}//首尾相连posCirle.push(new Cesium.Cartesian3(erl[0][0],erl[0][1],erl[0][2]));

创建GeometryInstance

var polyline = new Cesium.PolylineGeometry({positions: posCirle,width: 5.0,vertexFormat:Cesium.PolylineColorAppearance.VERTEX_FORMAT});var rectangleInstance = new Cesium.GeometryInstance({geometry: polyline,attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE),},id:"lineZ"});//HEADING

绘制,依次绘制剩余坐标轴

 var lineZ = new Cesium.Primitive({geometryInstances:rectangleInstance ,appearance:new Cesium.PolylineColorAppearance({translucent:false}),asynchronous: false,});viewer.scene.primitives.add(lineZ);

转换坐标轴，用这种方法绘制的圆实际上是没有经过坐标转换矩阵的，默认单位阵。可以通过Cesium.Matrix3.fromRotationX（或者yz）生成旋转矩阵，再与原矩阵相乘。

这里建议手写转换矩阵，学过坐标矩阵转换后很容易理解。分别将绘制的圆绕x轴和y轴旋转，再平移矩阵至原坐标点。当仅有X坐标时的旋转矩阵，如下（注意Cesium矩阵的写法，按行输入）：

  lineY.modelMatrix = new Cesium.Matrix4(0,0,1,X,0,1,0,0,1,0,0,-X,0,0,0,1);lineX.modelMatrix = new Cesium.Matrix4(0,1,0,X,1,0,0,-X,0,0,1,0,0,0,0,1);

坐标的平移量可以通过圆心点的坐标来计算。

 var cartest = new Cesium.Cartesian3(x,y,z);cartest = Cesium.Matrix4.multiplyByPoint(lineX.modelMatrix,cartest,cartest);console.log(cartest);

通过计算cartest的坐标差值来计算平移量。

总结

绘制箭头相对比较简单，不需要矩阵操作，如果需要的话，建议也用primitive绘制，方法与圆坐标的方法相同。绘制圆坐标的主要是获取坐标点后，对绘制的圆进行坐标矩阵转换。可以通过其他讲解坐标转换矩阵的博客进行学习。一些有关Cesium中的坐标矩阵问题后续会进行说明和补充。

下一篇博客会讲述如何实现模型沿坐标轴平移和旋转。

Cesium 自定义箭头坐标轴圆坐标轴（一）相关推荐

python使用matplotlib可视化、使用locator_params函数自定义调整Y轴坐标轴的刻度的个数（customize number of ticks of y axis）
python使用matplotlib可视化.使用locator_params函数自定义调整Y轴坐标轴的刻度的个数(customize number of ticks of y axis) 目录
绘画带箭头的xy坐标轴
项目场景: 需要用python绘画带箭头的xy坐标轴,代码如下: ax = axisartist.Subplot(fig, 212) fig.add_axes(ax) ax.axis["bo ...
pyqt5,Qchart画折线图,设定多个不同刻度的Y轴,修改自定义折线图的坐标轴,改变折线图的底色
就是这些自己遇到的需求: 如有不对,请大佬不吝赐教. Qchart设定多个不同刻度的Y轴修改自定义折线图的坐标轴改变折线图的底色,底色透明鼠标悬停事件 import datetime impor ...
select自定义箭头问题。。。和一行内不同颜色的整体鼠标滑过变色
1.select自定义箭头问题用<select><option></option></select>的时候自带的三角箭头与需要的三角不同,这是还要求有 ...
C# 自定义箭头组件
C#自定义箭头组件,效果如图: 实现的功能: 1) 箭头方向属性左.右.上.下: 2) 颜色渐变,且颜色任意调整: 3) 箭头大小位置任意调整: 4) 其他. 主要代码如下: 1 using Syst ...
自定义圆形倒计时Android,Android自定义View倒计时圆
本文实例为大家分享了Android自定义View倒计时圆的具体代码,供大家参考,具体内容如下创建attr 创建DisplayUtil 类 import android.content.Context ...
select自定义箭头样式
select自定义箭头样式?兼容性? html代码如下: <div class="selectwrap"><div>类别</div><se ...
android xml画圆,Android自定义View画圆功能
本文实例为大家分享了Android自定义View画圆的具体代码,供大家参考,具体内容如下引入布局 xmlns:tools="http://schemas.android.com/tools ...
自定义函数求圆和圆柱体的表面积
本题要求自定义函数求圆和圆柱体的表面积. 自定义两个area函数,一个形参的实现求圆的面积,两个形参的实现求圆柱体的表面积.PI是全局符号常量. 函数接口定义: double area(double ...

Cesium 自定义箭头坐标轴圆坐标轴（一）

Cesium 自定义箭头坐标轴圆坐标轴（一）

箭头坐标轴和圆坐标轴

实现思路

绘制箭头坐标

绘制圆坐标

总结

Cesium 自定义箭头坐标轴圆坐标轴（一）相关推荐

最新文章

热门文章

Cesium 自定义箭头坐标轴 圆坐标轴（一）

Cesium 自定义箭头坐标轴 圆坐标轴（一）

箭头坐标轴和圆坐标轴

实现思路

绘制箭头坐标

绘制圆坐标

总结

Cesium 自定义箭头坐标轴 圆坐标轴（一）相关推荐

最新文章

热门文章

Cesium 自定义箭头坐标轴圆坐标轴（一）

Cesium 自定义箭头坐标轴圆坐标轴（一）

Cesium 自定义箭头坐标轴圆坐标轴（一）相关推荐