cesium中的坐标转换

cesium# 系列文章目录

在开始之间，我们先回顾下角度和弧度的转换：

• 角度转换为弧度。弧度=角度×(π÷180)。
• 弧度转换为角度。角度=弧度×(180÷π)。

接下来进入正题：
1.经纬度坐标转世界坐标

• 直接转换

  var cartesian3 = Cesium.Cartesian3.fromDegrees(lng, lat, height);
  

  demo：

  const position1 = Cesium.Cartesian3.fromDegrees(0, 90, 0)
  /**
  	Cartesian3 {
  		x: 3.9186209248144716e-10, 
  		y: 0, 
  		z: 
  		6356752.314245179
  }
  

  //将视角移到北京市的中心，即相机的位置
  viewer.camera.setView({
      destination: Cartesian3.fromDegrees(116.405285, 39.904989, 1000),
      orientation: {
       	heading: CesiumMath.toRadians(90.0), // 偏航角
          pitch: CesiumMath.toRadians(-90.0), // 俯视角度：向下
          roll: 0.0 // 翻滚角
      }
  })
  

  ​

• 借助ellipsoid对象，先转换成弧度再转换

  var wgs84 = Cesium.Cartographic.fromDegrees(lng, lat, height); //单位：经度，纬度，米  
  var cartesian3 = ellipsoid.cartographicToCartesian(wgs84);  //得到笛卡尔坐标系
  

  demo：

  var wgs84 = Cesium.Cartographic.fromDegrees(0, 90, 0);
  /**
  Cartographic {
  	longitude: 0, 
  	latitude: 1.5707963267948966, 
  	height: 0
  }
  */
  var cartesian3 = ellipsoid.cartographicToCartesian(wgs84); 
  /**
  Cartesian3 {
  	x: 3.9186209248144716e-10, 
  	y: 0, 
  	z: 6356752.314245179
  }
  */
  ```​
  

2.世界坐标转经纬度

• 笛卡尔空间直角坐标系转为地理坐标（弧度制）

  var cartographic = Cesium.Cartographic.fromCartesian(cartesian3); // 方法1
  var cartographic = ellipsoid.cartesianToCartographic(cartesian3); // 方法2
  

  demo：

  const position1 = Cesium.Cartesian3.fromDegrees(0, 90, 0)
  var cartographic = Cesium.Cartographic.fromCartesian(position1); // 方法1
  /**
  Cartographic {longitude: 0, latitude: 1.5707963267948966, height: 1.862645149230957e-9}
  */
  var cartographic = ellipsoid.cartesianToCartographic(cartesian3); // 方法2
  /**
  Cartographic {longitude: 0, latitude: 1.5707963267948966, height: 1.862645149230957e-9}
  */
  

  ​

• 地理坐标（弧度制）转为经纬度坐标（角度制）

  var lng = Cesium.Math.toDegrees(cartographic.longitude);
  var lat = Cesium.Math.toDegrees(cartographic.latitude);
  var height = cartographic.height;
  

  demo：

  /**
  cartographic：
  Cartographic {longitude: 0, latitude: 1.5707963267948966, height: 1.862645149230957e-9}
  */
  // lat 0
  // lng 90
  // height 1.862645149230957e-9
  

  ​

3.弧度和经纬度互转

• 经纬度转弧度：

  Cesium.Math.toRadians(degrees) //degrees角度
  

  demo：

  Cesium.Math.toRadians(180)
  //3.141592653589793 == PI
  

  ​

• 弧度转经纬度：

  Cesium.Math.toDegrees(radians) //radians弧度
  //Cesium.Math.toDegrees(3.141592653589793)
  

4.屏幕坐标和世界坐标互转

• 屏幕转世界坐标：

  ps：二维屏幕坐标转为三维笛卡尔空间直角坐标（世界坐标）

  var cartesian3 = viewer.scene.globe.pick(
    viewer.camera.getPickRay(windowPostion),
    viewer.scene
  );
  //注意这里屏幕坐标一定要在球上，否则生成出的cartesian对象是undefined。
  

  const cesiumContainer = document.getElementById('cesiumContainer')
  cesiumContainer.onclick = (e) => {
    let p = new Cesium.Cartesian2(e.clientX, e.clientY)
    var cartesian3 = viewer.scene.globe.pick(
      viewer.camera.getPickRay(p),
      viewer.scene
    );
    console.log(cartesian3)
    //Cartesian3 {x: 6378136.9999909, y: 0.0057931338321009496, z: 0.001302405710883886}
  }
  

  上面这个点其实很接近赤道和本初子午线的交点了，怎么测试呢，就是将地图上的交点一直放大，然后点击，就发现这个点越来越接近了。

• 世界坐标转屏幕坐标：

  ps：三维笛卡尔空间直角坐标（世界坐标）转为二维屏幕坐标

  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(0, 0, 10000000),
  })
  var windowPostion = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
    viewer.scene,
    Cesium.Cartesian3.fromDegrees(0, 0, 0)
  );
  console.log(windowPostion)
  // 结果是Cartesian2对象，取出X,Y即为屏幕坐标。
  

  可以将视角设置到赤道和本初子午线的交点，然后结合上面的方法测试一下，两个坐标是否吻合。

里面很多知识是以前记录的，当时看的文章真的看不到了。。。没法放链接了0.0