webgl
文章平均质量分 50
XTTX110
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue3+Cesium电子围栏效果
本系列采用Cesium+Vue3+Typescript+elementplus技术栈,重点讲解电子围栏效果的实现。文章详细介绍了开发过程,并展示了最终效果图,后续将持续探索Cesium高级功能。原创 2026-04-14 10:20:52 · 32 阅读 · 0 评论 -
Vue3+Cesium实现淹没效果
本文介绍了一个基于Cesium+Vue3+TypeScript+ElementPlus技术栈的WebGIS学习系列,重点展示了如何实现淹没效果,并预告将持续探索Cesium的高级功能。原创 2026-04-14 10:14:55 · 134 阅读 · 0 评论 -
Vue3+Cesium实现可调整的迁徙图
本系列采用Cesium+Vue3+Typescript+elementplus技术栈,重点探索Cesium高级功能应用。目前已实现可调整迁徙图功能。原创 2026-01-28 11:22:43 · 143 阅读 · 0 评论 -
Vue3+Cesium+turf 实现缓冲区分析
本文介绍了一个基于Cesium+Vue3+Typescript+elementplus技术栈的WebGIS学习系列,重点展示了使用Vue3+Cesium+turf实现缓冲区分析的方法。原创 2026-01-28 11:13:30 · 326 阅读 · 0 评论 -
Vue3+Cesium实现高度雾
本系列教程基于Cesium+Vue3+TypeScript+ElementPlus技术栈,将逐步深入探索Cesium的高级功能。目前已实现高度雾效果。原创 2026-01-27 09:13:37 · 278 阅读 · 0 评论 -
Vue3+Cesium积雪效果,动态设置颜色厚度
摘要:本系列教程采用Cesium+Vue3+Typescript+ElementPlus技术栈,重点讲解WebGIS开发技术。最新内容展示了Vue3+Cesium实现积雪效果的方法,包括动态设置颜色和厚度等高级功能。原创 2026-01-27 09:11:29 · 484 阅读 · 0 评论 -
Vue3+Cesium动态设置地图样式
本系列教程基于Cesium+Vue3+Typescript+ElementPlus技术栈,将逐步探索Cesium高级功能。内容包括动态地图样式设置等WebGIS开发技巧。原创 2026-01-23 11:44:00 · 213 阅读 · 0 评论 -
Vue3+Cesium实现闪电、雷雨效果
本系列采用Cesium+Vue3+Typescript+ElementPlus技术栈,逐步探索Cesium高级功能。目前已完成闪电、雷雨特效的实现原创 2026-01-23 11:41:30 · 310 阅读 · 0 评论 -
Vue3+Cesium教程(38)--动态雾浓度、颜色
本文介绍了一个基于Cesium+Vue3+TypeScript+ElementPlus技术栈的WebGIS学习系列教程,重点讲解了动态调整雾浓度和颜色的实现方法。教程第38期具体展示了动态雾效的实现效果。原创 2026-01-22 10:22:57 · 458 阅读 · 0 评论 -
Vue3+Cesium教程(37)--下雪啦!动态设置降雪效果
本文介绍了一个基于Cesium+Vue3+Typescript+elementplus技术栈的WebGIS学习系列,重点讲解了动态降雪效果的实现方法,供读者参考学习动态设置降雪效果的具体实现过程。原创 2026-01-22 10:19:59 · 245 阅读 · 0 评论 -
Vue3+Cesium教程(36)--动态设置降雨效果
本教程基于Cesium+Vue3+Typescript+elementplus技术栈,详细讲解动态设置降雨效果的实现方法。系列教程将持续探索Cesium高级功能,所有源码免费公开。原创 2026-01-05 09:16:30 · 366 阅读 · 0 评论 -
Vue3+Cesium教程(35)--云代码封装及动态设置多片云参数
本教程基于Cesium+Vue3+Typescript+elementplus技术栈,免费公开源码,将逐步探索Cesium高级功能。内容包括云代码封装及动态设置多片云参数实现过程原创 2026-01-05 09:13:20 · 310 阅读 · 0 评论 -
Vue3+Cesium开发教程(34)--动态设置云效果
摘要:本教程基于Vue3+Cesium+TypeScript技术栈,源代码免费。本篇讲解动态设置云效果的方法。原创 2025-12-15 16:05:20 · 176 阅读 · 0 评论 -
Vue3+Cesium开发教程(33)--无需Token,离线使用Cesium的正确方式
本文介绍基于Cesium+Vue3+Typescript+elementplus技术栈的WebGIS开发教程,提供免费开源代码,本篇介绍无需token也能正常使用Cesium。原创 2025-12-15 16:02:12 · 347 阅读 · 0 评论 -
Vue3+Cesium开发教程(32)--离线地形获取、切片及地形服务发布方法
本文介绍了使用Cesium加载非官方地形数据的方法,主要包括:1)从地理空间数据云获取30米分辨率DEM数据;2)使用开源工具cesium-terrain-builder将TIF格式地形数据转换为.terrain切片;3)通过nginx发布地形服务,配置gzip压缩支持;4)在Cesium+Vue3系统中集成自定义地形服务。原创 2025-12-08 10:02:40 · 565 阅读 · 0 评论 -
Vue3+Cesium开发教程(31)——动态调整glb/gltf样式风格
本教程基于Cesium+Vue3+Typescript+elementplus技术栈,免费公开源码,逐步探索Cesium高级功能。重点讲解动态调整glb/gltf模型样式的方法,实现效果详见示例图。关注公众号"webgis学习",私信"Cesium学习系列源码"获取完整代码。详情可查看原文链接。原创 2025-11-27 13:24:21 · 186 阅读 · 0 评论 -
Vue3+Cesium开发教程(30)——全局背景图切换
本文介绍基于Cesium+Vue3的技术栈实现地球背景图切换功能,包含纯色背景和自定义图片背景两种模式。相关源码免费公开。原创 2025-11-20 09:42:28 · 266 阅读 · 0 评论 -
Vue3+Cesium开发教程(29)——设置全局大气环境
本系列教程基于Cesium+Vue3技术栈,详细介绍如何设置全局大气环境变量,包括光照强度、色相、饱和度等参数调节方法。源码免费公开,可通过关注"webgis学习"公众号获取完整代码。本文源自系列第29篇教程,重点讲解大气散射与色彩校正系数的配置技巧。原创 2025-11-14 09:35:35 · 292 阅读 · 0 评论 -
Vue3+Cesium开发教程(28)---实时调整3dtiles位置、姿态(heading、pitch、roll)
本文介绍基于Cesium+Vue3+Typescript技术栈实现3DTiles模型的实时姿态调整功能,包括heading、pitch、roll参数的动态修改。作为系列教程的第28篇,该系列将持续探索Cesium高级功能开发。原创 2025-11-14 09:12:51 · 509 阅读 · 0 评论 -
Vue3+Cesium学习教程(27)---实时动态调整三维倾斜模型3dtiles位置
本文介绍了一个基于Cesium+Vue3+TypeScript+ElementPlus技术栈的WebGIS学习系列教程,重点演示了实时动态调整3DTiles倾斜模型位置的功能。教程所有源码免费公开,并将持续更新探索Cesium的高级功能。具体实现效果可参考原文链接中的案例演示。原创 2025-11-05 09:32:50 · 331 阅读 · 0 评论 -
Vue3+Cesium学习教程(26)---点聚合(Primitive实现)
本文针对Cesium中EntityCluster在处理大数据量时性能下降的问题,提出改用Primitive实现点聚合的方案。通过分析EntityCluster.js的设计思路,作者实现了基于Primitive的聚类器,有效提升了渲染性能。文章包含具体实现效果展示,并提供了Vue3+Cesium教程链接,详细代码可参考原文。这种改进方案能够解决Entity在大数据场景下帧率下降的问题。原创 2025-11-05 09:21:42 · 205 阅读 · 0 评论 -
Vue3+Cesium学习教程系列(23)——Cesium动态标绘和编辑文字、图标(图片)、glb模型
本文介绍了基于Vue3+Cesium+Typescript实现动态标绘和编辑文字、图标及3D模型的方法。通过创建CommonLabel(文字)、CommonBillboard(图标)和CommonModel(模型)三个继承BaseDraw的类,分别实现了各类元素的绘制功能。文章详细展示了每个类的构造参数配置、实体创建方法以及点击事件处理,并说明如何将这些类集成到EditHelper中实现编辑功能原创 2025-10-23 13:52:04 · 606 阅读 · 0 评论 -
Vue3+Cesium学习教程系列(22)---一种更加实用的椭圆绘制与编辑方法
本文介绍了基于Cesium+Vue3技术栈实现三点法绘制椭圆形的方法,通过三个控制点确定椭圆的长短轴和旋转角度,利用Cesium的Entity.ellipse属性实现绘制功能。文章详细展示了核心代码实现步骤,包括计算椭圆参数、处理旋转角度以及实现编辑功能,最终效果可精准控制椭圆形状和方向。原创 2025-10-17 13:32:27 · 836 阅读 · 0 评论 -
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 · 778 阅读 · 0 评论 -
Cesium+Vue3学习教程系列(20)---圆形、扇形绘制与编辑
本教程基于Cesium+Vue3技术栈,新增圆形和扇形标绘功能。圆形通过Cesium的EllipseGraphics实现,使用两点确定圆心和半径;扇形则通过Polygon模拟,三点确定圆心、半径和角度,并借助ENU坐标系转换计算圆弧点坐标。代码封装了CommonCircle和CommonSector类,支持绘制和编辑功能。原创 2025-10-16 17:10:01 · 730 阅读 · 0 评论 -
Cesium+Vue3学习教程系列(19)---多边形标绘代码封装修改,新增矩形绘制
本文介绍基于Cesium+Vue3技术栈的GIS开发系列更新,重点讲解了多边形标绘功能的代码重构与矩形绘制实现。主要内容包括:1)将原有BaseArrow类重构为BasePolygon基类,支持多种多边形绘制;2)新增CommonRectangle矩形类继承BasePolygon;3)实现矩形坐标计算算法CreateRectanglePoints;4)展示前端调用方式和实现效果。文章预告后续将更新圆形、扇形等标绘功能,相关代码已开源在Git的master分支。原创 2025-10-14 13:24:39 · 434 阅读 · 0 评论 -
Cesium+Vue3学习系列(18)---离线 XYZ 瓦片:内网环境大文件流畅加载方案
本文介绍了使用XYZ标准瓦片方案解决Cesium加载大影像卡顿问题的方法。通过QGIS生成XYZ瓦片,处理黑边无效数据后部署到本地目录,配合Cesium的UrlTemplateImageryProvider实现离线加载。该方案适用于内网环境,满足保密需求。文章详细说明了从瓦片生成到前端集成的完整流程,并提供了测试数据和代码示例。原创 2025-10-13 13:56:47 · 829 阅读 · 0 评论 -
Cesium+Vue3学习系列(17)---加载WMTS服务,解决大文件卡顿问题
本文介绍了如何通过Cesium+Vue3技术栈优化大体积TIFF影像加载性能。针对WMS服务加载大文件时卡顿的问题,提出将影像发布为WMTS瓦片服务的解决方案,实现按需分块加载。详细讲解了Geoserver中创建WMTS服务的9个步骤,包括工作区设置、数据存储发布、切片策略选择等。同时提供了Cesium加载WMTS服务的代码示例,展示了通过瓦片化处理后影像加载的流畅效果。后续将持续更新。原创 2025-10-13 13:51:28 · 793 阅读 · 0 评论 -
Cesium+Vue3学习系列(16)---Cesium加载Geoserver发布的矢量(.shp)WMS数据服务
本文介绍了如何在Cesium+Vue3项目中加载Geoserver发布的WMS矢量数据服务。详细讲解了从创建工作区、发布Shapefile数据到自定义样式的完整流程,包括SLD样式文件配置和前端代码实现。文章提供了测试数据和样式文件,重点说明了Geoserver中数据发布的关键步骤和注意事项,如坐标系设置、字符集选择等,最后展示了如何在Cesium中动态加载和移除WMS图层。原创 2025-10-11 14:13:10 · 1305 阅读 · 0 评论 -
Cesium+Vue3学习系列(15)---Cesium加载Geoserver发布的影像(tif)WMS数据服务
本文介绍了如何在Cesium+Vue3项目中加载Geoserver发布的WMS影像服务。主要内容包括:Geoserver发布TIF影像数据的步骤(创建工作区、数据存储、发布图层),解决跨域问题的方法,以及前端代码实现WMS服务加载的具体流程。文章提供了完整的代码示例,原创 2025-10-10 11:09:43 · 806 阅读 · 0 评论 -
Cesium+Vue3学习系列(14)---Cesium加载与删除geojson、kml、glb、3dtiles、czml数据
本文介绍了基于Cesium+Vue3技术栈实现GIS图层管理功能的方法,重点讲解了五种地理数据格式的加载与删除操作。文章详细展示了geojson、kml、glb、3dtiles和czml格式数据的配置参数、加载方式及对应的前端实现代码,并提供了统一的数据删除接口。原创 2025-10-09 11:09:54 · 978 阅读 · 0 评论 -
Cesium+Vue3学习系列(13)---态势标绘代码封装优化
本文介绍了在Cesium+Vue3技术栈中优化军事标绘箭头类代码的方法。通过创建抽象基类BaseArrowDraw,将公共逻辑(如绘制临时箭头、最终箭头、鼠标事件处理等)进行封装,使子类只需实现特定功能(如几何形态坐标计算和最大点数量控制)。攻击箭头、钳击箭头、直箭头和燕尾箭头等子类继承该基类后,代码量显著减少,结构更清晰。优化后的架构提高了代码复用性,便于后续扩展新的箭头类型。原创 2025-09-30 11:09:10 · 570 阅读 · 0 评论 -
Cesium+Vue3学习系列(12)---态势标绘 钳形攻击箭头(双箭头)标绘与编辑
本文介绍了基于Cesium+Vue3等技术的钳形攻击箭头标绘与编辑功能实现。通过创建PincerAttackArrow类继承BaseDraw,利用createPincerAttackArrowPoints函数计算箭头点位,并集成到EditHelper.ts中实现图形编辑。文章展示了具体代码实现和效果,包括点位计算、贝塞尔曲线处理等核心逻辑,并注明算法参考来源。所有源码已公开。该系列将持续更新Cesium高级功能开发。原创 2025-09-29 14:01:50 · 454 阅读 · 0 评论 -
Cesium+Vue3学习系列(11)---态势标绘 攻击箭头、 燕尾攻击箭头标绘与编辑
本文介绍了基于Cesium+Vue3+Vite+Typescript+elementplus技术栈实现攻击箭头和燕尾攻击箭头的标绘与编辑功能。重点展示了两个核心类AttackArrow和SwallowtailAttackArrow的实现,分别通过createAttackArrowPoints和createSwallowtailAttackArrowPoints函数计算几何图形。文章提供了完整的代码实现思路,包括图形创建、临时实体构建和编辑功能集成。所有源码已开源。原创 2025-09-28 14:53:14 · 552 阅读 · 0 评论 -
Cesium+Vue3学习系列(10)---态势标绘 直箭头、 细直线箭头画法
本文介绍了基于Cesium+Vue3+Vite+Typescript+elementplus技术栈实现态势标绘中直箭头和细直线箭头的绘制方法。通过创建StraightArrow和StraightLineArrow类继承BaseDraw,分别使用createStraightArrowPoints和createStraightLineArrowPoints函数计算箭头关键点坐标。文章详细展示了箭头绘制原理和代码实现,包括多边形箭头的宽度因子控制和直线箭头的长度缩放因子设置。完整源码可通过关注"webg原创 2025-09-26 17:28:50 · 380 阅读 · 0 评论 -
Cesium+Vue3学习系列(8)---图形标绘点、线、多边形
本文介绍了基于Cesium+Vue3+Vite+Typescript+elementplus技术栈实现点、线、多边形标绘功能的方法。主要内容包括:1) 创建BaseDraw基类封装绘制逻辑,提供事件分发和基础绘制功能;2) 实现CommonPoint、CommonLine和CommonPolygon子类,分别完成点、线、多边形的具体绘制;3) 通过事件总线回调显示绘制信息;4) 提供前端页面调用绘制功能。文章展示了完整的代码实现思路和效果,相关源码已开源并遵循MIT协议。原创 2025-09-24 13:19:15 · 601 阅读 · 0 评论 -
Cesium+Vue3学习系列(7)---使用事件派发器编写实时显示鼠标三维坐标数据、相机姿态数据功能
本文介绍了使用Cesium+Vue3等技术栈开发时,通过事件派发器统一管理Cesium事件的解决方案。针对鼠标移动和相机姿态数据获取可能与其他功能冲突的问题,文章详细讲解了EventDispatcher类的实现,用于管理各类事件的订阅、取消与派发;并展示了MouseInfoPickerInViewer类的具体应用,通过绑定事件派发实现鼠标三维坐标和相机高度的实时获取。最后提供了效果演示和源码地址,该方案有效解决了Cesium中事件管理的冲突问题。原创 2025-09-24 13:14:10 · 406 阅读 · 0 评论 -
Cesium+Vue3学习系列(5)---置顶地图注记图层、设置图层显示顺序
本文针对Cesium开发中注记被底图压盖的问题,提出两种解决方案:1)在LayerManager类中新增SetAnnotationLayerTop方法,使用raiseToTop实现注记置顶;2)通过SetImageryLayerIndex方法精准控制图层叠放顺序。两种方法均在Vue3组件中实现,确保切换地图时已选注记保持可见。文章附带完整源码链接(MIT协议),并预告后续将更新更多Cesium高级功能教程。解决方案已通过微信公众号"webgis学习"同步发布。原创 2025-09-20 16:37:25 · 310 阅读 · 0 评论 -
Cesium+Vue3学习系列(4)---图层管理功能封装
本文介绍了基于Cesium+Vue3+Vite+Typescript+elementplus技术栈的GIS数据图层管理方案。主要内容包括:1)封装CesiumViewer类,初始化基础地图视图;2)实现LayerManager类,采用单例模式管理各类GIS数据图层(影像、地形、矢量等),支持图层的添加、删除和层级控制;3)通过UI组件实现底图切换和注记管理的功能演示。文中提供了完整的代码实现,并开源相关项目源码。该方案可有效管理多种GIS数据格式,为WebGIS开发提供了实用的技术参考。原创 2025-09-19 09:30:56 · 1043 阅读 · 0 评论 -
Cesium+Vue3学习系列(3)--- UI框架搭建
本文介绍了基于Cesium+Vue3+Vite+TS+ElementPlus技术栈的UI框架搭建过程。主要内容包括:1)使用ElementPlus构建前端界面,分为搜索区、菜单区、功能区和鼠标位置显示区;2)详细说明了菜单树的实现,包括数据结构定义、样式设置和点击事件处理;3)介绍了功能组件动态加载机制;4)提供了源码地址(Gitee)并承诺持续更新。该框架采用MIT协议开源,适合WebGIS开发学习使用。原创 2025-09-19 09:27:21 · 500 阅读 · 0 评论
分享