Cesium实战5分钟搞定3D地球可视化附完整代码示例当我们需要在网页中展示全球地理数据时Cesium无疑是最强大的选择之一。这个开源的JavaScript库让创建3D地球变得异常简单无论是展示气象数据、物流轨迹还是构建数字孪生应用Cesium都能提供专业级的可视化效果。本文将带你快速上手用最简单的代码实现一个功能完整的3D地球。1. 环境准备零配置起步不需要复杂的开发环境甚至不需要安装任何软件我们就能开始Cesium之旅。现代前端开发的一大优势就是可以直接使用CDN引入库文件这让我们能够快速验证想法。创建一个空白HTML文件添加以下基础结构!DOCTYPE html html head meta charsetUTF-8 titleCesium快速入门/title !-- 引入Cesium核心CSS -- link hrefhttps://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css relstylesheet /head body !-- 3D地球容器 -- div idcesiumContainer/div !-- 引入Cesium核心JS -- script srchttps://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js/script script // 我们的代码将写在这里 /script /body /html提示上述代码使用了Cesium官方CDN确保你始终获取最新稳定版本。如需离线开发可下载对应版本的库文件。2. 初始化3D地球场景有了基础HTML结构后我们只需几行JavaScript代码就能创建一个完整的3D地球// 设置Cesium ion访问令牌必需 Cesium.Ion.defaultAccessToken your_access_token_here; // 初始化3D地球 const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: Cesium.createWorldTerrain(), // 使用Cesium世界地形 baseLayerPicker: false, // 简化界面隐藏底图选择器 timeline: false, // 隐藏时间轴 animation: false, // 隐藏动画控件 }); // 设置初始视角 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000), // 经度,纬度,高度 orientation: { heading: Cesium.Math.toRadians(0), // 朝向 pitch: Cesium.Math.toRadians(-90), // 俯仰角 roll: 0.0 // 翻滚角 } });关键参数说明参数类型说明terrainProviderObject地形数据提供者createWorldTerrain使用Cesium全球地形baseLayerPickerBoolean是否显示底图选择控件timelineBoolean是否显示时间轴控件animationBoolean是否显示动画播放控件注意使用Cesium世界地形需要注册Cesium ion账号获取访问令牌。免费账户每月有10GB的配额对学习和测试完全够用。3. 添加丰富的地理数据层空白的3D地球只是开始Cesium真正的强大之处在于它能轻松集成各种地理空间数据。让我们添加几个常见的数据类型3.1 加载高分辨率影像// 添加高分辨率影像图层 viewer.imageryLayers.addImageryProvider( new Cesium.IonImageryProvider({ assetId: 3845 }) // Bing Maps影像 );3.2 显示3D建筑模型// 启用3D建筑仅在城市区域可见 viewer.scene.primitives.add( Cesium.createOsmBuildings() );3.3 添加自定义标记点// 在地球上添加标记点 const entity viewer.entities.add({ name: 北京, position: Cesium.Cartesian3.fromDegrees(116.4, 39.9), point: { pixelSize: 10, color: Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2 }, label: { text: 北京市, font: 14pt sans-serif, style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -10) } });4. 完整代码示例将所有代码整合我们得到一个功能完整的3D地球可视化示例!DOCTYPE html html head meta charsetUTF-8 titleCesium 3D地球示例/title link hrefhttps://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css relstylesheet style html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /style /head body div idcesiumContainer/div script srchttps://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js/script script // 设置访问令牌替换为你的实际令牌 Cesium.Ion.defaultAccessToken eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; // 初始化3D地球 const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: Cesium.createWorldTerrain(), baseLayerPicker: false, timeline: false, animation: false, }); // 设置初始视角中国区域 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 } }); // 添加影像图层 viewer.imageryLayers.addImageryProvider( new Cesium.IonImageryProvider({ assetId: 3845 }) ); // 添加3D建筑 viewer.scene.primitives.add( Cesium.createOsmBuildings() ); // 添加标记点 viewer.entities.add({ name: 北京, position: Cesium.Cartesian3.fromDegrees(116.4, 39.9), point: { pixelSize: 10, color: Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2 }, label: { text: 北京市, font: 14pt sans-serif, style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -10) } }); /script /body /html5. 进阶功能与性能优化当基础功能实现后你可能还想进一步提升用户体验和性能5.1 地形质量与性能平衡// 调整地形细节层级 viewer.terrainProvider new Cesium.CesiumTerrainProvider({ url: Cesium.IonResource.fromAssetId(1), requestVertexNormals: true, // 启用顶点法线增强光照效果 requestWaterMask: true // 启用水面效果 }); // 根据视距动态调整细节 viewer.scene.screenSpaceCameraController.minimumZoomDistance 100; // 最小视距 viewer.scene.screenSpaceCameraController.maximumZoomDistance 50000000; // 最大视距5.2 添加动态数据// 添加动态飞行路径 const flightPath viewer.entities.add({ name: 飞行轨迹, polyline: { positions: Cesium.Cartesian3.fromDegreesArray([ 116.4, 39.9, // 北京 121.47, 31.23 // 上海 ]), width: 5, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.2, color: Cesium.Color.BLUE }) } }); // 添加移动的飞机模型 const airplane viewer.entities.add({ name: 飞机, position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000), model: { uri: https://assets.agi.com/models/airplane/CesiumAir/Cesium_Air.glb, minimumPixelSize: 64 }, path: { resolution: 1, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.1, color: Cesium.Color.YELLOW }), width: 10 } }); // 动画飞机沿路径飞行 const start Cesium.JulianDate.fromDate(new Date()); const stop Cesium.JulianDate.addSeconds(start, 3600, new Cesium.JulianDate()); viewer.clock.startTime start.clone(); viewer.clock.stopTime stop.clone(); viewer.clock.currentTime start.clone(); viewer.clock.clockRange Cesium.ClockRange.LOOP_STOP; viewer.timeline.zoomTo(start, stop); // 设置飞机位置随时间变化 airplane.position new Cesium.SampledPositionProperty(); for (let i 0; i 3600; i 60) { const time Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate()); const position Cesium.Cartesian3.fromDegrees( 116.4 (121.47 - 116.4) * (i / 3600), 39.9 (31.23 - 39.9) * (i / 3600), 10000 ); airplane.position.addSample(time, position); }5.3 性能优化技巧按需加载使用Cesium的CreditDisplay和ImageryLayerCollection控制数据加载细节层级(LOD)为3D模型设置合适的minimumPixelSize和maximumScale内存管理定期调用viewer.entities.removeAll()清理不再使用的实体相机控制合理设置screenSpaceCameraController参数避免过度渲染// 性能优化配置示例 viewer.scene.globe.depthTestAgainstTerrain true; // 启用深度测试 viewer.scene.fog.enabled true; // 启用雾效优化远处渲染 viewer.scene.sun.show false; // 关闭太阳效果提升性能 viewer.scene.moon.show false; // 关闭月亮效果6. 常见问题解决方案在实际开发中你可能会遇到以下典型问题6.1 跨域资源加载当从不同域加载资源时可能会遇到CORS限制。解决方案确保服务器配置了正确的CORS头使用代理服务器中转请求对于本地开发可以禁用浏览器安全限制仅限开发环境6.2 地形闪烁问题地形或模型出现闪烁通常是由于Z-fighting引起解决方法// 调整深度测试参数 viewer.scene.globe.depthTestAgainstTerrain true; // 对于特定实体设置高度偏移 entity.polygon.heightReference Cesium.HeightReference.CLAMP_TO_GROUND; entity.polygon.extrudedHeightReference Cesium.HeightReference.RELATIVE_TO_GROUND;6.3 移动设备兼容性在移动设备上使用时注意简化场景复杂度降低地形质量禁用不必要的特效优化触摸交互体验// 移动设备优化配置 if (Cesium.FeatureDetection.isMobile()) { viewer.scene.globe.detailScalar 0.5; // 降低地形细节 viewer.scene.fxaa true; // 启用快速抗锯齿 viewer.scene.highDynamicRange false; // 禁用HDR }7. 项目实战建议掌握了基础功能后可以考虑以下方向扩展你的Cesium项目数据可视化将业务数据如气象、交通、人口等映射到3D地球上时空分析利用Cesium的时间轴功能展示数据随时间变化AR/VR集成通过WebXR将Cesium场景扩展到增强/虚拟现实设备数字孪生构建真实世界的数字副本用于模拟和预测对于大型项目建议采用模块化开发方式// 模块化示例将Cesium功能封装为独立模块 class CesiumMap { constructor(containerId, options {}) { this.viewer new Cesium.Viewer(containerId, { terrainProvider: Cesium.createWorldTerrain(), ...options }); this._initCamera(); this._setupBaseLayers(); } _initCamera() { this.viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 } }); } _setupBaseLayers() { this.viewer.imageryLayers.addImageryProvider( new Cesium.IonImageryProvider({ assetId: 3845 }) ); this.viewer.scene.primitives.add(Cesium.createOsmBuildings()); } addMarker(position, options {}) { return this.viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude), point: { pixelSize: options.size || 10, color: options.color || Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2 }, label: { text: options.label || , font: 14pt sans-serif, style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -10) } }); } } // 使用封装好的模块 const map new CesiumMap(cesiumContainer); map.addMarker({ longitude: 116.4, latitude: 39.9 }, { label: 北京 });
Cesium实战：5分钟搞定3D地球可视化（附完整代码示例）
Cesium实战5分钟搞定3D地球可视化附完整代码示例当我们需要在网页中展示全球地理数据时Cesium无疑是最强大的选择之一。这个开源的JavaScript库让创建3D地球变得异常简单无论是展示气象数据、物流轨迹还是构建数字孪生应用Cesium都能提供专业级的可视化效果。本文将带你快速上手用最简单的代码实现一个功能完整的3D地球。1. 环境准备零配置起步不需要复杂的开发环境甚至不需要安装任何软件我们就能开始Cesium之旅。现代前端开发的一大优势就是可以直接使用CDN引入库文件这让我们能够快速验证想法。创建一个空白HTML文件添加以下基础结构!DOCTYPE html html head meta charsetUTF-8 titleCesium快速入门/title !-- 引入Cesium核心CSS -- link hrefhttps://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css relstylesheet /head body !-- 3D地球容器 -- div idcesiumContainer/div !-- 引入Cesium核心JS -- script srchttps://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js/script script // 我们的代码将写在这里 /script /body /html提示上述代码使用了Cesium官方CDN确保你始终获取最新稳定版本。如需离线开发可下载对应版本的库文件。2. 初始化3D地球场景有了基础HTML结构后我们只需几行JavaScript代码就能创建一个完整的3D地球// 设置Cesium ion访问令牌必需 Cesium.Ion.defaultAccessToken your_access_token_here; // 初始化3D地球 const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: Cesium.createWorldTerrain(), // 使用Cesium世界地形 baseLayerPicker: false, // 简化界面隐藏底图选择器 timeline: false, // 隐藏时间轴 animation: false, // 隐藏动画控件 }); // 设置初始视角 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000), // 经度,纬度,高度 orientation: { heading: Cesium.Math.toRadians(0), // 朝向 pitch: Cesium.Math.toRadians(-90), // 俯仰角 roll: 0.0 // 翻滚角 } });关键参数说明参数类型说明terrainProviderObject地形数据提供者createWorldTerrain使用Cesium全球地形baseLayerPickerBoolean是否显示底图选择控件timelineBoolean是否显示时间轴控件animationBoolean是否显示动画播放控件注意使用Cesium世界地形需要注册Cesium ion账号获取访问令牌。免费账户每月有10GB的配额对学习和测试完全够用。3. 添加丰富的地理数据层空白的3D地球只是开始Cesium真正的强大之处在于它能轻松集成各种地理空间数据。让我们添加几个常见的数据类型3.1 加载高分辨率影像// 添加高分辨率影像图层 viewer.imageryLayers.addImageryProvider( new Cesium.IonImageryProvider({ assetId: 3845 }) // Bing Maps影像 );3.2 显示3D建筑模型// 启用3D建筑仅在城市区域可见 viewer.scene.primitives.add( Cesium.createOsmBuildings() );3.3 添加自定义标记点// 在地球上添加标记点 const entity viewer.entities.add({ name: 北京, position: Cesium.Cartesian3.fromDegrees(116.4, 39.9), point: { pixelSize: 10, color: Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2 }, label: { text: 北京市, font: 14pt sans-serif, style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -10) } });4. 完整代码示例将所有代码整合我们得到一个功能完整的3D地球可视化示例!DOCTYPE html html head meta charsetUTF-8 titleCesium 3D地球示例/title link hrefhttps://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css relstylesheet style html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /style /head body div idcesiumContainer/div script srchttps://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js/script script // 设置访问令牌替换为你的实际令牌 Cesium.Ion.defaultAccessToken eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; // 初始化3D地球 const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: Cesium.createWorldTerrain(), baseLayerPicker: false, timeline: false, animation: false, }); // 设置初始视角中国区域 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 } }); // 添加影像图层 viewer.imageryLayers.addImageryProvider( new Cesium.IonImageryProvider({ assetId: 3845 }) ); // 添加3D建筑 viewer.scene.primitives.add( Cesium.createOsmBuildings() ); // 添加标记点 viewer.entities.add({ name: 北京, position: Cesium.Cartesian3.fromDegrees(116.4, 39.9), point: { pixelSize: 10, color: Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2 }, label: { text: 北京市, font: 14pt sans-serif, style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -10) } }); /script /body /html5. 进阶功能与性能优化当基础功能实现后你可能还想进一步提升用户体验和性能5.1 地形质量与性能平衡// 调整地形细节层级 viewer.terrainProvider new Cesium.CesiumTerrainProvider({ url: Cesium.IonResource.fromAssetId(1), requestVertexNormals: true, // 启用顶点法线增强光照效果 requestWaterMask: true // 启用水面效果 }); // 根据视距动态调整细节 viewer.scene.screenSpaceCameraController.minimumZoomDistance 100; // 最小视距 viewer.scene.screenSpaceCameraController.maximumZoomDistance 50000000; // 最大视距5.2 添加动态数据// 添加动态飞行路径 const flightPath viewer.entities.add({ name: 飞行轨迹, polyline: { positions: Cesium.Cartesian3.fromDegreesArray([ 116.4, 39.9, // 北京 121.47, 31.23 // 上海 ]), width: 5, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.2, color: Cesium.Color.BLUE }) } }); // 添加移动的飞机模型 const airplane viewer.entities.add({ name: 飞机, position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000), model: { uri: https://assets.agi.com/models/airplane/CesiumAir/Cesium_Air.glb, minimumPixelSize: 64 }, path: { resolution: 1, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.1, color: Cesium.Color.YELLOW }), width: 10 } }); // 动画飞机沿路径飞行 const start Cesium.JulianDate.fromDate(new Date()); const stop Cesium.JulianDate.addSeconds(start, 3600, new Cesium.JulianDate()); viewer.clock.startTime start.clone(); viewer.clock.stopTime stop.clone(); viewer.clock.currentTime start.clone(); viewer.clock.clockRange Cesium.ClockRange.LOOP_STOP; viewer.timeline.zoomTo(start, stop); // 设置飞机位置随时间变化 airplane.position new Cesium.SampledPositionProperty(); for (let i 0; i 3600; i 60) { const time Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate()); const position Cesium.Cartesian3.fromDegrees( 116.4 (121.47 - 116.4) * (i / 3600), 39.9 (31.23 - 39.9) * (i / 3600), 10000 ); airplane.position.addSample(time, position); }5.3 性能优化技巧按需加载使用Cesium的CreditDisplay和ImageryLayerCollection控制数据加载细节层级(LOD)为3D模型设置合适的minimumPixelSize和maximumScale内存管理定期调用viewer.entities.removeAll()清理不再使用的实体相机控制合理设置screenSpaceCameraController参数避免过度渲染// 性能优化配置示例 viewer.scene.globe.depthTestAgainstTerrain true; // 启用深度测试 viewer.scene.fog.enabled true; // 启用雾效优化远处渲染 viewer.scene.sun.show false; // 关闭太阳效果提升性能 viewer.scene.moon.show false; // 关闭月亮效果6. 常见问题解决方案在实际开发中你可能会遇到以下典型问题6.1 跨域资源加载当从不同域加载资源时可能会遇到CORS限制。解决方案确保服务器配置了正确的CORS头使用代理服务器中转请求对于本地开发可以禁用浏览器安全限制仅限开发环境6.2 地形闪烁问题地形或模型出现闪烁通常是由于Z-fighting引起解决方法// 调整深度测试参数 viewer.scene.globe.depthTestAgainstTerrain true; // 对于特定实体设置高度偏移 entity.polygon.heightReference Cesium.HeightReference.CLAMP_TO_GROUND; entity.polygon.extrudedHeightReference Cesium.HeightReference.RELATIVE_TO_GROUND;6.3 移动设备兼容性在移动设备上使用时注意简化场景复杂度降低地形质量禁用不必要的特效优化触摸交互体验// 移动设备优化配置 if (Cesium.FeatureDetection.isMobile()) { viewer.scene.globe.detailScalar 0.5; // 降低地形细节 viewer.scene.fxaa true; // 启用快速抗锯齿 viewer.scene.highDynamicRange false; // 禁用HDR }7. 项目实战建议掌握了基础功能后可以考虑以下方向扩展你的Cesium项目数据可视化将业务数据如气象、交通、人口等映射到3D地球上时空分析利用Cesium的时间轴功能展示数据随时间变化AR/VR集成通过WebXR将Cesium场景扩展到增强/虚拟现实设备数字孪生构建真实世界的数字副本用于模拟和预测对于大型项目建议采用模块化开发方式// 模块化示例将Cesium功能封装为独立模块 class CesiumMap { constructor(containerId, options {}) { this.viewer new Cesium.Viewer(containerId, { terrainProvider: Cesium.createWorldTerrain(), ...options }); this._initCamera(); this._setupBaseLayers(); } _initCamera() { this.viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 } }); } _setupBaseLayers() { this.viewer.imageryLayers.addImageryProvider( new Cesium.IonImageryProvider({ assetId: 3845 }) ); this.viewer.scene.primitives.add(Cesium.createOsmBuildings()); } addMarker(position, options {}) { return this.viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude), point: { pixelSize: options.size || 10, color: options.color || Cesium.Color.RED, outlineColor: Cesium.Color.WHITE, outlineWidth: 2 }, label: { text: options.label || , font: 14pt sans-serif, style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -10) } }); } } // 使用封装好的模块 const map new CesiumMap(cesiumContainer); map.addMarker({ longitude: 116.4, latitude: 39.9 }, { label: 北京 });
