10、基于 Cesium 的 3D 模型加载与地图可视化实战教程

原创 已于 2025-07-11 09:01:34 修改 · 974 阅读 · 10 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#3d #前端 #vue #javascript
于 2025-07-02 15:15:15 首次发布
该文章已生成可运行项目，
先看效果图

一、引言

在现代地理信息系统 (GIS) 和 3D 可视化应用中，如何高效地在地图上加载和展示 3D 模型是一个关键需求。Cesium 作为一款强大的开源 JavaScript 库，为我们提供了丰富的 API 和工具，使我们能够轻松实现基于 Web 的 3D 地理可视化。本文将详细介绍如何使用 Cesium 加载 GLTF 格式的 3D 模型，并结合高德地图底图创建一个完整的 3D 可视化应用。

二、Cesium 与 GLTF 基础知识
2.1 Cesium 简介

Cesium 是一个用于创建基于 Web 的 3D 地理信息系统的开源 JavaScript 库，由美国国家航空航天局 (NASA) 和美国地质调查局 (USGS) 支持开发。它支持多种地理数据格式，提供了强大的 3D 渲染能力，能够在浏览器中实现高性能的地球和地图可视化。

2.2 GLTF 格式

GLTF (OpenGL Transmission Format) 是一种用于高效传输和加载 3D 模型的开放格式，由 Khronos Group 开发。它以 JSON 格式存储 3D 模型的结构信息，同时支持二进制数据存储顶点、纹理等资源，具有体积小、加载快的特点，非常适合 Web 端 3D 应用。

三、环境搭建与项目初始化

首先，我们需要创建一个 Vue 项目并安装 Cesium 库：

# 创建Vue项目
vue create cesium-gltf-demo

# 进入项目目录
cd cesium-gltf-demo

# 安装Cesium
npm install cesium

接下来，配置 Vue 项目以正确加载 Cesium 资源。在 vue.config.js 中添加以下配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(__dirname, 'node_modules/cesium/Build/Cesium'),
            to: 'cesium'
          }
        ]
      })
    ],
    resolve: {
      fallback: {
        fs: false,
        path: false
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('cesium')
      .test(/\.js$/)
      .include.add(path.join(__dirname, 'node_modules/cesium/Source'))
      .end()
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        presets: ['@babel/preset-env']
      });
  },
  transpileDependencies: [
    'cesium'
  ]
};
四、实现 Cesium 地图与 3D 模型加载

下面是完整的 Vue 组件代码，实现了 Cesium 地图初始化、高德地图底图加载和 GLTF 模型加载功能：

<template>
  <div class="cesium-container" id="cesiumContainer"></div>
  <div v-if="loading" class="loading-overlay">
    <div class="spinner"></div>
    <p>加载中...</p>
  </div>
  <div v-if="errorMessage" class="error-message">
    <p>{{ errorMessage }}</p>
    <button @click="retry">重试</button>
  </div>
</template>

<script>
import { mapConfig } from "../../config/mapConfig";

