XTTX110-优快云博客

原创 Cesium+Vue3 学习教程系列目录

本系列教程基于Cesium+Vue3+Vite+Typescript+elementplus技术栈，系统讲解WebGIS开发。所有源码免费公开。教程循序渐进，适合Cesium开发者学习进阶。

2025-10-11 14:30:32 296

原创 Vue3+Cesium开发教程(31)——动态调整glb/gltf样式风格

本教程基于Cesium+Vue3+Typescript+elementplus技术栈，免费公开源码，逐步探索Cesium高级功能。重点讲解动态调整glb/gltf模型样式的方法，实现效果详见示例图。关注公众号"webgis学习"，私信"Cesium学习系列源码"获取完整代码。详情可查看原文链接。

2025-11-27 13:24:21 146

原创 Vue3+Cesium开发教程(30)——全局背景图切换

本文介绍基于Cesium+Vue3的技术栈实现地球背景图切换功能，包含纯色背景和自定义图片背景两种模式。相关源码免费公开。

2025-11-20 09:42:28 219

原创 Vue3+Cesium开发教程(29)——设置全局大气环境

本系列教程基于Cesium+Vue3技术栈，详细介绍如何设置全局大气环境变量，包括光照强度、色相、饱和度等参数调节方法。源码免费公开，可通过关注"webgis学习"公众号获取完整代码。本文源自系列第29篇教程，重点讲解大气散射与色彩校正系数的配置技巧。

2025-11-14 09:35:35 242

原创 Vue3+Cesium开发教程(28)---实时调整3dtiles位置、姿态（heading、pitch、roll）

本文介绍基于Cesium+Vue3+Typescript技术栈实现3DTiles模型的实时姿态调整功能，包括heading、pitch、roll参数的动态修改。作为系列教程的第28篇，该系列将持续探索Cesium高级功能开发。

2025-11-14 09:12:51 454

原创 Vue3+Cesium学习教程(27)---实时动态调整三维倾斜模型3dtiles位置

本文介绍了一个基于Cesium+Vue3+TypeScript+ElementPlus技术栈的WebGIS学习系列教程，重点演示了实时动态调整3DTiles倾斜模型位置的功能。教程所有源码免费公开，并将持续更新探索Cesium的高级功能。具体实现效果可参考原文链接中的案例演示。

2025-11-05 09:32:50 296

原创 Vue3+Cesium学习教程(26)---点聚合（Primitive实现）

本文针对Cesium中EntityCluster在处理大数据量时性能下降的问题，提出改用Primitive实现点聚合的方案。通过分析EntityCluster.js的设计思路，作者实现了基于Primitive的聚类器，有效提升了渲染性能。文章包含具体实现效果展示，并提供了Vue3+Cesium教程链接，详细代码可参考原文。这种改进方案能够解决Entity在大数据场景下帧率下降的问题。

2025-11-05 09:21:42 139

原创 Vue3+Cesium学习教程系列（24）——Entity实现点聚合效果

本文介绍了一个基于Cesium+Vue3+Typescript+elementplus技术栈的WebGIS学习系列教程。该系列重点讲解如何利用Entity实现点聚合效果，所有源码免费公开，并将持续更新Cesium高级功能

2025-10-23 13:59:27 150

原创 Vue3+Cesium学习教程系列（23）——Cesium动态标绘和编辑文字、图标（图片）、glb模型

本文介绍了基于Vue3+Cesium+Typescript实现动态标绘和编辑文字、图标及3D模型的方法。通过创建CommonLabel（文字）、CommonBillboard（图标）和CommonModel（模型）三个继承BaseDraw的类，分别实现了各类元素的绘制功能。文章详细展示了每个类的构造参数配置、实体创建方法以及点击事件处理，并说明如何将这些类集成到EditHelper中实现编辑功能

2025-10-23 13:52:04 479

原创 Vue3+Cesium学习教程系列开发进展

文章编写，相关代码已上传至git，全部免费。大家如果有什么功能需求的话，也可以在微信公众号“webgis学习”里给我留言或私信。20251016完成。

2025-10-17 13:36:56 152

