当前位置：首页 > news >正文

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

news 来源：原创 2025/8/13 14:51:59

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 地球应用，并支持加载自定义模型。