export default {
  data() {
    return {
      viewer: null,
      loading: true,
      errorMessage: null
    };
  },
  mounted() {
    this.initCesium();
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
  methods: {
    async initCesium() {
      try {
        // 引入Cesium样式
        require('cesium/Build/Cesium/Widgets/widgets.css');
        
        // 初始化Viewer
        this.viewer = new Cesium.Viewer("cesiumContainer", {
          animation: false,
          baseLayerPicker: false,
          fullscreenButton: false,
          geocoder: false,
          homeButton: false,
          infoBox: false,
          sceneModePicker: false,
          scene3DOnly: true,
          selectionIndicator: false,
          timeline: false,
          navigationHelpButton: false,
          shadows: true,
          shouldAnimate: true,
          sceneMode: Cesium.SceneMode.SCENE3D
        });

        // 初始定位 - 更靠近模型位置
        this.viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(104.0744619, 30.0503706, 5000),
          duration: 3.0,
          orientation: {
            heading: Cesium.Math.toRadians(0), // 朝北
            pitch: Cesium.Math.toRadians(-30), // 俯视
            roll: 0.0
          },
          complete: () => {
            console.log("飞行动画完成");
          }
        });

        // 移除默认影像图层
        this.viewer.scene.imageryLayers.remove(
          this.viewer.scene.imageryLayers.get(0)
        );

        // 去除版权信息
        this.viewer._cesiumWidget._creditContainer.style.display = "none";

        // 添加高德地图影像
        await this.addGaodeMap();

        // 加载模型
        await this.loadModel();
      } catch (error) {
        console.error("初始化失败:", error);
        this.errorMessage = "加载失败，请重试";
      } finally {
        this.loading = false;
      }
    },

    async addGaodeMap() {
      try {
        const mapOption = {
          url: mapConfig.gaode.url2,
          minimumLevel: 3,
          maximumLevel: 18,
          credit: new Cesium.Credit({
            text: "高德地图",
            link: "https://www.amap.com/"
          })
        };

        const tdtLayer = new Cesium.UrlTemplateImageryProvider(mapOption);
        this.viewer.scene.imageryLayers.addImageryProvider(tdtLayer);
      } catch (error) {
        console.error("高德地图加载失败:", error);
        throw new Error("地图加载失败");
      }
    },

    async loadModel() {
      try {
        // 模型位置与朝向
        const position = Cesium.Cartesian3.fromDegrees(
          104.0744619,
          30.0503706,
          100 // 降低高度以便更好观察
        );
        
        // 调整模型方向，使其朝上
        const heading = Cesium.Math.toRadians(0); // 朝北
        const pitch = Cesium.Math.toRadians(0); // 水平
        const roll = 0;
        const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

        // 加载模型
        const entity = await this.viewer.entities.add({
          name: "3D Model",
          position: position,
          orientation: orientation,
          model: {
            uri: "/scene.gltf",
            scale: 50.0, // 调整缩放比例
            minimumPixelSize: 128,
            maximumScale: 20000,
            incrementallyLoadTextures: true,
            runAnimations: true,
            clampAnimations: true,
            shadows: Cesium.ShadowMode.ENABLED,
            heightReference: Cesium.HeightReference.NONE,
            onLoad: (model) => {
              console.log("模型加载成功", model);
              // 添加成功提示
              setTimeout(() => {
                alert("模型加载成功！可以使用鼠标拖动来浏览场景");
              }, 1000);
            },
            onError: (error) => {
              console.error("模型加载失败", error);
              throw new Error("模型加载失败");
            }
          }
        });

        // 聚焦模型
        this.viewer.trackedEntity = entity;
        this.viewer.zoomTo(entity);
        
        // 添加视图控制说明
        this.addViewerControls();
      } catch (error) {
        console.error("模型加载过程出错:", error);
        throw new Error("模型加载过程出错");
      }
    },

    addViewerControls() {
      // 添加简单的控制说明
      const controls = document.createElement('div');
      controls.className = 'viewer-controls';
      controls.innerHTML = `
        <div class="control-item">
          <span>鼠标左键:</span> 旋转视角
        </div>
        <div class="control-item">
          <span>鼠标右键:</span> 平移
        </div>
        <div class="control-item">
          <span>滚轮:</span> 缩放
        </div>
        <button id="resetView">重置视图</button>
      `;
      document.body.appendChild(controls);
      
      // 添加重置视图功能
      document.getElementById('resetView').addEventListener('click', () => {
        this.viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(104.0744619, 30.0503706, 5000),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-30),
            roll: 0.0
          }
        });
      });
    },

    retry() {
      this.errorMessage = null;
      this.loading = true;
      this.initCesium();
    }
  }
};
</script>

<style lang="scss" scoped>
.cesium-container {
  width: 100%;
  height: 100vh;
  touch-action: none;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 1000;
  
  .spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid white;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}

.error-message {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 1000;
  display: flex;
  align-items: center;
  
  button {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: white;
    color: red;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
}

.viewer-controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 1000;
  
  .control-item {
    margin-bottom: 5px;
  }
  
  button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: white;
    color: black;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
}
</style>
export const mapConfig = {
  gaode: {
    url1: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8', //'高德路网中文注记'
    url2: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', //高德影像
    url3: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', //高德矢量
  },
};
五、关键技术点解析
5.1 模型位置与方向控制

