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

Cesium 入门教程（基于 vue3）

article 2025/3/12 10:55:48

目录

Cesium 介绍：

下载 Cesium，2种路径:

下载成功后，创建 vue3 项目：

编写内容

一个“纯”地球

添加图层

坐标系及其数值转换

相机位置及动态交互

添加物体和3维建筑物

Cesium 介绍：

        Cesium 是一个开源的 JavaScript 库，专门用于创建世界级的三维地球和地图可视化应用。它提供了强大的工具和功能，使开发者能够轻松地在浏览器中展示高分辨率的地形、影像以及三维模型。Cesium 支持多种数据格式，包括但不限于 3D Tiles、GeoJSON 和 glTF，这使得它成为处理地理空间数据的理想选择。无论是构建虚拟地球、城市规划模拟、还是气象数据分析，Cesium 都能提供必要的技术支持。此外，Cesium 还支持时间动态数据，允许用户通过时间轴查看历史数据变化或预测未来趋势。Cesium 的核心优势在于其无需任何插件即可运行于现代浏览器的能力，这意味着它可以跨平台使用，无论是在桌面端还是移动端都能保证流畅体验。同时，Cesium 提供了丰富的 API 接口，让开发者可以自由定制应用的功能与外观，极大地增强了项目的灵活性和扩展性。随着版本不断迭代更新，Cesium 正逐步成为地理信息系统（GIS）、智慧城市解决方案以及虚拟现实等多个领域不可或缺的技术之一。

下载 Cesium，2种路径:

1、官方页面：

Downloads – Cesiumhttps://cesium.com/downloads/

2、直接在项目中集成，输入：

npm install vite-plugin-cesium -D

vite.config.js 配置如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium' # 导入cesium 

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(), cesium() # 添加插件
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

解压后在 vscode 中打开：

终端输入 启动命令：

npm start

启动后将提供一个本地 URL ，让您能够在离线状态下访问 Cesium 文档。

里面有很多案例和教程，可以离线学习：

下载成功后，创建 vue3 项目：

vue create cesium-basic

创建完 vue3 项目后，下载 cesium 库：

cnpm add cesium

复制 cesium 资源文件

将 cesium-basic 下的node_modules -- cesium -- Build -- Cesium 下的四个文件夹（Assets、ThirdParty、Widgets、Workers）复制到 public 目录下

再复制一个 Widgets 文件夹到 src 目录下

编写内容

打开 App.vue，删掉不需要的东西，写代码如下：

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
  import * as Cesium from 'cesium'
  import "./Widgets/widgets.css"
  import { onMounted } from 'vue';

  window.CESIUM_BASE_URL = "/";

  onMounted(()=>{
    new Cesium.Viewer("cesiumContainer");
  })
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
</style>

生命钩子确保 App 被挂载后才将 Cesium Viewer 镶嵌到 cesiumContainer 中

  • Cesium.CESIUM_BASE_URL：这是一个全局配置项，用于定义Cesium库所需的所有静态资源的基础URL。通过修改这个值，你可以控制这些资源的加载位置。

  • "/"：这里的单斜杠表示的是你的Web服务器的根目录。这意味着所有相对于此设置的资源请求都将从你的域名开始后的第一级路径进行查找。例如，若你需要加载位于Widgets/CesiumWidget/CesiumWidget.css的CSS文件，则实际请求的URL将是http://yourdomain.com/Widgets/CesiumWidget/CesiumWidget.css

代码写好后执行运行命令（注意控制台要切到 cesium-basic目录，可以cd cesium-basic）：

npm run serve

运行后你就能拥有属于自己的“地球”了：

右上角还能切换3D或2D，还能切换图层，还要地区搜索功能，但感觉放大到某个地区后加载用时很长。

一个“纯”地球

默认界面会提示你去注册，并填写 Token，注册官网：Cesium ion

复制自己的访问令牌：

填写即可：

// 设置cesium token
  Cesium.Ion.defaultAccessToken = "你的Token"

Ctrl + S 保存，Token 提示消失：

还有一些其他的默认设置，也都可以清除，具体代码如下：

 onMounted(()=>{
    var viewer =  new Cesium.Viewer("cesiumContainer",{
      // 去掉对话框警告
      infoBox:false,
      // 是否显示查询按钮
      geocoder: false,
      // 不显示home按钮
      homeButton:false,
      // 控制查看器的显示模式（3D、2.5D、2D是否显示）
      sceneModePicker:false,
      // 是否显示图层选择
      baseLayerPicker:false,
      // 是否显示帮助按钮
      navigationHelpButton:false,
      // 是否显示播放动画、计时
      animation:false,
      // 是否显示时间轴
      timeline:false,
      // 是否显示全屏按钮
      fullscreenButton:false,

    });
    // 隐藏图标
    viewer.cesiumWidget.creditContainer.style.display = "none";
  })
  // 设置cesium默认视角
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    // 西经
    115.8651,
    // 南维度
    28.7019,
    // 东经
    115.8709,
    // 北纬
    28.7053
  )

这样就能得到一个“干干净净”的三维地图：

