Cesium快速入门到精通系列教程一

article/2025/6/9 0:56:49

一、打造第一个Cesium应用

1、官方渠道下载Cesium(可选择历史版本)

​​GitHub Releases页面​​

访问 Cesium GitHub Releases,此处列出了所有正式发布的版本。

通过标签(如 v1.95.0)选择目标版本,下载对应的压缩包(包含源码、构建文件和网页)。

​​优势​​:获取官方认证版本,附带完整变更日志和修复记录。

2、下载解压后依次执行以下命令,可以在本地运行Cesium:

yarn install
yarn start

3、Vue3中使用Cesium:

npm create vue@latest #安装当前最新版本的Vue3
cd cesium1.93 
npm install
npm i cesium@1.93 #安装cesium1.93

 以上命令执行完成后,将node_modules中cesium的以下四个目录复制到public目录:

另外,将node_modules中cesium的Widgets目录复制到src目录: 

App.vue中代码如下:

<template><div id="cesiumContainer"></div>
</template><script setup>
Cesium.Ion.defaultAccessToken = '你的AccessTokens';
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径(public目录)onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer");})</script><style scoped>
*{margin: 0;padding: 0;
}#cesiumContainer{width: 100wh;height: 100vh;
}
</style>

cmd中执行

npm run dev

二、Cesium基础设置:

<template><div id="cesiumContainer"></div>
</template><script setup>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4MzFiNGJmOS1jYzBmLTQyYjYtOTNhOS0wMThjZWE3YzM0MGMiLCJpZCI6MjU5MTEyLCJpYXQiOjE3MzI5NzM5MzB9.RUpB02gjxFwpqmbND4OKWyR7-VntYuohtjlXklFB6UE'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径(public目录)// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, // 西边经度20.4, // 南边维度110.4, // 东边经度61.2) // 北边维度onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer");viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo
})</script><style scoped>
* {margin: 0;padding: 0;
}#cesiumContainer {width: 100wh;height: 100vh;
}
</style>
// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, // 西边经度20.4, // 南边维度110.4, // 东边经度61.2) // 北边维度
viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo

三、viewer查看器设置

  const viewer = new Cesium.Viewer("cesiumContainer", {geocoder: false, //设置搜索框是否可见homeButton: false, // 返回初始位置键是否可见sceneModePicker: false, // 查看器选择模式选择键是否可见baseLayerPicker: false, // 图层选择键是否可见navigationHelpButton: false, // 帮助按钮是否可见animation: false, // 播放控制按钮是否可见timeline: false, // 时间轴是否可见fullscreenButton: false, // 全屏按钮是否可见});

四、Cesium自定义地图与地图叠加

1、天地图加载

天地图是中国国家基础地理信息系统,由中国测绘地理信息局和国家地理信息公共服务平台共同开发和运营。它提供多项地理信息服务,包括地图数据、地理编码、路径规划以及地理搜索等。天地图的目标是为各行业提供高质量、全面的地理信息数据和解决方案。

天地图调用申请:

登录已有账号。如果尚未注册,请先进行注册。

访问天地图首页,进入开发资源,然后点击地图API。

在地图API页面,点击申请Key。

选择“创建新应用”,并填写应用的详细信息。

申请完成后,您可以查看新应用的Key。

在服务调用时,请使用刚刚申请到的Key作为Token。

天地图影像加载:

中国的天地图(Tianditu)提供了丰富的影像与矢量数据,通过 Cesium 可以轻松地将天地图的服务加载到三维地球中。下面是如何加载天地图的矢量图层、影像图层及其注记图层的示例。

矢量底图:

  const MAP_KEY = '你的天地图访问密钥';const viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + MAP_KEY,layer: "tdtVecBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible"})});

矢量注记:

  const MAP_KEY = '你的天地图访问密钥';const viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + MAP_KEY,layer: "tdtAnnoLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible"})});

影像底图:

  const MAP_KEY = '你的天地图访问密钥';const viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + MAP_KEY,layer: "tdtBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible"})});

影像注记:

  const MAP_KEY = '你的天地图访问密钥';const viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" + MAP_KEY,layer: "tdtAnnoLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible"})});

使用 Cesium.WebMapTileServiceImageryProvider 类来添加一个WMTS(Web Map Tile Service)图层。具体配置包括:

  • url:指定底图的服务地址,这里我们使用天地图提供的矢量服务。
  • layer:图层的名称。
  • style:图层样式,这里使用默认样式。
  • format:指定图块格式为JPEG。
  • tileMatrixSetID:使用Google Maps兼容的平铺矩阵集。

该配置将返回一个矢量底图,可以在Cesium视图中进行渲染。

