使用 Cesium 构建 3D 地图应用的实践

CesiumJS 是一个功能强大的开源 JavaScript 库，能够帮助开发者快速构建高性能、高精度的 3D 地球和地图应用 。本文将介绍如何使用 Cesium 构建一个基本的 3D 地图应用，并加载自定义的 3D Tiles 模型。

初始化 Cesium Viewer

首先，在 Vue 的 onMounted 生命周期钩子中初始化 Cesium Viewer。我们需要传入一个容器 ID 和配置对象，以定制化 Viewer 的功能。例如，我们可以禁用一些不必要的 UI 组件（如动画控件、时间线等），以简化界面并专注于核心功能 。

const viewer = new Cesium.Viewer("cesiumContainer1", {
  animation: false,
  timeline: false,
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false,
  fullscreenButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  infoBox: false,
  selectionIndicator: false,
  contextOptions: { webgl: { alpha: true } },
});

去除版权信息

为了保持界面整洁，可以隐藏默认的版权信息显示：

(viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";

初始相机视角

设置初始视角，让相机从地球外部俯视中国区域，提供一个全局概览：

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(104, 30, 40000000), // 4千万米，能看到整个地球
  orientation: {
    heading: 0,
    pitch: -Cesium.Math.PI_OVER_TWO,
    roll: 0,
  },
});

加载 3D Tiles 模型

通过 Cesium 提供的 Cesium3DTileset 类，我们可以轻松加载和渲染复杂的 3D 模型。以下代码展示了如何从指定 URL 加载模型，并将其添加到场景中：

let tileset;
try {
  tileset = await Cesium.Cesium3DTileset.fromUrl(
    "/tileset.json"
  );
  viewer.scene.primitives.add(tileset);
} catch (e) {
  console.error("模型加载失败", e);
  return;
}

获取模型中心并飞向模型

一旦模型加载完成，我们可以通过其边界球体获取模型的中心点，并调整相机视角以聚焦于该位置：

const centerCartesian = tileset.boundingSphere.center;
const centerCarto = Cesium.Cartographic.fromCartesian(centerCartesian);
const lon = Cesium.Math.toDegrees(centerCarto.longitude);
const lat = Cesium.Math.toDegrees(centerCarto.latitude);
const height = centerCarto.height + tileset.boundingSphere.radius * 2;

setTimeout(() => {
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(lon, lat, height),
    duration: 4,
    orientation: {
      heading: 0,
      pitch: -Cesium.Math.PI_OVER_TWO,
      roll: 0,
    },
  });
}, 1000);

其他设置

最后，对场景进行一些额外的优化设置，比如关闭地形深度测试、启用自动适配屏幕大小的功能、调整模型颜色混合模式以及设置光源：

viewer.scene.globe.depthTestAgainstTerrain = false;
autofit.init({
  el: "#cesiumContainer1",
  dw: 1920,
  dh: 1080,
});
tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.MIX;
tileset.colorBlendAmount = 0.2;
viewer.scene.light = new Cesium.SunLight();

清理工作

在组件卸载前，记得清理相关资源，尤其是与第三方库（如 autofit.js）相关的事件监听器：

onBeforeUnmount(() => {
  autofit.off();
});

总结

以上就是基于 Vue 和 Cesium 构建 3D 地图应用的基本流程。通过这些步骤，你可以实现一个具备基础交互功能的 3D 地球应用，并支持加载自定义模型。