cesium综合教程200+
文章平均质量分 87
专业的航天航海交通领域高级前端开发工程师,美国某大学计算机科学研究生分享Vue+cesium的开发知识。 不彰呈华丽的辞藻,只提供简介清晰的示例和源代码。
余额抵扣
助学金抵扣
还需支付
¥129.90
¥299.90
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
还是大剑师兰特
曾是美国普渡大学计算机研究生,现为GIS领域高级前端开发工程师。深耕openlayers、leaflet、cesium、mapbox、echarts、threejs、webgl、canvas、svg等技术,目前正研究GIS大模型在低空经济领域的应用,拥有两项GIS方面的专利。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
cesium 综合教程200+【目录】(已包含178篇文章)
cesium示例教程100+旨在为开发者提供简单快捷的,。在每一个示例中,解释相应的API知识点,做到。目录中有链接的为已有文章,没链接的为目标文章,不断更新中…原创 2022-09-07 15:23:19 · 7812 阅读 · 81 评论
-
cesium加载geotiff的 四种方法
本文介绍了在Cesium中加载GeoTIFF数据的两种主要方法。首先解析了核心前置知识,包括坐标系匹配、数据类型区分和性能优化。方法1详细演示了如何将RGB影像GeoTIFF转换为Cesium影像图层,包含从数据解析到Canvas转换的完整代码流程。方法2则针对高程数据(DEM)处理,展示了前端直接解析构建地形网格的方案。文章提供了完整的代码示例和关键实现要点,适用于卫星影像、专题图和数字高程模型等多种GeoTIFF数据类型在三维场景中的可视化需求。原创 2025-12-17 18:23:49 · 111 阅读 · 0 评论 -
cesium 通过class的方式来扩展JS插件
本文介绍了在Cesium中通过ES6 Class扩展插件的方法,重点演示了可拖拽标记点插件的实现。该插件基于Cesium的Entity类封装,提供创建标记、拖拽修改位置和事件绑定等功能,采用模块化设计以便复用。核心代码展示了如何初始化标记点、实现拖拽交互逻辑,并提供了updatePosition和destroy等接口方法。通过继承Cesium核心类并封装自定义逻辑,开发者可以轻松扩展Cesium功能,同时保持与Cesium生态系统的兼容性。最后给出了插件的使用示例,说明如何导入和集成到Cesium项目中。原创 2025-12-09 11:18:44 · 700 阅读 · 1 评论 -
cesium创建军事态势图的基本思路
摘要:本文介绍了如何利用CesiumJS创建军事态势图,包括核心要素、技术实现、数据组织和代码示例。重点展示了军事单位加载(图标/3D模型)、威胁范围绘制、动态轨迹推演和作战区域可视化等关键技术,并提供了性能优化和安全部署建议。文章还推荐了NATO军事符号标准和开源工具mil-sym-js,为构建3D战场态势系统提供了完整解决方案。原创 2025-12-05 16:27:15 · 248 阅读 · 15 评论 -
138:vue+cesium: 在地图上显示文字(竖向显示)
本文介绍了在Vue+Cesium中实现竖向文字显示的方法。由于Cesium原生不支持换行符,作者通过将每个字符作为独立Label添加,并利用pixelOffset控制垂直偏移来实现竖向排列效果。文章包含完整的100行示例代码,详细展示了如何设置文字位置、行高、字体样式等参数。该方案适用于需要在三维地图中展示竖向文本的场景,如标注、标识等。代码可直接复制到Vue项目中运行,适合GIS开发人员参考使用。原创 2025-09-19 17:09:37 · 442 阅读 · 7 评论 -
137:vue+cesium 上传gltf文件,使用primitives方式在地图上显示3D物体
本文介绍了在Vue+Cesium项目中上传gltf格式3D模型并展示的方法。作者大剑师兰特(优快云知名博主,GIS领域高级前端工程师)通过示例代码演示了两种加载方式:Entity.model和Scene.primitives.add。主要功能包括:文件上传验证、模型加载显示、清除模型以及视角自动调整。代码共123行,采用Cesium.Model.fromGltf方法实现模型加载,支持.glb和.gltf格式,包含模型缩放、阴影等参数设置。示例还提供了基础环境配置指引和API参考文档链接,适合GIS开发人员原创 2025-07-05 07:45:00 · 182 阅读 · 0 评论 -
136:vue+cesium 上传glb文件,使用entity方法在地图上显示3D物体
本文介绍了如何在Vue+Cesium项目中实现GLB格式3D模型上传与显示功能。作者大剑师兰特(GIS领域高级工程师)提供了两种加载方式:Entity.model和ModelPrimitive。示例代码包含文件上传处理、模型加载定位(默认北京坐标)及清除功能,通过URL.createObjectURL实现本地文件加载。项目配置需设置Cesium Ion访问令牌,运行环境为Vue框架。文章附优快云专栏链接、效果演示GIF及106行完整源码,适合GIS开发者参考学习3D模型可视化实现。原创 2025-07-04 07:45:00 · 1058 阅读 · 27 评论 -
135:vue+cesium 设置起点终点,规划行车路线
本文介绍了如何在Vue+Cesium中实现行车路线规划功能。通过使用OSRM路线服务API,开发者可以输入起点和终点坐标,获取并可视化行车路线。示例代码展示了从获取路由数据到在三维地图上绘制路线的完整流程,包括初始化Cesium场景、调用API接口、加载GeoJSON数据等关键步骤。该技术适用于GIS应用开发,需要Cesium Ion访问令牌支持。文章作者是优快云知名博主"大剑师兰特",具有GIS领域丰富开发经验。原创 2025-06-24 08:00:00 · 550 阅读 · 18 评论 -
134:vue+cesium 加载geojson数据,非URL地址
本示例介绍如何在vue+cesium中加载geojson数据,非URL地址。跟普通的加载geojson url数据不一样,这里直接加载的是geojson数据,通过GeoJsonDataSource.load出来的数据是promise形式,需要进一步做then处理。详细方法见下面的源代码原创 2025-06-24 00:00:00 · 265 阅读 · 8 评论 -
cesium 面试题 100+
本文系统梳理了Cesium三维地理可视化框架的核心知识与技术要点,内容分为五大模块: 基础与核心功能:涵盖框架原理、数据加载、实体渲染、坐标系转换等基础操作; 高级特性:深入解析动态数据更新、着色器编程、性能优化等进阶技术; GIS集成:探讨与ArcGIS、GeoServer等系统的数据交互及空间分析功能; Cesium ion平台:介绍云端数据处理、3D Tiles生成及跨平台资源管理; 扩展开发:包含插件编写、框架整合及行业解决方案。适用于开发者技术进阶与面试准备,提供完整的Cesium技术图谱。原创 2025-06-20 11:38:48 · 741 阅读 · 20 评论 -
133:vue+cesium 实现水波纹效果
本示例介绍如何在vue+cesium中实现水波纹效果。水波纹效果通常是指在视觉设计、计算机图形学或者用户界面交互中模拟水面上产生的波动效果。这种效果可以用来增强用户的视觉体验。原创 2025-06-06 17:09:46 · 984 阅读 · 53 评论 -
132:vue+cesium 加载风电风车,可控制风叶转速
本示例介绍如何在vue+cesium中加载风电风车,可控制风叶转速。GLTF,即图形语言传输格式(GL Transmission Format),是由Khronos Group开发的一种针对3D场景和模型的文件格式。它的设计目标是作为一种高效、可扩展且与运行时环境兼容的格式来传输和加载3D内容原创 2025-06-06 00:00:00 · 398 阅读 · 39 评论 -
131:vue+cesium 加载gif图片,显示动画
本示例介绍如何在vue+cesium中加载gif图片,显示动画。libgif-js 是一个轻量级、易于使用的 JavaScript 库,适用于希望在网页中对 GIF 图像进行 更精细控制(如播放、暂停、帧解析)的开发者。如果你正在寻找一种在网页中动态管理 GIF 的方式,它是一个不错的选择。如需更高级的功能(如裁剪、合成、导出 GIF),可以考虑结合使用 gif.js、gifuct-js 或 FFmpeg.wasm 等工具。原创 2025-06-05 00:00:00 · 406 阅读 · 2 评论 -
130:vue+cesium 使用gui控制偏航角 俯仰角 翻滚角
本文介绍了在Vue+Cesium中通过GUI控制三维姿态参数的方法。作者大剑师兰特(GIS高级工程师)展示了如何使用dat.gui库实时调节偏航角(Yaw)、俯仰角(Pitch)和翻滚角(Roll),这些参数分别控制物体在水平、上下和侧向的旋转。示例包含140行代码,通过Cesium.Air模型直观展示姿态变化,并提供了参数范围说明(偏航角0-360°,俯仰角-90°~90°,翻滚角-180°~180°)。实现步骤包括初始化Cesium场景、添加GUI控制器和更新模型姿态,适用于航空、机器人等三维可视化应用原创 2025-06-04 13:51:23 · 592 阅读 · 27 评论 -
129:vue+cesium 加载含shp的zip文件,显示图形
本示例介绍如何在vue+cesium中加载含shp的zip文件,显示图形。SHAPEFILE(.shp)是一种广泛使用的矢量数据格式,主要用于存储地理信息系统(GIS)中的点、线或多边形数据。SHAPEFILE由Esri公司开发,现已成为GIS领域的开放标准之一。原创 2025-05-22 17:34:41 · 466 阅读 · 31 评论 -
128:vue+cesium 上传含shp的zip文件,显示图形
本示例介绍如何在vue+cesium中上传含shp的zip文件,显示图形。SHAPEFILE(.shp)是一种广泛使用的矢量数据格式,主要用于存储地理信息系统(GIS)中的点、线或多边形数据。SHAPEFILE由Esri公司开发,现已成为GIS领域的开放标准之一。原创 2025-05-22 17:09:44 · 540 阅读 · 36 评论 -
127:vue+cesium 加载本地shp文件,显示图形
本示例介绍如何在vue+cesium中加载本地shp文件,显示图形。SHAPEFILE(.shp)是一种广泛使用的矢量数据格式,主要用于存储地理信息系统(GIS)中的点、线或多边形数据。SHAPEFILE由Esri公司开发,现已成为GIS领域的开放标准之一。原创 2025-05-19 20:55:31 · 617 阅读 · 29 评论 -
126:vue+cesium 列出可视化三个坐标轴(X,Y,Z)
本示例介绍如何在vue+cesium中列出可视化三个坐标轴(X,Y,Z)。Cesium.DebugModelMatrixPrimitive 是 CesiumJS 库中的一个类,主要用于可视化调试目的。它允许开发者以图形化的方式显示一个变换矩阵(model matrix),这对于理解或调试场景中实体的位置、方向和缩放等属性非常有用。原创 2025-05-19 11:16:33 · 489 阅读 · 27 评论 -
125:vue+cesium 利用billboardCollection加载10万个广告牌图片
本示例介绍如何在vue+cesium中利用billboardCollection加载10万个广告牌图片。Cesium.BillboardCollection 是 CesiumJS 中用于高效管理和渲染大量广告牌(Billboard)的类。广告牌是始终面向相机的二维图像或纹理,常用于标记地理位置、显示图标或创建交互式元素。原创 2025-05-15 00:00:00 · 541 阅读 · 41 评论 -
Cesium中文API全解 200+【目录】
本目录是Cesium中文API详解示例的目录列表,如果您专注于由于本目录初建立,暂时用cesium综合教程200+目录做占位使用,本专栏内容陆续更新中~~原创 2025-02-21 13:45:59 · 437 阅读 · 0 评论 -
001: Cesium.Cartesian2 知识详解,示例代码
Cesium.Cartesian2 是 Cesium 中处理二维空间数据的重要工具,广泛应用于屏幕坐标、遮罩区域、点比较等场景。通过掌握其构造方法、常用方法以及与其他功能的结合使用,可以更高效地开发基于 Cesium 的三维应用。原创 2025-02-21 14:12:00 · 296 阅读 · 0 评论 -
002:Cesium.Cartesian3 知识详解、示例代码
`Cesium.Cartesian3` 是 Cesium 中处理三维空间数据的核心工具,广泛应用于点的位置定义、向量运算、地理坐标转换等场景。通过掌握其构造方法、常用方法以及与其他功能的结合使用,可以更高效地开发基于 Cesium 的三维应用。原创 2025-02-21 14:26:05 · 424 阅读 · 0 评论 -
003:Cesium.Cartesian3 知识详解、示例代码
`Cesium.Cartesian4` 是 Cesium 中处理四维空间数据的核心工具,广泛应用于齐次坐标表示、向量运算、矩阵变换等场景。通过掌握其构造方法、常用方法以及与其他功能的结合使用,可以更高效地开发基于 Cesium 的三维应用。原创 2025-02-22 10:00:00 · 320 阅读 · 1 评论 -
004:Cesium.Cartographic 知识详解、示例代码
`Cesium.Cartographic` 是 Cesium 中处理地理坐标的核心工具,广泛应用于地理坐标与笛卡尔坐标的相互转换、地球表面点的表示等场景。通过掌握其构造方法、常用方法以及与其他功能的结合使用,可以更高效地开发基于 Cesium 的三维地理应用。原创 2025-02-23 10:00:00 · 207 阅读 · 1 评论 -
005:Cesium.viewer 知识详解、示例代码
`Cesium.Viewer` 是 Cesium 中的核心类,用于创建和管理三维地球视图。它封装了场景、相机、时间线、动画等常用功能,是构建 Cesium 应用程序的基础。原创 2025-02-24 10:00:00 · 448 阅读 · 9 评论 -
006:Cesium.Camera 知识详解,示例代码
提供了丰富的属性和方法,用于控制三维场景的视角。通过掌握这些属性和方法,可以实现对相机的精确控制,包括设置位置、方向、视场,以及执行平移、旋转、缩放等操作。原创 2025-02-25 10:00:00 · 229 阅读 · 5 评论 -
007:Cesium.ScreenSpaceEventHandler 知识详解,示例代码
是一个强大且灵活的工具,能够极大地丰富 Cesium 应用程序的交互体验。开发者可以根据具体需求,结合其他 Cesium 功能模块,构建出更加复杂和高效的三维 GIS 应用。原创 2025-02-26 10:00:00 · 397 阅读 · 5 评论 -
008:cesium中 viewer.scene.globe知识详解,示例代码
在 Cesium 中,`viewer.scene.globe` 是一个非常重要的属性,用于表示地球的球体模型。它提供了对地形、光照、阴影以及纹理贴图等功能的访问和控制。通过操作 `viewer.scene.globe`,你可以实现许多与地球相关的功能,例如加载自定义地形、启用光照效果、调整材质等。原创 2025-03-12 00:00:00 · 436 阅读 · 3 评论 -
Cesium.Ray 知识详解,示例代码
Cesium.Ray 是 CesiumJS 中用于表示三维空间中无限射线的核心类,广泛应用于地理信息系统(GIS)、三维可视化和碰撞检测等场景。射线由起点(origin)和方向向量(direction)定义,数学表达式为 ( P(t) = \text{origin} + t \times \text{direction} )。核心属性包括起点和方向向量,常用方法包括射线与平面的交点计算、根据距离获取射线上的点等。在 Cesium 中,Cesium.Ray 常用于地形碰撞检测、鼠标点选对象和雷达探测模拟等场景原创 2025-05-14 17:29:58 · 285 阅读 · 14 评论 -
124:vue+cesium 加载区域geojson数据,边界线呈现凸压纵深效果
本示例介绍如何在vue+cesium中加载区域geojson数据,边界线呈现突压纵深效果。这里首先要加载geojson文件,然后做好polygon.extrudedHeight 和 polygon.outlineColor的配置。原创 2025-05-14 17:08:08 · 774 阅读 · 36 评论 -
123:vue+cesium 获取相机姿态信息(航向、俯仰、滚转)
本示例介绍如何在vue+cesium中获取相机姿态信息(航向、俯仰、滚转)。航向(Heading)是指绕垂直轴(通常是Z轴)的旋转角度;俯仰(Pitch)是绕侧向轴(Y轴)的旋转;滚转(Roll)则是绕纵向轴(X轴)的旋转。在 Cesium 中,可以通过 Cesium.Transforms.headingPitchRollQuaternion 方法将航向、俯仰和滚转转换为四元数。原创 2025-04-04 07:00:00 · 592 阅读 · 18 评论 -
122:vue+cesium 获取相机中心点坐标
本示例介绍如何在vue+cesium中获取相机中心点坐标。**关键点解析:**(1)pickEllipsoid 方法:该方法根据屏幕上的像素位置(如画布中心点)计算对应的地球椭球体上的坐标。如果相机未对准地球表面(例如看向太空),则返回 undefined。(2)屏幕中心点坐标:使用 viewer.canvas.clientWidth / 2 和 viewer.canvas.clientHeight / 2 计算画布的中心点。(3)坐标转换:Cartesian3 是世界坐标系中的三维坐标。使原创 2025-04-03 00:00:00 · 577 阅读 · 34 评论 -
121:vue+cesium 锁定视角,禁用相机的所有用户交互操作
本示例介绍如何在vue+cesium中实现锁定视角,禁用相机的所有用户交互操作。若要完全锁定视角,即阻止任何对相机的操作,包括鼠标和键盘交互,可以通过禁用相机的输入控制器来实现。原创 2025-04-02 00:00:00 · 525 阅读 · 33 评论 -
120:vue+cesium 粒子跟随移动的飞机喷射火焰
本示例介绍如何在vue+cesium中实现粒子喷射,跟随着飞机移动而移动。实现思路是1.用clock组件创建时间线2.时间轴和飞机的位置信息绑定3.添加模型并让模型按照绑定的位置飞行4.创建粒子系统5.让粒子实时跟随模型移动原创 2025-03-31 11:21:26 · 1104 阅读 · 23 评论 -
119:vue+cesium 将折线绘制到地面
本示例介绍如何在vue+cesium中绘制折线,并将折线绘制到地面上。这里面要注意到要使用地形图,并且clampToGround属性要设置为true。原创 2025-03-30 22:45:44 · 342 阅读 · 31 评论 -
Cesium 入门系列教程(九):通过鼠标绘制图形
监听鼠标事件:使用 ScreenSpaceEventHandler 监听鼠标的点击、移动和右键结束事件。记录点的位置:在鼠标点击时记录点的地理坐标,并将其转换为笛卡尔坐标。原创 2025-04-03 07:30:00 · 414 阅读 · 14 评论 -
cesium小知识:viewer.trackedEntity详解,示例代码
时,Cesium 会自动调整相机的位置和方向,使其始终聚焦在该实体上。这在需要动态跟踪某个对象(如飞行器、车辆或人物模型)时非常有用。是 Cesium 中一个非常实用的功能,能够轻松实现对特定实体的自动跟踪。无论是静态实体还是动态实体,都可以通过设置。是 Cesium 中的一个属性,用于指定当前场景中被跟踪的实体(Entity)。如果实体的位置是动态变化的(例如模拟飞行器轨迹),可以通过更新实体的。来简化相机控制逻辑,提升开发效率。原创 2025-03-27 00:00:00 · 443 阅读 · 20 评论 -
118:vue+cesium 在地图上显示文字(横向显示)
本示例介绍如何在vue+cesium中显示文字。我们首先初始化了一个 Cesium viewer,并向其中添加了一个新的实体。这个实体包含了一个位置(通过经纬度指定)和一个标签。你可以根据需要调整 text, font, fillColor, outlineColor, outlineWidth, style, horizontalOrigin, verticalOrigin 和 pixelOffset 等属性来自定义标签的外观和位置。原创 2025-03-25 08:15:00 · 608 阅读 · 26 评论 -
117:vue+cesium 自定义绘制多边形
本示例在 Vue + cesium 项目中自定义绘制多边形。这里利用鼠标绘制,左键点击,一个点时候绘制一个点,两个点时候绘制一条线,三个点及以上绘制面。右键点击,去掉多边形。原创 2025-03-24 08:00:00 · 800 阅读 · 40 评论 -
116:vue+cesium 上升的垂直鱼尾线
本示例在 Vue + cesium 项目中创建一个“上升的垂直鱼尾线”效果。它通过生成多条从地面随机位置开始并向上延伸的线条,并应用自定义材质实现动态视觉效果。原创 2025-03-21 08:00:00 · 649 阅读 · 41 评论
分享