调整色调和对比度:

为了创建一个视觉上更具冲击力的暗黑色系效果,我们对底图的色调和对比度进行了调整:

imagery.hue = 3; // 图层色调  
imagery.contrast = -1.2; // 图层对比度  
  • imagery.hue:此属性用于调整底图的色调。例如设置为3可能会使颜色偏向于蓝色或绿色,具体效果依赖于底图的原始色调。
  • imagery.contrast:此属性设置对比度。负值(如-1.2)会降低对比度,使图像的颜色更加柔和,并增强暗色区域的细节,从而使底图视觉上更加协调和沉稳。

2、高德地图加载

在 Cesium 中加载高德地图作为底图,可以通过配置 Cesium 的 ImageryProvider 来实现。高德地图提供了多种图层服务:

加载高德地图矢量图层

// 创建高德地图矢量图层
const gaodeVector = new Cesium.UrlTemplateImageryProvider({url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',subdomains: ['1', '2', '3', '4'],maximumLevel: 19,credit: '高德地图'
});// 添加到地图
viewer.imageryLayers.addImageryProvider(gaodeVector);

加载高德地图影像图层

// 创建高德地图影像图层
const gaodeImagery = new Cesium.UrlTemplateImageryProvider({url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',subdomains: ['1', '2', '3', '4'],maximumLevel: 19,credit: '高德地图'
});// 添加到地图
viewer.imageryLayers.addImageryProvider(gaodeImagery);

加载高德地图标注图层

标注图层通常需要叠加在矢量或影像图层之上:

// 创建高德地图标注图层
const gaodeLabels = new Cesium.UrlTemplateImageryProvider({url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',subdomains: ['1', '2', '3', '4'],maximumLevel: 19,credit: '高德地图'
});// 添加到地图(通常叠加在影像图层之上)
viewer.imageryLayers.addImageryProvider(gaodeLabels);

完整示例代码

下面是一个完整的示例,展示如何在 Cesium 中同时加载高德地图的影像图层和标注图层:

onMounted(() => {const MAP_KEY = '你的Cesium token';const viewer = new Cesium.Viewer("cesiumContainer", {geocoder: false, //设置搜索框可见homeButton: false, // 返回初始位置键是否可见sceneModePicker: false, // 查看器选择模式选择键是否可见baseLayerPicker: false, // 图层选择键是否可见navigationHelpButton: false, // 是否显示帮助按钮animation: false, // 是否显示播放控制按钮timeline: false, // 是否显示时间轴fullscreenButton: false, // 是否显示全屏按钮})// 移除默认图层viewer.imageryLayers.removeAll();// 创建高德地图影像图层const gaodeImagery = new Cesium.UrlTemplateImageryProvider({url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',subdomains: ['1', '2', '3', '4'],maximumLevel: 19,credit: '高德地图'});// 创建高德地图标注图层const gaodeLabels = new Cesium.UrlTemplateImageryProvider({url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',subdomains: ['1', '2', '3', '4'],maximumLevel: 19,credit: '高德地图'});// 添加图层到地图viewer.imageryLayers.addImageryProvider(gaodeImagery);viewer.imageryLayers.addImageryProvider(gaodeLabels);viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo
});

3、地图叠加

多源影像图层叠加​​

onMounted(() => {const MAP_KEY = '天地图MAP_KEY';const viewer = new Cesium.Viewer("cesiumContainer", {geocoder: false, //设置搜索框可见homeButton: false, // 返回初始位置键是否可见sceneModePicker: false, // 查看器选择模式选择键是否可见baseLayerPicker: false, // 图层选择键是否可见navigationHelpButton: false, // 是否显示帮助按钮animation: false, // 是否显示播放控制按钮timeline: false, // 是否显示时间轴fullscreenButton: false, // 是否显示全屏按钮});// 加载高德矢量地图
const amapLayer = new Cesium.UrlTemplateImageryProvider({url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',subdomains: ['1', '2', '3', '4'],maximumLevel: 19,credit: '高德地图'
});// 加载天地图卫星影像
const tiandituLayer = new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + MAP_KEY,layer: "tdtImgBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible"
});// 添加到图层集合
viewer.imageryLayers.addImageryProvider(amapLayer);
viewer.imageryLayers.addImageryProvider(tiandituLayer);viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo
})

通过viewer.imageryLayers数组顺序控制图层叠加层级,后添加的图层显示在最上层。

控制图层顺序和透明度

onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer", {geocoder: false, //设置搜索框可见homeButton: false, // 返回初始位置键是否可见sceneModePicker: false, // 查看器选择模式选择键是否可见baseLayerPicker: false, // 图层选择键是否可见navigationHelpButton: false, // 是否显示帮助按钮animation: false, // 是否显示播放控制按钮timeline: false, // 是否显示时间轴fullscreenButton: false, // 是否显示全屏按钮});// 移除默认图层viewer.imageryLayers.removeAll();// 添加高德地图矢量图层const gaodeVector = new Cesium.UrlTemplateImageryProvider({url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',subdomains: ['1', '2', '3', '4'],maximumLevel: 19,credit: '高德地图'});viewer.imageryLayers.addImageryProvider(gaodeVector);// 添加高德地图标注图层(叠加在矢量图层之上)const gaodeLabels = new Cesium.UrlTemplateImageryProvider({url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',subdomains: ['1', '2', '3', '4'],maximumLevel: 19,credit: '高德地图'});viewer.imageryLayers.addImageryProvider(gaodeLabels);const layers = viewer.imageryLayers;// 设置图层透明度(0.0完全透明,1.0完全不透明)const layer = layers.get(0);  // 获取第二个图层layer.alpha = 0.2;  // 设置70%透明度
})


