Vue3 深入使用 CesiumJS 指南

最新推荐文章于 2025-11-21 10:51:39 发布

原创最新推荐文章于 2025-11-21 10:51:39 发布 · 1.9k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

代码可运行

CesiumJS 是一个基于 WebGL 的开源 JavaScript 库，专注于在浏览器中构建高性能的 3D 地球和地图应用，支持地形、影像、3D 模型及动态数据的可视化。本文将从基础功能到高级优化，详细讲解如何在 Vue3 项目中集成 CesiumJS，并结合实际代码示例和优化策略。

一、加载外部影像地图

1. 影像地图加载

通过 WebMapTileServiceImageryProvider 加载天地图影像服务（需替换有效 Token）：

const tianDiTuToken = 'YOUR_TOKEN'; // 替换为实际 Token
const subdomains = ['t0', 't1', 't2', 't3']; // 天地图子域名

viewer.value.imageryLayers.addImageryProvider(
  new Cesium.WebMapTileServiceImageryProvider({
    url: `http://{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=${tianDiTuToken}`,
    subdomains: subdomains,
    layer: "tdtBasicLayer",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    maximumLevel: 18,
  })
);

2. 影像注记（地图标注）

叠加天地图注记层：

viewer.value.imageryLayers.addImageryProvider(
  new Cesium.WebMapTileServiceImageryProvider({
    url: `http://{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=${tianDiTuToken}`,
    subdomains: subdomains,
    layer: "tdtCiaLayer",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    maximumLevel: 18,
  })
);

3. 地图定位

将视角定位到中国区域：

viewer.value.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 5_000_000),
});

二、加载 3D 瓦片地图（GIS）

1. 加载 3D Tiles 模型

通过 Cesium3DTileset 加载本地或远程 3D 瓦片数据：

try {
  const tileset = await Cesium.Cesium3DTileset.fromUrl('/3DT/tileset.json');
  viewer.value.scene.primitives.add(tileset);
  // 定位到模型中心
  viewer.value.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
} catch (error) {
  console.error("模型加载失败:", error);
}

2. 集成超图（SuperMap）服务

超图插件兼容性提示：

官方插件版本较旧（基于 Cesium 1.67），建议使用原生 Cesium 或从 GitHub - SuperMap/iClient3D-for-WebGL 获取更新支持。

加载超图服务示例：

const promise = viewer.scene.open(
"http://www.supermapol.com/realspace/services/3D-CBD/rest/realspace"
);
promise.then((layers) => {
// 动态控制图层可见性
layers.forEach(layer => {
  if (layer.name === "隐藏图层名称") layer.visible = false;
});
});

典型应用场景：

城市可视化：展示城市 3D 模型，辅助城市规划。
灾害模拟：洪水、地震的动态模拟与预测。
虚拟旅游：集成历史遗迹、博物馆的精细化模型。

三、Cesium 与 Three.js 结合

1. 初始化 Three.js 场景

let scene, camera, renderer, cube;

const initThree = () => {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.autoClearDepth = false; // 防止与 Cesium 深度冲突
  document.getElementById("three-container").appendChild(renderer.domElement);

  // 添加测试立方体
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.8 });
  cube = new THREE.Mesh(geometry, material);
  cube.position.set(0, 0, 0); // 初始位置
  scene.add(cube);
};

2. 同步相机视角

const syncCameras = () => {
  const cesiumCamera = viewer.camera;
  const cesiumPosition = cesiumCamera.positionWC;
  const threePosition = preciseCartesianToThree(cesiumPosition);

  // 更新 Three.js 相机位置和旋转
  camera.position.copy(threePosition);
  const quaternion = new Cesium.Quaternion();
  Cesium.Transforms.headingPitchRollQuaternion(cesiumPosition, cesiumCamera.headingPitchRoll, quaternion);
  camera.setRotationFromQuaternion(new THREE.Quaternion(quaternion.x, quaternion.y, quaternion.z, quaternion.w));
};

// 坐标转换（Cesium Y-up → Three.js Z-up）
const preciseCartesianToThree = (cartesian) => {
  const transform = Cesium.Transforms.eastNorthUpToFixedFrame(cartesian);
  const inverseTransform = Cesium.Matrix4.inverse(transform, new Cesium.Matrix4());
  const localPos = Cesium.Matrix4.multiplyByPoint(inverseTransform, cartesian, new Cesium.Cartesian3());
  return new THREE.Vector3(localPos.x, localPos.z, localPos.y).multiplyScalar(0.2);
};

3. 联合渲染循环

const animate = () => {
  requestAnimationFrame(animate);
  viewer.render(); // 渲染 Cesium
  syncCameras();   // 同步相机参数
  cube.rotation.x += 0.01; // Three.js 动画
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
};

结合场景示例：

动态特效：在 Cesium 地球表面叠加 Three.js 的粒子效果（如交通流、天气模拟）。
AR 导航：通过 Three.js 渲染 AR 标识，结合 Cesium 的地理坐标实现精准定位。

四、Cesium 性能优化

1. 初始化配置优化

const viewer = new Cesium.Viewer("cesiumContainer", {
  animation: false,          // 禁用动画控件
  baseLayerPicker: false,    // 禁用图层选择器
  fullscreenButton: false,   // 禁用全屏按钮
  scene3DOnly: true,         // 仅 3D 模式提升性能
  requestRenderMode: true,   // 按需渲染
  targetFrameRate: 60,       // 目标帧率
});

2. 运行时优化策略

// 降低渲染负载
viewer.scene.globe.depthTestAgainstTerrain = false;
viewer.scene.postProcessStages.fxaa.enabled = false; // 关闭抗锯齿
viewer.scene.globe.maximumScreenSpaceError = 2;      // 降低地形细节

// 内存管理
setInterval(() => {
  viewer.scene.primitives.removeAll(); // 定期清理图元
}, 30000);

// 防抖处理滚动事件
const debouncedRender = Cesium.debounce(() => viewer.scene.requestRender(), 100);
window.addEventListener('scroll', debouncedRender);