cesium示例教程100+目录

Myth丶恋晨 2024-04-07 14:05 73阅读 0赞

![在这里插入图片描述][8e6fb03228114687897d406ccc58f3ed.png_pic_center]

cesium示例教程100+旨在为开发者提供简单快捷的**代码示例**，**复制即可用**。在每一个示例中，解释相应的API知识点，做到**简易实现，轻松学会**。

#### 文章目录 ####

*  目录
 *   *  基础设置及界面配置
     *  设置材质material
     *  显示图形
     *  绘制图形
     *  加载文件数据
     *  加载各种地图
     *  综合应用
     *  鼠标键盘交互

## 目录 ##

### 基础设置及界面配置 ###

1.  [vue+cesium： 从0到1部署开发运行环境 ][vue_cesium_ _0_1_]
2.  [vue+cesium： 设置skybox透明并添加背景图 ][vue_cesium_ _skybox_]
3.  [vue+cesium： 所有面板上默认控件Widgets的显示与隐藏 ][vue_cesium_ _Widgets_]
4.  [vue+cesium： 增加去除版权，个性化版权logo ][vue_cesium_ _logo]
5.  [vue+cesium： 实现鹰眼缩略图 ][vue_cesium_ _]
6.  [vue+cesium： 显示比例尺 ][vue_cesium_ _ 1]
7.  [vue+cesium： 修改默认地图源，动态指定地图 ][vue_cesium_ _ 2]
8.  [vue+cesium： 自定义切换2D，3D，哥伦布模式 ][vue_cesium_ _2D_3D_]
9.  [vue+cesium： 七种方法设置颜色 ][vue_cesium_ _ 3]

### 设置材质material ###

1.  [vue+cesium： 设置颜色材质 ColorMaterialProperty ][vue_cesium_ _ ColorMaterialProperty]
2.  [vue+cesium： 设置图片材质 ImageMaterialProperty ][vue_cesium_ _ ImageMaterialProperty]
3.  [vue+cesium： 设置条纹材质 StripeMaterialProperty][vue_cesium_ _ StripeMaterialProperty]
4.  [vue+cesium： 设置网格材质 GridMaterialProperty ][vue_cesium_ _ GridMaterialProperty]
5.  [vue+cesium： 设置棋盘材质 CheckerboardMaterialProperty ][vue_cesium_ _ CheckerboardMaterialProperty]
6.  [vue+cesium： 设置泛光折线材质 PolylineGlowMaterialProperty ][vue_cesium_ _ PolylineGlowMaterialProperty]
7.  [vue+cesium： 设置带箭头折线材质 PolylineArrowMaterialProperty ][vue_cesium_ _ PolylineArrowMaterialProperty]
8.  [vue+cesium： 设置带边界折线材质 PolylineOutlineMaterialProperty ][vue_cesium_ _ PolylineOutlineMaterialProperty]
9.  [vue+cesium： 设置点划线材质 PolylineDashMaterialProperty ][vue_cesium_ _ PolylineDashMaterialProperty]

### 显示图形 ###

1.  [vue+cesium： 显示点 point ][vue_cesium_ _ point]
2.  [vue+cesium： 显示折线 Polyline ][vue_cesium_ _ Polyline]
3.  [vue+cesium： 显示圆形 circle ][vue_cesium_ _ circle]
4.  [vue+cesium： 显示多边形 Polygon][vue_cesium_ _ Polygon]
5.  [vue+cesium： 显示矩形 rectangle ][vue_cesium_ _ rectangle]
6.  [vue+cesium： 显示椭圆形 ellipse ][vue_cesium_ _ ellipse]
7.  [vue+cesium： 显示廊体 corridor ][vue_cesium_ _ corridor]
8.  [vue+cesium： 显示箱体 box ][vue_cesium_ _ box]
9.  [vue+cesium： 显示圆柱体 cylinder ][vue_cesium_ _ cylinder]
10. [vue+cesium： 显示圆锥体 cone ][vue_cesium_ _ cylinder]
11. [vue+cesium： 显示椭球体 ellipsoid ][vue_cesium_ _ cylinder]
12. [vue+cesium： 显示球体 sphere ][vue_cesium_ _ cylinder]
13. [vue+cesium： 显示墙 wall ][vue_cesium_ _ cylinder]
14. [vue+cesium： 显示闪烁的点 ][vue_cesium_ _ 4]
15. [vue+cesium： 显示闪烁的圆锥体 ][vue_cesium_ _ 5]
16. [vue+cesium： 显示闪烁的广告牌图片 ][vue_cesium_ _ 6]

