cesiumjs開發實踐 (五)

                                              座標變換

摘要
cesium中常用的座標有兩種WGS84地理座標系和笛卡爾空間座標系。

cesium中常用的座標有兩種WGS84地理座標系和笛卡爾空間座標系。我們平時常用的以經緯度來指明一個地點就是用的WGS84座標,笛卡爾空間座標系常用來做一些空間位置變換如平移旋轉縮放等等。二者的聯繫如下圖

笛卡爾空間座標的原點就是橢球的中心。

      在實際應用中用的最多的操作就是(lng, lat, alt)<=>(x, y, z)之間的相互轉換,cesiumjs爲我們提供了這些轉換

var ellipsoid = viewer.scene.globe.ellipsoid;
var coord_wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, alt);//單位:度,度,米
var coord_xyz = ellipsoid.cartographicToCartesian(coord_wgs84);
console.log('x=' + coord_xyz.x + ',y=' + coord_xyz.y + ',z=' + coord_xyz.z);//單位:米,米,米

var xyz = new Cesium.Cartesian3(x, y, z);
var wgs84 = ellipsoid.cartesianToCartographic(xyz);
console.log('lng=' + Cesium.Math.toDegrees(wgs84.longitude) + ',lat=' + Cesium.Math.toDegrees(wgs84.latitude) + ',alt=' + wgs84.height);


需要注意cesium內部的角度單位是弧度,因此輸入計算或輸出顯示時需要轉換。

    轉換到笛卡爾座標系後就能運用計算機圖形學中的仿射變換知識進行空間位置變換如平移旋轉縮放。cesiumjs爲我們提供了很有用的變換工具類,Cesium.Cartesian3(相當於Point3D)Cesium.Matrix3(3x3矩陣,用於描述旋轉變換)Cesium.Matrix4(4x4矩陣,用於描述旋轉加平移變換),Cesium.Quaternion(四元數,用於描述圍繞某個向量旋轉一定角度的變換)。下面舉個例子:

      一個局部座標爲p1(x,y,z)的點,將它的局部座標原點放置到loc(lng,lat,alt)上,局部座標的z軸垂直於地表,局部座標的y軸指向正北,並圍繞這個z軸旋轉d度,求此時p1(x,y,z)變換成全局座標笛卡爾坐p2(x1,y1,z1)是多少?

var rotate = Cesium.Math.toRadians(d);//轉成弧度
var quat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, rotate); //quat爲圍繞這個z軸旋轉d度的四元數
var rot_mat3 = Cesium.Matrix3.fromQuaternion(quat);//rot_mat3爲根據四元數求得的旋轉矩陣
var v = new Cesium.Cartesian3(x, y, z);//p1的局部座標
var m = Cesium.Matrix4.fromRotationTranslation(rot_mat3, Cesium.Cartesian3.ZERO);m2爲旋轉加平移的4x4變換矩陣,這裏平移爲(0,0,0),故填個Cesium.Cartesian3.ZERO
m = Cesium.Matrix4.multiplyByTranslation(m, v);//m = m X v
var cart3 = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(lng, lat, alt)); //得到局部座標原點的全局座標
var m1 = Cesium.Transforms.eastNorthUpToFixedFrame(cart3);//m1爲局部座標的z軸垂直於地表,局部座標的y軸指向正北的4x4變換矩陣
m = Cesium.Matrix4.multiplyTransformation(m, m1);//m = m X m1
var p2 = Cesium.Matrix4.getTranslation(m);//根據最終變換矩陣m得到p2
console.log('x=' + p2.x + ',y=' + p2.y + ',z=' + p2.z );

本篇到此結束,下一篇《cesiumjs開發實踐(六) CZML》


發佈了82 篇原創文章 · 獲贊 209 · 訪問量 57萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章