cesium.cartesian3.subtract

cesium.js 是一款强大的三维地球引擎库，用于构建交互式地图应用。当你使用 `cesium.MapObject` 的实例，并希望在五秒钟内让该对象以均匀的速度移动到新的地理位置，你可以通过以下步骤实现： 1. 首先，你需要创建一个 `MapEntity` 或者其他的 `MapObject` 实例，例如 `Point`, `Polygon`, 等。 ```javascript const mapObject = new Cesium.Point({ position : Cesium.Cartesian3.fromDegrees(longitude, latitude), // 初始位置 }); ``` 2. 定义目标位置和初始位置之间的向量差以及速度分量。 ```javascript const targetPosition = Cesium.Cartesian3.fromDegrees(targetLongitude, targetLatitude); const displacement = Cesium.Cartesian3.subtract(targetPosition, mapObject.position); const velocity = Cesium.Cartesian3.normalize(displacement, displacement); // 单位方向向量 const timeToTravel = 5; // 秒 const speedInMetersPerSecond = distance / (timeToTravel * 1000); // 距离除以时间换算为每秒米数 ``` 3. 使用 `Timeline` 功能，设置一个动画或定时器，每隔一定的时间更新地图对象的位置，使其沿着速度向量移动。 ```javascript const timeline = new Cesium.Timeline(); const timelineGroup = timeline.addGroup(); // 创建一个关键帧动画，每一帧改变位置 for (let i = 0; i <= Math.ceil(distance / speedInMetersPerSecond); i++) { const frame = timelineGroup.add(new Cesium.Timeline.Frame()); const newPosition = Cesium.Cartesian3.add(mapObject.position, velocity.multiplyByScalar(i * speedInMetersPerSecond)); mapObject.position = newPosition; // 设置关键帧持续时间和位置 frame.properties.startTime = i * (timeToTravel * 1000) / frames; frame.properties.stopTime = (i + 1) * (timeToTravel * 1000) / frames; frame.properties.values.position = newPosition; } mapObject.timeline = timeline; // 将动画绑定到 MapObject 上 ``` 注意，这个示例假设了有一个 `distance` 变量表示从初始位置到目标位置的距离。实际操作中，你需要替换 `distance` 和计算相应的速度。

### 如何在Cesium中加载3D Tiles 在Cesium中加载3D Tiles是一种常见的操作，用于展示大规模三维地理空间数据。以下是实现这一功能的具体方法： #### 加载3D Tiles的核心步骤 通过`Cesium.Cesium3DTileset`类可以轻松加载3D Tiles格式的数据。首先需要创建一个`Cesium3DTileset`实例，并将其添加到Cesium的场景中。 ```javascript // 创建一个新的Cesium Viewer实例 const viewer = new Cesium.Viewer("cesiumContainer"); // 定义3D Tiles数据的URL路径 const tilesetUrl = "path/to/your/tilesetData"; // 使用Cesium.Cesium3DTileset类加载3D Tiles数据 const tileset = new Cesium.Cesium3DTileset({ url: tilesetUrl, }); // 将Tileset添加到Cesium场景中 viewer.scene.primitives.add(tileset); // 自动飞向模型所在的位置 viewer.zoomTo(tileset); ``` 以上代码展示了如何初始化并加载3D Tiles数据[^1]。其中，`tilesetUrl`应替换为实际的3D Tiles数据文件路径。 --- #### 调整模型的透明度 如果需要调整加载后的模型透明度，可以通过设置`style`属性来完成。以下是一个示例代码片段，演示如何动态修改模型的透明度： ```javascript function setOpacity(tileset, opacityValue) { const style = new Cesium.Cesium3DTileStyle({ color: `color('rgba(255, 255, 255, ${opacityValue})')`, }); tileset.style = style; } // 设置透明度为0.5 (半透明) setOpacity(tileset, 0.5); ``` 该函数接受两个参数：`tileset`对象和`opacityValue`（范围为0至1）。它会根据指定的透明度值更新模型样式[^3]。 --- #### 平移与旋转模型 除了基本的加载外，还可以对模型进行平移和旋转操作。下面是一段代码，说明如何基于局部坐标系执行这些变换： ```javascript function translateAndRotateModel(tileset, translationX, translationY, translationZ, rotationAngleDegrees) { const origin = tileset.boundingSphere.center; // 获取以模型中心为原点的局部坐标系矩阵 const localFrameMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin); // 构造平移向量 const translationVector = new Cesium.Cartesian3( translationX || 0, translationY || 0, translationZ || 0 ); // 计算世界坐标中的最终平移向量 const translatedPositionInWorldCoords = Cesium.Matrix4.multiplyByPointAsVector( localFrameMatrix, translationVector, new Cesium.Cartesian3() ); const finalTranslation = Cesium.Cartesian3.subtract( translatedPositionInWorldCoords, origin, new Cesium.Cartesian3() ); // 更新模型矩阵以应用平移 const modelMatrixWithTranslation = Cesium.Matrix4.fromTranslation(finalTranslation); // 添加旋转角度（单位：弧度） const rotationRadians = Cesium.Math.toRadians(rotationAngleDegrees || 0); const rotationQuaternion = Cesium.Quaternion.fromAxisAngle(new Cesium.Cartesian3(0, 0, 1), rotationRadians); // 应用旋转到模型矩阵 const rotatedModelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(rotationQuaternion)); // 合并平移和旋转变换 tileset.modelMatrix = Cesium.Matrix4.multiplyTransformation(rotatedModelMatrix, modelMatrixWithTranslation); } ``` 调用此函数时，传入所需的平移距离（`translationX`, `translationY`, `translationZ`）以及旋转角度（`rotationAngleDegrees`），即可实现复杂的几何变换。 --- #### SuperMap WebGL 3D 的兼容性注意事项 当尝试将SuperMap WebGL 3D集成到项目中时，可能会遇到一些特定问题。例如，在切换到SuperMap平台后，某些原本适用于Cesium的功能可能无法正常工作。此时需参考官方文档或示例代码，特别是涉及`3D Tiles Photogrammetry.html`的部分[^2]。 ---