在 Cesium 中，模型的位置和方向是通过position和orientation属性控制的：

// 设置模型位置（经纬度和高度）
const position = Cesium.Cartesian3.fromDegrees(104.0744619, 30.0503706, 100);

// 设置模型方向（航向、俯仰、翻滚）
const heading = Cesium.Math.toRadians(0);
const pitch = Cesium.Math.toRadians(0);
const roll = 0;
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
5.2 相机控制

相机控制是 3D 可视化中的重要部分，我们可以通过以下方式设置相机位置和方向：

// 设置相机位置和方向
this.viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
  orientation: {
    heading: Cesium.Math.toRadians(headingAngle),
    pitch: Cesium.Math.toRadians(pitchAngle),
    roll: 0.0
  }
});
5.3 错误处理与用户体验

为了提高应用的健壮性，我们添加了全面的错误处理和加载状态提示：

try {
  // 执行可能出错的代码
} catch (error) {
  console.error("错误:", error);
  this.errorMessage = "加载失败，请重试";
} finally {
  this.loading = false;
}
六、常见问题与解决方案

  1. 模型加载失败：

    • 检查模型文件路径是否正确，模型文件建议放再public文件夹下
    • 确保模型文件格式正确（.gltf 或.glb）
    • 检查网络请求是否有 404 或其他错误

  2. 模型显示异常：

    • 调整模型的 scale 参数
    • 检查模型的原始坐标系，调整 heading/pitch/roll 参数
    • 尝试使用不同的 heightReference 设置

  3. 性能问题：

    • 对于复杂模型，考虑使用简化版本
    • 启用incrementallyLoadTextures以渐进加载纹理
    • 使用scene3DOnly: true优化性能