http://www.hkcw.cn/article/PerJXUqSjA.shtml

相关文章

【多线程初阶】synchronized -监视器锁monitor lock

文章目录 &#x1f305;synchronized关键字&#x1f30a; synchronized 的互斥&#x1f30a; synchronized 的变种写法&#x1f3c4;‍♂️synchronized 修饰代码块 :明确指定锁哪个对象&#x1f3c4;‍♂️synchronized 修饰方法 &#x1f30a; synchronized 的可重入性&#…

C# 面向对象特性

面向对象编程的三大基本特性是&#xff1a;封装、继承和多态。下面将详细介绍这三大特性在C#中的体现方式。 封装 定义&#xff1a;把对象的数据和操作代码组合在同一个结构中&#xff0c;这就是对象的封装性。 体现方式&#xff1a; 使用访问修饰符控制成员的可见性 通过属…

[LitCTF 2024]浏览器也能套娃?

打开题目在线环境&#xff1a; 这里尝试填写一个网站回车之后是&#xff1a; 这里想到了ssrf漏洞&#xff1a;ssrf漏洞通常是由于应用程序在处理用户输入时缺乏严格的安全检查&#xff0c;错误地信任外部输入&#xff0c;或者使用的网络请求库配置不当等原因导致的。攻击者可…

明远智睿SSD2351开发板:视频监控领域的卓越之选

随着安全防范意识的提高&#xff0c;视频监控在各个领域得到了广泛应用。明远智睿SSD2351开发板凭借其出色的性能和特性&#xff0c;成为视频监控领域的卓越之选&#xff0c;为视频监控系统的升级和发展提供了有力支持。 SSD2351开发板的四核1.4GHz处理器在视频监控数据处理方面…

threejs加载外部三维模型(gltf)

1. 建模软件绘制3D场景(Blender) 这节课主要给大家科普一些三维模型创建、美术和程序员协作的相关问题。 三维建模软件作用 对于简单的立方体、球体等模型&#xff0c;你可以通过three.js的几何体相关API快速实现&#xff0c;不过复杂的模型&#xff0c;比如一辆轿车、一栋房…

【从零开始系列】Qwen2.5 Llama-Factory:开源语言大模型+训练平台——(超详细、最新版)一篇文章解决:环境搭建 => 微调训练 => 本地部署

目录 一、简介 1.Qwen2.5&#xff1a;开源模型 2. LLaMA-Factory&#xff1a;微调工具 二、环境搭建 1.Python和Pytorch版本 2.llamafactory项目克隆安装 3.其他重要库安装 三、模型微调 1.预训练模型下载 2.训练数据集 ①创建对话文本数据 ②配置dataset_info 3.配置文件与…

git 代码提交规范,feat,fix,chore都是什么意思?

写到前面 经常看到别人提交的代码记录里面包含一些feat、fix、chore等等&#xff0c;而我在提交时也不会区分什么&#xff0c;直接写下提交信息&#xff0c;今天就来看一下怎么个事&#xff0c;就拿 element-plus 举例来看一下 其实这么写是一种代码提交规范&#xff0c;当然…

Gemma 3模型:Google 开源新星,大语言模型未来探索

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《深度探秘&#xff1a;AI界的007》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、快速发展的AI世界&#xff1a;为何关注Gemma 3&#x…

2024.11最新Hexo+GitHub搭建个人博客

2024.11最新HexoGitHub搭建个人博客 一、Hexo介绍 Hexo 是一个快速、简洁且高效的博客框架&#xff0c;有丰富的主题和插件可供使用。 Hexo 使用 Markdown&#xff08;或其他标记语言&#xff09;解析文章&#xff0c;在几秒内&#xff0c;即可利用靓丽的主题生成静态网页。这…