原创 Vue3+Cesium学习教程系列（22）---一种更加实用的椭圆绘制与编辑方法

本文介绍了基于Cesium+Vue3技术栈实现三点法绘制椭圆形的方法，通过三个控制点确定椭圆的长短轴和旋转角度，利用Cesium的Entity.ellipse属性实现绘制功能。文章详细展示了核心代码实现步骤，包括计算椭圆参数、处理旋转角度以及实现编辑功能，最终效果可精准控制椭圆形状和方向。

2025-10-17 13:32:27 739

原创 Cesium+Vue3学习教程系列（21）---Cesium与turf.js结合，以椭圆形的绘制与编辑为例

本教程介绍如何使用Cesium+Vue3结合Turf.js实现椭圆绘制与编辑功能。Turf.js是一个轻量级开源GIS引擎，提供丰富的空间分析功能。教程详细展示了如何安装Turf.js、创建椭圆类继承基础多边形类，以及利用Turf.js的distance和ellipse方法计算椭圆坐标点，最后将椭圆添加到编辑工具中。

2025-10-16 17:26:24 715

原创 Cesium开源学习系统进展20251015

【摘要】2025年10月15日完成Cesium+Vue3教程系列第20篇，详细介绍圆形与扇形绘制编辑功能，配套代码已开源至GitHub。本教程完全免费，欢迎GIS开发者学习使用。

2025-10-16 17:17:20 117

原创 Cesium+Vue3学习教程系列（20）---圆形、扇形绘制与编辑

本教程基于Cesium+Vue3技术栈，新增圆形和扇形标绘功能。圆形通过Cesium的EllipseGraphics实现，使用两点确定圆心和半径；扇形则通过Polygon模拟，三点确定圆心、半径和角度，并借助ENU坐标系转换计算圆弧点坐标。代码封装了CommonCircle和CommonSector类，支持绘制和编辑功能。

2025-10-16 17:10:01 501

原创 Cesium开源学习系统开发进展20251014

文章编写，相关代码已上传至git，大家如果有什么功能需求的话，也可以在微信公众号“webgis学习”里给我留言或私信。20251014完成。

2025-10-14 13:34:43 136

原创 Cesium+Vue3学习教程系列（19）---多边形标绘代码封装修改，新增矩形绘制

本文介绍基于Cesium+Vue3技术栈的GIS开发系列更新，重点讲解了多边形标绘功能的代码重构与矩形绘制实现。主要内容包括：1）将原有BaseArrow类重构为BasePolygon基类，支持多种多边形绘制；2）新增CommonRectangle矩形类继承BasePolygon；3）实现矩形坐标计算算法CreateRectanglePoints；4）展示前端调用方式和实现效果。文章预告后续将更新圆形、扇形等标绘功能，相关代码已开源在Git的master分支。

2025-10-14 13:24:39 385

原创 Cesium+Vue3学习系列（18）---离线 XYZ 瓦片：内网环境大文件流畅加载方案

本文介绍了使用XYZ标准瓦片方案解决Cesium加载大影像卡顿问题的方法。通过QGIS生成XYZ瓦片，处理黑边无效数据后部署到本地目录，配合Cesium的UrlTemplateImageryProvider实现离线加载。该方案适用于内网环境，满足保密需求。文章详细说明了从瓦片生成到前端集成的完整流程，并提供了测试数据和代码示例。

2025-10-13 13:56:47 550

原创 Cesium+Vue3学习系列（17）---加载WMTS服务，解决大文件卡顿问题

本文介绍了如何通过Cesium+Vue3技术栈优化大体积TIFF影像加载性能。针对WMS服务加载大文件时卡顿的问题，提出将影像发布为WMTS瓦片服务的解决方案，实现按需分块加载。详细讲解了Geoserver中创建WMTS服务的9个步骤，包括工作区设置、数据存储发布、切片策略选择等。同时提供了Cesium加载WMTS服务的代码示例，展示了通过瓦片化处理后影像加载的流畅效果。后续将持续更新。

2025-10-13 13:51:28 602

原创 Cesium开源学习系统开发进展20251011