本文章已经生成可运行项目
Cesium可视化系统实战课程
02-13
给大家分享一套课程——Cesium可视化系统实战课程
Cesium可视化系统实战教程
02-14
一、什么是 CesiumJS？ CesiumJS 是一个强大的开源 JavaScript 库，用于构建高性能的 3D 地图和地球可视化应用。无论你是从事地理信息系统（GIS）开发、数据可视化，还是需要展示空间数据，CesiumJS 都能提供灵活的解决方案。它以 WebGL 为核心，专注于大规模地理空间数据的实时渲染。 CesiumJS 是 Cesium 平台的核心部分，与 Cesium ion 等服务无缝集成，支持从数据管理到可视化的一整套解决方案。 二、CesiumJS 的核心功能 1. 全球三维可视化 CesiumJS 提供了一个完整的三维地球模型，你可以在地球表面任意地点进行导航、缩放和交互。通过加载地形、卫星影像或矢量数据，你可以轻松将全球数据展示在 3D 空间中。 地形加载：支持全球高分辨率地形数据。 影像支持：兼容主流影像数据格式（如 WMS、TMS 和 WMTS）。 矢量可视化：支持矢量点、线、面和其他 GIS 数据的动态渲染。
cesium gltf控制
God's asylum的博客
10-01 732
glTF格式本质上是一个JSON文件。这一文件描述了整个3D场景的内容。它包含了对场景结构进行描述的场景图。场景中的3D对象通过场景结点引用网格进行定义。材质定义了3D对象的外观，动画定义了3D对象的变换操作(比如选择、平移操作)。蒙皮定义了3D对象如何进行骨骼变换，相机定义了渲染程序的视锥体设置；文章最后有源码可供参考
Cesium入门之九：Cesium加载gltf文件
九仞山的专栏
06-03 7102
详细介绍了gltf文件、Cesium中的坐标系以及Cesium中加载gltf文件的方法
Mars3D开发基础学习:glTF小模型
木遥的专栏
12-31 2946
glTF全称是 Graphics Language Transmission Format （图形语言传输格式），是一种针对GL(WebGL，OpenGL ES以及OpenGL)接口的运行时资产传递格式，由澳大利亚的 Khronons 集团进行维护，并于2017年6月5日在GitHub 上公布了glTF 2.0的规范，此文也是针对于2.0版本进行介绍的。 glTF通过提供高效、可扩展、可互操作的格式来传输和加载三维内容，填补了3D建模工具与现代图形应用程序之间的空白，它已成为了 Web 上的3D 对象标准
cesium三维实景社区警务可视化平台全栈式开发视频教程
11-11
本课程主要是针对webgis开发人员开发一套基于前后端的三维实景社区警务可视化平台，后端采用Java结合springboot框架搭建后端服务器，地图服务器采用geoserver，数据库采用的postgresql，服务器的缓存使用redis，服务器文件服务器minio。前端采用vue3结合cesium框架实现三维GIS社区户籍管理系统。本项目为真实项目需求改编，全程带领项目的环境搭建，前端开发，后端开发，三维cesium实景开发，数据处理，工具使用，特别适合没有webgis项目开发经验的刚入行webgis三维实景开发的开发人员，能为找工作提供点开发经验。
【Cesium学习（六）】Cesium加载3D模型（3D tiles和glTF模型）
热门推荐
HAI_GUI的博客
08-17 1万+
3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集, 3DTiles数据集以分块、分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的负担是一个优秀的,并且格式公开的数据格式。3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。
三维地图之cesium入门使用
吴道简的博客
08-10 1万+
三维地图与三维空间建模，目前来看，应用还是在可视化层面，因为硬件设备的限制，可视化的效果也不尽如人意。只要加载的数据量一大，或者非本地数据网络不极速，渲染就会非常卡顿，呈现出满屏后现代主义的拼贴风格。 做三维地图的桌面端软件有Google earth，但Google earth做出来的东西只能自己看，不太好共享，如果想做一个能共享的web应用，还得使用前端技术，cesium就可以。 当然卡顿的问题，哪里都存在，这个得靠摩尔定律来解决了。 一、什么是cesium cesium.js是一个开源的前.
Cesium for Unity离线加载地图
ilionom的博客
09-04 2265
CesiumforUnity安装指南：该插件支持在Unity中集成全球3D地理数据。安装需Unity2020.3+版本，通过PackageManager添加GitURL或下载tgz包。使用前需配置Cesiumion账户获取AccessToken。加载3D地形和影像数据推荐使用91卫图助手下载GeoTiff格式文件，并用CesiumLab处理切片。需配置Nginx服务路径，在Unity中创建Cesium3DTileset对象并指定layer.json路径即可加载离线地图。适用于虚拟地球、GIS等3D地理空间应
【Unity3D】Cesium加载大地图
little_fat_sheep
07-20 5892
Cesium 是一个地球可视化平台和工具链，具有数据切片、数据分发、三维可视等功能。Cesium 支持 JS、Unity、Unreal、O3DE、Omniverse 等平台，框架如下。https://www.cesiumlab.com/CesiumLab地理信息基础数据处理平台使用手册.pdf。
11、Cesium+Vue 实现 3D 模型动态轨迹可视化方案
苦逼前端分享苦逼经验
07-05 2449
本文介绍了如何利用Vue框架整合Cesium 3D地球引擎实现动态轨迹可视化。主要内容包括： 技术架构：使用Vue2.x+Cesium1.100+，支持glTF2.0模型格式和高德地图服务 核心实现： 高性能Cesium Viewer配置优化 高德地图底图集成方案 3D模型加载与姿态控制（Heading-Pitch-Roll系统） 基于时间轴的动态轨迹生成 智能相机跟踪系统 关键优化： scene3DOnly模式提升30%性能 纹理渐进加载避免卡顿 完整的资源释放机制 移动端交互优化 应用场景：适用于物流监
Cesium 入门教程（一）：应该如何学习 Cesium
大剑师兰特的GIS世界
03-13 3130
Cesium 是一个开源的 JavaScript 库，专门用于创建3D地球和地图的可视化应用。它支持WebGL技术，允许开发者在网页上展示高分辨率的地理空间数据，进行三维场景渲染、地理信息系统（GIS）分析等。Cesium 主要用于构建基于浏览器的应用程序，可以显示全球范围内的地理信息，并且能够处理大量的空间数据。Cesium 1.0 (2012年)初始版本发布，确立了Cesium作为WebGL驱动的3D地球浏览器的基础。提供了基本的地图渲染功能，包括全球地形、影像图层等。
Cesium中导入三维模型方法（dae到glft_bgltf） - l491453302的专栏 - CSDN博客1
08-03
摘要视图订阅标签： cesium gltf webgl分类：目录(?图灵赠书——程序员11月书单 【思考】Python这么厉害的原因竟然是！感恩节赠书：《深度学
Cesium 权威指南：全面遍历与展示 Cesium 操作
落魄书生的职业学习生涯
12-17 9802
Cesium 是一个开源的 JavaScript 库，专注于创建高性能的 3D 地球和地图应用。它利用 WebGL 技术，在浏览器中渲染逼真的地理空间数据，支持全球范围内的地理信息展示和交互。高性能 3D 渲染：利用 WebGL 实现流畅的 3D 场景。丰富的数据支持：支持多种地理空间数据格式，如 GeoJSON、KML、CZML 等。时间动态效果：支持时间线，适用于展示动态数据。插件与扩展：拥有丰富的插件生态，方便功能扩展。跨平台：基于浏览器，兼容各种操作系统和设备。城市规划与管理。
Vue3+Cesium实战：从零搭建3D地图应用并解决常见底图加载问题
最新发布
sugar的博客
02-18 801
本文详细介绍了从零开始使用Vue3集成Cesium构建3D地图应用的完整流程。重点解决了新手常见的底图加载失败问题，涵盖项目初始化、Cesium Ion Token配置、样式引入、Viewer实例化等关键步骤，并提供了集成天地图、OSM建筑模型等进阶实战方案，以及性能优化与项目部署要点。
cesium 3dtiles 加载本地数据_使用Cesium加载并调整3D Tiles
weixin_39581896的博客
11-22 5348
首先我们先来感受一下实现之后的效果：知乎视频​www.zhihu.com3dtiles简介3D Tiles是用于流式传输大规模异构3D地理空间数据集的开放规范。为了扩展Cesium的地形和图像流，3D Tiles将用于流式传输3D内容，包括建筑物，树木，点云和矢量数据。3D Tiles是目前大火的开源WebGL框架Cesium的御用格式。根据实际体验，3D Tiles和二维地图中的瓦片组织非常相似...
开源库入门教程 Cesium：3D地球和地图库
zenithdev1的博客
10-02 2086
摘要：Cesium是一个开源的JavaScript库，用于创建高性能的3D地球和地图应用，支持在浏览器中无需插件即可渲染完整3D地球。其核心优势包括真正的3D地球模型、时间动态数据展示、精确地理参考、大数据处理能力等。本文介绍了Cesium的基本概念、安装方式，并通过示例代码演示了如何创建3D地球、添加标记、加载数据源等基础操作。文章还分享了实用技巧，适合开发者快速入门Cesium开发。
三维地图之cesium轨迹回放（有代码）
吴道简的博客
10-25 5678
一、cesium加载三维地图和三维模型 Cesium的官方教程写得是非常详尽的，用chrome打开官方学习文档https://cesium.com/docs/，一键翻译，照着学习是最好的方案。 最简单的加载三维地图的方法：https://cesium.com/docs/tutorials/quick-start/ 代码非常简短，如果你注册了cesium，网站会自动识别你的ak，填充入代码中。（下面这段代码，把Cesium.Ion.defaultAccessToken = 你的ak中，你的ak.
cesium初始化及加载地图
weixin_43245952的博客
08-03 4402
概述 Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。 Cesium支持多种数据可视化方式，可以绘制各种几何图形、导入图片，甚至3D模型。同时，Cesium还支持基于时间轴的动态数据展示，例如，我们可以用它绘制卫星运行轨迹。 cesium初始化参数 var viewer = new Cesium.Viewer('cesiumContainer',{ animation:t
Cesium 实用总结
Muggle_的博客
05-14 7567
Cesium是什么 Cesium是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。 Cesium能做什么 通过Cesium提供的JS API，可以实现以下功能： 使用 3d tiles格式流加载各种不同的 3d 数据，包含 倾...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冒气er

伸出你发财的小手叮咚一下

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值