- 博客(206)
- 收藏
- 关注
RSS订阅
原创 Vue3＋Openlayers教程导航页【目录】
欢迎来到 Vue3＋Openlayers 系列教程，这里是我在 CSDN 编写的所有 Vue3＋Openlayers 系列相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Openlayers 的强大魅力！
2025-04-18 16:08:22
126
原创 Three.js 教程导航页【目录总览】，持续更新中......
欢迎来到 Three.js 系列教程，这里是我在 CSDN 编写的所有 Three.js 相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Three.js 的强大魅力！
2025-04-18 12:42:52
245
原创 邮箱验证码登录流程
本文详细描述了用户通过邮箱地址登录的流程，包括前端和后端的处理步骤。前端部分涉及邮箱地址的输入与格式校验、验证码的获取与倒计时显示、验证码的输入与提交等。后端部分包括邮箱地址的校验、验证
2025-05-22 11:09:46
464
原创 130.在 Vue3 中使用 OpenLayers 实现测量长度和面积功能（带尾随数字与关闭按钮）
本文介绍了如何在Vue3和OpenLayers环境中实现一个完整的测量工具，包括测量长度、测量面积、实时显示测量结果以及展示关闭按钮等功能。文章详细说明了项目准备步骤，包括安装依赖和创建项目，并提供了完整的组件源码，支持Composition API。核心实现部分涵盖了地图初始化、测量功能的实现以及清除测量的方法。此外，文章还提供了一些小贴士，如推荐使用ref访问DOM、封装通用composable等，并鼓励读者进一步扩展功能。最后，文章总结了该测量功能模块的实用性，并提供了源码获取和交流的途径。
2025-05-22 10:57:07
948
原创 129.在 Vue3 中使用 OpenLayers 实现点击获取重叠要素信息（支持多 Feature）
本文将介绍如何使用Vue3和OpenLayers实现地图点击获取重叠要素信息的功能。通过VectorLayer添加多个携带自定义信息的Polygon要素，利用getFeaturesAtPixel()方法获取点击位置的所有要素，并根据要素数量展示不同弹窗：单个要素显示图文详情，多个要素显示名称列表。文章包含完整的组件代码，支持图层控制、要素高亮和自定义弹窗等扩展功能，适用于城市划分、设备管理等需要展示重叠地理信息的场景。组件封装简洁，可直接集成到项目中，提升了地图应用的用户体验。<｜end▁of▁sen
2025-05-21 17:25:16
293
2
原创 128.在 Vue 3 中使用 OpenLayers 实现绘制矩形截图并保存地图区域
本文详细介绍了如何在Vue3项目中利用OpenLayers实现地图矩形绘制、区域截图及保存为PNG图片的功能。通过Vue3的Composition API和OpenLayers的强大地图处理能力，用户可以在地图上自由绘制矩形，自动截取该区域并保存为图片。文章从项目初始化、核心技术栈、完整代码实现到关键技术解析，逐步引导开发者完成这一功能的开发。此外，还提供了清除图层、精确截图区域定位等实用功能的实现方法，适合地图分析、地理标注报告等应用场景。
2025-05-15 18:23:25
869
原创 127.在 Vue3 中使用 OpenLayers 实现绘制矩形 —— 利用 createBox 来处理
本文介绍了如何在Vue3项目中利用OpenLayers的createBox函数实现矩形绘制功能。通过Vue3的Composition API结合OpenLayers的Draw组件，开发者可以简洁高效地在地图上绘制矩形。文章详细讲解了项目搭建、依赖安装、组件代码实现及核心逻辑解析，并提供了扩展建议，如添加清除图形、监听绘制完成等功能。本文适合需要在WebGIS项目中实现图形绘制的开发者参考，帮助快速掌握相关技能。
2025-05-14 11:42:25
401
原创 126.在 Vue 3 中使用 OpenLayers 实现绘制正方形、正三角形、正五边形
本文介绍了如何在Vue3项目中结合OpenLayers实现规则图形的绘制功能。通过使用OpenLayers的Draw交互和createRegularPolygon工具函数，用户可以在地图上绘制正三角形、正方形和正五边形。文章详细讲解了初始化地图、绘制规则图形以及停止绘制的实现步骤，并提供了完整的代码示例。该功能适用于地图编辑、区域规划和空间分析等场景，未来可扩展为支持颜色选择、图形拖拽与删除以及导出为GeoJSON/WKT格式。技术栈包括Vue3、OpenLayers、ElementPlus和Tailwin
2025-05-13 11:09:19
158
原创 125.在 Vue3 中使用 OpenLayers 实现通过 WebGLVector 的方式添加海量点
本文详细介绍了如何在Vue3项目中使用OpenLayers的WebGLVectorLayer实现高性能的海量点渲染。通过加载OpenStreetMap基础地图，动态添加2万个随机点，并利用WebGL进行高效渲染，确保页面流畅不卡顿。文章还提供了完整代码示例，展示了如何初始化地图、添加和清除点位数据。WebGLVectorLayer利用GPU绘图，支持10万级点渲染，适合设备定位、订单分布等大数据展示场景。与传统CanvasLayer相比，WebGLVectorLayer在性能和流畅度上具有显著优势，适合各种
2025-05-13 10:23:11
176
原创 124.在 Vue3 中使用 OpenLayers 实现编辑事件 modifystart 和 modifyend
本文详细介绍了如何在Vue3中使用OpenLayers库实现多边形的绘制与编辑功能。通过结合Vue3的Composition API和OpenLayers的强大功能，开发者可以轻松创建交互式地图应用。文章重点讲解了如何监听和处理modifystart和modifyend事件，这些事件分别在用户开始和结束编辑多边形时触发。此外，文章还提供了完整的代码示例，包括模板、脚本和样式部分，帮助开发者快速上手。此技术适用于地图标注系统、区域划分编辑、GIS可视化系统等多种应用场景。
2025-05-12 09:55:21
217
原创 18.Three.js中AmbientLightProbe 环境光探针详解（含 Vue 3 实战示例）
是提升 Three.js 场景真实感的重要工具！尤其在使用 HDRI 环境贴图和 PBR 材质时，它可以带来质的飞跃。✨ 如果你想打造一个专业级的 Web 3D 应用，别忘了试试这个“隐形高手”！📌觉得文章有帮助？一起交流 Three.js 的奇妙世界吧！
2025-05-08 10:51:52
1378
原创 17.Three.js 光照系统之《LightProbe》详解指南（含 Vue 3示例）
LightProbe是构建真实感场景的重要一环，尤其在使用 HDR 贴图时更是锦上添花！🎉掌握它，就掌握了间接光照与环境映射的核心力量。希望本文能帮你快速上手并深入理解！🔥。
2025-05-07 10:29:10
798
原创 16.Three.js 中的 RectAreaLight 全面详解 + Vue 3 实战案例
（矩形区域光）是一种面光源，可以从一个矩形面板均匀发出光线，具有非常真实的软阴影效果和柔和照明表现，常用于：模拟摄影棚灯光 💡制作屏幕、灯管等矩形发光体 ✨渲染高质量可控光照环境（尤其是室内设计）🛋️✅ 它不像点光源那样从一个点发射光线，而是从一个平面发射多个方向的光线。优点 ✅缺点 ⚠️柔光自然、真实感强 👍需要手动初始化 UniformLib可控范围广、角度精准 🔍光照计算相对复杂，性能开销稍大。
2025-05-07 10:10:51
883
原创 15.Three.js PointLight 知识详解 + Vue3 实战案例
PointLight是 Three.js 中一种点光源，从一个点向所有方向发射光线，类似生活中的灯泡💡。🎓 通过本文你学到了：PointLight 的构造参数与作用 🏗️光源属性与阴影配置 ☀️Vue 3 Composition API + Three.js 实战 💻优化建议与常见问题 ⚙️📢高级光源实战 + 动态移动效果实现 🚀如果你觉得这篇文章对你有帮助，记得 👉支持我写下去 🙌！
2025-05-06 16:23:16
706
原创 14.Three.js 中的 SpotLight（聚光灯）详解与 Vue3 实战示例
color?intensity?: numberThree.js 中的 SpotLight 是一个强大而灵活的光源类型，掌握其属性配置与使用技巧对提升 3D 场景表现力至关重要。希望本文的详细讲解和 Vue 示例能帮你更深入地理解它的使用方式。我也会持续分享更多 Three.js 与 Vue 的实战干货 🎉。
2025-05-06 16:15:33
868
原创 13.THREE.HemisphereLight 全面详解（含 Vue Composition 示例）
skyColor：来自上方的光颜色（通常是天空色）：来自下方的光颜色（通常是地面色）intensity：光照强度（默认值为 1）特性说明光源类型环境光（Ambient）是否有位置❌（作用于整个场景）是否投射阴影❌（不可投影）光源方向来自“天空”向“地面”使用场景大气、自然光表现，室外、开放空间照明，漫反射氛围可与其他光源叠加✅（可配合PointLight使用）非常适合用于自然环境氛围渲染。不支持投影，但能有效提升整体漫反射亮度。搭配使用效果更佳。
2025-04-30 09:44:51
963
原创 12.Three.js 中的 DirectionalLight（平行光）详解指南
是一种平行光源，模拟类似太阳的光线。它拥有方向但没有位置衰减，所有照射点光线方向一致，适合表现大范围自然光照。特性描述是否有方向✅ 有是否有位置影响❌ 无位置衰减（方向决定照射方向）是否投影（阴影）✅ 支持阴影光照是否均匀✅ 所有物体被照射方向一致常见用途太阳光、日照效果等是模拟太阳光最常用的光源可以投射阴影，需开启castShadow且场景中有开启适用于室外场景、大面积光照Vue 3 + Three.js 可以快速搭建真实光照环境。
2025-04-30 09:30:30
675
原创 11. Three.js 中的 AmbientLight（环境光）详解
是一种全局光源，它会均匀地照亮整个场景中的所有物体，没有方向性、不会产生阴影，是最基础也最常用的光源之一。是基础却不可或缺的光源提供全局均匀照明，但不支持阴影通常作为辅助光源，与其他光源结合使用效果更佳在 Vue 3 项目中非常易用，可组合其它光源构建真实感场景。
2025-04-29 11:39:24
988
原创 10.Three.js 中的 THREE.Light 光源类型详解总览
简单介绍：在 Three.js 中，光源是必不可少的一部分，用于控制物体的明暗、颜色、阴影等效果。本文将简要介绍各类光源，后续我会对每一种光源发布单独详解文章，敬请期待！✨。
2025-04-29 11:29:53
419
原创 9.Three.js中 ArrayCamera 多视角相机详解+示例代码
在 Three.js 中，是一个组合相机！它允许你一次性渲染多个不同的摄像机视角，非常适合：多画面监控系统 📹迷你地图（小地图功能）🗺️多视角实时观察 👀游戏分屏（Split Screen Multiplayer）🎮简单理解：👉 一个 ArrayCamera 就像一组小摄像机的集合，每个小摄像机负责渲染自己的一部分画面！💥项目内容适用场景多视角展示、监控系统、小地图、游戏分屏优点同时管理多个摄像机，节省性能难点需要自己合理管理每个子相机的 viewport。
2025-04-28 15:56:52
564
原创 8.Three.js中的 StereoCamera 立体相机详解+示例代码
在 Three.js 中，（立体相机）是一种将场景分别渲染到左右眼的相机，常用于：VR虚拟现实 🎮AR增强现实 🪄3D红蓝眼镜立体显示 🕶️它本质上是用**两个透视相机（左眼、右眼）**进行拍摄，通过微小的偏移，给人一种空间深度的真实感！🌌项目内容适用场景VR/AR渲染、立体相机视图、3D展示优点简单易用，模拟真实双眼观看世界缺点只是立体图，不是真正VR，需要配合设备体验最佳StereoCamera虽然简单，但是它是迈向 VR/AR 开发的重要第一步呀～🛹。
2025-04-28 15:19:53
613
原创 7.Three.js 中 CubeCamera详解与实战示例
今天我们详细了解了Three.js中的CubeCamera，包括它的定义、作用、使用方法和注意事项。是不是觉得原来制作一个实时反射效果也没那么难？🥳✨掌握CubeCamera，你就可以打造更加真实、酷炫的3D世界了！
2025-04-27 09:32:45
1062
原创 6.Three.js 中的 OrthographicCamera 详解（含示例）
OrthographicCamera 又称为正交相机，它和常用的 PerspectiveCamera（透视相机）不同的地方在于：✅不会因为远近不同而变大变小！✅是平行投影，所有物体看起来一样大✅ 更适合二维场景、建筑平面图、CAD、UI 展示等应用场景。你可以理解为 ——🪟 PerspectiveCamera 就像我们的真实眼睛，而📏 OrthographicCamera 更像画图工具里的俯视图或工程图！
2025-04-25 10:01:17
1350
原创 123.在 Vue3 中使用 OpenLayers 实现绘制 Draw 多边形并 Modify 编辑图形
在 GIS 开发中，绘制图形并进行修改是非常常见的基础能力。无论是测量面积、标记区域、还是画草图，用户都需要在地图上自由绘制图形并进行后续的编辑操作。本文将使用实现如下功能：✅ 在地图上绘制多边形✅ 支持图形绘制的开始/结束✅ 支持图形的修改与取消修改✅ 使用 Vue 3 Composition API 编写，结构清晰，利于维护通过本文，我们完成了一个基于 Vue3 + OpenLayers 的实用小功能 ——绘制并编辑图形，它可以作为 GIS 系统、地图标绘、空间分析等功能的基础模块。
2025-04-25 09:47:07
162
原创 122.在 Vue3 中使用 OpenLayers 实现图层层级控制（zIndex）显示与设置详解
在地图开发中，我们常常需要多个图层叠加显示，比如：底图（OSM、天地图等）热力图层标注图层特效图层这时候，如果你不设置好图层的显示顺序（zIndex），可能会出现：❌ 重要内容被挡住❌ 交互区域点击不到✅ 设置好 zIndex，就像给每一层贴上「显示顺序标签」，让图层按预期叠加展示图层的层级控制，是地图开发中的基础知识，但也是容易忽略的点。希望这篇文章能帮助你理解并灵活使用zIndex，让地图图层不再“互相打架”！🤝📢 如果觉得这篇文章对你有帮助，欢迎。
2025-04-23 16:20:48
186
原创 5. Three.js 中的 PerspectiveCamera 全面解析
在 Three.js 中，相机（Camera）就像是你在 3D 世界里的“眼睛”👀，你看到的一切，都是通过相机“看”出来的。是 Three.js 中最常用的一种相机类型，它使用透视投影（Perspective Projection），模仿人眼的视觉效果：🚗近大远小，让你的三维场景更有真实感！知识点小结✅ PerspectiveCamera 是什么透视相机，近大远小，有真实感✅ 参数详解fov, aspect, near, far 各有用处✅ 运用场景产品展示、地球仪、建筑漫游。
2025-04-23 13:37:55
429
原创 121.在 Vue3 中使用 OpenLayers 实现去掉鼠标右键默认菜单并显示 Feature 信息
在开发 Web GIS 项目时，我们常常希望用户右键地图时执行自定义操作，而不是触发浏览器默认的右键菜单。本篇文章将手把手教你如何用 Vue3 + OpenLayers：禁用默认右键菜单；获取右键点击位置；判断是否点击到了地图上的某个图形（Feature）；弹出相应信息。
2025-04-22 18:24:45
368
原创 4.Three.js 中 Camera 摄像机详解
在 Three.js 中，Camera（摄像机）决定了我们如何观察三维场景。你可以把它理解为我们“眼睛”的位置和方向，场景中的物体再复杂，如果没有摄像机，就没有“观察角度”，也就不会渲染在屏幕上。（透视摄像机）：更符合人眼的视觉方式。（正交摄像机）：常用于2D界面、建筑图等场景。本篇文章聚焦于 Camera 的通用概念、构造参数和基本使用方式，后续我会为每个摄像机类型单独写文章深入讲解。Camera 是观察场景的“眼睛”，必须有；最常用的是和；使用时注意位置 + 朝向 + 可视范围三要素；
2025-04-22 18:05:52
643
原创 120.在 Vue3 中使用 OpenLayers 实现清空删除所有图层功能
希望本文对你在 Vue 项目中使用 OpenLayers 管理图层有所帮助。如果你还希望添加更多交互功能（比如测距、画线、多图层叠加），欢迎私信或留言，我会继续更新系列内容 🙌。
2025-04-21 14:00:59
200
原创 3.THREE.FogExp2 全面详解 + 实例演示 + 深度解析
在 Three.js 中，FogExp2是一种基于指数衰减的雾化效果，它可以模拟远处物体被雾气遮挡的视觉现象，从而提升场景的真实感和空间层次感。与THREE.Fog线性雾不同，是指数衰减的雾，雾的浓度随着距离呈指数级增加，视觉效果更自然、更平滑。你可以在材质中使用fog: true，然后在 Shader 中接入内置的fog模块，支持自定义颜色/形状的雾。是一个简单但非常实用的工具，它不仅能快速增强场景空间感，还能提升视觉层次，是打造沉浸式 3D 场景的利器。
2025-04-21 13:40:47
551
原创 119.在 Vue3 中使用 OpenLayers 实现加载中国边界 JSON 数据（EPSG:4326）
本文介绍了如何在 Vue3 项目中集成 OpenLayers，并以中国边界 JSON 为例，加载矢量地图数据。该方法适用于各种 GeoJSON 可视化需求，如行政区渲染、专题图开发、地图标绘等。添加鼠标交互（点击高亮、tooltip）实现 GeoJSON 动态加载增加图层切换控制结合 ECharts、Canvas 进行数据可视化。
2025-04-20 10:02:25
209
2
原创 2.Three.js 中 Fog（雾效）详解与实战示例
雾效可以让场景中的物体根据距离相机的远近被逐渐“吞没”于雾中。主要目的包括：模拟自然界大气透视现象；缓解远距离模型贴图粗糙问题；提升沉浸感和美术表现力。// 自动注入雾效 uniforms 和代码#endif如果使用// 在 gl_FragColor 混合前加 #include雾效作为 Three.js 中的一项基础但非常重要的视觉增强手段，使用简单、效果直观，适合各种场景。通过合理设置Fog或FogExp2，可以让三维画面更具空间层次与真实感，尤其在大型地图、游戏场景、科幻模拟等项目中尤为重要。
2025-04-20 09:39:14
1205
原创 1.Three.js 场景（Scene）详解
🚀 本文将详细解析 Three.js 中的场景（Scene）对象，带你从零认识 Scene 的作用、用法、常用属性及进阶管理技巧，附完整示例代码，适合前端三维开发初学者和进阶者阅读！
2025-04-18 12:31:02
1056
原创 118.在 Vue3 中使用 OpenLayers 实现绘制矩形、drawend 取消锚点、屏蔽双击放大事件
在 GIS 或 Web 地图项目中，我们经常需要提供用户交互绘图的功能，比如：区域框选（矩形）多边形选区（Polygon）手绘标注区域禁用默认地图行为（如双击放大）本示例实现如下：✅ 矩形绘制✅ 多边形绘制✅ 绘图完成后自动移除锚点交互✅ 屏蔽双击放大地图以上就是在 Vue3 中结合 OpenLayers 实现绘制矩形、多边形、自动取消锚点以及禁用双击放大的完整过程。🧠 后续你可以尝试拓展功能，比如：支持拖动、修改图形绘制圆形、线段、点等类型图形编辑与删除多图层管理。
2025-04-18 11:47:20
296
原创 117.在 Vue 3 中使用 OpenLayers 实现 CTRL 控制拖拽和滚动缩放
在使用 OpenLayers 开发地图类项目时，我们有时会希望用户必须按下 CTRL（或 Mac 的 Command ⌘ 键）才能拖拽地图或使用鼠标滚轮缩放。这种交互方式能够避免用户在浏览页面时意外滑动或拖动地图，尤其是在地图嵌入页面中时非常有用。本文将带你一步一步实现在 Vue 3 中集成 OpenLayers，并通过条件控制用户的拖拽和平移行为。通过本文，你已经掌握了在 Vue 3 + OpenLayers 项目中：如何自定义交互行为如何通过按键控制地图拖拽和缩放如何灵活配置交互条件。
2025-04-17 16:02:32
531
原创 116.在 Vue3 中使用 OpenLayers 加载谷歌地图（另一种 URL 方式）
在 Web GIS 的开发中，我们常常需要加载谷歌地图作为底图。而在国内由于众所周知的原因，谷歌地图的标准服务不太容易访问，因此常常需要借助特殊的 URL 加载方式。本文将带你一步步实现在 Vue3 项目中使用 OpenLayers 加载谷歌地图底图，所用 URL 方式相对较少见但效果稳定，非常适合在项目中使用。Tailwind CSS（用于快速布局）谷歌地图 URL使用了pb参数方式加载。
2025-04-16 10:10:23
757
2
原创 115.Vue3 + OpenLayers：弹窗中的地图不显示？一招解决！
点击按钮打开弹窗，地图区域出现了，但地图内容却是一片空白。这个问题其实并不是 OpenLayers 本身的 bug，而是由于它在初始化地图时没有拿到正确的容器大小。那么在 Vue3 中，我们该如何优雅地解决这个问题呢？今天就带大家一探究竟！在 Vue3 项目中使用 OpenLayers 如果需要在弹窗中展示地图，务必注意以下两点：✅不要在地图容器为状态时初始化地图✅在地图显示出来后手动调用。
2025-04-10 19:28:40
758
原创 114.在 Vue3 中使用 OpenLayers 实现清除所有控件，按需添加 Control 控件
OpenLayers是一款强大的 WebGIS 地图库，支持地图渲染、交互控件、图层控制、动画飞行等高级功能。在日常开发中，我们经常需要根据用户操作动态控制地图控件的显示与隐藏。本文将带你实现一个非常实用的功能：在 Vue3 项目中，使用 Composition API 和 OpenLayers，完成清除所有控件、按需添加Zoom和FullScreen控件的功能。效果如下👇：（如上图：可以动态添加/移除控件）
2025-04-08 11:30:44
1123
原创 113. 在 Vue 3 中使用 OpenLayers 实现鼠标移动显示坐标信息
实时获取用户鼠标在地图上的经纬度坐标，并展示在地图上。本文将通过一个简单的案例，手把手带大家在Vue 3 项目中集成 OpenLayers 地图库，并实现以下功能：加载 OpenStreetMap 地图瓦片鼠标移动时显示实时坐标（经纬度）使用控件格式化坐标支持 Vue 3 Composition API。
2025-04-07 10:53:57
655
原创 112.在 Vue 3 中使用 OpenLayers 加载 GeoJSON 数据（url 引用方式，非 readFeatures）
然而，GitHub 主要是代码托管平台，直接访问该 URL 并不会返回正确的 JSON 数据，而是 HTML 页面，因此会导致加载失败。在本文中，我们介绍了如何在 Vue 3 中使用 OpenLayers 加载 GeoJSON 数据，并提供了完整的代码示例。同时，我们分析了可能出现的跨域问题，并提供了三种解决方案，推荐使用。但需要注意的是，使用公共 CORS 代理可能会导致数据访问不稳定，甚至存在安全风险，不推荐在生产环境中使用。在上面的代码中，我们使用了。GeoJSON 格式的数据。
2025-04-03 15:00:05
1245
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人