里初步封装了图层管理功能，在其基础上扩展如何实现在Cesium中加载Geoserver发布的矢量（shp、shapefile）WMS数据服务。相关文章已发布到优快云，代码托管到git，欢迎查阅。后面大家如果有什么功能需求的话，也可以在微信公众号“webgis学习”里给我留言或私信。20251011之前在。

2025-10-11 14:20:27 163

原创 Cesium+Vue3学习系列（16）---Cesium加载Geoserver发布的矢量（.shp）WMS数据服务

本文介绍了如何在Cesium+Vue3项目中加载Geoserver发布的WMS矢量数据服务。详细讲解了从创建工作区、发布Shapefile数据到自定义样式的完整流程，包括SLD样式文件配置和前端代码实现。文章提供了测试数据和样式文件，重点说明了Geoserver中数据发布的关键步骤和注意事项，如坐标系设置、字符集选择等，最后展示了如何在Cesium中动态加载和移除WMS图层。

2025-10-11 14:13:10 1062

原创 Cesium开源学习系统开发进展20251010

本文介绍了在Cesium+Vue3框架中加载Geoserver发布的影像WMS数据服务的方法。作者基于之前封装的图层管理功能进行扩展，详细讲解了如何实现tif影像数据的加载。相关技术文章已发布在优快云博客，配套代码托管于Git平台。该内容属于WebGIS开发学习系列的第15篇教程。

2025-10-10 11:22:50 218

原创 Cesium+Vue3学习系列（15）---Cesium加载Geoserver发布的影像（tif）WMS数据服务

本文介绍了如何在Cesium+Vue3项目中加载Geoserver发布的WMS影像服务。主要内容包括：Geoserver发布TIF影像数据的步骤（创建工作区、数据存储、发布图层），解决跨域问题的方法，以及前端代码实现WMS服务加载的具体流程。文章提供了完整的代码示例，

2025-10-10 11:09:43 676

原创 Cesium开源学习系统开发进展20251009

摘要：本文介绍在Cesium+Vue3项目中扩展图层管理功能，实现加载与删除geojson、kml、glb、3dtiles、czml等数据格式的方法。相关代码已托管至Git。

2025-10-09 11:13:54 107

原创 Cesium+Vue3学习系列（14）---Cesium加载与删除geojson、kml、glb、3dtiles、czml数据

本文介绍了基于Cesium+Vue3技术栈实现GIS图层管理功能的方法，重点讲解了五种地理数据格式的加载与删除操作。文章详细展示了geojson、kml、glb、3dtiles和czml格式数据的配置参数、加载方式及对应的前端实现代码，并提供了统一的数据删除接口。

2025-10-09 11:09:54 845

原创 Cesium开源学习系统开发进展20250930

20250930将之前写的态势标绘（也叫军事标绘）代码进行封装优化，并上传至git。相关文档已发布在微信公众号“webgis学习”以及优快云博客。后面大家如果有什么功能需求的话，也可以在公众号里给我留言或私信。

2025-09-30 11:22:41 131

原创 Cesium+Vue3学习系列（13）---态势标绘代码封装优化

本文介绍了在Cesium+Vue3技术栈中优化军事标绘箭头类代码的方法。通过创建抽象基类BaseArrowDraw，将公共逻辑(如绘制临时箭头、最终箭头、鼠标事件处理等)进行封装，使子类只需实现特定功能(如几何形态坐标计算和最大点数量控制)。攻击箭头、钳击箭头、直箭头和燕尾箭头等子类继承该基类后，代码量显著减少，结构更清晰。优化后的架构提高了代码复用性，便于后续扩展新的箭头类型。

2025-09-30 11:09:10 485

原创 Cesium开源学习系统开发进展20250929

本文介绍了钳形攻击箭头标绘功能的开发进展，已完成代码封装并上传至GitHub。相关技术文档已同步发布在微信公众号“webgis学习”里，详细讲解Cesium+Vue3实现双箭头标绘与编辑的方法。该项目属于WebGIS学习系列的第12期内容。

2025-09-29 14:12:16 143