### 绘制图形 ###

1.  [vue+cesium： 绘制圆形 ][vue_cesium_ _ 7]
2.  [vue+cesium： 绘制线段 ][vue_cesium_ _ 8]
3.  [vue+cesium： 绘制矩形 ][vue_cesium_ _ 9]
4.  [vue+cesium： 绘制点 ][vue_cesium_ _ 10]

### 加载文件数据 ###

1.  [vue+cesium： 加载KML文件，显示图形 ][vue_cesium_ _KML_]
2.  [vue+cesium： 加载GPX文件，显示图形 ][vue_cesium_ _GPX_]
3.  [vue+cesium： 加载GPX文件，显示运动动画 ][vue_cesium_ _GPX_ 1]
4.  [vue+cesium： 加载topojson文件，显示图形 ][vue_cesium_ _topojson_]
5.  [vue+cesium： 加载KMZ文件，显示图形 ][vue_cesium_ _KMZ_]
6.  [vue+cesium： 加载czml文件，显示图形 ][vue_cesium_ _czml_]
7.  [vue+cesium： 加载geojson文件，显示图形 ][vue_cesium_ _geojson_]

### 加载各种地图 ###

1.  [vue+cesium： 加载单个图片形成底图 --SingleTileImageryProvider ][vue_cesium_ _ --SingleTileImageryProvider]
2.  [vue+cesium： 加载OpenStreetMap地图 --OpenStreetMapImageryProvider ][vue_cesium_ _OpenStreetMap_ --OpenStreetMapImageryProvider]
3.  [vue+cesium： 加载高德地图(多种形式) --UrlTemplateImageryProvider ][vue_cesium_ _ --UrlTemplateImageryProvider]
4.  [vue+cesium： 加载Bing地图（多种形式）–BingMapsImageryProvider ][vue_cesium_ _Bing_BingMapsImageryProvider]
5.  [vue+cesium： 加载Blue Marble地图 --IonImageryProvider ][vue_cesium_ _Blue Marble_ --IonImageryProvider]
6.  [vue+cesium： 加载Eris地图（多种形式）–ArcGisMapServerImageryProvider ][vue_cesium_ _Eris_ArcGisMapServerImageryProvider]
7.  [vue+cesium： 加载Sentinel-2地图 --IonImageryProvider ][vue_cesium_ _Sentinel-2_ --IonImageryProvider]
8.  [vue+cesium： 加载Natural Earth II地图 --IonImageryProvider ][vue_cesium_ _Natural Earth II_ --IonImageryProvider]
9.  [vue+cesium： 加载World Terrain地形图 ][vue_cesium_ _World Terrain_]
10. [vue+cesium： 加载mapbox卫星地图、mapbox地形地图 --MapboxImageryProvider ][vue_cesium_ _mapbox_mapbox_ --MapboxImageryProvider]
11. [vue+cesium： 加载mapbox的多种Style形式地图–MapboxStyleImageryProvider ][vue_cesium_ _mapbox_Style_MapboxStyleImageryProvider]
12. [vue+cesium： 加载WMS规范的影像服务–WebMapServiceImageryProvider ][vue_cesium_ _WMS_WebMapServiceImageryProvider]
13. [vue+cesium： 网格切片展示X、Y、Level 坐标–TileCoordinatesImageryProvider ][vue_cesium_ _X_Y_Level _TileCoordinatesImageryProvider]
14. [vue+cesium： 加载网格地图–GridImageryProvider ][vue_cesium_ _GridImageryProvider]
15. [vue+cesium： 两种方法加载天地影像图 ][vue_cesium_ _ 11]

