Cesium学习系列汇总

最新推荐文章于 2025-10-16 17:10:01 发布
转载 最新推荐文章于 2025-10-16 17:10:01 发布 · 1.1k 阅读 · 26 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/telwanggs/p/11124237.html
文章标签：

#git #javascript #ViewUI

内容比较多，完整看完需要大概10分钟，废话不多说，撸起袖子，加油干！！！

 

 

1、前言

 

按照套路，先介绍一下什么是Cesium。

 

Cesium ['siːzɪəm]是JavaScript开源库，通过Cesium，实现无插件的创建三维球和二维地图。它是通过WebGL技术实现图形的硬件加速，并且跨平台，跨浏览器，并提供动态数据的可视化展现。

 

在本示例代码中，cesium有两个版本，分别为1.37和1.43。其中cesium1.37是早些时间在1.37版本随便写的几个示例没有系统性，cesium1.43是这个学习笔记系列对应的源代码。

 

在本系列中，使用VS2013+chrome来调试代码，示例代码下载后，可以直接调试运行，部分示例的测试数据需要另外下载。

 

目前我把cesium学习分为基础篇和工具篇。

 

基础内容整理19个笔记，涵盖环境搭建、影像服务、地形服务、模型加载、鼠标事件、绘制对象、3DTiles加载等几方面。关于其它诸如czml、DataSource、粒子系统等由于在工作上没有接触到我就先放一边。

 

工具篇包括在cesium引擎上实现一些常用的工具，原理篇和大家一起尝试查看cesium的源码，试图探究一下cesium底层实现和设计思想。

 

 

 

 

2、基础篇

 

 

基础篇1--环境搭建

基础篇2--官方DEMO和API查看影像服务

基础篇3--Cesium影像服务--在线服务

基础篇4--Cesium影像服务--在线服务扩展

基础篇5--Cesium影像服务--地图发布

基础篇6--Cesium影像服务--图层功能

基础篇7--Cesium影像服务--BaseLayerPicker使用

基础篇8--Cesium地形服务--在线地形

基础篇9--Cesium地形服务--本地地形数据处理及加载

基础篇10--Cesium地形服务--地形数据采样

基础篇11--模型加载

基础篇12--鼠标事件

基础篇13--绘制对象-Entity方式

基础篇14--绘制对象-Entity管理

基础篇15--绘制对象-Primitive方式

基础篇16--绘制对象-Primitive管理

基础篇17--绘制对象-Primitive外观

基础篇18--绘制对象-效率比较

基础篇19--3DTiles加载

 

 

3、工具篇

 

工具篇01-Tooltip-entity方式

工具篇02-Tooltip-div方式

工具篇03-DrawHelper

工具篇04-ChangeablePrimitive可编辑图形

工具篇05-DynamicDrawTool交互绘制

工具篇06-GroundPush挖地形

工具篇07-GroundClipping挖地形

工具篇08-CesiumNavigation导航插件

工具篇09-CesiumVectorTile矢量瓦片

工具篇10-TileLonlatsImageryProvider经纬度网格瓦片地图服务

工具篇11-Mouse-ButtonLanguage鼠标设置、按钮语言设置

工具篇12-GlobeSet球场景相关设置

工具篇13-CesiumThreejs引入threejs

工具篇14-PickPosition获取鼠标点击位置方法总结

工具篇15-Elevation等高线绘制

工具篇16-DynamicDraw-ClampGround交互绘制-贴地

工具篇17-PrimitivePoint自定义渲染-点

工具篇18-PrimitivePolyline自定义渲染-线

工具篇19-PrimitiveTriangles自定义渲染-面

工具篇20-PrimitiveTexture自定义渲染-贴图

工具篇21-PrimitiveWaterface渲染水面

工具篇22-PrimitiveEllipse自定义渲染椭圆

工具篇23-PrimitiveSector自定义渲染扇形

工具篇24-Cesium场景截屏

工具篇25-Cesium加载geoserver影像服务-tif

工具篇26-Cesium加载geoserver矢量服务-shp

工具篇27-Cesium查询wms服务自定义信息框

工具篇28-ChangeablePrimitiveClampGround可编辑图形--贴地

工具篇29-GetCurrentExtent获取当前场景范围

工具篇30-CesiumSceneWeather添加雨雪天气场景

工具篇31-cesium加载geoserver发布图层组

工具篇32-cesium圆形扫面线

工具篇33-cesium雷达扫描

工具篇34-cesium流动纹理

工具篇35-cesium飞行线路

工具篇36-挖地形、态势标绘、可视域

工具篇37-风场绘制

工具篇38-CesiumHeatmap热力图

 

4、原理篇

原理篇01-cesium源码编译

 

5、其它

三维特效

 

 

大家有任何的问题都可以在下面直接留言，我会在第一时间回复哦。

 

最后啰嗦一句：关注公众号，回复 git地址，获取该工程的所有源码

转载于:https://www.cnblogs.com/telwanggs/p/11124237.html

dhptkq9465
关注
Cesium实例：使用Tooltip实现GIS中的信息提示
ChDevops的博客
09-25 428
在鼠标移入事件处理程序中，我们使用Cesium的pick函数来获取鼠标位置下的对象，并检查是否是之前创建的要素。在鼠标点击事件处理程序中，我们再次使用pick函数来获取鼠标位置下的对象，并检查是否是之前创建的要素。如果你有任何进一步的问题，请随时提问。在上述HTML文件中，我们创建了一个具有唯一标识符"cesiumContainer"的div元素，它将用于承载Cesium的地图视图。在上述代码中，我们首先创建了一个Cesium地图视图，并将其绑定到之前定义的"cesiumContainer"元素上。
46.（cesium之家）cesium实现信息提示tooltip
地图之家
11-23 954
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/CesiumUnminified/Cesium.js"></script> <li
Cesium教程系列汇总
weixin_34246551的博客
07-26 538
Cesium系列目录： 演示实例 ExamplesforCesium 最近老实有一些人问我，下载后在本地无法运行，我也不能保证每次都搭个环境看是否可行，或许Cesium升级版本后真有问题呢，索性在github上搭建了一个演示范例，大家有问题先看看github上的范例运行是否正确。 当然，是否能够访问取决于你的运气，可能会被墙，我尽力了，程序员还是多翻FQ吧~。 本地运行请参考本文的范例说...
Cesium学习（2）:Demo部署和运行
xinglin45的博客
07-11 782
确定浏览器支持Cesium,如果地球无法显示，请检查浏览器版本是否为chrome或ie最新版本，以及检查显卡否更新到最新版本驱动。
Cesium+Vue3学习教程系列（20）---圆形、扇形绘制与编辑
最新发布
XTTX110的博客
10-16 517
本教程基于Cesium+Vue3技术栈，新增圆形和扇形标绘功能。圆形通过Cesium的EllipseGraphics实现，使用两点确定圆心和半径；扇形则通过Polygon模拟，三点确定圆心、半径和角度，并借助ENU坐标系转换计算圆弧点坐标。代码封装了CommonCircle和CommonSector类，支持绘制和编辑功能。
Cesium从入门到项目实战总目录（持续更新中）
纸飞机的旅行的博客
02-22 5254
Cesium从入门到项目实战总目录
WebGIS之Cesium三维软件开发-配套资料
09-10
WebGIS技术作为地理信息系统...本书通过丰富的配套资料，为读者构建了一个全面的Cesium学习框架。它不仅有助于快速入门，还能帮助有一定基础的开发者提升技能，为打造功能强大的WebGIS三维应用提供了坚实的技术支持。
cesium 的 API 结构及Viewer的介绍
纸飞机的旅行的博客
03-01 4192
cesium 的 API 结构及Viewer的介绍
Cesium三维GIS开发配套资料全解析
- Cesium工具应用：Cesium提供了一系列工具，帮助开发者快速开发和调试WebGIS应用。这些工具包括地形分析工具、相机控制工具、时间轴控件等。本部分将介绍这些工具的使用方法，以及如何将它们集成到自己的项目中去，...
Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册
热门推荐
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-21 1万+
OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。
无线电探空仪数据分析：创建铯CZML动画教程
habhub是一个开放的无线电探空仪数据分享平台，它汇总来自全球各地的无线电探空仪数据，并向公众提供访问接口。这对于气象研究、教育和相关领域的专业人士而言非常有价值。 3. **铯（Cesium）**： 铯是一个开源的三...
CirHeatmap:分组圆形热图功能-matlab开发
05-29
允许在圆形热图中绘制数据数组的功能。 可选地，可以通过使用单元阵列以及每个单元的每个组的数据阵列来实现空间上分离的组。 允许在文件交换上输入cmocean工具箱颜色图。 例子： 关闭所有清除 %%在线示例 DataX {1} = rand（100，10）; ％创建3组数据集DataX {2} = -rand（100，5）; DataX {3} = rand（100，7）; x = 1：1：100; 标签= []; 对于i = 1：numel（x） 标签{i} = ['Label'，num2str（x（i））]; ％为每列创建标签结尾 组= {“前”，“中”，“后”}； ％为每个组创建标签 [图] = CirHeatmap（DataX'，'GroupLabels'，Groups，'OuterLabels'，Labels，'CircType'，'half'，'InnerSpacerSi
cesium-viewshed:基于Cesium的可视域分析插件，没有修改原始版日期即可使用
03-23
铯视域 基于Cesium的可视域分析 基于cesium的三维量测插件 铯视域 说明 / cesium-viewshed / src / doc 使用 在项目中约会Cesium.js 然后♡cesium-viewshed.js即可 // 初始化 let viewer = new Cesium.Viewer("viewerContainer") // 分析参数 var viewModel = { verticalAngle: 90, horizontalAngle: 120, distance: 10 }; // 添加可视域 var viewshed = new Cesium.ViewShed3D(viewer, { horizontalAngle: Number(viewModel.horizontalAngle),
Cesium 热力图（可直接使用）
资深三维GIS开发
03-24 1万+
先阐释下原理，使用了heatmap.js这个库，这个库生成的热力图是用canvas绘制的，那么在Cesium中，我们只要将canvas转图片，当初材质贴到我们的对象上就行。当我们获取到外接正方体的四个顶点坐标后，通过当前经纬度相对于正方体左上角顶点的坐标位置，来计算热力图canvas中的相对位置，以此来将经纬度与热力图的像素坐标进行匹配。而我们三维中一般遇到的数据是：经纬度+经纬度对应的值 ，那么我们要做地图上的热力图就得做个经纬度到像素坐标的换算。上面的数字是我模拟的各个点位的值。
Cesium安装和版本简介
nmj2008的博客
02-05 4400
Cesium一般是指CesiumJS https://cesium.com/index.html
cesium 添加可视域
qq_34200979的博客
01-20 1211
引入cesium-viewshed.js <!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible...
Elements Table 指定列 Tooltip 文字提示、Tooltip 文字提示换行【野路子版】
皮皮很开心
11-13 957
【野路子版写法】 <el-table-column show-overflow-tooltip header-align="center" align="right" prop="overdue" label="测试1" width="130px" :render-header="renderTipsHeader"/> // table title 浮窗提示 ...
第30节：cesium 可视域分析（含源码+视频）
qq_29384639的博客
06-09 1660
三维可视域分析，用鼠标左键点击起始点，按住不松开一直拖到终点后松开即可，可视域会自动进行绘制。
cesium可视域分析实现方案
A15085336349的博客
10-13 1854
找一个工程文件夹，把下面两个js代码分别保存起来，我的命名是createViewshed.js和keiging.js,直接在组件引入使用。注意：需要安装turf=>yarn add @turf/turf。
cesium学习
03-26
<think>好的，我现在需要帮用户解决关于Cesium学习资料和入门教程的问题。首先，用户明确提到想学习Cesium，所以我要整理现有的引用资料，看看哪些资源可以直接提供。系统指令里要求使用中文，确保LaTeX格式正确，还要生成相关问题，同时引用要放在回答末尾。 首先，检查用户提供的引用内容。引用[1]提到了Cesium入门教程，有两个链接：http://cesium.coinidea.com/getstart.html 和优快云的一篇博客。引用[2]是CesiumJS中文基础教程，有官网和项目地址。引用[3]是Scene的API文档链接，引用[4]是创建场景的示例代码。这些资源看起来都是可靠的，尤其是官网和优快云的教程，适合入门。 接下来，我需要按照用户的要求，结构清晰地回答，分步骤推荐学习资料。可能需要分几个部分，比如官方教程、中文社区、API文档和实践项目。每个部分引用对应的来源，比如引用[1]和[2]适合推荐给用户作为入门资料，引用[3]用于API文档，引用[4]作为代码示例。 然后，生成相关问题。根据Cesium的学习路径，可能的问题包括如何搭建环境、如何处理数据可视化、性能优化方法等。需要确保问题与用户的问题相关，并且能帮助他们进一步深入学习。 同时要注意系统级指令中的要求，比如行内公式用$...$，独立公式用$$...$$，但在这个问题中可能用不上数学公式，所以可以忽略。但需要确保回答中的引用标识正确，比如在提到每个资源时加上对应的[^1]、[^2]等。 最后，要检查回答是否符合用户可见层的结构，帮助用户逐步解决问题，确保信息真实可靠。可能还需要提醒用户访问官网获取最新文档，因为技术更新快，官网资料最准确。 现在整理回答的结构： 1. 官方入门教程（引用[1]和[2]的链接） 2. 中文社区与教程（引用[1]的优快云博客和引用[2]的中文官网） 3. API文档（引用[3]的链接） 4. 实践项目（引用[4]的代码示例，并建议查看项目地址） 相关问题部分需要生成三个左右，比如环境搭建、数据可视化、性能优化等方向的问题。 检查是否有遗漏，比如是否还有其他资源可以推荐？根据提供的引用，可能已经足够。确保每个推荐都有对应的引用标记，并且链接正确。另外，用户可能需要知道如何开始实际操作，所以实践部分和示例代码很重要，引用[4]正好提供了创建场景的代码，可以作为起点。 最后，语言要自然流畅，避免使用Markdown格式，但用户的问题中示例用了代码块，所以可能需要保留代码块，但根据系统指令，用户可见层应该结构清晰，所以正确使用代码块展示示例是合适的。</think>[用户可见层] # Cesium学习资料与入门教程推荐 ## 1. 官方入门教程 - **CesiumJS中文基础教程**：包含场景构建、实体创建等核心功能的教学，提供代码实例与效果演示 ``` // 创建基础场景示例（引用自官方教程） var viewer = new Cesium.Viewer('cesiumContainer'); ``` - **英文官方文档**：访问[Cesium官方API文档](https://cesium.com/learn/)获取最新接口说明[^3] ## 2. 中文社区资源 - **优快云系列教程**：包含《Cesium入门教程》等20+篇实践指南，涵盖地图加载、3D模型渲染等场景 - **中文网镜像站点**：提供本地化部署指南和中文API翻译，适合英语基础薄弱的开发者 ## 3. 开发环境搭建 - 推荐使用官方CDN快速初始化： ```html <script src="https://cesium.com/downloads/cesiumjs/releases/1.XX/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.XX/Build/Cesium/Widgets/widgets.css"> ``` 具体版本号可参照[版本更新日志](https://cesium.com/blog/categories/releases/)[^3] ## 4. 实践项目推荐 - **卫星轨道可视化**：使用`CzmlDataSource`实现动态航天器轨迹 - **三维地形分析**：结合`TerrainProvider`进行高程测量 - **实时数据可视化**：通过`GeoJsonDataSource`加载气象数据[^4]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值