第二章、認(rèn)識Cesium.js中的坐標(biāo)系

Cesium項目中經(jīng)常涉及到模型加載、定位、預(yù)覽都需要用到坐標(biāo)系，弄明白Cesium中采用的坐標(biāo)系以及各個坐標(biāo)系之間的轉(zhuǎn)換，是做三維GIS場景的前提。

而在Cesium中常用的坐標(biāo)有兩種WGS84地理坐標(biāo)系和笛卡爾空間坐標(biāo)系。

一、WGS84地理坐標(biāo)系

1、 WGS84經(jīng)緯度坐標(biāo)系

就是通俗的地圖地理坐標(biāo)經(jīng)緯度

2、 WGS84弧度坐標(biāo)系（Cartographic）

在數(shù)學(xué)上被稱為球坐標(biāo)系。

image.png

new Cesium.Cartographic(longitude, latitude, height)

以弧度表示在球體中的坐標(biāo)點位

longitude：經(jīng)度
latitude：緯度
height：弧度即角度對應(yīng)弧長是半徑的倍數(shù)【橢球上方的高度（以米為單位）】

返回一個球坐標(biāo)類型

image.png

弧度和角度的轉(zhuǎn)換公式

image.png

角度轉(zhuǎn)弧度 π/180×角度
弧度變角度 180/π×弧度

二、笛卡爾空間坐標(biāo)系

1、平面坐標(biāo)系

平面坐標(biāo)系也就是平面直角坐標(biāo)系，是一個二維笛卡爾坐標(biāo)系

new Cesium.Cartesian2(x, y)

image.png

一般表示canvas屏幕坐標(biāo)位置，平面的點位坐標(biāo)

image.png

2、空間直角坐標(biāo)系

笛卡爾空間坐標(biāo)的原點就是橢球的中心，我們在計算機上進行繪圖時，不方便使用經(jīng)緯度直接進行繪圖，一般會將坐標(biāo)系轉(zhuǎn)換為笛卡爾坐標(biāo)系，使用計算機圖形學(xué)中的知識進行繪圖

new Cesium.Cartesian3 ( x , y , z )

image.png

三、坐標(biāo)系轉(zhuǎn)換

1、經(jīng)緯度坐標(biāo)轉(zhuǎn)弧度

方法一

         // 將弧度轉(zhuǎn)為度的十進制度表示，保留5位小數(shù)
        const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
        const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
        console.log(`經(jīng)度：${lon}, 緯度：${lat}`);
        // 將經(jīng)緯度轉(zhuǎn)成弧度
        const longitude = Cesium.Math.toRadians(lon).toFixed(5);
        const latitude = Cesium.Math.toRadians(lat).toFixed(5);
        console.log(`經(jīng)弧度：${longitude}, 緯弧度：${latitude}`);

image.png

方法二

 console.log(`經(jīng)度：${lon}, 緯度：${lat}`);
        const cartographic1 = Cesium.Cartographic.fromDegrees(
          parseFloat(lon),
          parseFloat(lat),
          50
        );
        console.log(cartographic1);
        
         console.log(
          `經(jīng)弧度：${cartographic.longitude}, 緯弧度：${cartographic.latitude}`
        );
        const cartographic2 = Cesium.Cartographic.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          50
        );
        console.log(cartographic2);

image.png

2、平面坐標(biāo)系轉(zhuǎn)空間坐標(biāo)系

const cartesian = viewer.camera.pickEllipsoid(click.position);
console.log(cartesian);

image.png

3、 三維坐標(biāo)系轉(zhuǎn)成球坐標(biāo)系

   const cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(
          cartesian
        );
        console.log(cartographic);

image.png