### 综合应用 ###

1.  [vue+cesium： 实现地球自转效果 ][vue_cesium_ _ 12]

### 鼠标键盘交互 ###

1.  [vue+cesium： 更改多种鼠标形状样式 ][vue_cesium_ _ 13]
2.  [vue+cesium： 移动鼠标显示球体的经度、纬度和视角高度 ][vue_cesium_ _ 14]
3.  [vue+cesium： 鼠标不同事件（移动、左点击、左双击、滚轮、LEFT\_DOWN，LEFT\_UP） ][vue_cesium_ _LEFT_DOWN_LEFT_UP_]

[8e6fb03228114687897d406ccc58f3ed.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0a68da44e8ac43fc9644b0eb4e7cfca4.png
[vue_cesium_ _0_1_]: https://dajianshi.blog.csdn.net/article/details/126746831
[vue_cesium_ _skybox_]: https://dajianshi.blog.csdn.net/article/details/129218432
[vue_cesium_ _Widgets_]: https://dajianshi.blog.csdn.net/article/details/129632504
[vue_cesium_ _logo]: https://dajianshi.blog.csdn.net/article/details/129625619
[vue_cesium_ _]: https://dajianshi.blog.csdn.net/article/details/129671015
[vue_cesium_ _ 1]: https://dajianshi.blog.csdn.net/article/details/129633132
[vue_cesium_ _ 2]: https://dajianshi.blog.csdn.net/article/details/129752466
[vue_cesium_ _2D_3D_]: https://dajianshi.blog.csdn.net/article/details/129753029
[vue_cesium_ _ 3]: https://dajianshi.blog.csdn.net/article/details/130346187
[vue_cesium_ _ ColorMaterialProperty]: https://dajianshi.blog.csdn.net/article/details/130740125
[vue_cesium_ _ ImageMaterialProperty]: https://dajianshi.blog.csdn.net/article/details/130740198
[vue_cesium_ _ StripeMaterialProperty]: https://dajianshi.blog.csdn.net/article/details/130740257
[vue_cesium_ _ GridMaterialProperty]: https://dajianshi.blog.csdn.net/article/details/130740314
[vue_cesium_ _ CheckerboardMaterialProperty]: https://dajianshi.blog.csdn.net/article/details/130764939
[vue_cesium_ _ PolylineGlowMaterialProperty]: https://dajianshi.blog.csdn.net/article/details/130764970
[vue_cesium_ _ PolylineArrowMaterialProperty]: https://dajianshi.blog.csdn.net/article/details/130765815
[vue_cesium_ _ PolylineOutlineMaterialProperty]: https://dajianshi.blog.csdn.net/article/details/130764995
[vue_cesium_ _ PolylineDashMaterialProperty]: https://dajianshi.blog.csdn.net/article/details/130765699
[vue_cesium_ _ point]: https://dajianshi.blog.csdn.net/article/details/129254414
[vue_cesium_ _ Polyline]: https://dajianshi.blog.csdn.net/article/details/129304758
[vue_cesium_ _ circle]: https://dajianshi.blog.csdn.net/article/details/129254481
[vue_cesium_ _ Polygon]: https://dajianshi.blog.csdn.net/article/details/129304828
[vue_cesium_ _ rectangle]: https://dajianshi.blog.csdn.net/article/details/129304633
[vue_cesium_ _ ellipse]: https://dajianshi.blog.csdn.net/article/details/129254541
[vue_cesium_ _ corridor]: https://dajianshi.blog.csdn.net/article/details/129254574
[vue_cesium_ _ box]: https://dajianshi.blog.csdn.net/article/details/129254450
[vue_cesium_ _ cylinder]: https://dajianshi.blog.csdn.net/article/details/129059361
[vue_cesium_ _ 4]: https://dajianshi.blog.csdn.net/article/details/129218796
[vue_cesium_ _ 5]: https://dajianshi.blog.csdn.net/article/details/129236321
[vue_cesium_ _ 6]: https://dajianshi.blog.csdn.net/article/details/129236109
[vue_cesium_ _ 7]: https://dajianshi.blog.csdn.net/article/details/129238643
[vue_cesium_ _ 8]: https://dajianshi.blog.csdn.net/article/details/129238583
[vue_cesium_ _ 9]: https://dajianshi.blog.csdn.net/article/details/129238682
[vue_cesium_ _ 10]: https://dajianshi.blog.csdn.net/article/details/129237236
[vue_cesium_ _KML_]: https://dajianshi.blog.csdn.net/article/details/129839071
[vue_cesium_ _GPX_]: https://dajianshi.blog.csdn.net/article/details/129839516
[vue_cesium_ _GPX_ 1]: https://dajianshi.blog.csdn.net/article/details/129840345
[vue_cesium_ _topojson_]: https://dajianshi.blog.csdn.net/article/details/129837954
[vue_cesium_ _KMZ_]: https://dajianshi.blog.csdn.net/article/details/130018250
[vue_cesium_ _czml_]: https://dajianshi.blog.csdn.net/article/details/130038751
[vue_cesium_ _geojson_]: https://dajianshi.blog.csdn.net/article/details/130018088
[vue_cesium_ _ --SingleTileImageryProvider]: https://dajianshi.blog.csdn.net/article/details/129952504
[vue_cesium_ _OpenStreetMap_ --OpenStreetMapImageryProvider]: https://dajianshi.blog.csdn.net/article/details/129952546
[vue_cesium_ _ --UrlTemplateImageryProvider]: https://dajianshi.blog.csdn.net/article/details/129952579
[vue_cesium_ _Bing_BingMapsImageryProvider]: https://dajianshi.blog.csdn.net/article/details/129944519
[vue_cesium_ _Blue Marble_ --IonImageryProvider]: https://dajianshi.blog.csdn.net/article/details/129944350
[vue_cesium_ _Eris_ArcGisMapServerImageryProvider]: https://dajianshi.blog.csdn.net/article/details/129944425
[vue_cesium_ _Sentinel-2_ --IonImageryProvider]: https://dajianshi.blog.csdn.net/article/details/129923957
[vue_cesium_ _Natural Earth II_ --IonImageryProvider]: https://dajianshi.blog.csdn.net/article/details/129924384
[vue_cesium_ _World Terrain_]: https://dajianshi.blog.csdn.net/article/details/129927134
[vue_cesium_ _mapbox_mapbox_ --MapboxImageryProvider]: https://dajianshi.blog.csdn.net/article/details/130221513
[vue_cesium_ _mapbox_Style_MapboxStyleImageryProvider]: https://dajianshi.blog.csdn.net/article/details/130222202
[vue_cesium_ _WMS_WebMapServiceImageryProvider]: https://dajianshi.blog.csdn.net/article/details/130343313
[vue_cesium_ _X_Y_Level _TileCoordinatesImageryProvider]: https://dajianshi.blog.csdn.net/article/details/130343109
[vue_cesium_ _GridImageryProvider]: https://dajianshi.blog.csdn.net/article/details/130343045
[vue_cesium_ _ 11]: https://dajianshi.blog.csdn.net/article/details/130344551
[vue_cesium_ _ 12]: https://dajianshi.blog.csdn.net/article/details/129714282
[vue_cesium_ _ 13]: https://dajianshi.blog.csdn.net/article/details/129633696
[vue_cesium_ _ 14]: https://dajianshi.blog.csdn.net/article/details/129671701
[vue_cesium_ _LEFT_DOWN_LEFT_UP_]: https://dajianshi.blog.csdn.net/article/details/129670287