Cesium Map

Resium 库

• resium - React components for 🌏 Cesium.

React 生态

• React
• React Hooks
• Redux
• Dva
• Umi
• Mobx
• immutable-js、immer
• memoize-one

Webpack Cesium

• CesiumJS and Webpack
• Set up webpack configuration
• craco-cesium - Cesium with create-react-app

Cesium 常用坐标系

1. 屏幕坐标

• 像素值

2. 笛卡尔平面坐标

• new Cesium.Cartesian2(x, y)

3. 笛卡尔空间直角坐标

椭球中心为原点的空间直角坐标系中的一个点的坐标

• new Cesium.Cartesian3(x, y, z)

4. 经纬度

地理坐标系，坐标原点在椭球的质心。

经度：参考椭球面上某点的大地子午面与本初子午面间的两面角。东正西负。

纬度 ：参考椭球面上某点的法线与赤道平面的夹角。北正南负。

Cesuim中没有具体的经纬度对象，要得到经纬度首先需要计算为弧度，再进行转换。

5. 弧度

弧度即角度对应弧长是半径的倍数

角度转弧度：π/180×角度

弧度变角度：180/π×弧度

• longitude, latitude 弧度值
• height 单位米
• new Cesium.Cartographic(longitude, latitude, height)

Cesium 坐标变换

1. 地理坐标与笛卡尔空间直角坐标

1.1 地理坐标(经纬度) 转换为 笛卡尔空间直角坐标

• 方式一：直接转换

const position_cartesian3 = Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid)

• 方式二：先转换成弧度再转换

借助 ellipsoid 对象的方法

const ellipsoid = viewer.scene.globe.ellipsoid;
const cartographic = Cesium.Cartographic.fromDegrees(longitude, latitude, height, ellipsoid);
const position_cartesian3 = ellipsoid.cartographicToCartesian(cartographic);

1.2 地理坐标(弧度制) 转换为 笛卡尔空间直角坐标

const position_cartesian3 = Cesium.Cartesian3.fromRadians(longitude, latitude, height, ellipsoid)

1.3 笛卡尔空间直角坐标 转换为 地理坐标(弧度制)

const cartographic = Cesium.Cartographic.fromCartesian(cartesian)

1.4 笛卡尔空间直角坐标 转换为 地理坐标(经纬度)

• 方式一

const cartographic = Cesium.Cartographic.fromCartesian(cartesian) 
const lat = Cesium.Math.toDegrees(cartographic.latitude);
const lng = Cesium.Math.toDegrees(cartographic.longitude);
const alt = cartographic.height;

• 方式二

借助 ellipsoid 对象的方法

const ellipsoid = viewer.scene.globe.ellipsoid;
const position_cartesian3 = new Cesium.cartesian3(x, y, z);
const cartographic = ellipsoid.cartesianToCartographic(position_cartesian3);
const lat = Cesium.Math.toDegrees(cartographic.latitude);
const lng = Cesium.Math.toDegrees(cartographic.longitude);
const alt = cartographic.height;

经纬度与弧度互转

// 将弧度转化为经纬度
Cesium.Math.toDegrees(radians)
// 将经纬度转化弧度
Cesium.Math.toRadians(degrees)

2. 屏幕坐标与笛卡尔空间直角坐标

2.1 获取鼠标单击后在屏幕中的坐标

const hander = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
//绑定鼠标左点击事件
hander.setInputAction((event) => {
//获取鼠标点的 windowPosition: Cesium.Cartesian2
  const windowPosition = event.position;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

屏幕坐标转换为笛卡尔空间直角坐标

• 三维模式下

const ray = viewer.camera.getPickRay(windowPosition);
const position_cartesian3 = viewer.scene.globe.pick(ray, viewer.scene);

• 二维模式下

const position_cartesian3 = viewer.scene.camera.pickEllipsoid(windowPosition, scene.globe.ellipsoid);

笛卡尔空间直角坐标转换为屏幕坐标

// position_cartesian2: Cartesian2
const position_cartesian2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position_cartesian3);

Cesuim Api

Ellipsoid 行星形状定义

new Cesium.Ellipsoid(x, y, z);

Globe

new Cesium.Globe(ellipsoid);

Methods

• getHeight(cartographic) 获取表面的高度

Math

• Cesium.Math.toDegrees(radians) 将弧度转化为经纬度
• Cesium.Math.toRadians(degrees) 将经纬度转化弧度

Cartographic 地理坐标(弧度制)

new Cesium.Cartographic(longitude, latitude, height);

ImageLayer 图层加载

Terrain 地形加载

Camera 相机

new Cesium.Camera(scene);

Members

• positionCartographic 相机的位置

Methods

• pickEllipsoid(windowPosition, ellipsoid) 将屏幕坐标转换为对应椭球体三维笛卡尔坐标

Entity 实体

Primitive 图元

Primitive 由两个部分组成

• Geometry 几何形状：定义了 Primitive 的结构，例如三角形、线条、点等
• Appearance 外观：定义 Primitive 的着色(Sharding)，包括 GLSL(OpenGL着色语言) 顶点着色器和片段着色器(vertex and fragment shaders)，以及渲染状态(render state）

Cesuim 插件

• cesium-tdt