原创 Cesium+Vue3学习系列（12）---态势标绘钳形攻击箭头（双箭头）标绘与编辑

本文介绍了基于Cesium+Vue3等技术的钳形攻击箭头标绘与编辑功能实现。通过创建PincerAttackArrow类继承BaseDraw，利用createPincerAttackArrowPoints函数计算箭头点位，并集成到EditHelper.ts中实现图形编辑。文章展示了具体代码实现和效果，包括点位计算、贝塞尔曲线处理等核心逻辑，并注明算法参考来源。所有源码已公开。该系列将持续更新Cesium高级功能开发。

2025-09-29 14:01:50 378

原创 Cesium开源学习系统开发进展

20250928封装完成态势标绘的攻击箭头、燕尾攻击箭头的代码，并上传至git。相关文档已发布在微信公众号“webgis学习”以及优快云博客（）里，钳击箭头代码已完成封装，明天发布，敬请关注。

2025-09-28 16:53:47 177

原创 Cesium+Vue3学习系列（11）---态势标绘攻击箭头、燕尾攻击箭头标绘与编辑

本文介绍了基于Cesium+Vue3+Vite+Typescript+elementplus技术栈实现攻击箭头和燕尾攻击箭头的标绘与编辑功能。重点展示了两个核心类AttackArrow和SwallowtailAttackArrow的实现，分别通过createAttackArrowPoints和createSwallowtailAttackArrowPoints函数计算几何图形。文章提供了完整的代码实现思路，包括图形创建、临时实体构建和编辑功能集成。所有源码已开源。

2025-09-28 14:53:14 493

原创 Cesium+Vue3学习系列（10）---态势标绘直箭头、细直线箭头画法

本文介绍了基于Cesium+Vue3+Vite+Typescript+elementplus技术栈实现态势标绘中直箭头和细直线箭头的绘制方法。通过创建StraightArrow和StraightLineArrow类继承BaseDraw，分别使用createStraightArrowPoints和createStraightLineArrowPoints函数计算箭头关键点坐标。文章详细展示了箭头绘制原理和代码实现，包括多边形箭头的宽度因子控制和直线箭头的长度缩放因子设置。完整源码可通过关注"webg

2025-09-26 17:28:50 257 1

原创 Cesium+Vue3学习系列（9）---编辑Entity图形控制点、拖拽Entity移动、删除Entity

如果是图形控制点，在onMouseMove函数里更新当前顶点，如果是整个图形，在onMouseMove更新整体的图形位置。在MultiEditManager类中实现一个单例，用户绘制好图形后，通过register函数注册到当前的MultiEditManager对象里，将左键点击动作绑定到onClick函数里，当用户选中图形后，执行startEdit，startEdit里会调用helper.start()执行具体的编辑动作，具体的实现放在了EditHelper类里。

2025-09-26 09:39:44 844

原创 Cesium+Vue3学习系列（8）---图形标绘点、线、多边形

本文介绍了基于Cesium+Vue3+Vite+Typescript+elementplus技术栈实现点、线、多边形标绘功能的方法。主要内容包括：1) 创建BaseDraw基类封装绘制逻辑，提供事件分发和基础绘制功能；2) 实现CommonPoint、CommonLine和CommonPolygon子类，分别完成点、线、多边形的具体绘制；3) 通过事件总线回调显示绘制信息；4) 提供前端页面调用绘制功能。文章展示了完整的代码实现思路和效果，相关源码已开源并遵循MIT协议。

2025-09-24 13:19:15 471

原创 Cesium+Vue3学习系列（7）---使用事件派发器编写实时显示鼠标三维坐标数据、相机姿态数据功能

本文介绍了使用Cesium+Vue3等技术栈开发时，通过事件派发器统一管理Cesium事件的解决方案。针对鼠标移动和相机姿态数据获取可能与其他功能冲突的问题，文章详细讲解了EventDispatcher类的实现，用于管理各类事件的订阅、取消与派发；并展示了MouseInfoPickerInViewer类的具体应用，通过绑定事件派发实现鼠标三维坐标和相机高度的实时获取。最后提供了效果演示和源码地址，该方案有效解决了Cesium中事件管理的冲突问题。

