CesiumJS 3D可视化开发教程

一、CesiumJS

CesiumJS是一个开源的JavaScript库，用于创建基于Web的3D地球和地图可视化应用。它支持多种地理空间数据格式，提供丰富的3D可视化功能。

二、环境准备

获取CesiumJS
- 下载方式：
```
npm install cesium
或
yarn add cesium
```
- 或直接从官网下载：https://cesium.com/platform/cesiumjs/

基础HTML模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cesium Demo</title>
  <script src="path/to/Cesium/Cesium.js"></script>
  <style>
    html, body, #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script src="app.js"></script>
</body>
</html>

三、基础应用创建

初始化Viewer

// app.js
const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain(),
  timeline: false,
  animation: false,
  baseLayerPicker: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  homeButton: false,
  geocoder: false,
  infoBox: false
});

// 移除默认的版权信息
viewer.cesiumWidget.creditContainer.style.display = "none";

相机控制

// 飞到指定位置
viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000), // 经度,纬度,高度
  orientation: {
    heading: Cesium.Math.toRadians(0), // 朝向
    pitch: Cesium.Math.toRadians(-30), // 俯仰角
    roll: 0.0
  }
});

四、数据可视化

添加3D模型

const entity = viewer.entities.add({
  name: '3D Model',
  position: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 0),
  model: {
    uri: 'path/to/model.gltf',
    minimumPixelSize: 128,
    maximumScale: 20000
  }
});

添加点数据

viewer.entities.add({
  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, -9)
  }
});

添加GeoJSON数据

Cesium.GeoJsonDataSource.load('path/to/data.geojson').then(dataSource => {
  viewer.dataSources.add(dataSource);
  const entities = dataSource.entities.values;

  // 自定义样式
  entities.forEach(entity => {
    entity.polygon.outline = false;
    entity.polygon.material = Cesium.Color.RED.withAlpha(0.5);
  });
});

五、高级功能

地形与影像

// 使用Cesium世界地形
viewer.terrainProvider = Cesium.createWorldTerrain();

// 添加高分辨率影像
viewer.imageryLayers.addImageryProvider(
  new Cesium.IonImageryProvider({ assetId: 3845 }) // Bing地图
);

时间动态数据

// 设置时间轴范围
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2023-01-01");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2023-12-31");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2023-06-01");
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime);

自定义着色器

viewer.scene.globe.material = new Cesium.Material({
  fabric: {
    type: 'CustomShader',
    uniforms: {
      time: 0
    },
    source: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
        material.diffuse = vec3(0.5 + 0.5 * sin(time), 0.5, 0.5);
      }
    `
  }
});

viewer.scene.preUpdate.addEventListener(() => {
  viewer.scene.globe.material.uniforms.time += 0.01;
});

六、性能优化

使用3D Tiles

const tileset = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(12345) // 你的3D Tiles资产ID
  })
);

// 调整细节层次
tileset.maximumScreenSpaceError = 2;

相机视锥体剔除

viewer.scene.camera.frustumSplits = [0.1, 1000, 10000, 100000];

内存管理

// 定期清理缓存
viewer.scene.globe.shaderCache.clear();
viewer.scene.primitives.removeAll();

七、部署注意事项

Cesium Ion Token

Cesium.Ion.defaultAccessToken = 'your_access_token';

跨域问题
- 确保服务器正确配置CORS
- 对于本地开发，可以使用代理或禁用浏览器安全限制

性能监控

viewer.scene.debugShowFramesPerSecond = true;

八、学习资源

官方文档：https://cesium.com/learn/
示例代码：https://sandcastle.cesium.com/
GitHub仓库：https://github.com/CesiumGS/cesium

通过本教程，你应该已经掌握了CesiumJS的基础使用方法。要深入学习，建议从官方示例开始，逐步探索更复杂的功能。

// 来源：https://www.nzw6.com