首页使用cesium的相关实现代码

使用cesium的相关实现代码

时间: 2024-02-05 16:13:55 浏览: 68

以下是使用 Cesium 创建一个基本的 3D 场景的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <title>My Cesium App</title> <script src="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Widgets/widgets.css" /> <style> #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; position: absolute; } </style> </head> <body> <div id="cesiumContainer"></div> <script> // 创建一个 Cesium 场景 const viewer = new Cesium.Viewer("cesiumContainer"); // 设置场景的初始位置和方向 const initialPosition = new Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000); const initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(0, -90, 0); viewer.scene.camera.setView({ destination: initialPosition, orientation: initialOrientation, }); // 添加一个模型 const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397)); const model = viewer.scene.primitives.add(Cesium.Model.fromGltf({ url: "path/to/model.gltf", modelMatrix: modelMatrix, scale: 100.0, })); </script> </body> </html> ``` 在这个示例中，我们使用了 Cesium 提供的 `Viewer` 类来创建一个基本的 3D 场景。我们设置了场景的初始位置和方向，并添加了一个模型。注意，这个示例中的 `path/to/model.gltf` 需要替换为实际的模型文件路径。

阅读全文