头图

Cartesian笛卡尔坐标系

二维平面直角坐标系Cartesian2

Cartesian2通常用于表示二维笛卡尔坐标,例如在屏幕空间中表示鼠标的位置

`
var cartesian2 = new Cesium.Cartesian2(x, y);
`

image.png

image.png

空间直角坐标系Cartesian3

笛卡尔空间坐标的原点就是椭球的中心,我们在计算机上进行绘图时,不方便使用经纬度直接进行绘图,一般会将坐标系转换为笛卡尔坐标系,使用计算机图形学中的知识进行绘图

new Cesium.Cartesian3 ( x , y , z )

x :横轴(默认指向东经0度,北纬0度);
y:纵轴(默认指向东经90度,北纬0度);
z:竖轴(默认指向东经0度,北纬90度

      window.viewer.entities.add({
          id:"1",
          position : Cesium.Cartesian3.fromDegrees(104.1, 30.6, 200),
          box : { 
            dimensions : new Cesium.Cartesian3(200.0, 200.0, 200.0),
            material : Cesium.Color.fromRandom({alpha : 1.0})
          }
      })

可以简单的看作一个实体在空间坐标系中的长宽高。

image.png

image.png

Cartesian2和Cartesian3的相互转换

1、Cartesian2转Cartesian3

 /**
    * @description: 坐标系
    * @return {*}
    */    
   const handelCartesian = ()=>{
    let handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
    handler.setInputAction(function (event) {      
        const cartesian2= event.position
        console.log('屏幕坐标(平面坐标系cartesian2)', event.position);
        const cartesian3 = window.viewer.scene.globe.pick(window.viewer.camera.getPickRay(cartesian2),window.viewer.scene);  
        console.log('空间坐标系(笛卡尔坐标系cartesian3)',cartesian3);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
   }      

image.png

注意:如果出现cartesian对象是undefined时,就要排查一下当前的屏幕坐标是否存在于地球球面上。

1、Cartesian3转Cartesian2

/**
    * @description: 坐标系
    * @return {*}
    */    
   const handelCartesian = ()=>{
    let handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
    handler.setInputAction(function (event) {      
        const cartesian= event.position
        console.log('屏幕坐标(平面坐标系cartesian2)', event.position);
        const cartesian3 = window.viewer.scene.globe.pick(window.viewer.camera.getPickRay(cartesian),window.viewer.scene);  
        console.log('空间坐标系(笛卡尔坐标系cartesian3)',cartesian3);
        const cartesian2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, cartesian3);
        console.log('转换后:屏幕坐标(平面坐标系cartesian2)', cartesian2);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
   } 

image.png

Cartographic WGS84弧度坐标系

 WGS84经纬度坐标系

地图地理坐标经纬度

image.png

其实这里地理坐标就是(104.1, 30.6)这种常见的坐标系。地理坐标系无法直接加载到地球球体上,需要转成空间直角坐标系Cartesian3才能加载。

WGS84经纬度坐标系转成世界坐标系

const handelCartographic = ()=>{
    const a = new Cesium.Cartesian3.fromDegrees(104.1, 30.6, 200);
    console.log(a);
    
  }

image.png

 WGS84弧度坐标系(Cartographic)

在数学上被称为球坐标系

image.png

new Cesium.Cartographic(longitude, latitude, height)

以弧度表示在球体中的坐标点位

const handelCartographic = ()=>{
    const a = new Cesium.Cartesian3.fromDegrees(104.1, 30.6, 200);
    console.log(a);
    const b = new Cesium.Cartographic.fromDegrees(104.1, 30.6, 200);
    console.log(b); 
  }

image.png

longitude:经度
latitude:纬度
height:弧度即角度对应弧长是半径的倍数【椭球上方的高度(以米为单位)】

注:这里的经纬度是用弧度表示的,经纬度其实就是角度。弧度即角度对应弧长是半径的倍数。
角度转弧度: π / 180 × 角度
弧度变角度: 180 / π × 弧度

世界坐标系和WGS84坐标系相互转换

WGS84弧度坐标系转世界坐标

const handelCartographic = ()=>{
    const a = new Cesium.Cartesian3.fromDegrees(104.1, 30.6, 200);
    console.log("世界坐标",a);
    const b = new Cesium.Cartographic.fromDegrees(104.1, 30.6, 200);
    console.log("WGS84弧度坐标系",b); 
    /* 方法一 */
    const c = new Cesium.Cartesian3.fromRadians(b.longitude,b.latitude,b.height)
    console.log("方法一WGS84弧度坐标系转世界坐标",c);
    /* 方法二 */
    const ellipsoid = window.viewer.scene.globe.ellipsoid; 
    const cartesian3 = ellipsoid.cartographicToCartesian(b);
    console.log("方法二WGS84弧度坐标系转世界坐标",cartesian3);

    // 方法三
    const d = new  Cesium.Cartographic.toCartesian(b)
    console.log('WGS84弧度坐标系转换为世界坐标',d);
  }

image.png

世界坐标转换为WGS84弧度坐标系

const handelCartographic = ()=>{
    const a = new Cesium.Cartesian3.fromDegrees(104.1, 30.6, 200);
    console.log("世界坐标",a);
    const b = new Cesium.Cartographic.fromDegrees(104.1, 30.6, 200);
    console.log("WGS84弧度坐标系",b); 
    const c = Cesium.Cartographic.fromCartesian(a)
    console.log('世界坐标转换为WGS84弧度坐标系',c);
  }

image.png

世界坐标转换为WGS84经纬度坐标系

const handelCartographic = ()=>{
    const ellipsoid = window.viewer.scene.globe.ellipsoid;  
    const a = new Cesium.Cartesian3.fromDegrees(104.1, 30.6, 200);
    console.log("世界坐标",a); 
    const cartographic = ellipsoid.cartesianToCartographic(a);
    console.log(cartographic);
    // toDegrees:将弧度转换为度数函数
    const lat = Cesium.Math.toDegrees(cartographic.latitude);
    const lng = Cesium.Math.toDegrees(cartographic.longitude);
    const alt = cartographic.height;
    console.log('世界坐标转换为经纬度',lat,lng,alt);
  }

image.png

经纬度转弧度:
Cesium.CesiumMath.toRadians(degrees)
弧度转经纬度:
Cesium.CesiumMath.toDegrees(radians)

帅小鹏
0 声望0 粉丝