完美解决 git 报错 “fatal: unable to access ‘https://github.com/.../.git‘: Recv failure Connection was rese

文章目录 方法一&#xff1a;取消代理设置方法二&#xff1a;设置系统代理结语 &#x1f389;欢迎来到Java学习路线专栏~探索Java中的静态变量与实例变量 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&#x1f388;该系列文章专栏&#xf…

git 拉取Github时报错【 Recv failure: Connection was reset】

问题 当我们电脑能够正常访问Github时&#xff0c;但是git拉取代码出现 &#xff1a; Recv failure: Connection was reset原因 这是因为使用了特殊上网方法&#xff0c;电脑能够正常访问&#xff0c;但是git通过底层访问需要配置代理才能正常访问 解决办法 配置方法如下&…

【PostgreSQL系列】PostgreSQL性能优化

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

如何使用 TortoiseGit 将本地代码回退到指定版本

如何使用 TortoiseGit 将本地代码回退到指定版本 在使用 Git 进行版本控制时&#xff0c;我们可能会遇到需要回退到某个旧版本的情况&#xff0c;比如发现最近的修改引入了问题&#xff0c;或者需要恢复到某个特定的稳定状态。TortoiseGit 是一款非常流行的 Git 图形化工具&am…

航空安全警钟须长鸣 充电宝冒烟再敲警钟

5月31日,CZ6850杭州飞往深圳的航班上,一名旅客携带的相机电池和充电宝突然冒烟。乘务组迅速采取措施,排除了安全风险。为确保安全,机组决定立即返航,航班在起飞15分钟后安全降落。这次事件虽然没有造成人员伤亡,但再次提醒人们航空安全的重要性。任何微小的安全隐患都可能…

玩客云 OEC/OECT 笔记

外观 内部 PCB正面 PCB背面 PCB背面 RK3566 1Gbps PHY 配置 OEC 和 OECT(OEC-turbo) 都是基于瑞芯微 RK3566/RK3568 的网络盒子, 没有HDMI输入输出. 硬件上 OEC 和 OECT 是一样的, 唯一的区别是内存, OEC 内存 2GB 而OECT 内存是 4GB. 产品OECOEC-turboCPURK3566…

InfluxDB 高级函数详解:DERIVATIVE、INTEGRAL、SPREAD、HISTOGRAM 与 DIFFERENCE

在时序数据分析中&#xff0c;除了基础的聚合函数&#xff08;如 MEAN、SUM&#xff09;&#xff0c;InfluxDB 还提供了一系列专门针对时间序列特性的高级函数。这些函数能帮助我们挖掘数据的变化趋势、波动特征和分布规律。下面我们将逐一解析五个关键函数&#xff1a;DERIVAT…

华为OD机试真题—— 最少数量线段覆盖/多线段数据压缩(2025A卷:100分)Java/python/JavaScript/C++/C语言/GO六种最佳实现

2025 A卷 100分 题型 本文涵盖详细的问题分析、解题思路、代码实现、代码详解、测试用例以及综合分析; 并提供Java、python、JavaScript、C++、C语言、GO六种语言的最佳实现方式! 2025华为OD真题目录+全流程解析/备考攻略/经验分享 华为OD机试真题《最少数量线段覆盖/多线段数…

古代小孩哥怎么过六一 绿意中撒欢踢毽子

今天是六一儿童节,让我们一起看看古代的孩子们在这一天会玩些什么。古代的童趣VCR展示了高能量小孩哥的日常。他们在绿意盎然的环境中尽情撒欢,青翠的柳荫、碧绿的草地,还有亲密的玩伴。孩子们选择组团踢毽子,只见小孩哥眼神专注,动作轻快,毽子跃起时衣角也随之飘动。旁边…

有捏捏玩具甲醛超标40多倍 安全问题引热议

近日,拥有百万粉丝的捏捏玩具博主“有只猫叫小朋友”在社交平台上发布癌症诊断书,并表示暂停更新。这一举动引发了关于捏捏玩具安全性的讨论。有网友留言称,自己和孩子玩过捏捏玩具后出现了头疼、嗓子疼的情况。捏捏玩具是一种流行的硅胶材质慢回弹类解压玩具,外形多为软萌…

宇树机器狗go2添加3d雷达(下)添加velodyne系列雷达

0.前言 上一篇文章教大家如何在宇树机器狗go2的仿真环境中添加3d雷达livox mid360&#xff08;宇树机器狗go2 添加3d雷达&#xff08;上&#xff09;添加livox系列雷达&#xff09;&#xff0c;本期文章会教大家添加lvelodyne的系列雷达&#xff0c;是添加3d雷达的下期。宇树机…