2025-09-24 13:14:10 363

原创 Cesium+Vue3学习系列（6）---实时显示鼠标三维坐标数据、实时显示相机姿态heading、pitch、roll数据

本文介绍了基于Cesium+Vue3技术栈实现鼠标三维坐标和相机姿态实时显示的方法。通过ScreenSpaceEventHandler绑定鼠标移动和滚轮事件，实现坐标转换（屏幕坐标→经纬度→空间坐标）和相机高度获取。创建MouseStatusInViewer静态类存储坐标和姿态参数（经度/纬度/高度/偏航角/俯仰角/横滚角等），并在前端页面实时展示。文中提到当前实现可能存在事件冲突问题，后续将通过事件总线统一管理。所有源码以MIT协议开源，持续更新中。该功能为后续标绘、测量等高级功能奠定了基础。

2025-09-20 16:45:01 327

原创 Cesium+Vue3学习系列（5）---置顶地图注记图层、设置图层显示顺序

本文针对Cesium开发中注记被底图压盖的问题，提出两种解决方案：1）在LayerManager类中新增SetAnnotationLayerTop方法，使用raiseToTop实现注记置顶；2）通过SetImageryLayerIndex方法精准控制图层叠放顺序。两种方法均在Vue3组件中实现，确保切换地图时已选注记保持可见。文章附带完整源码链接（MIT协议），并预告后续将更新更多Cesium高级功能教程。解决方案已通过微信公众号"webgis学习"同步发布。

2025-09-20 16:37:25 221

原创 Cesium+Vue3学习系列（4）---图层管理功能封装

本文介绍了基于Cesium+Vue3+Vite+Typescript+elementplus技术栈的GIS数据图层管理方案。主要内容包括：1）封装CesiumViewer类，初始化基础地图视图；2）实现LayerManager类，采用单例模式管理各类GIS数据图层（影像、地形、矢量等），支持图层的添加、删除和层级控制；3）通过UI组件实现底图切换和注记管理的功能演示。文中提供了完整的代码实现，并开源相关项目源码。该方案可有效管理多种GIS数据格式，为WebGIS开发提供了实用的技术参考。

2025-09-19 09:30:56 895

原创 Cesium+Vue3学习系列（3）--- UI框架搭建

本文介绍了基于Cesium+Vue3+Vite+TS+ElementPlus技术栈的UI框架搭建过程。主要内容包括：1）使用ElementPlus构建前端界面，分为搜索区、菜单区、功能区和鼠标位置显示区；2）详细说明了菜单树的实现，包括数据结构定义、样式设置和点击事件处理；3）介绍了功能组件动态加载机制；4）提供了源码地址（Gitee）并承诺持续更新。该框架采用MIT协议开源，适合WebGIS开发学习使用。

2025-09-19 09:27:21 396

原创 Cesium+Vue3学习系列（2）---添加天地图影像、添加地形

本文介绍了基于Cesium+Vue3等技术栈的WebGIS开发方法，重点讲解如何添加天地图影像和地形。首先需在天地图官网申请key，然后通过代码调用天地图影像、注记和矢量地图服务。新版本Cesium需异步获取地形，文中以marsgis地形为例展示了实现方法。所有源码已开源，采用MIT协议。后续将继续探索Cesium高级功能，欢迎关注微信公众号"webgis学习"获取更多内容。

2025-09-16 13:21:01 593

原创 Cesium+Vue3学习系列（1）---环境搭建

本文介绍了基于Cesium+Vue3+Vite+TS+ElementPlus技术栈的3D地图开发环境搭建方法。首先通过Vite创建Vue+TS项目，安装Cesium核心库和vite插件；然后在vite配置中引入Cesium插件；接着编写测试代码，包括设置Cesium访问token、创建Viewer实例和样式配置；最后运行项目并开源到Gitee平台。文章提供了完整的项目创建、依赖安装、配置集成和示例代码，为后续深入学习Cesium高级功能打下基础。项目采用MIT协议开源，后续将持续更新。

2025-09-16 10:37:22 318