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

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

初始化 Cesium Viewer

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

ts 复制代码
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 } },
});
去除版权信息

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

ts 复制代码
(viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";
初始相机视角

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

ts 复制代码
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 加载模型,并将其添加到场景中:

ts 复制代码
let tileset;
try {
  tileset = await Cesium.Cesium3DTileset.fromUrl(
    "/tileset.json"
  );
  viewer.scene.primitives.add(tileset);
} catch (e) {
  console.error("模型加载失败", e);
  return;
}
获取模型中心并飞向模型

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

ts 复制代码
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);
其他设置

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

ts 复制代码
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)相关的事件监听器:

ts 复制代码
onBeforeUnmount(() => {
  autofit.off();
});
总结

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

相关推荐
哈市雪花8 小时前
相机:Camera原理讲解(使用OpenGL+QT开发三维CAD)
qt·3d·交互·相机·图形学·opengl·视角
zhongqu_3dnest8 小时前
3D建模公司的能力与技术
数码相机·3d·虚拟现实·vr制作公司·3d建模公司
syncon1211 小时前
手机屏色斑缺陷修复及相关液晶线路激光修复原理
科技·3d·制造
九班长12 小时前
Golang服务端处理Unity 3D游戏地图与碰撞的详细实现
3d·unity·golang
温轻舟1 天前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
在下胡三汉1 天前
粗略地看一下 glTF 2.0 的所有标准属性(顺便说一下,还有 .glb 的结构)
3d
zhongqu_3dnest1 天前
3D可视化:开启多维洞察新时代
3d·3d建模·空间计算·3d可视化·三维空间·沉浸式体验
试着2 天前
【数据标注师】3D标注
3d·数据标注师·3d标注
工业3D_大熊11 天前
3D模式格式转换工具HOOPS Exchange如何将3D PDF转换为STEP格式?
3d·pdf·3d格式转换·3d模型格式转换·cad格式转换·cad数据格式转换·3d模型可视化
广州华锐视点11 天前
浅议 3D 展示技术为线上车展新体验带来的助力
3d