- 博客(242)
- 收藏
- 关注
RSS订阅
原创 Vue3＋Openlayers教程导航页【目录】
欢迎来到 Vue3＋Openlayers 系列教程，这里是我在 CSDN 编写的所有 Vue3＋Openlayers 系列相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Openlayers 的强大魅力！
2025-04-18 16:08:22
233
2
原创 Three.js 教程导航页【目录总览】，持续更新中......
欢迎来到 Three.js 系列教程，这里是我在 CSDN 编写的所有 Three.js 相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Three.js 的强大魅力！
2025-04-18 12:42:52
263
原创 158.Vue3 + OpenLayers 实现多个点的 Envelope（外接矩形）绘制与面积计算
本文介绍了一个基于Vue3和OpenLayers实现多点包围矩形(envelope)计算的WebGIS应用。通过Turf.js库生成多个坐标点的最小外接矩形，并实时计算显示面积。系统支持地图加载、矩形绘制、面积计算和图层清除功能，代码结构清晰，使用Vite构建工具和Element Plus组件库。项目采用模块化设计，核心组件为EnvelopeMap.vue，实现了OpenLayers与Turf.js的完美结合，为地理空间分析提供了可视化解决方案。文章还提出了支持交互式点位添加、多组分析等扩展建议。
2025-07-17 11:14:52
146
原创 157.Vue3 + OpenLayers + Turf 实现根据多边形坐标计算面积功能
本文介绍了基于Vue3+OpenLayers+Turf.js实现地图多边形面积计算的方法。通过指定坐标点，系统可自动计算多边形面积（km²）并在地图上渲染显示。核心功能包括：使用Turf.js进行地理空间计算、OpenLayers地图渲染、支持EPSG投影转换。代码示例展示了如何初始化地图、绘制多边形、计算面积及清除图层等操作，适用于农业、国土等领域的地块测量需求。文章还提出了手绘多边形、实时面积显示等拓展功能建议，为WebGIS开发提供了实用解决方案。
2025-07-17 10:43:29
82
原创 156.Vue3 + OpenLayers + Turf 实现多线段绘制与贝塞尔曲线平滑展示
本文介绍了基于Vue3、OpenLayers和Turf.js实现地图路径平滑处理的技术方案。通过Turf.js的bezierSpline方法，可以将生硬的折线转换为视觉更自然的贝塞尔曲线。文章详细展示了系统功能（多段线绘制、曲线平滑、图层管理）和核心代码实现，包括地图初始化、GeoJSON数据处理等关键步骤。该方案适用于轨迹回放、导航路径可视化等场景，并支持进一步扩展如轨迹动画、自定义曲率控制等功能。文末提供了完整代码示例和相关技术文档链接。
2025-07-16 11:05:51
148
原创 155.Vue3中使用OpenLayers+Turf获取两点之间的距离
本文介绍了在Vue3项目中使用OpenLayers和Turf.js实现两点距离测量的方法。通过组合API开发地图组件，展示了如何绘制固定两点及连线，并利用Turf.js计算两点间距离（单位：公里）。文章包含完整代码实现，包括地图初始化、坐标转换、距离计算和图层清除功能，并提出了用户交互测距等扩展思路。该方案充分发挥了Turf.js在GeoJSON数据处理上的优势，为地图开发中的几何计算提供了高效解决方案。
2025-07-16 10:48:30
126
原创 154.Vue3 + OpenLayers + Turf.js 实现椭圆形绘制功能
本文介绍了在Vue3中使用OpenLayers和Turf.js绘制地理椭圆形的实现方法。项目通过Turf.js的ellipse函数生成GeoJSON格式的椭圆数据，利用OpenLayers进行地图渲染和交互。主要功能包括：1）点击按钮绘制指定参数的椭圆；2）清除图层功能；3）基于高德地图底图展示。代码示例完整展示了地图初始化、数据渲染和样式配置过程，并提出了进阶改进建议，如交互式绘制、参数设置和导出功能等。该方案适用于需要地理图形绘制的WebGIS应用场景，如地块管理和资源调度系统。
2025-07-15 10:06:46
95
原创 153.在 Vue 3 中使用 OpenLayers + Cesium 实现 2D/3D 地图切换效果
📝摘要：本文介绍使用Vue3+OpenLayers+Cesium实现2D/3D地图切换的解决方案，适用于智慧城市、数字孪生等场景。技术栈包括ol-cesium作为桥梁，Vite构建工具简化配置。核心代码演示了地图初始化、地形加载和视图切换功能，并提供了常见问题排查方法。该方案支持扩展3D模型加载、交互功能等，为地理可视化项目提供基础框架。
2025-07-15 09:38:10
826
原创 152.Vue3中使用OpenLayers+Turf实现遮罩布挖洞效果
摘要： 该项目演示了如何在Vue3中使用OpenLayers和Turf.js实现地图遮罩布的挖洞效果，主要功能包括： 通过Turf.js的turf.mask()方法实现遮罩布挖洞 支持绘制小洞区域、遮罩布以及最终合成效果 使用OpenLayers进行地图渲染和图层管理 包含清除图层功能，展示GeoJSON与OpenLayers的数据转换 应用场景包括土地规划、可视区域剔除等GIS操作 技术栈：Vue3+OpenLayers+Turf.js+ElementPlus，代码完整可用。
2025-07-14 10:55:49
127
原创 151.Vue3中使用OpenLayers在3857坐标系下导出KML文件，自定义name和style
本文介绍了基于Vue3和OpenLayers实现地图多边形绘制与KML导出的技术方案。核心功能包括：支持EPSG:4326（经纬度）与EPSG:3857（Web墨卡托）坐标系转换、自定义多边形样式（填充/边框颜色）、符合GoogleEarth标准的KML文件导出。文章详细解析了技术实现，包括OpenLayers地图初始化、坐标转换逻辑、KML文件生成方法，并提供了完整的Vue组件代码示例。该项目采用组件化开发，依赖ol、file-saver等核心库，适用于WebGIS开发中常见的地理数据可视化与导出需求。
2025-07-14 09:48:56
100
原创 150.在Vue3中使用OpenLayers实现显示多个多边形并导出 KML 文件（含自定义样式与名称）
本文介绍了如何在Vue3项目中集成OpenLayers实现多边形地图可视化功能。通过Composition API初始化地图，展示多个自定义多边形（支持设置名称和颜色样式），并提供了KML文件导出功能。核心包括：1) 使用OpenLayers创建地图和矢量图层；2) 处理多边形数据（坐标、名称、样式）；3) 通过file-saver库实现KML导出。技术栈涉及Vue3、OpenLayers、ElementPlus等，适用于地理数据可视化、地图应用开发等场景，代码示例完整可直接复用。
2025-07-10 10:56:25
324
原创 149.在 Vue3 中使用 OpenLayers 绘制多边形并导出 KML 文件（含自定义 name 与 style）
本文介绍了如何在Vue3项目中使用OpenLayers实现多边形绘制并导出为KML文件的技术方案。通过CompositionAPI结合ElementPlus和file-saver库，详细讲解了地图初始化、多边形绘制交互以及KML导出的完整流程。核心功能包括：创建基础地图视图、配置多边形绘制工具、自定义图形样式与名称属性、将要素序列化为KML格式文件。文章还提供了完整的代码示例，并建议了拓展应用方向，如支持多种要素类型、个性化样式配置等，适用于各类GIS可视化项目开发。
2025-07-10 10:41:12
360
原创 149.在 Vue3 中使用 OpenLayers 绘制多边形（限制最小边数和最大边数）
摘要：本文展示了如何在Vue3项目中使用OpenLayers实现多边形绘制功能，并限制最少4条边、最多6条边。主要技术点包括：1）通过Draw交互的minPoints/maxPoints参数控制边数；2）使用叠加样式显示红色顶点圆点；3）基于Composition API实现地图交互。示例提供了完整的源码实现，包含地图初始化、绘制控制和图形清除功能，并探讨了样式叠加渲染技巧和功能拓展方向。该方案适用于需要精确控制用户绘图行为的GIS应用场景。（148字）
2025-07-09 09:47:24
213
原创 148. 在 Vue3 中使用 OpenLayers 在地图上添加 ECharts 柱状图
的组合非常适合用于 Web GIS 数据可视化项目，配合 Vue3 可以实现高度组件化、模块化的开发体验。如果这篇文章对你有帮助，欢迎一键三连支持！如需源码或遇到问题欢迎评论区留言交流 👇。
2025-07-09 09:31:38
195
原创 148.在 Vue3 中使用 OpenLayers 在地图上添加 ECharts 环形图
「Vue3+OpenLayers集成ECharts环形地图方案」 本文介绍基于Vue3+OpenLayers实现地图环形图叠加的技术方案。核心采用ol-echarts桥接库，将ECharts图表（Pie类型）通过地理坐标绑定到OpenStreetMap上。关键实现包括： 1️⃣ 使用EChartsLayer包装图表数据 2️⃣ 坐标转换（EPSG:4326→3857） 3️⃣ 设置hideOnMoving参数保持图表可见性 4️⃣ 通过coordinates属性精确定位城市坐标 组件支持功能： 🔹 多城市
2025-07-08 10:12:10
157
原创 147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
摘要：本文介绍如何在Vue3项目中集成OpenLayers和ECharts实现飞机航线可视化。通过ol-echarts插件将ECharts动画嵌入OpenLayers地图，展示北京、上海等城市间的动态航线效果。文章包含完整的实现步骤：1)项目搭建与环境配置；2)GeoJSON地图数据准备；3)核心代码实现（包括地图初始化、航线数据转换和动画渲染）；4)常见问题解决方案。该项目支持地图缩放拖拽且动画不丢失，可作为地理可视化开发的基础模板。
2025-07-08 09:59:09
189
原创 146. 在 Vue3 中使用 OpenLayers 添加 ECharts 饼图
【摘要】本文演示了在Vue3项目中使用Composition API集成OpenLayers和ECharts实现地图可视化。通过ol-echarts桥接库，在地图指定经纬度位置叠加交互式饼图（支持tooltip悬停），并应用CSS滤镜（hue-rotate）增强视觉效果。关键技术点包括：EPSG:4326坐标投影定位、ECharts图层动态渲染及postcompose事件滤镜处理。该方案适用于产业分布、人口统计等数据可视化场景，文中还提供了扩展建议（动态数据加载、响应式调整等）和完整代码实现。
2025-07-07 15:39:51
180
原创 145.在 Vue3 中使用 OpenLayers 设置原始图、模糊、色相翻转、阴影效果
本文介绍了使用OpenLayers和Vue3实现地图滤镜效果的简单方法。通过CSS filter属性直接对地图canvas元素设置样式，可快速实现模糊、色相翻转、阴影等视觉效果，无需修改地图图层。文章提供了完整代码示例，展示了如何通过按钮切换不同滤镜（如blur(5px)、hue-rotate(180deg)等），并强制地图重新渲染。该方法不影响地图交互，实现简单灵活，适合地图视觉风格定制。还延伸介绍了其他可能的滤镜效果组合和应用场景。
2025-07-07 14:23:16
138
原创 144.在 Vue3 中使用 OpenLayers 设置反转色 / 复古色 / 灰度图 / 原始图
《Vue3+OpenLayers实现地图滤镜效果》摘要：本文介绍使用Vue3和OpenLayers9实现地图样式切换功能，包括原始图、灰度图、反转色和复古色四种滤镜效果。通过CSS滤镜直接作用于OpenLayers生成的canvas元素，实现简单高效的地图样式变换。文章提供完整代码示例，并建议扩展玩法如组合滤镜、滑块调节、夜间模式等应用场景。该方案适用于大屏可视化、主题切换等场景，提升地图展示的专业性和视觉效果。需要注意浏览器兼容性和canvas元素选择时机等技术细节。
2025-07-04 10:31:08
519
原创 143.在 Vue 3 中使用 OpenLayers 调节地图的明亮度、对比度、饱和度
摘要： 本文介绍了一种在Vue3项目中动态调节OpenLayers地图色彩（亮度/对比度/饱和度）的轻量级方案。通过CSS Filter直接修改地图Canvas的滤镜属性，结合Composition API管理滑块状态，实现无需重绘瓦片的地图风格动态调整。技术栈采用Vue3+OpenLayers+ElementPlus，核心是通过map.render()触发重绘并应用滤镜。方案具有GPU加速性能优势，支持扩展其他滤镜效果，适用于可视化大屏、夜间模式等场景，但需注意IE兼容性问题。该方法为地图可视化提供了高效
2025-07-04 10:13:16
151
原创 142.在 Vue3 中使用 OpenLayers 实现图层透明度调节功能
📝摘要：本文介绍了在Vue3+OpenLayers环境下实现地图图层透明度实时调节的方法。通过ElementPlus滑块组件绑定图层透明度值，利用watch监听实现动态效果。技术栈包括Vue3、OpenLayers、ElementPlus，使用StadiaMaps作为底图服务。文章提供了完整代码示例，包含模板、逻辑和样式实现，并说明了EPSG投影转换、透明度值域转换等注意事项。最后还建议了项目拓展方向如多图层控制、组件封装等，适合GIS可视化开发者参考。
2025-07-03 12:23:36
379
原创 141.在 Vue 3 中使用 OpenLayers Link 交互：把地图中心点 / 缩放级别 / 旋转角度实时写进 URL，并同步解析显示
本文介绍了使用OpenLayers的Link交互实现地图状态与URL参数双向同步的纯前端解决方案。通过监听地图移动、缩放等事件，自动更新URL中的坐标、缩放级别和旋转角度参数，同时支持浏览器历史记录导航恢复地图状态。文章详细解析了技术原理（Link交互+popstate监听），提供了Vue3+CompositionAPI的完整实现代码，并展示了参数面板实时显示功能。该方案适用于DEMO分享、地图书签等场景，无需后端即可实现"场景定位"功能。最后还给出了常见问题处理建议和延伸应用场景，如地
2025-07-01 14:10:32
268
原创 140.在 Vue3 中使用 OpenLayers 使用缩略图切换底图
本文介绍了在Vue3项目中结合OpenLayers实现底图切换功能的方法。通过右下角的缩略图按钮，用户可以直观地在OSM、Google和高德地图三种底图间切换。文章详细说明了项目环境、核心功能思路和完整代码实现，包括使用Tooltip组件、TileLayer图层控制以及当前选中状态的高亮显示。该方案采用Vue3 Composition API编写，通过设置图层可见性实现底图切换，并提供了地图源地址参考。最后还建议可扩展支持更多地图类型和样式，为地图类前端项目提供了实用的交互解决方案。
2025-07-01 10:31:00
94
原创 139.在 Vue3 中使用 OpenLayers 绘制多边形拐点（不同形状表示）
📝【Vue3+OpenLayers多边形顶点标注实现】 本文介绍如何在Vue3中使用OpenLayers绘制多边形，并为顶点添加多样图形标识（三角形/矩形/星形/十字等）。通过OpenLayers的Draw交互获取多边形坐标，利用RegularShape生成顶点样式，结合ElementPlus提供形状切换功能。 🔧 核心技术： Vue3 Composition API 管理状态 OpenLayers 实现地图绘制与图形渲染 动态样式切换（支持7种图形及组合堆叠） 💡 扩展方向：显示坐标值、导出GeoJ
2025-06-30 11:55:28
201
原创 138.Vue3 + OpenLayers 实战：绘制矩形并标记首尾点、中心点与所有经纬度坐标
📌 Vue3+OpenLayers矩形绘制功能实现 本文通过Vue3和OpenLayers7实现了一个实用的地图绘制功能，主要特点包括： 1️⃣ 一键绘制矩形区域（使用createBox()特殊技巧） 2️⃣ 自动标记终点和中心点坐标 3️⃣ 底部展示所有点的经纬度数组 4️⃣ 使用ElementPlus作为UI组件 5️⃣ 采用Composition API编写 6️⃣ 包含完整的坐标计算和格式化逻辑 核心代码解析了如何利用ol/interaction/Draw的"Circle"类型
2025-06-27 13:56:54
156
原创 137.在 Vue3 中使用 OpenLayers 实现蒙版图层遮罩挖空，显示底图图像
这篇文章介绍了如何在Vue3+OpenLayers项目中实现图层遮罩效果，主要步骤包括： 安装ol和ol-ext依赖 初始化地图并添加绘制交互 使用ol-ext的Mask和Crop滤镜实现遮罩和剪切 提供了完整的Vue3代码示例 技术要点： 通过Draw交互绘制多边形区域 使用Modify交互编辑边界 Mask滤镜挖空指定区域外的内容 Crop滤镜只显示指定区域内的地图 该方案适合WebGIS项目中的区域聚焦展示需求，支持自由绘制、编辑边界和恢复原图等功能。文章还提供了常见问题解答和参考资料链接。
2025-06-26 11:21:00
178
原创 共享单车扫码解锁全流程超详解
共享单车扫码解锁技术解析：150字摘要 共享单车"扫码即走"背后是一套完整的物联网技术体系，涉及前端、后端与智能锁的协同工作。系统采用动态加密二维码(含HMAC签名)和双通道通信策略(蜂窝MQTT/蓝牙BLE)，3秒内完成鉴权与解锁。核心流程包括：二维码解析、用户鉴权、指令下发(蜂窝直连或蓝牙中转)、电机驱动解锁及状态回传。技术关键点在于确保低时延(<3s)、高安全(防重放攻击)和高并发(支持每秒数万次请求)。系统采用Node.js后端、Arduino锁控固件和Flutter客户端
2025-06-25 17:37:53
916
原创 前端开发中如何优雅地使用 Server-Sent Events（SSE）实现实时推送
《基于Vue3与SSE的实时任务进度推送系统实践》摘要：本文介绍了使用Vue3+Node.js实现SSE(Server-Sent Events)实时通讯的方案。SSE作为轻量级的服务器推送技术，适用于任务进度、金融数据等单向实时场景。文章详细解析了SSE的报文格式与自动重连机制，并提供完整实现：Node后端以每10%进度推送数据，Vue3前端通过Composition API封装useSSE钩子接收并展示进度条。对比WebSocket，SSE在简单推送场景中更轻量易用，但需注意跨域、二进制数据等限制。该方案
2025-06-24 10:09:12
973
原创 WebSocket 进阶全攻略：心跳机制、断线重连、socket.io、鉴权与WSS配置
本文深入讲解WebSocket的4个进阶实战技巧：1）心跳机制+断线重连的实现原理与Vue示例代码；2）使用socket.io快速构建高效通信系统（对比原生WebSocket优势）；3）WebSocket鉴权机制的两种实现方式；4）生产环境必备的WSS加密通信配置。文章包含丰富的代码示例，涵盖Vue客户端和Node.js服务端实现，并评估各项技术的实用性等级。最后推荐WebSocket相关学习资源，适合具备WebSocket基础想提升实战能力的前端和全栈开发者参考。
2025-06-23 16:48:13
1452
原创 前端实现即时通讯：短轮询、长轮询、SSE 与 WebSocket 全面解析
本文介绍了前端实现即时通讯的四种主流技术： 1️⃣ 短轮询：周期性请求服务器，实现简单但资源消耗大 2️⃣ 长轮询：服务器保持连接直到有数据，接近实时但维护复杂 3️⃣ SSE：服务器单向推送事件流，适合通知类场景 4️⃣ WebSocket：全双工通信，适用于高实时需求场景 对比分析了各项技术的原理、代码示例、优缺点及适用场景，建议根据具体业务需求选择：WebSocket适合双向通信，SSE适合单向推送，轮询适合简单实现。
2025-06-19 16:48:25
1701
原创 如何限制一个账号只能在一处登录
实现账号唯一登录的两种方案：1️⃣Token机制（推荐）：用户登录生成Token并存Redis，后续请求校验Token一致性，新登录会替换旧Token使其失效。2️⃣Session机制：用session_id与Redis映射进行校验。两种方案都需配合Redis存储有效凭证。前端建议保存Token并处理401状态，可扩展WebSocket实现实时踢人通知。安全注意事项包括使用HttpOnly Cookie、HTTPS传输及定期刷新Token。系统可扩展设备管理、异地登录提醒等功能。推荐采用JWT+Redis+
2025-06-18 10:01:35
828
原创 一套代码，如何同时适配移动端和 PC 端？全网最全方案汇总与实战解析
前端双端适配8大方案解析：针对移动端和PC端适配需求，本文系统梳理了8种主流解决方案。基础方案包括CSS响应式布局（MediaQuery+Flex/Grid）和移动端专用方案（rem/vw）；进阶方案涉及JavaScript动态判断（useMediaQuery）、按需加载（vite-plugin）和TailwindCSS响应式设计；终极方案建议采用双端组件拆分。各方案均有适用场景和优劣势：MediaQuery适合简单页面但维护困难，rem方案移动端适配流畅但PC兼容性差，Tailwind开发高效但需学习新语
2025-06-17 15:21:10
805
原创 136.在 Vue3 中使用 OpenLayers 实现 GroupLayer 的添加、删除、显示、隐藏
本文介绍了在Vue3中使用OpenLayers实现图层组（GroupLayer）的操作方法。通过XYZ图层加载高德地图，展示了如何动态添加/删除图层到图层组（使用group.getLayers().push()和removeAt()方法），以及控制图层组的显示/隐藏（setVisible()）。核心代码采用Vue3的script setup写法，包含完整的初始化和操作实现。技术要点包括高德地图URL配置、图层遍历删除和图层组显隐控制。文章还提供了运行所需的npm依赖包和参考资料链接。
2025-06-16 15:33:13
43
原创 135.在 Vue3 中使用 OpenLayers 画多边形，并用圆点标识每个转折点
本文介绍了如何在Vue3项目中结合OpenLayers实现多边形绘制功能，并自动标记节点。通过CompositionAPI封装核心逻辑，使用ElementPlus提供交互控制，主要功能包括：绘制多边形、停止绘制、清除图形等。技术栈包含Vue3、OpenLayers、ElementPlus和TailwindCSS，核心实现思路是利用MultiPoint将顶点坐标转为圆点几何体，并通过样式数组分别控制边界和节点显示。组件封装在DrawPolygonMap.vue中，提供了完整代码示例。文章最后还建议了编辑图形、
2025-06-16 14:43:13
160
原创 134.在 Vue3 中使用 OpenLayers 根据坐标点数组绘制多边形并显示面积数
摘要：本文介绍了一个基于Vue3和OpenLayers实现的地图多边形绘制与面积计算系统。该项目主要功能包括：加载OSM底图、根据坐标绘制多边形、计算面积（平方公里）并以弹窗显示、支持图层清除。技术栈采用Vue3+scriptsetup、OpenLayers v8+和ElementPlus。文章详细展示了代码结构，包含地图初始化、多边形绘制、面积计算和弹窗交互的实现方法，同时提供了坐标转换、单位换算等技术要点说明。最后还提出了支持GeoJSON、多图层叠加等进阶优化方向，为开发者提供了完整的地图功能实现参考
2025-06-03 11:34:48
208
原创 133.在 Vue3 中使用 OpenLayers 实现画多边形、任意编辑、遮罩与剪切处理功能
《Vue3+OpenLayers实现多边形绘制与区域处理》摘要：本文介绍如何基于Vue3+OpenLayers+ol-ext实现地图多边形交互功能。核心功能包括：鼠标绘制任意多边形、拖动顶点编辑边界、遮罩显示（非选区变红）、选区剪切显示及功能重置。技术方案采用OpenLayers处理地图渲染，ol-ext实现高级遮罩/剪切效果，ElementPlus提供UI控件。该方案适用于城市规划、园区展示等需要区域标记的场景，完整代码展示了从初始化、绘制、编辑到特效处理的全流程实现。
2025-05-29 17:01:58
452
原创 132.在 Vue3 中使用 OpenLayers 实现地图剪切与遮罩效果
本文介绍了如何在Vue3中使用OpenLayers和ol-ext插件实现地图遮罩与裁剪功能。通过加载中国边界GeoJSON数据，可进行三种操作：点击"遮罩"按钮对指定区域进行灰色半透明遮罩；点击"剪切"按钮仅显示选定区域；点击"取消"恢复原始地图。技术栈包含Vue3 Composition API、OpenLayers地图渲染、ol-ext特效处理以及ElementPlus和TailwindCSS。核心代码展示了地图初始化、遮罩/裁剪功能实现逻辑，
2025-05-28 18:01:34
313
原创 131.在 Vue3 中使用 OpenLayers 测量长度和面积，并支持 modifyend 动态更新数值
📝 OpenLayers测量工具实现摘要 本文介绍了使用Vue3+OpenLayers实现地图测量功能的技术方案。系统支持长度（LineString）和面积（Polygon）测量，主要特性包括： 通过Draw交互实现图形绘制 使用Modify交互支持节点修改 测量结果通过Overlay弹窗实时显示 修改图形时自动更新数值 采用Vue3响应式状态管理 关键技术点： 利用getLength/getArea计算测量值 监听modifyend事件实现动态更新 使用unByKey避免内存泄漏 将测量功能封装为可复用
2025-05-28 17:07:23
226
原创 邮箱验证码登录流程
本文详细描述了用户通过邮箱地址登录的流程，包括前端和后端的处理步骤。前端部分涉及邮箱地址的输入与格式校验、验证码的获取与倒计时显示、验证码的输入与提交等。后端部分包括邮箱地址的校验、验证
2025-05-22 11:09:46
937
原创 130.在 Vue3 中使用 OpenLayers 实现测量长度和面积功能（带尾随数字与关闭按钮）
本文介绍了如何在Vue3和OpenLayers环境中实现一个完整的测量工具，包括测量长度、测量面积、实时显示测量结果以及展示关闭按钮等功能。文章详细说明了项目准备步骤，包括安装依赖和创建项目，并提供了完整的组件源码，支持Composition API。核心实现部分涵盖了地图初始化、测量功能的实现以及清除测量的方法。此外，文章还提供了一些小贴士，如推荐使用ref访问DOM、封装通用composable等，并鼓励读者进一步扩展功能。最后，文章总结了该测量功能模块的实用性，并提供了源码获取和交流的途径。
2025-05-22 10:57:07
1033
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人