超级会员免费看
该教程提供了Vue+Cesium的详细示例，涵盖基础设置、材质、图形显示、文件数据加载、地图加载和交互等多个方面，帮助开发者快速上手3D地球应用开发。
cesium综合教程200+旨在为开发者提供简单快捷的代码示例，复制即可用。在每一个示例中，解释相应的API知识点，做到简易实现，轻松学会。
文章目录
一、应用示例
（1）基础设置及界面配置
- vue+cesium： 从0到1部署开发运行环境
- vue+cesium： 设置skybox透明并添加背景图
- vue+cesium： 设置球体内部为空透明
- vue+cesium： 在球体上设置一个透明窗口，查看球体内部
- vue+cesium：设置球体水部分颜色为黄色
- vue+cesium： 设置两个点，点击实体，在infobox上显示信息
- vue+cesium： vue+cesium 获取相机姿态信息（航向、俯仰、滚转）
- vue+cesium： 所有面板上默认控件Widgets的显示与隐藏
- vue+cesium： 增加去除版权，个性化版权logo
- vue+cesium： 实现鹰眼缩略图
- vue+cesium： 显示比例尺
- vue+cesium： 修改默认地图源，动态指定地图
- vue+cesium： 自定义切换2D，3D，哥伦布模式
- vue+cesium： 七种方法设置颜色
- vue+cesium： 同步两个窗口，3D和2D联屏
- vue+cesium： 设置镜头光晕效果
- vue+cesium： 列出可视化三个坐标轴（X,Y,Z）
（2）设置材质material
- vue+cesium： 设置颜色材质 ColorMaterialProperty
- vue+cesium： 设置图片材质 ImageMaterialProperty
- vue+cesium： 设置条纹材质 StripeMaterialProperty
- vue+cesium： 设置网格材质 GridMaterialProperty
- vue+cesium： 设置棋盘材质 CheckerboardMaterialProperty
- vue+cesium： 设置泛光折线材质 PolylineGlowMaterialProperty
- vue+cesium： 设置带箭头折线材质 PolylineArrowMaterialProperty
- vue+cesium： 设置带边界折线材质 PolylineOutlineMaterialProperty
- vue+cesium： 设置点划线材质 PolylineDashMaterialProperty
- vue+cesium： 利用canvas设置线性渐变色材质
- vue+cesium： 绘制铁路线（方法1: canvas贴图）
（3）利用shader、后处理实现的效果
- vue+cesium： 实现下雨效果
- vue+cesium： 实现下雪效果
- vue+cesium： 实现大雾效果
- vue+cesium： 使用后处理来绘制轮廓线
- vue+cesium： 加载json数据，使用shader绘制省边界线
（4）显示Entity图形
- vue+cesium： 显示文字 label
- vue+cesium： 显示点 point
- vue+cesium： 显示折线 Polyline
- vue+cesium： 显示圆形 circle
- vue+cesium： 显示多边形 Polygon
- vue+cesium： 显示矩形 rectangle
- vue+cesium： 显示椭圆形 ellipse
- vue+cesium： 显示廊体 corridor
- vue+cesium： 显示箱体 box
- vue+cesium： 显示圆柱体 cylinder
- vue+cesium： 显示圆锥体 cone
- vue+cesium： 显示椭球体 ellipsoid
- vue+cesium： 显示球体 sphere
- vue+cesium： 显示墙 wall
- vue+cesium： 显示闪烁的点
- vue+cesium： 显示闪烁的圆锥体
- vue+cesium： 显示闪烁的广告牌图片
（5）显示Primitive图形
- vue+cesium： 利用PointPrimitiveCollection绘制4个不同颜色不同位置的点
- vue+cesium： 利用billboardCollection加载10万个广告牌图片
- vue+cesium： 利用Primitive绘制2000+不同颜色矩形
- vue+cesium： 动态的水面3D特效
- vue+cesium： 动态的墙面灯光3D特效
- vue+cesium： 动态雷达扫描特效
- vue+cesium： 卫星雷达波广播特效
- vue+cesium： 管线流动特效
- vue+cesium： 使用Primitive循环生成10个矩形，条带材质
- vue+cesium： 上升的垂直鱼尾线
- vue+cesium： 实现地图遮罩挖洞效果
（6）鼠标拖动绘制图形
（7）加载、上传、导出2D文件数据
- vue+cesium： 加载KML文件，显示图形
- vue+cesium： 加载GPX文件，显示图形
- vue+cesium： 加载GPX文件，显示运动动画
- vue+cesium： 加载topojson文件，显示图形
- vue+cesium： 加载KMZ文件，显示图形
- vue+cesium： 加载czml文件，显示小汽车运行状态
- vue+cesium： 加载卫星数据czml数据，动态移动
- vue+cesium： 加载geojson文件，显示图形
- vue+cesium： 加载区域geojson数据，边界线呈现凸压纵深效果
- vue+cesium： 加载本地shp文件，显示图形
- vue+cesium： 加载含shp的zip文件，显示图形
- vue+cesium： 上传含shp的zip文件，显示图形
- vue+cesium： 导出场景图片
（8）加载3D瓦片及模型
- vue+cesium： 加载的 OSM 建筑物
- vue+cesium： 加载500架飞机，随机位置、随机角度
- vue+cesium： 加载glb文件，随机位置加载2000架飞机
- vue+cesium： 飞机根据经纬度高度数据，沿着轨迹飞行
- vue+cesium： 加载glb文件，用于czml中
- vue+cesium： 加载gltf文件
- vue+cesium： 使用Cesium3DTileset加载3D瓦片数据
- vue+cesium： 点击获取3D瓦片实体的属性信息
- vue+cesium： 用Cesium3DTileStyle，条件个性化3D瓦片样式
- vue+cesium： 加载gltf文件
（9）加载各种地图
- vue+cesium： 加载单个图片形成底图 --SingleTileImageryProvider
- vue+cesium： 加载OpenStreetMap地图 --OpenStreetMapImageryProvider
- vue+cesium： 加载高德地图(多种形式) --UrlTemplateImageryProvider
- vue+cesium： 加载Bing地图（多种形式）–BingMapsImageryProvider
- vue+cesium： 加载Blue Marble地图 --IonImageryProvider
- vue+cesium： 加载Eris地图（多种形式）–ArcGisMapServerImageryProvider
- vue+cesium： 加载Sentinel-2地图 --IonImageryProvider
- vue+cesium： 加载Natural Earth II地图 --IonImageryProvider
- vue+cesium： 加载World Terrain地形图
- vue+cesium： 加载mapbox卫星地图、mapbox地形地图 --MapboxImageryProvider
- vue+cesium： 加载mapbox的多种Style形式地图–MapboxStyleImageryProvider
- vue+cesium： 加载WMS规范的影像服务–WebMapServiceImageryProvider
- vue+cesium： 网格切片展示X、Y、Level 坐标–TileCoordinatesImageryProvider
- vue+cesium： 加载网格地图–GridImageryProvider
- vue+cesium： 两种方法加载天地影像图
- vue+cesium： 加载腾讯地图
（10）鼠标键盘交互
- vue+cesium： 更改多种鼠标形状样式
- vue+cesium： 鼠标点击显示屏幕位置、笛卡尔坐标、地理坐标
- vue+cesium： 点击广告牌,更换图片
- vue+cesium： 移动鼠标显示球体的经度、纬度和视角高度
- vue+cesium： 鼠标不同事件（移动、左点击、左双击、滚轮、LEFT_DOWN，LEFT_UP）
（11）camera相机、动画操作
- vue+cesium： 围绕一个固定点自动左右旋转
- vue+cesium： flyto一个具体的实体位置
- vue+cesium： flyto一个具体的点位置
- vue+cesium： 利用setView 动画定位到特定点和特定区域
- vue+cesium： lookAtTransform围绕一个固定点上下左右旋转查看
- vue+cesium： 使用CallbackProperty动态更改位置
- vue+cesium： 使用CallbackProperty动态更改实体颜色
- vue+cesium： 加载czml文件，显示小汽车运行状态
- vue+cesium： 飞机根据经纬度高度数据，沿着轨迹飞行
- vue+cesium： 实现地球自转效果
- vue+cesium： 实现动态图片旋转
（12）粒子系统
二、理论学习
- cesium小知识：Geocoder 详解示例
- cesium小知识：SelectionIndicator 详解示例
- cesium小知识：ScreenSpaceEventHandler 详解示例
- cesium小知识：PostProcessStage 和 PostProcessStageLibrary详解对比
- cesium小知识：常用的 material 类型
- cesium小知识：使用 EntityCollection的方法
- cesium小知识：常见的 entity 列表
- cesium小知识：viewer.trackedEntity详解，示例代码
- cesium小知识：Primitives 核心知识点总结
- cesium小知识：Primitive与webgl互动示例
- cesium小知识：Primitive和entity详解，两者对比
- cesium小知识：pointPrimitive collection 详解
- cesium小知识：clock 详解示例
- cesium小知识：Camera的关键知识点
- cesium小知识：常见的四种坐标系，互相转换方法
- cesium小知识：Cesium Story 的简介与设置
- cesium小知识：常见的20多种property详解
- cesium小知识：3D tiles 概述、特点、示例
- cesium小知识：PostProcess（后处理）详解及示例
- cesium小知识：粒子系统的参数详解
- cesium小知识：粒子系统的应用场景（10种示例及代码）
- cesium小知识：6种Emitter简介、参数及使用示例
- cesium小知识：pointPrimitive collection 详解
- cesium小知识：knockout 所有属性和方法
- cesium小知识：Cesium.Ray 知识详解，示例代码
扫一扫
497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
