外观
基础类
2129字约7分钟
2021-12-05
1. Cesium基础概念类
Mars3D对Cesium的类的使用做了一致性的封装，统一的API接口风格、并对一些事件、调度等做统一内部处理，外部使用更加简单易用，具体可以查阅Cesium介绍了解具体介绍。 但一些基础概念和底层还是与Cesium是一致的,下面我们介绍一些基础概念，既是Cesium的基础也是Mars3D的基础概念的类。
Color颜色类
Cesium中使用 Cesium.Color 类来表示一个颜色值，其由四个分量构成，分别为 red（红色值）、green（绿色值）、blue （蓝色值）、alpha（透明度），每一个分量范围都是[0,1]。
预定义颜色
Color 类上提供了很多静态成员，表示一些预定的颜色值，比如纯红色Cesium.Color.RED，其四个分量为new Cesium.Color(1,0,0,1)。
转换方法
Color 类提供了大量转换方法，用以将其他格式的颜色值和 Color 对象进行互转，比如常用的fromCssColorString(color, result)，toCssColorString()提供了从css颜色值和 Color 的互转,mars3d本身的相关对象参数中也直接支持传入css颜色值，比如color: 'red'或color: #ff0000或color: rgba(255,0,0,1)。
Math数学类
Cesium为我们封装了一个Cesium.Math类，该类的功能类似javascript自带的 Math类的功能，主要用于进行一些基础的数学计算，比如三角函数的计算、度数单位的转换等。
该类不能被实例化，它的成员和方法都是以静态的方式提供，使用时直接Cesium.Math.*即可，比如Cesium.Math.toDegrees(pitch)
JulianDate儒略日期类
Cesium使用儒略日期作为系统时间的表示，其类型为 Cesium.JulianDate，它是自4712年1月1日（公元前4713年）正午以来的天数。为了提高精度，该类存储的日期部分和秒数部分是分开的。并且为了算术安全和表示闰秒，该日期始终存储在国际原子时间标准中 (TimeStandard.TAI)
- julianDayNumber：是指整数天，因为是从公元前4713年开始计数的，所以这个数可能会很大；
- secondsOfDay：是指这一天过了多少秒；
- timeStandard：是指所用时间的标准，Cesium中主要有两种 Cesium.TimeStandard.TAI(国际原子时间标准)和Cesium.TimeStandard.UTC(协调世界时时间标准，这和js中的时间标准是一样的)。
转换方法
Cesium.JulianDate类提供了相关方法进行时间的计算和转换。
// 将 儒略日期 转成 js时间
const date = Cesium.JulianDate.toDate(map.clock.currentTime)
// 将将 js时间 转成 儒略日期
const julianDate = Cesium.JulianDate.fromDate(new Date("2017-08-25 08:18:28"))Matrix矩阵
Cesium中定义了 Cesium.Matrix2、 Cesium.Matrix3、 Cesium.Matrix4 三个类分别用来表示2x2矩阵、3x3矩阵，4x4矩阵，每个类都提供了相关的矩阵计算方法。
矩阵类型对比
| 矩阵类型 | 维度 | 典型应用场景 |
|---|---|---|
Cesium.Matrix2 | 2x2 | 二维坐标变换、纹理映射、图像处理 |
Cesium.Matrix3 | 3x3 | 三维旋转、缩放、法线矩阵计算 |
Cesium.Matrix4 | 4x4 | 三维空间变换（平移/旋转/缩放）、视图投影矩阵 |
代码示例
矩阵创建
// 创建单位矩阵
const identity4 = Cesium.Matrix4.IDENTITY.clone()
// 从旋转平移创建
const transform = Cesium.Matrix4.fromTranslationRotationScale({
translation: new Cesium.Cartesian3(10, 20, 5),
rotation: Cesium.Quaternion.IDENTITY,
scale: new Cesium.Cartesian3(1, 1, 1)
})
// 从数组创建
const matrixArray = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10, 20, 5, 1]
const matrixFromArray = Cesium.Matrix4.fromArray(matrixArray)矩阵运算
// 矩阵乘法（注意顺序）
const mvpMatrix = Cesium.Matrix4.multiply(
projectionMatrix,
Cesium.Matrix4.multiply(viewMatrix, modelMatrix, new Cesium.Matrix4()),
new Cesium.Matrix4()
)
// 矩阵求逆
const inverseMatrix = Cesium.Matrix4.inverse(modelMatrix, new Cesium.Matrix4())
// 矩阵转置
const transposed = Cesium.Matrix4.transpose(matrix, new Cesium.Matrix4())常见问题排查
- 矩阵乘法顺序错误
- 症状：物体位置/朝向异常
- 解决方案：确认矩阵乘法顺序为projection _ view _ model
- 未正确初始化矩阵
- 症状：变换结果不符合预期
- 解决方案：使用Cesium.Matrix4.IDENTITY.clone()初始化
- 未正确处理坐标系转换
- 症状：位置偏移或缩放异常
- 解决方案：使用Cesium.Transforms系列方法进行坐标系转换
- 内存泄漏问题
- 症状：性能逐渐下降
- 解决方案：使用Cesium.destroyObject()释放资源
Cartesian向量
Cesium中定义了 Cesium.Cartesian2、 Cesium.Cartesian3、 Cesium.Cartesian4 三个类分别用来表示2维向量、3维向量，4维向量，每个类都提供了相关的向量计算方法。
向量类型对比
| 矩阵类型 | 维度 | 典型应用场景 |
|---|---|---|
Cesium.Cartesian2 | 2D | 屏幕坐标、纹理坐标、二维矢量 |
Cesium.Cartesian3 | 3D | 空间坐标、方向向量、速度向量 |
Cesium.Cartesian4 | 4D | 齐次坐标、颜色带透明度、投影坐标 |
代码示例
向量创建与转换
// 从经纬度创建三维坐标
const position = Cesium.Cartesian3.fromDegrees(116.39, 39.9, 100)
// 坐标系转换
const wgs84 = new Cesium.Cartographic()
Cesium.Cartesian3.toCartographic(position, wgs84)
// 向量分量访问
const { x } = position // 直接访问分量向量运算
// 向量加减
const velocity = new Cesium.Cartesian3()
Cesium.Cartesian3.add(position1, position2, velocity)
// 点积与叉积
const dot = Cesium.Cartesian3.dot(vecA, vecB)
const cross = new Cesium.Cartesian3()
Cesium.Cartesian3.cross(vecA, vecB, cross)
// 归一化
const normalized = Cesium.Cartesian3.normalize(vec, new Cesium.Cartesian3())路径插值案例
function interpolatePositions(start, end, steps) {
const delta = new Cesium.Cartesian3()
Cesium.Cartesian3.subtract(end, start, delta)
Cesium.Cartesian3.divideByScalar(delta, steps, delta)
const positions = []
for (let i = 0; i <= steps; i++) {
const position = new Cesium.Cartesian3()
Cesium.Cartesian3.multiplyByScalar(delta, i, position)
Cesium.Cartesian3.add(start, position, position)
positions.push(position)
}
return positions
}性能优化技巧
尽量对象复用，避免频繁创建新实例
// 错误方式（产生垃圾对象）
for (let i = 0; i < 1000; i++) {
const result = Cesium.Cartesian3.add(a, b)
}
// 正确方式（复用对象）
const temp = new Cesium.Cartesian3()
for (let i = 0; i < 1000; i++) {
Cesium.Cartesian3.add(a, b, temp)
}2. Mars3D基础概念类
Mars3D中也提供了一些基础概念的类和静态方法工具类，这些类提供了一些常用的便捷辅助性功能和基础功能。
静态方法类
这些类不能被实例化，它的成员和方法都是以静态的方式提供，使用时直接mars3d.Util.*即可，比如 mars3d.Util.fetchJson({ url: configUrl })
| 类名 | 类功能说明 |
|---|---|
| mars3d.PointUtil | 单点坐标计算相关功能 |
| mars3d.PolyUtil | 多点、线面坐标计算相关功能 |
| mars3d.PointTrans | 坐标系转换功能 |
| mars3d.LayerUtil | 图层相关创建、注册、工具功能 |
| mars3d.GraphicUtil | 矢量数据相关创建、注册、工具功能 |
| mars3d.MaterialUtil | 材质相关创建、注册、工具功能 |
| mars3d.ControlUtil | 控件相关创建、注册、工具功能 |
| mars3d.EffectUtil | 特效相关创建、注册、工具功能 |
| mars3d.ThingUtil | Thing对象相关创建、注册、工具功能 |
| mars3d.MeasureUtil | 空间量算功能（距离/面积/高度差测量） |
| mars3d.DrawUtil | 标绘编辑点样式设置 |
| mars3d.DomUtil | DOM元素创建、class样式管理等功能 |
| mars3d.Util | 通用工具方法，包括不好分类的 |
BaseClass 基础类
mars3d.BaseClass 是所有类的父类，包括事件的处理，目前在mars3d的示例和通用项目中用于单功能的事件传递使用。
LngLatPoint 坐标类
坐标点的控制（含经度、纬度、高度）、Mars3D提供的是mars3d.LngLatPoint 处理地理坐标的核心类，主要用于表示包含经度、纬度和高度的三维地理坐标点。本类提供丰富的坐标操作方法和格式转换能力，常用于点状数据坐标参数和属性的传入和内部解析使用。
主要功能
- 地理坐标分量访问（经度/纬度/高度）
- 坐标格式转换（WGS84/笛卡尔坐标/数组/字符串等）
- 坐标有效性验证
- 坐标序列化与反序列化
示例代码
// 标准构造方式
const point = new mars3d.LngLatPoint(116.39, 39.9, 100)
// point 转换为 其他坐标
const cartesian3 = point.toCartesian() // 转换为 笛卡尔空间直角坐标
const cartographic = point.toCartographic() // 转换为 地理坐标(弧度制)
// 笛卡尔空间直角坐标 转换为 地理坐标(经纬度)
const point2 = mars3d.LngLatPoint.fromCartesian(cartesian3)
// 地理坐标(弧度制) 转换为 地理坐标(经纬度)
const point3 = mars3d.LngLatPoint.fromCartographic(cartographic)LngLatArray 坐标数组类
mars3d.LngLatArray 类，用于控制地理坐标（含经度、纬度、高度）数组的解析和转换。常用于线面状数据坐标数组参数和属性的传入和内部解析使用。
示例代码
const positions = mars3d.LngLatArray.toCartesians(arr)// 转为笛卡尔坐标
const coordinates = mars3d.LngLatArray.toArray(positions)// 转为坐标数组