- 博客(286)
- 收藏
- 关注
RSS订阅
原创 Vue3＋Openlayers教程导航页【目录】
欢迎来到 Vue3＋Openlayers 系列教程，这里是我在 CSDN 编写的所有 Vue3＋Openlayers 系列相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Openlayers 的强大魅力！
2025-04-18 16:08:22
905
5
原创 Three.js 教程导航页【目录总览】，持续更新中......
欢迎来到 Three.js 系列教程，这里是我在 CSDN 编写的所有 Three.js 相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Three.js 的强大魅力！
2025-04-18 12:42:52
346
原创 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
506
原创 190.Vue3 + OpenLayers 实战：实现地图旋转移动动画 + CSS缩放动画（详解 animate 用法）
本文介绍了基于Vue3和OpenLayers实现地图动画的方法，包含移动、缩放、旋转等效果。通过view.animate()API可实现多段动画串联执行，并支持缓动函数控制动画节奏。示例代码展示了点击按钮触发地图从初始位置移动到指定坐标，同时进行旋转和缩放，最后显示CSS动画提示的完整流程。该方法适用于WebGIS项目中的定位飞行、区域展示等场景，能有效提升用户体验和交互效果。
2026-03-17 10:18:32
362
原创 189.Vue3 + OpenLayers：easing 动画函数详解及在 View.animate() 中的使用
本文介绍了在Vue3+OpenLayers项目中实现地图动画效果的方法。通过View.animate()API结合五种缓动函数(easeIn、easeOut、inAndOut、linear、upAndDown)，可实现不同风格的地图移动动画，包括加速、减速、弹跳等效果。文章提供了完整的代码示例，展示了如何通过按钮触发地图平滑移动到指定位置。这些动画技术可应用于地图定位、轨迹播放等WebGIS场景，使交互更加自然流畅。
2026-03-16 09:54:17
113
原创 188.Vue3 + OpenLayers 实战：实现电子围栏绘制、编辑、删除、GeoJSON 导出
摘要：本文介绍了一个基于Vue3和OpenLayers开发的电子围栏系统，实现了围栏绘制、编辑、删除、列表联动、高亮显示及GeoJSON导出功能。系统采用ElementPlus组件和FileSaver插件，适用于智慧城市、物流监控等场景。项目结构清晰，核心功能完整，并提出了面积计算、数据库存储等扩展方向，为GIS数据管理提供了实用解决方案。（149字）
2026-03-13 14:47:10
167
原创 187.Vue3 + OpenLayers 实现多边形绘制、删除、编辑及双向高亮显示
摘要：本文介绍了一个基于Vue3和OpenLayers实现的WebGIS多边形编辑系统。系统支持多边形绘制、修改、删除功能，实现了地图与列表的双向交互，包括鼠标悬停高亮和点击高亮效果。技术栈采用Vue3作为前端框架，OpenLayers处理地图功能，ElementPlus提供UI组件。核心功能通过维护两个数据集合(list和drawfeatures)实现数据同步，并利用OpenLayers的Draw、Modify、Select等交互组件完成图形操作。该系统适用于围栏管理、区域管理等WebGIS项目开发场景。
2026-03-12 10:16:37
129
原创 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
613
原创 【MySQL入门】一文搞懂 SQL DCL 核心语法
摘要：SQLDCL（数据控制语言）是数据库安全的核心工具，通过GRANT和REVOKE命令实现权限管理。权限分为对象权限（针对特定表的SELECT/INSERT等）和系统权限（如CREATE TABLE）。重点解析了WITH GRANTOPTION的安全风险，建议仅限管理员使用。推荐采用角色管理提升效率，遵循最小权限原则，限制IP连接源。文章包含实战语法示例和权限撤销的级联处理，强调权限审计的重要性，为构建安全数据库提供专业指导。（149字）
2025-12-05 17:11:06
922
原创 【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
993
原创 【MySQL入门】一文搞懂 SQL DML 数据增删改 + “删库跑路”避坑指南
《SQL DML操作核心要点与安全实践》 本文系统梳理了SQL数据操作语言(DML)的核心操作与安全注意事项。主要内容包括： INSERT操作四种写法：推荐明确列名的标准写法，支持批量插入和SELECT插入 UPDATE/DELETE操作必须严格检查WHERE条件，否则可能造成全表误操作 DELETE与TRUNCATE的对比：DELETE支持条件删除和回滚，TRUNCATE效率更高但不可逆 生产环境安全实践：推荐开启事务、采用"先查后删"方法，避免数据事故 文章强调DML操作虽语法简单但
2025-11-27 14:55:54
487
原创 【MySQL入门】一文搞懂 SQL DDL 核心语法 (建库、建表、修改)
本文整理了MySQL DDL(数据定义语言)的详细学习笔记，涵盖数据库操作、表创建与修改等核心内容。重点讲解了数据库的创建删除、表结构设计的数据类型选择(如CHAR/VARCHAR区别)、ALTER修改表结构的MODIFY/CHANGE区别，以及DROP与TRUNCATE的不同作用。特别强调了金额需用DECIMAL、字段命名规范等实用技巧，适合MySQL初学者系统学习数据库定义操作，避免常见语法错误。
2025-11-26 10:33:09
584
原创 186.在Vue3中使用OpenLayers实现添加、删除、修改 Feature 信息，双向互动
本文介绍了一个基于Vue3+OpenLayers的WebGIS要素管理模块实现方案。该方案支持地图绘制多边形、要素列表管理、双向交互高亮等核心功能，采用Composition API和TypeScript开发。关键技术点包括：使用OpenLayers的Draw、Modify、Select交互实现要素操作；通过VectorSource管理要素数据；利用Vue3的响应式特性实现地图与列表的双向同步。文章提供了完整源码，并详细讲解了实现思路，包括数据源管理、交互控制、样式更新等核心逻辑。该方案适用于地理围栏、区域
2025-10-28 11:45:57
588
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
707
原创 184.在Vue3中使用OpenLayers实现瓦片地图 preload，减少过渡期间的空白区域
本文对比了OpenLayers瓦片地图中preload参数的不同设置效果。上方地图使用preload:Infinity实现平滑缩放平移，几乎无空白瓦片；下方默认preload:0的地图则会出现明显加载延迟。文章详细解释了preload参数的作用原理：控制预加载周边瓦片的层级数，0表示仅加载当前视图范围，而Infinity会尽可能预加载周边瓦片。同时提供了完整的Vue3实现代码，并给出性能优化建议：根据设备类型和网络条件选择合适的preload值（推荐1-2），配合缓存策略使用。最后解答了常见问题，强调在移动
2025-10-23 09:46:44
603
原创 183.在Vue3中使用OpenLayers实现滑动选择某 feature 高亮并修改样式
本文介绍了在Vue3+OpenLayers中实现地图要素高亮交互的完整方案。通过加载GeoJSON数据创建矢量图层，利用pointermove事件监听鼠标位置，使用forEachFeatureAtPixel方法获取当前要素，并采用独立的高亮图层管理选中状态。文章提供了完整的TypeScript实现代码，包含异步数据加载、样式设置、事件处理及资源清理等关键功能。重点解析了单独高亮图层的优势、性能优化建议及不同数据加载方式的适用场景。该方案适用于行政区划展示等需要要素交互的地图应用，具有可维护性强、易于扩展的特
2025-10-22 16:56:46
349
原创 182.Vue3 + OpenLayers：加载 JSON 热力图，动态调节半径大小与模糊程度
摘要：本文介绍如何在Vue3+OpenLayers中实现热力图可视化功能。通过加载本地JSON数据，使用滑块控件动态调节热力半径（1-50）和模糊程度（1-50），实现数据密集度的直观展示。核心代码展示了热力图图层的创建、参数绑定和地图初始化过程，并提供了标准GeoJSON数据格式示例。该方案适用于人流分析、环境监测等场景，具有参数可调、交互实时的特点，支持从静态展示到动态更新的多种应用需求。
2025-10-21 09:49:51
298
原创 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
759
原创 180.在 Vue3 中使用 OpenLayers 实现多个多边形的绘制、编辑、删除与清空
【摘要】本文介绍如何在Vue3+TypeScript环境下使用OpenLayers实现多边形地图交互功能。通过Composition API封装核心逻辑，实现了多边形绘制、编辑、删除及清空等操作。关键技术包括：使用VectorLayer管理图形数据，Draw/Modify/Select交互控制，以及通过ref()管理交互状态。文中提供了完整代码示例，并解决了交互对象叠加问题，为开发GIS应用提供了基础模块。该方案支持扩展为数据库存储、后端交互等高级功能。
2025-10-16 10:18:48
608
原创 179.在Vue3中使用OpenLayers实现选择 Feature 弹窗并删除所选要素
本文介绍了在Vue3+OpenLayers中实现地图要素点击交互功能的技术方案。通过Select交互监听要素点击事件，结合Overlay弹窗显示"删除"和"关闭"按钮，实现了要素删除功能。核心代码展示了如何加载GeoJSON数据、设置要素样式、处理选择事件以及通过VectorSource删除要素。该方案适用于WebGIS中的要素管理场景，可扩展为包含属性显示、二次确认等功能的完整解决方案。文章提供了完整的Vue3+TypeScript实现代码和详细的实现思路，为开发者
2025-10-15 10:25:46
315
原创 178.在vue3中使用OpenLayers实现删除选中的feature
摘要：本文介绍了在Vue3+OpenLayers项目中实现地图要素删除功能的方法。通过Select交互选择要素，使用removeFeature()方法删除选中的矢量要素，并添加确认提示防止误操作。文章包含完整代码示例，核心原理分析，常见问题解答以及扩展思路，适合直接应用于生产项目或作为学习参考。技术栈采用Vue3+CompositionAPI、OpenLayers v10+和ElementPlus，通过GeoJSON格式数据进行演示。
2025-10-14 14:10:43
303
原创 177.在Vue3中使用OpenLayers实现卫星运动轨迹动画（支持播放速度调整）
摘要：本文介绍了一个基于Vue3和OpenLayers的卫星轨迹可视化项目，实现了卫星运动轨迹的动态展示和播放控制功能。项目通过TLE数据计算卫星位置，使用滑块控制播放速度（0-100倍速），支持暂停/继续功能。核心实现包括：利用satellite.js解析TLE数据、OpenLayers的VectorLayer渲染轨迹、Vue3响应式控制播放参数。扩展方向包括实时数据接入、三维可视化等。文章提供了完整的代码实现，适合地理可视化、动态数据展示等应用场景开发参考。
2025-10-10 15:55:28
342
原创 176.在vue3中使用OpenLayers实现上传 CSV 文件并导出为 GeoJSON
摘要：本文介绍了一个基于Vue3和OpenLayers的CSV转GeoJSON工具实现方案。该工具支持上传包含地理坐标的CSV文件（支持点、线、面三种几何类型），在地图上可视化展示，并能导出为标准GeoJSON格式。文章详细说明了CSV文件格式要求、依赖安装、核心代码实现（包括地图初始化、CSV解析、几何要素创建和GeoJSON导出等功能），并提供了完整示例和测试方法。该方案采用composition API和TypeScript开发，具有自动坐标系转换、属性保留等特点，适用于地理数据转换和可视化场景。
2025-10-09 16:08:01
268
原创 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
782
原创 174.在Vue3中使用OpenLayers实现小汽车移动轨迹动画 —— 走过后轨道呈现不同颜色（带开始 / 暂停 / 结束）
本文介绍了如何使用Vue3和OpenLayers实现小汽车沿轨迹移动的动画效果。通过设置轨迹数据、控制动画播放（开始/暂停/结束）、调整移动速度，并实时显示已走过的路径（用不同颜色标记）。代码包含地图初始化、数据源管理、动画控制等核心功能，适合前端开发者快速集成到项目中。文章还提供了常见问题解答，如方向调整、坐标转换等实用技巧。
2025-09-19 14:25:41
1034
原创 173.在Vue3中使用OpenLayers实现小汽车移动轨迹动画（带开始、暂停、结束功能键）
摘要：本文介绍如何使用Vue3+OpenLayers实现小汽车轨迹动画，包含开始/暂停/结束功能。通过LineString定义轨迹路线，用Feature<Point>表示车辆，在requestAnimationFrame循环中计算坐标点和行驶角度，实时更新车辆位置和方向。代码提供了轨迹绘制、动画实现和播放控制的核心方法，适用于物流配送、车辆跟踪等场景，并建议了动态加载轨迹、速度控制等优化方向。实现效果包括车辆沿轨迹移动、方向跟随路线变化、动画控制功能等。
2025-09-18 10:20:44
705
原创 172.在vue3中使用openlayers:引用 hover 效果，展示各种鼠标 cursor 样式
本文介绍了使用Vue3+OpenLayers+ol-ext实现地图要素悬停交互效果的方法。通过Hover交互类，可以监听要素的enter/leave事件，根据点、线、面、圆等不同几何类型自动切换鼠标指针样式（如十字、复制、帮助、箭头等），并配合ElementPlus显示当前要素类型提示。文章提供了完整的代码实现，包括地图初始化、要素创建、样式设置和交互控制等关键环节，展示了如何通过简单代码提升WebGIS应用的用户体验。该方案具有扩展性强、实现清晰的特点，可进一步扩展为带高亮效果或信息弹窗的完整交互系统。
2025-09-17 10:50:10
595
原创 171.在Vue3中使用OpenLayers设置时间，显示白天黑夜场景图
摘要：本文介绍在Vue3+OpenLayers项目中实现动态昼夜地图效果的方案。通过ol-ext的DayNight插件，结合ElementPlus的时间选择器，可实时展示全球昼夜分布并支持墨卡托/WGS84投影切换。核心实现包括：监听时间变化更新昼夜图层、动态切换投影坐标系，适用于地球可视化、航空监控等GIS场景。项目采用Vite5+TypeScript构建，代码简洁高效，为地图应用增添了生动的交互体验。
2025-09-15 14:33:05
211
原创 170.在Vue3中使用OpenLayers：设置矢量线段粗细、渐变颜色、箭头与线头样式
Vue3+OpenLayers实现动态流动线效果：本文介绍如何在Vue3中使用OpenLayers和ol-ext的FlowLine功能，实现具有渐变颜色、动态箭头(前/后/双)和线头样式(round/butt)的矢量线段。提供完整SFC示例代码，包含参数详解、安装指引和常见问题排查。通过按钮控制可动态切换不同样式，适用于物流轨迹、管线流向等场景。主要使用FlowLine设置颜色渐变(width/width2控制粗细)、arrow参数控制箭头类型(-1/0/1/2)、lineCap设置线头样式，并支持单独为F
2025-09-12 09:39:03
1033
原创 169.在Vue3中使用OpenLayers + D3实现地图区块呈现不同颜色的效果
本文介绍了在Vue3项目中使用OpenLayers和D3.js实现地图区块着色的方法。主要内容包括：1）准备工作，需要安装Node.js和必要的依赖；2）提供完整的MapColor.vue组件代码，展示如何加载GeoJSON数据并渲染彩色地图；3）关键点解析，如颜色映射、样式缓存等技术细节；4）常见问题解决方案，包括瓦片显示、路径别名等问题；5）进阶功能建议，如添加悬浮提示、图例生成等。文章提供了完整的代码示例和实现思路，适合开发者快速上手地图可视化开发。
2025-09-09 17:48:09
769
原创 168.Vue3 + OpenLayers：给每个 Feature 添加专属渐变色（不是整图渐变）
本文介绍了在Vue3+OpenLayers中为每个地图要素（feature）单独绘制渐变色的实现方法。通过使用Style.renderer直接操作Canvas绘制上下文，解决了普通Fill样式无法创建CanvasGradient的问题。文章详细说明了如何兼容Polygon、MultiPolygon和带洞多边形，包括坐标转换、BBox计算和路径绘制等关键技术点。同时提供了完整的可运行代码示例（Vue3+TypeScript），支持点击定位和轮巡查看要素功能，并给出了按属性字段决定渐变颜色的扩展方案。该方法适用
2025-09-05 14:09:22
645
原创 167.在Vue3中使用OpenLayers模仿共享单车，判断点是否放在规划的电子围栏内
摘要：本文介绍了一个基于Vue3+OpenLayers的电子围栏功能实现案例。该功能可判断用户在地图上绘制的停泊点是否位于预设的电子围栏（多边形或圆形）内，适用于共享单车还车、物流调度、园区管理等场景。文章详细说明了实现思路，包括地图初始化、围栏绘制、点坐标判断等技术要点，并提供了完整代码示例。核心方法是使用geometry.intersectsCoordinate进行坐标判断，通过ElementPlus给出提示。该方案可进一步扩展为多围栏管理、围栏编辑和轨迹监控等功能。
2025-09-04 11:29:35
734
原创 166.在Vue3中使用OpenLayers绘制点并判断是否在电子围栏内
本文介绍了使用Vue3 Composition API集成OpenLayers实现电子围栏检测功能的方法。主要内容包括： 通过Draw交互在地图上绘制点，利用Polygon#intersectsCoordinate方法判断点是否在电子围栏内 项目环境基于Vue3、Vite和OpenLayers，使用ElementPlus作为UI组件 核心实现思路：创建底图和矢量图层，设置数据源存放电子围栏和用户绘制点 重点注意事项：投影系统一致性问题、边界点判定规则、容器尺寸调整等常见问题 提供了完整代码示例，可直接在项目
2025-09-03 10:54:34
448
原创 165.在vue3中使用openlayers绘制自定义图形并导出为 GeoJSON
本文介绍了一个基于Vue3+OpenLayers实现地图绘制和GeoJSON导出的解决方案。通过Vite+Vue3+TypeScript项目结构，结合OpenLayers库实现地图展示、矩形绘制、图形清除和GeoJSON导出功能。文章详细说明了项目依赖安装、核心代码实现（包括地图初始化、绘制交互、数据导出），特别强调了坐标系（EPSG:4326和EPSG:3857）的注意事项。还提供了扩展建议和常见问题解答，帮助开发者快速实现功能并解决可能遇到的问题。整个方案代码简洁，适合作为WebGIS开发的基础模板。
2025-09-02 09:58:24
327
原创 164.在 Vue3 中使用 OpenLayers 加载 Esri 地图（多种形式）
本文介绍了如何在Vue3+Vite+TypeScript/JS项目中集成OpenLayers10加载多种Esri底图。主要内容包括：1）项目初始化与依赖安装；2）常用Esri底图服务速查表；3）最小可运行示例代码；4）进阶功能如注记叠加、Token鉴权、高分屏优化；5）常见问题排查与解决方案。文章提供了完整的代码片段，涵盖了底图切换、注记叠加、投影设置等核心功能，并强调了Esri服务的使用合规性和性能优化建议。适合需要快速集成专业地图服务的开发者参考。
2025-09-01 16:35:31
570
原创 163.在 Vue3 中使用 OpenLayers 解析 GeoJSON，并给 Feature 填充 pattern（图案）颜色
本文介绍在Vue3中使用OpenLayers解析GeoJSON文件并为要素添加Canvas图案填充的方法。主要内容包括：1）项目依赖配置；2）GeoJSON数据导入与矢量图层创建；3）核心Canvas图案生成技术，重点处理设备像素比和样式缓存；4）性能优化建议；5）交互功能实现（悬停高亮和Tooltip）。提供了完整可复用的代码示例，解决了图案模糊、跨域请求等常见问题，适合需要在Web地图中实现自定义填充效果的前端开发者参考。
2025-08-29 15:47:27
313
原创 162.在 Vue 3 中使用 OpenLayers 解析 GeoJSON 并为每个 Feature 填充渐变色
本文介绍在Vue3中使用OpenLayers实现GeoJSON行政区块渐变填充的技术方案。核心思路是通过离屏Canvas为每个feature生成匹配其视图像素尺寸的渐变图案，使用CanvasPattern填充，并采用缓存机制优化性能。解决方案包含设备像素比适配、样式缓存管理、性能优化建议等关键技术点，支持线性/径向渐变，同时提供了WebGL迁移和属性映射等扩展方向。该方案在保证视觉效果的同时兼顾了渲染性能，适合大规模地理数据可视化场景。
2025-08-28 16:17:56
747
原创 161.在 Vue3 中使用 OpenLayers 绘制矩形、获取屏幕像素坐标（pixel）并用 transformExtent 做坐标投影转换
这篇教程介绍了如何在Vue3中使用OpenLayers实现矩形绘制功能，并获取屏幕坐标和进行坐标转换。主要内容包括：1) 环境配置和依赖安装；2) 完整实现代码，包含地图初始化、矩形绘制交互、坐标转换和结果显示功能；3) 关键代码解析，重点说明地图初始化、坐标转换和像素计算等核心逻辑；4) 常见问题解答，解决坐标顺序、像素计算不准等问题；5) 进阶扩展建议，如格式化输出、TypeScript支持和通用绘制函数等。该示例使用OpenLayers 10.x和ElementPlus组件，适合OpenLayers初
2025-08-27 11:54:46
265
原创 160.在 Vue3 中用 OpenLayers 解决国内 OpenStreetMap 地图加载不出来的问题
本文从原理出发，给出可行的修复办法并附带完整 Vue3 + Composition API 的代码示例（含可选的 Node.js 代理代码），帮助你把文章代码直接复制到项目中运行并发布到 CSDN。
2025-08-26 14:37:11
1078
原创 159.Vue3 + OpenLayers 实战：多边形旋转、平移、放缩
本文介绍了在Vue3+OpenLayers+Turf.js环境下实现多边形几何变换的方法。通过Turf.js的几何计算功能（旋转、平移、缩放）与OpenLayers的地图渲染能力，开发者可以轻松实现前端GIS交互。文章详细讲解了投影转换、中心点计算、单位设置等核心问题，并提供了完整的可运行代码示例。关键点包括：使用turf.centroid保证变换稳定性、处理不同投影坐标系、设置平移距离单位等。该方案无需后端参与，适合需要在前端实现GIS几何变换的场景。
2025-08-25 11:18:51
290
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人