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 地球應用，并支持加載自定義模型。