添加图层

将国内的地图数据加载进去：

注册天地图账号：

天地图

登录后申请为个人开发者，创建新应用

拿到想要引入的url（url + Token）：

如果 web 页面中的地球是蓝色的，就像这样：

请在创建 viewer 后输入：

viewer.imageryLayers.get(0).show = true;

还可以添加矢量图层：

const gaodeImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: "https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=4",
    minimumLevel: 1,
    maximumLevel: 18,
  });


viewer.imageryLayers.addImageryProvider(gaodeImageryProvider);

效果：

坐标系及其数值转换

屏幕坐标系有三种：

1、二维笛卡尔坐标系 Cartesian2

2、地理坐标系，WGS-84坐标系，Cartographic（经纬高）

3、笛卡尔空间直角坐标系,Cartesian3类型

几个坐标系之间对象对应的数值可以互相转换：

// 角度转弧度
var radius = Cesium.Math.toRadians(90)
// 弧度转角度
var degress = Cesium.Math.toDegrees(2*Math.PI)
// 经纬度转换为笛卡尔坐标
var cartesian3 = Cesium.Cartesian3.fromDegrees(
  89.5,20.4,100
)
// 再转回经纬度
var cartographic = Cesium.Cartographic.fromCartesian(cartesian3)

相机位置及动态交互

相机位置

// setView瞬间到达指定位置
  var position = Cesium.Cartesian3.fromDegrees(116.393428,39.90923,100)
  viewer.camera.setView({
    destination:position,
    // 指定相机视角
    orientation:{
      // 相机朝向，偏航角
      heading:Cesium.Math.toRadians(0),
      // 相机俯仰角，0是竖直向上，-90是竖直向下
      pitch:Cesium.Math.toRadians(0),
      // 相机滚轮角
      roll:0,
    }
  })

动态控制相机飞往某地：

 viewer.camera.flyTo({
    destination:position,
    orientation:{
      heading:Cesium.Math.toRadians(0),
      pitch:Cesium.Math.toRadians(-20),
      roll:0,
    }
  })

通过按键触发（控制台输入）

// 通过按键移动相机
document.addEventListener("keydown",(e)=>{
  // 获取相机离地面的高度
  var height = viewer.camera.positionCartographic.height;
 
  var moveRate = height / 100;
  if(e.key=="w"){
    viewer.camera.moveForward(moveRate);
  }
  else if(e.key=="s"){
    viewer.camera.moveBackward(moveRate)
  }else if(e.key=="a"){
    viewer.camera.moveLeft(moveRate)
  }else if(e.key=="d"){
    viewer.camera.moveRight(moveRate)
  }else if(e.key=="q"){
    viewer.camera.lookLeft(Cesium.Math.toRadians(0.1));
  }else if(e.key=="e"){
    viewer.camera.lookRight(Cesium.Math.toRadians(0.1));
  }else if(e.key=="r"){
    viewer.camera.lookUp(Cesium.Math.toRadians(0.1))
  }else if(e.key=="f"){
    viewer.camera.lookDown(Cesium.Math.toRadians(0.1));
  }
})

添加物体和3维建筑物

3D建筑教学：【Cesium入门】在3D城市中可视化一个拟建的建筑 - csincs - 博客园用你自己的3D模型替换真实城市中的建筑。 你可以用这种方法来可视化拟建建筑的影响。它会如何改变天际线？从特定楼层或房间看，视图会是什么样的？https://www.cnblogs.com/csincs/articles/18281550

添加一个点：

// 添加一个点
var point = viewer.entities.add({
  position:Cesium.Cartesian3.fromDegrees(115.8247,28.7143,100),
  point:{
    pixelSize:10,
    color:Cesium.Color.RED,
    outlineColor:Cesium.Color.WHEAT,
    outlineWidth:4,
  }
})

感谢您的观看，后续将持续更新！！


http://www.kler.cn/a/581248.html

相关文章：

  • ubuntu20不同版本的cudnn切换
  • DeepSeek与Excel实现自动化办公：从基础到进阶的全面指南
  • PROC程序报无效的字符串或缓冲区长度问题
  • 初阶数据结构（C语言实现）——4.2队列
  • 支持selenium的chrome driver更新到134.0.6998.88
  • 13.boost项目总结(C++)
  • CoreWeave：从“微软专供”到OpenAI的座上宾
  • WPF 元素周期表
  • c++学习之QT综合项目一
  • Vue使用ScreenFull插件实现全屏切换
  • 基于STM32的智能家居门禁开锁控制系统（论文+源码）
  • 可复用的 Vue 轮播图组件
  • Unity 基础知识总结（持续更新中...）
  • SwiftUI 让视图自适应高度的 6 种方法（四）
  • 03_NLP常用的文本数据分析处理方法
  • 【AI落地应用实战】RAGFlow + 知识图谱Knowledge Graph + Deepseek + 知识库构建初步探索
  • Codeforces Round 1008 (Div. 2)（A-D）
  • Application.OnTime如何引用带参数的过程
  • 数据篇| App爬虫入门（一）
  • Python数据分析之机器学习基础