最近做了个Cesium几何编辑的功能,通过鼠标画点线面等,记录一下问题
感兴趣的朋友可以移步:LiZzhi/cesium-plugin (github.com)
功能本身不难,无非就是封装鼠标事件,记录好数据,随时可以撤销,清除。
在做画矩形时,一些坐标转换的操作折腾了我挺久(属实有点丢人了,学测绘的让坐标转换绕蒙圈属实有点丢人了。。。)。
封装一个方法,通过三个点确定一个矩形,大概的需求就是前两个点固定了一条边以后,第三个点要投影到固定边的法线上,并算出第四个点。
开始通过向量和三角函数计算,但是结果总有点小问题,后来索性直接翻CesiumAPI,发现利用Transforms基本就可以解决所有问题。
先说思路:
如下图,一次绘制 A、B、C 三点,C 点投影至 向量 AB 的法线上,确定 C1,再计算 D1
( 此处坐标轴只是为了易懂,并非真正的坐标系 )
思路有了,就该上代码了,首先要借助 Cesium 中的 Transforms API,将世界坐标系转为以 A 为原点,AB 为X轴的局部坐标系
headingPitchRollToFixedFrame 允许我们通过设置原点,姿态角等参数构建旋转矩阵首先我们先构建姿态角
function getHeadingPitch(pointA: Cartesian3, pointB: Cartesian3): number[]{ // 建立以点A为原点,X轴为east,Y轴为north,Z轴朝上的坐标系 let transform = Cesium.Transforms.eastNorthUpToFixedFrame(pointA); // 向量AB let positionvector = Cesium.Cartesian3.subtract(pointB, pointA, new Cesium.Cartesian3()); // 因transform是将A为原点的eastNorthUp坐标系中的点转换到世界坐标系的矩阵 // AB为世界坐标中的向量 // 因此将AB向量转换为A原点坐标系中的向量,需乘以transform的逆矩阵。 let vector = Cesium.Matrix4.multiplyByPointAsVector(Cesium.Matrix4.inverse(transform, new Cesium.Matrix4()), positionvector, new Cesium.Cartesian3()); // 归一化 let direction = Cesium.Cartesian3.normalize(vector, new Cesium.Cartesian3()); // heading let heading = Math.atan2(direction.y, direction.x) - Cesium.Math.PI_OVER_TWO; heading = Cesium.Math.TWO_PI - Cesium.Math.zeroToTwoPi(heading) // pitch let pitch = Cesium.Math.PI_OVER_TWO - Cesium.Math.acosClamped(direction.z) return [heading, pitch] }
然后构建旋转矩阵
let [heading, pitch] = getHeadingPitch(pointA, pointB) let hpr = new Cesium.HeadingPitchRoll(heading, pitch, 0) let localToWorldMatrix = Cesium.Transforms.headingPitchRollToFixedFrame( pointA, hpr, e ) // 世界坐标系到局部坐标系的变换矩阵 let worldToLocalMatrix = Cesium.Matrix4.inverse( localToWorldMatrix, new Cesium.Matrix4() );
然后计算局部坐标系中,C1 和 D 的坐标,并转为世界坐标系
// pointB,pointC 转局部坐标 let localPosB = Cesium.Matrix4.multiplyByPoint( worldToLocalMatrix, pointB, new Cesium.Cartesian3() ); let localPosC = Cesium.Matrix4.multiplyByPoint( worldToLocalMatrix, pointC, new Cesium.Cartesian3() ); let localPosC1 = new Cesium.Cartesian3(localPosC.x , localPosB.y) let localPosD = new Cesium.Cartesian3(localPosC.x, 0) // C1,D 世界坐标 let worldPointC1 = Cesium.Matrix4.multiplyByPoint( localToWorldMatrix, localPosC1, new Cesium.Cartesian3() ); let worldPointD = Cesium.Matrix4.multiplyByPoint( localToWorldMatrix, localPosD, new Cesium.Cartesian3() );
上述代码其实并不复杂,很好理解,完整版请移步LiZzhi/cesium-plugin (github.com),如果对您有帮助,请给我一颗star,谢谢。
标签:Cartesian3,编辑,let,几何,Cesium,new,Matrix4,坐标系 From: https://www.cnblogs.com/xt112233/p/17048118.html