- 博客(300)
- 收藏
- 关注
RSS订阅
原创 Vue3＋Openlayers教程导航页【目录】
欢迎来到 Vue3＋Openlayers 系列教程，这里是我在 优快云 编写的所有 Vue3＋Openlayers 系列相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Openlayers 的强大魅力！
2025-04-18 16:08:22
1256
5
原创 Three.js 教程导航页【目录总览】，持续更新中......
欢迎来到 Three.js 系列教程，这里是我在 优快云 编写的所有 Three.js 相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Three.js 的强大魅力！
2025-04-18 12:42:52
487
原创 205.Vue3 + OpenLayers：加载动画，采用 CSS 的 @keyframes 方式
本文介绍了在Vue3+OpenLayers中实现地图加载动画的方法，通过Overlay添加HTML元素，结合CSS动画实现类似雷达波纹的扩散效果。关键点包括：使用document.createElement动态创建DOM节点，通过scale、rgba和box-shadow实现动画；注意scoped样式下需使用:deep穿透；OpenLayers会自动挂载Overlay元素；需正确使用useGeographic()处理坐标转换。该方案轻量高效，适用于GIS项目中的点位提示、设备监测等场景，支持扩展为多层波纹、
2026-05-11 10:00:43
335
原创 204.Vue3 + OpenLayers：加载 GIF 文件（CSS 背景实现动画标记）
摘要：本文介绍了一种基于Vue3+OpenLayers实现地图动态标记的轻量级方案。通过CSS加载GIF作为标记背景，结合Overlay将HTML元素挂载到地图指定坐标位置，实现了无需复杂动画逻辑的动态效果。文章详细说明了核心实现步骤，包括GeoJSON数据定义、坐标提取、Overlay使用等关键点，并重点分析了坐标转换、DOM挂载等常见问题。该方案适用于预警点闪烁、实时监控等场景，具有实现简单、维护成本低的优势，同时提供了向VectorLayer、Canvas动画等更复杂方案的升级建议。（149字）
2026-04-10 14:18:00
855
原创 203.Vue3 + OpenLayers 实战：加载 GeoTIFF 文件并显示栅格图像
本文介绍了在Vue3项目中集成OpenLayers实现GeoTIFF栅格数据可视化的方法。通过WebGLTile图层加载.tif文件，利用OpenLayers原生支持的地理坐标解析和投影处理功能，可高效展示遥感影像、DEM等数据。文章详细说明了核心技术点、完整代码实现和关键步骤解析，包括GeoTIFF数据源创建、WebGL渲染优势以及地图初始化要点。同时总结了常见问题解决方案，如跨域错误处理、投影一致性检查等，并提出了防止重复加载、增强用户体验等优化建议。该方法适用于各类WebGIS项目中的栅格数据可视化需
2026-04-09 10:53:51
635
原创 202.Vue3 + OpenLayers 实战：加载 GPX 数据并导出 GeoJSON 文件
本文介绍了一个基于Vue3+OpenLayers实现的GPX轨迹处理功能。核心功能包括：加载本地GPX文件并在地图上展示轨迹、自动缩放至轨迹范围、一键导出GeoJSON格式文件。文章详细讲解了实现思路和关键代码，包括GPX文件读取、坐标转换（WGS84到WebMercator）、Feature处理、GeoJSON转换及文件导出等步骤。还提供了常见问题解答和扩展方向建议，如支持文件上传、轨迹动画等进阶功能。该方案可直接应用于实际项目，为WebGIS开发提供了实用参考。
2026-04-08 09:58:02
393
原创 201.Vue3 + OpenLayers 实战：使用 WFS 加载数据，并通过 like / and / equalTo 实现属性过
本文介绍了在Vue3+OpenLayers项目中实现WFS数据过滤加载的方法。通过组合使用like(模糊匹配)、equalTo(精确匹配)和and(多条件组合)过滤器，可以精准获取名称以"M"开头且类型为"riverbank"的矢量数据。文章详细讲解了核心代码实现，包括WFS请求构建、过滤器组合使用以及数据渲染到地图的完整流程，并提供了常见问题解决方案（如图层重复叠加、坐标系匹配等）和进阶扩展建议。这套方案为WebGIS开发提供了可控、精准的数据加载能力，适用于智慧城
2026-04-07 09:54:10
407
原创 200.Vue3 + OpenLayers：加载 GeoServer 发布的矢量数据（WMS方式）
本文介绍了在Vue3+OpenLayers中加载GeoServer WMS图层的方法。通过对比WMS（栅格）和WFS（矢量）的特点，说明WMS更适合大数据量展示。文章详细讲解了核心代码实现，包括地图初始化、WMS图层加载，并重点解析了关键参数（LAYERS、VERSION、FORMAT等）的作用。同时总结了常见问题解决方案，如图层不显示、坐标系不一致、跨域问题和图层模糊等。最后提出进阶优化建议，如封装Hook、图层管理和动态切换等。该方案适用于WebGIS/数字孪生项目中需要高性能展示地图数据的场景。
2026-03-31 10:26:24
1567
原创 199.Vue3 + OpenLayers 实现：点击 / 拖动地图播放音频
本文介绍了一个基于Vue3和OpenLayers的地图交互音效功能实现方案。通过监听地图点击、拖动开始和结束事件，分别触发单次音效和循环音效播放。技术实现上采用Vue3的Composition API管理状态，利用原生Audio API控制音频播放，并解决了连续点击无声音、音频叠加等常见问题。该功能可增强GIS系统、无人机巡检等项目的交互体验，后续可拓展为空间音效、语音播报等进阶功能。文章提供了完整代码示例和关键知识点解析，适合需要在地图应用中增加声音反馈的开发场景。
2026-03-30 09:56:10
455
原创 198.Vue3 + OpenLayers 实战：矢量图形的剪切、复制与粘贴
本文介绍了基于Vue3和OpenLayers实现矢量图形编辑功能的方法。通过ol-ext插件，实现了类似CAD的图形操作体验，包括快捷键复制(Ctrl+C)、粘贴(Ctrl+V)、剪切(Ctrl+X)以及Shift+拖拽移动功能。核心实现使用了Transform和CopyPaste两个交互类，前者处理图形选择和移动，后者负责复制粘贴操作。文章还总结了常见问题（如Vue3响应式处理、命名冲突等）和进阶优化方向（操作记录、多图层支持等），为WebGIS开发提供了桌面级图形编辑的解决方案。
2026-03-27 09:48:30
478
原创 197.Vue3 + OpenLayers 实现图形编辑（缩放、平移、变形、旋转、停止编辑）
本文介绍了基于Vue3+OpenLayers+ol-ext实现地图图形交互式编辑的完整方案。通过ol-ext的Transform交互，实现了图形的平移、缩放、旋转和拉伸变形功能，并支持编辑状态控制。文章详细讲解了核心代码实现，包括地图初始化、图形添加、样式定义以及编辑功能的开启/停止。重点解析了Transform交互原理和常见问题处理，并提出了项目优化建议，如封装Hook、支持多选编辑等。该方案可直接应用于GIS系统、无人机巡检等场景，为前端GIS开发提供了实用参考。
2026-03-26 13:55:59
976
原创 196.Vue3 + OpenLayers 实战：绘制长方形，并在拖拽编辑后始终保持矩形
本文介绍了一种在Vue3+OpenLayers中实现矩形绘制和保持矩形编辑的方法。核心思路是通过几何缩放而非直接修改顶点来维持矩形结构：1)使用createBox()函数绘制矩形；2)编辑时计算中心点并基于缩放比例调整几何图形；3)关键算法使用geometry.scale()方法进行缩放处理。文章提供了完整的Vue3+Composition API实现代码，并总结了关键点：必须保存原始geometry、限制自由变形、通过缩放保持矩形特性。该方法适用于地图开发中的区域选择等场景，并可扩展为更复杂的工程级应用。
2026-03-25 09:30:17
434
原创 195.Vue3 + OpenLayers：监听瓦片地图加载情况（200、403及异常处理）
本文介绍了在Vue3+OpenLayers项目中监听地图瓦片加载状态的方法。通过重写setTileLoadFunction接管瓦片请求流程，使用XMLHttpRequest获取HTTP状态码，实现了对200（成功）、403（无权限）及其他异常情况的处理。关键点包括：1）拦截默认加载行为；2）使用XHR获取状态；3）处理不同状态码；4）优化建议如防重复弹窗、重试机制、多源降级等。该方案特别适用于无人机巡检、GIS系统等对地图稳定性要求高的场景，能有效提升地图加载的可靠性和用户体验。
2026-03-24 11:13:55
389
原创 194.Vue3 + OpenLayers 实战：动态位置 + 高度 + 角度，模拟卫星地面覆盖范围
本文介绍基于Vue3+OpenLayers+Turf.js实现动态椭圆覆盖区域可视化的方法。通过输入设备位置、高度、俯仰角、方位角等参数，利用三角函数计算地面投影点，确定椭圆长短轴，再通过Turf生成椭圆区域并在地图展示。文章详细讲解了核心原理、完整代码实现、常见问题（坐标系转换、单位处理等）及优化建议，适用于卫星观测、无人机巡检、雷达扫描等多种场景。该方法结合空间几何计算与GIS可视化技术，为动态覆盖区域分析提供有效解决方案。
2026-03-23 11:49:37
538
原创 193.Vue3 + OpenLayers 实战：圆孔相机模型推算卫星拍摄区域
本文介绍了基于Vue3和OpenLayers实现无人机/卫星拍摄区域可视化的方法。通过圆孔相机简化模型，根据输入的经纬度、高度和拍摄比例，计算地面覆盖半径并绘制圆形区域。核心公式为：半径=高度/拍摄比例。文章包含完整的代码实现，同时指出了该方案的局限性（未考虑视场角、俯仰角等），并建议在真实工程中采用更精确的针孔相机模型。最后提出了多个优化方向，如将圆形升级为矩形、加入倾斜摄影等，适用于无人机巡检、GIS系统等场景。
2026-03-20 11:19:52
382
原创 192.Vue3 + OpenLayers 实战：点击地图 Feature，列表自动滚动定位
本文介绍了使用Vue3和OpenLayers实现地图与列表联动功能的方法。通过为地图要素(Feature)绑定索引(listindex)，当用户点击地图时，能自动定位到对应的列表项并高亮显示。核心实现包括：1)建立Feature与列表的索引关系；2)使用OpenLayers的forEachFeatureAtPixel获取点击要素；3)通过scrollIntoView实现平滑滚动定位。文章还提供了优化建议，如数据驱动UI、解耦设计等，并提出了可扩展功能方向。这种交互方式适用于无人机巡检、电子围栏管理等WebG
2026-03-19 10:46:35
357
原创 191.Vue3 + OpenLayers 实战：可控化版权信息（Attribution）详解与完整示例
本文介绍了如何在Vue3+OpenLayers中实现可控化的地图版权信息展示。主要内容包括：1）自定义版权内容（HTML格式）和样式；2）内置版权（右下角可折叠）和外部版权（自定义位置）的实现方式；3）核心API参数详解（collapsible、label、target等）；4）样式自定义技巧和进阶玩法（动态切换版权、完全Vue化控制）；5）常见问题解决方案。通过Attribution控件的灵活配置，可以满足OSM、天地图等地图服务的版权展示要求，同时确保UI设计与项目风格一致。文章提供了完整的Vue3 C
2026-03-18 14:24:25
694
原创 190.Vue3 + OpenLayers 实战：实现地图旋转移动动画 + CSS缩放动画（详解 animate 用法）
本文介绍了基于Vue3和OpenLayers实现地图动画的方法，包含移动、缩放、旋转等效果。通过view.animate()API可实现多段动画串联执行，并支持缓动函数控制动画节奏。示例代码展示了点击按钮触发地图从初始位置移动到指定坐标，同时进行旋转和缩放，最后显示CSS动画提示的完整流程。该方法适用于WebGIS项目中的定位飞行、区域展示等场景，能有效提升用户体验和交互效果。
2026-03-17 10:18:32
596
原创 189.Vue3 + OpenLayers：easing 动画函数详解及在 View.animate() 中的使用
本文介绍了在Vue3+OpenLayers项目中实现地图动画效果的方法。通过View.animate()API结合五种缓动函数(easeIn、easeOut、inAndOut、linear、upAndDown)，可实现不同风格的地图移动动画，包括加速、减速、弹跳等效果。文章提供了完整的代码示例，展示了如何通过按钮触发地图平滑移动到指定位置。这些动画技术可应用于地图定位、轨迹播放等WebGIS场景，使交互更加自然流畅。
2026-03-16 09:54:17
284
原创 188.Vue3 + OpenLayers 实战：实现电子围栏绘制、编辑、删除、GeoJSON 导出
摘要：本文介绍了一个基于Vue3和OpenLayers开发的电子围栏系统，实现了围栏绘制、编辑、删除、列表联动、高亮显示及GeoJSON导出功能。系统采用ElementPlus组件和FileSaver插件，适用于智慧城市、物流监控等场景。项目结构清晰，核心功能完整，并提出了面积计算、数据库存储等扩展方向，为GIS数据管理提供了实用解决方案。（149字）
2026-03-13 14:47:10
325
原创 187.Vue3 + OpenLayers 实现多边形绘制、删除、编辑及双向高亮显示
摘要：本文介绍了一个基于Vue3和OpenLayers实现的WebGIS多边形编辑系统。系统支持多边形绘制、修改、删除功能，实现了地图与列表的双向交互，包括鼠标悬停高亮和点击高亮效果。技术栈采用Vue3作为前端框架，OpenLayers处理地图功能，ElementPlus提供UI组件。核心功能通过维护两个数据集合(list和drawfeatures)实现数据同步，并利用OpenLayers的Draw、Modify、Select等交互组件完成图形操作。该系统适用于围栏管理、区域管理等WebGIS项目开发场景。
2026-03-12 10:16:37
328
原创 1.在 Vue 3 中使用 Cesium 快速展示三维地球
摘要：本文介绍了一个基于Vue3+TypeScript+Cesium的WebGIS三维地球展示方案。通过Composition API实现简洁的组件化开发，使用Cesium 1.131.0构建三维地球视图，并采用OpenStreetMap免费底图。文章提供了完整的代码示例，包含初始化配置、相机定位和资源释放等关键实现，特别适合初学者快速上手。该方案不依赖Cesium Ion服务，无需Token即可本地运行，实现了基本的三维交互功能（旋转、缩放、视角切换等），为Vue开发者提供了一个轻量级的Cesium入门实
2025-12-23 11:13:08
970
原创 【MySQL入门】一文搞懂 SQL DCL 核心语法
摘要：SQLDCL（数据控制语言）是数据库安全的核心工具，通过GRANT和REVOKE命令实现权限管理。权限分为对象权限（针对特定表的SELECT/INSERT等）和系统权限（如CREATE TABLE）。重点解析了WITH GRANTOPTION的安全风险，建议仅限管理员使用。推荐采用角色管理提升效率，遵循最小权限原则，限制IP连接源。文章包含实战语法示例和权限撤销的级联处理，强调权限审计的重要性，为构建安全数据库提供专业指导。（149字）
2025-12-05 17:11:06
1050
原创 【MySQL入门】一文搞懂 SQL DQL 核心语法
摘要：SQL数据查询语言(DQL)是后端开发和数据分析的核心技能，涵盖了90%的SQL使用场景。本文系统讲解DQL语法体系，重点解析： 执行顺序（FROM→WHERE→GROUP BY→HAVING→SELECT→ORDER BY→LIMIT） 分组查询关键：WHERE过滤原始数据，HAVING筛选分组结果 性能优化要点：避免SELECT *、LIKE前导通配符等常见陷阱 聚合函数使用：COUNT/SUM/AVG等函数的特性及NULL值处理 文章包含典型场景示例和面试高频问题解析，如"为什么WHE
2025-12-02 09:54:02
1119
原创 【MySQL入门】一文搞懂 SQL DML 数据增删改 + “删库跑路”避坑指南
《SQL DML操作核心要点与安全实践》 本文系统梳理了SQL数据操作语言(DML)的核心操作与安全注意事项。主要内容包括： INSERT操作四种写法：推荐明确列名的标准写法，支持批量插入和SELECT插入 UPDATE/DELETE操作必须严格检查WHERE条件，否则可能造成全表误操作 DELETE与TRUNCATE的对比：DELETE支持条件删除和回滚，TRUNCATE效率更高但不可逆 生产环境安全实践：推荐开启事务、采用"先查后删"方法，避免数据事故 文章强调DML操作虽语法简单但
2025-11-27 14:55:54
589
原创 【MySQL入门】一文搞懂 SQL DDL 核心语法 (建库、建表、修改)
本文整理了MySQL DDL(数据定义语言)的详细学习笔记，涵盖数据库操作、表创建与修改等核心内容。重点讲解了数据库的创建删除、表结构设计的数据类型选择(如CHAR/VARCHAR区别)、ALTER修改表结构的MODIFY/CHANGE区别，以及DROP与TRUNCATE的不同作用。特别强调了金额需用DECIMAL、字段命名规范等实用技巧，适合MySQL初学者系统学习数据库定义操作，避免常见语法错误。
2025-11-26 10:33:09
756
原创 186.在Vue3中使用OpenLayers实现添加、删除、修改 Feature 信息，双向互动
本文介绍了一个基于Vue3+OpenLayers的WebGIS要素管理模块实现方案。该方案支持地图绘制多边形、要素列表管理、双向交互高亮等核心功能，采用Composition API和TypeScript开发。关键技术点包括：使用OpenLayers的Draw、Modify、Select交互实现要素操作；通过VectorSource管理要素数据；利用Vue3的响应式特性实现地图与列表的双向同步。文章提供了完整源码，并详细讲解了实现思路，包括数据源管理、交互控制、样式更新等核心逻辑。该方案适用于地理围栏、区域
2025-10-28 11:45:57
811
2
原创 185.在Vue3中使用OpenLayers解决 drawend 后不能获取当前 feature 的办法
【摘要】本文解析了Vue3+OpenLayers绘图时常见的drawend事件中无法立即获取新绘制feature的问题。通过对比实验发现：source.getFeatures()在事件触发时尚未更新，而直接从事件参数evt.feature可正确获取。文章提供了完整Vue3代码示例，演示两种获取方式的差异，并给出替代方案：使用source.on('addfeature')监听或结合Select/Modify交互。关键点在于理解OpenLayers的事件触发顺序，避免在drawend中依赖未更新的source数
2025-10-24 09:58:11
786
原创 184.在Vue3中使用OpenLayers实现瓦片地图 preload，减少过渡期间的空白区域
本文对比了OpenLayers瓦片地图中preload参数的不同设置效果。上方地图使用preload:Infinity实现平滑缩放平移，几乎无空白瓦片；下方默认preload:0的地图则会出现明显加载延迟。文章详细解释了preload参数的作用原理：控制预加载周边瓦片的层级数，0表示仅加载当前视图范围，而Infinity会尽可能预加载周边瓦片。同时提供了完整的Vue3实现代码，并给出性能优化建议：根据设备类型和网络条件选择合适的preload值（推荐1-2），配合缓存策略使用。最后解答了常见问题，强调在移动
2025-10-23 09:46:44
794
原创 183.在Vue3中使用OpenLayers实现滑动选择某 feature 高亮并修改样式
本文介绍了在Vue3+OpenLayers中实现地图要素高亮交互的完整方案。通过加载GeoJSON数据创建矢量图层，利用pointermove事件监听鼠标位置，使用forEachFeatureAtPixel方法获取当前要素，并采用独立的高亮图层管理选中状态。文章提供了完整的TypeScript实现代码，包含异步数据加载、样式设置、事件处理及资源清理等关键功能。重点解析了单独高亮图层的优势、性能优化建议及不同数据加载方式的适用场景。该方案适用于行政区划展示等需要要素交互的地图应用，具有可维护性强、易于扩展的特
2025-10-22 16:56:46
512
原创 182.Vue3 + OpenLayers：加载 JSON 热力图，动态调节半径大小与模糊程度
摘要：本文介绍如何在Vue3+OpenLayers中实现热力图可视化功能。通过加载本地JSON数据，使用滑块控件动态调节热力半径（1-50）和模糊程度（1-50），实现数据密集度的直观展示。核心代码展示了热力图图层的创建、参数绑定和地图初始化过程，并提供了标准GeoJSON数据格式示例。该方案适用于人流分析、环境监测等场景，具有参数可调、交互实时的特点，支持从静态展示到动态更新的多种应用需求。
2025-10-21 09:49:51
427
原创 181.Vue3 + OpenLayers：根据卫星 lat、lon、alt、俯仰角、方位角 绘制地面拍摄区域
本文介绍了一种基于Vue3和OpenLayers的前端实现方案，用于在二维地图上可视化卫星相机的地表拍摄覆盖区域(footprint)。文章详细讲解了坐标变换原理和几何推算方法，包括：1) 使用fromLonLat将经纬度转为WebMercator投影坐标；2) 俯仰角pitch的定义与计算；3) 沿光轴向地表的投影距离公式；4) 方位角的分解方法。同时提供了完整的Vue3 Composition API代码示例，包含地图初始化、KMZ文件读取、要素样式设置等功能。文章还针对常见问题给出改进建议，如更严格的
2025-10-17 09:45:33
977
原创 180.在 Vue3 中使用 OpenLayers 实现多个多边形的绘制、编辑、删除与清空
【摘要】本文介绍如何在Vue3+TypeScript环境下使用OpenLayers实现多边形地图交互功能。通过Composition API封装核心逻辑，实现了多边形绘制、编辑、删除及清空等操作。关键技术包括：使用VectorLayer管理图形数据，Draw/Modify/Select交互控制，以及通过ref()管理交互状态。文中提供了完整代码示例，并解决了交互对象叠加问题，为开发GIS应用提供了基础模块。该方案支持扩展为数据库存储、后端交互等高级功能。
2025-10-16 10:18:48
768
原创 179.在Vue3中使用OpenLayers实现选择 Feature 弹窗并删除所选要素
本文介绍了在Vue3+OpenLayers中实现地图要素点击交互功能的技术方案。通过Select交互监听要素点击事件，结合Overlay弹窗显示"删除"和"关闭"按钮，实现了要素删除功能。核心代码展示了如何加载GeoJSON数据、设置要素样式、处理选择事件以及通过VectorSource删除要素。该方案适用于WebGIS中的要素管理场景，可扩展为包含属性显示、二次确认等功能的完整解决方案。文章提供了完整的Vue3+TypeScript实现代码和详细的实现思路，为开发者
2025-10-15 10:25:46
518
原创 178.在vue3中使用OpenLayers实现删除选中的feature
摘要：本文介绍了在Vue3+OpenLayers项目中实现地图要素删除功能的方法。通过Select交互选择要素，使用removeFeature()方法删除选中的矢量要素，并添加确认提示防止误操作。文章包含完整代码示例，核心原理分析，常见问题解答以及扩展思路，适合直接应用于生产项目或作为学习参考。技术栈采用Vue3+CompositionAPI、OpenLayers v10+和ElementPlus，通过GeoJSON格式数据进行演示。
2025-10-14 14:10:43
501
原创 177.在Vue3中使用OpenLayers实现卫星运动轨迹动画（支持播放速度调整）
摘要：本文介绍了一个基于Vue3和OpenLayers的卫星轨迹可视化项目，实现了卫星运动轨迹的动态展示和播放控制功能。项目通过TLE数据计算卫星位置，使用滑块控制播放速度（0-100倍速），支持暂停/继续功能。核心实现包括：利用satellite.js解析TLE数据、OpenLayers的VectorLayer渲染轨迹、Vue3响应式控制播放参数。扩展方向包括实时数据接入、三维可视化等。文章提供了完整的代码实现，适合地理可视化、动态数据展示等应用场景开发参考。
2025-10-10 15:55:28
512
原创 176.在vue3中使用OpenLayers实现上传 CSV 文件并导出为 GeoJSON
摘要：本文介绍了一个基于Vue3和OpenLayers的CSV转GeoJSON工具实现方案。该工具支持上传包含地理坐标的CSV文件（支持点、线、面三种几何类型），在地图上可视化展示，并能导出为标准GeoJSON格式。文章详细说明了CSV文件格式要求、依赖安装、核心代码实现（包括地图初始化、CSV解析、几何要素创建和GeoJSON导出等功能），并提供了完整示例和测试方法。该方案采用composition API和TypeScript开发，具有自动坐标系转换、属性保留等特点，适用于地理数据转换和可视化场景。
2025-10-09 16:08:01
364
原创 175.在Vue3中使用OpenLayers上传 GeoJSON 文件，展示图形并导出 CSV 文件
本文介绍了一个基于Vue3和OpenLayers实现的地理数据可视化项目。项目主要功能包括：1)上传GeoJSON文件并在OpenLayers地图上展示矢量数据；2)设置图形样式（填充、描边、文字标注）；3)将GeoJSON数据导出为CSV格式文件。技术栈采用Vue3 Composition API、Vite、ElementPlus UI组件，并配合PapaParse和FileSaver工具实现CSV解析和文件保存功能。项目完整代码展示了地图初始化、文件读取、数据转换和导出的完整流程，适用于GIS、数据可视
2025-09-22 10:42:50
893
原创 174.在Vue3中使用OpenLayers实现小汽车移动轨迹动画 —— 走过后轨道呈现不同颜色（带开始 / 暂停 / 结束）
本文介绍了如何使用Vue3和OpenLayers实现小汽车沿轨迹移动的动画效果。通过设置轨迹数据、控制动画播放（开始/暂停/结束）、调整移动速度，并实时显示已走过的路径（用不同颜色标记）。代码包含地图初始化、数据源管理、动画控制等核心功能，适合前端开发者快速集成到项目中。文章还提供了常见问题解答，如方向调整、坐标转换等实用技巧。
2025-09-19 14:25:41
1190
原创 173.在Vue3中使用OpenLayers实现小汽车移动轨迹动画（带开始、暂停、结束功能键）
摘要：本文介绍如何使用Vue3+OpenLayers实现小汽车轨迹动画，包含开始/暂停/结束功能。通过LineString定义轨迹路线，用Feature<Point>表示车辆，在requestAnimationFrame循环中计算坐标点和行驶角度，实时更新车辆位置和方向。代码提供了轨迹绘制、动画实现和播放控制的核心方法，适用于物流配送、车辆跟踪等场景，并建议了动态加载轨迹、速度控制等优化方向。实现效果包括车辆沿轨迹移动、方向跟随路线变化、动画控制功能等。
2025-09-18 10:20:44
879
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人