- 博客(62)
- 收藏
- 关注
RSS订阅原创 Vue 水印指令 @yuwenlin/vue-watermark-plus 使用指南
本文介绍一款兼容 Vue2 与 Vue3 的通用前端水印指令 @yuwenlin/vue-watermark-plus，支持多行文本、高清适配、防误删、自适应重排及全页水印。通过简单指令绑定，可实现动态水印、工厂模式配置、SVG/CSS 渲染与自定义绘制，适用于敏感数据保护、身份标识等场景，提升开发效率与安全性。
2026-09-20 16:41:25
386
原创 vue-time-axis-plus高级：原生class+移动端适配+性能优化，从使用到原理
本文详解vue-time-axis-plus在非Vue环境下的原生class使用、移动端手势适配、Canvas双层渲染原理及性能优化策略。支持React、原生JS等场景，通过双指缩放、自动降级、分层渲染提升移动端体验；利用原生API实现零依赖、低开销，结合动态更新与内存管理，确保高性能与深度定制能力，适合需灵活控制的开发者。
2026-09-14 11:18:54
197
原创 vue-time-axis-plus进阶：双进度条+跨空白续播+播放指针，打造专业级监控回放体验
本文详解vue-time-axis-plus的三大进阶功能：双进度条实现主轴与全天概览联动，播放指针居中跟随确保视觉聚焦，跨空白续播通过snapToNearest自动跳转至下一录像段。结合getNextSegment等API实现智能续播逻辑，并支持动态开关、自定义样式与主题切换。解决手势冲突、高度重绘等实战坑点，打造专业级监控回放体验。
2026-09-14 11:18:12
261
原创 vue-time-axis-plus入门：从安装到监控录像回放，30秒跑通一个专业级时间轴
本文介绍轻量级时间轴组件vue-time-axis-plus，30秒内完成安装与基础配置，实现监控录像回放核心功能：片段可视化、点击/拖动定位、播放指针跟随、跨空白续播及双进度条。基于Canvas双层渲染，零依赖、内联样式，支持Vue 3.2+。关键点包括毫秒时间戳构造（本地时区）、自动去重叠、changeTime事件处理及常见坑位（如时间偏移、样式失效）。适合高效构建专业级时间轴交互。
2026-09-14 11:17:02
231
原创 OpenLayers地图权限控制：图层可见性+要素编辑权限，让不同用户看到不同的地图
本文详解地图权限控制方案：基于角色（管理员、编辑员、查看员）动态管理图层可见性与要素编辑权限。通过setVisible()控制图层显示，结合交互组件的启用/禁用实现权限隔离；利用feature.set('locked')标记锁定状态并配以灰化样式，增强视觉区分。关键点包括权限切换时强制刷新图层、交互添加前检查权限，避免遗漏。附踩坑记录与完整代码示例，适用于OpenLayers 10.9.0环境。
2026-09-10 17:06:14
73
原创 OpenLayers地图打印：打印样式+分页打印，让地图也能打印出来
本文详细介绍了地图打印的完整解决方案，针对直接打印页面导致控件混入、样式错乱、分页异常等问题，提出三种优化方案：使用@media print隐藏非必要元素实现基础打印；通过Canvas导出高清图片并嵌入新窗口打印，提升画质；针对大地图采用分页切割为A4尺寸，支持多页打印。重点解决打印模糊（通过devicePixelRatio提高分辨率）和控件误打印等常见坑点，推荐在高精度输出场景下优先使用Canvas导出方案。
2026-09-10 17:05:44
84
原创 OpenLayers离线地图：瓦片下载+本地加载，无网络也能看地图
本文详解离线地图实现方案：通过预下载瓦片并存储至IndexedDB，支持无网络环境下加载。核心包括基于OpenLayers自定义TileSource、并发下载控制、分区域存储规避容量限制，并提供在线/离线自动切换机制，完整解决瓦片下载慢、存储满等关键问题。
2026-09-10 17:05:04
97
原创 OpenLayers地图对比：卷帘对比+分屏对比，让地图数据一目了然
本文介绍了在OpenLayers中实现卫星影像对比的两种方案：卷帘对比（通过Canvas裁剪与拖拽分割线实现）和分屏对比（双地图并排同步视角）。分别给出了完整代码实现，涵盖事件监听、渲染控制与样式设计，并总结了常见问题如裁剪失效、视角不同步的解决方案。适用于需要多时期影像对比的地理信息应用。
2026-09-10 17:04:01
196
原创 OpenLayers实时监控：WebSocket+车辆位置实时推送，从数据接收到地图渲染
本文详解实时车辆监控系统实现方案：通过WebSocket接收每秒一次的GPS数据，结合OpenLayers实现车辆位置的平滑移动与轨迹绘制。核心包括数据缓冲避免卡顿、requestAnimationFrame实现线性插值平滑动画、动态更新轨迹线及方向图标。完整解决了断线重连、性能优化等实际问题，适用于高频率实时定位场景。
2026-09-10 17:03:25
109
原创 OpenLayers+ECharts联动：地图点击联动图表，数据可视化大屏方案
本文详解OpenLayers与ECharts的联动实现：通过地图点击获取区域数据并更新图表，图表点击则定位并高亮对应地图区域。结合pointermove实现悬停高亮，利用resize事件保证自适应。完整Vue组件封装，解决事件穿透、图表不自适应等常见问题，提供可复用的可视化大屏解决方案。
2026-09-09 17:31:27
27
原创 OpenLayers地图分享：URL参数同步+分享链接生成，让用户一键分享地图视角
本文详解了地图视角分享功能的完整实现方案：通过URLSearchParams编码地图中心点、缩放级别及图层状态，利用history.replaceState实时同步URL，页面加载时解码恢复状态。结合剪贴板复制分享链接，并通过throttle优化性能。针对URL过长和浏览器历史干扰问题，提出仅同步核心状态、使用replaceState等解决方案，确保分享链接简洁可靠。
2026-09-09 17:30:21
96
原创 OpenLayers自定义控件：从比例尺到工具栏，打造专属地图UI
本文分享了在OpenLayers中自定义控件的实战经验，针对默认控件样式不佳的问题，封装了比例尺、图例、工具栏及坐标显示等可复用控件。通过继承ol/control/Control类，结合CSS定位与地图事件监听，实现高度可定制化。推荐使用Vue组件封装复杂交互控件，提升开发效率。文中还总结了常见坑点及解决方案，如位置偏移、事件未响应等，适用于项目化开发中的UI统一需求。
2026-09-09 17:28:54
136
原创 OpenLayers+Vue3深度集成：Composables封装+响应式地图+内存泄漏治理，从入门到生产级方案
本文详解Vue3与OpenLayers深度集成的生产级方案，核心解决响应式冲突、内存泄漏等问题。通过shallowRef避免对象深度代理，结合onMounted/onBeforeUnmount精准管理生命周期，使用Composables（如useMap、useLayer、useDraw）实现逻辑复用，借助provide/inject跨组件共享地图实例，构建高效、可维护的地理可视化应用。
2026-09-09 17:28:15
335
原创 OpenLayers避坑大全：我踩过的30个坑，看完少走半年弯路
本文总结了使用OpenLayers两年来的30个常见坑，涵盖坐标系、图层、交互、样式、性能和导出六大类。核心问题包括坐标偏移（需经GCJ02中转）、图层切换闪烁、交互协同错误、样式不更新及内存泄漏等。关键解决原则：坐标转换分步进行，交互操作先添加后移除，动态更新需调用changed()，大数据用聚合，动画用requestAnimationFrame，导出前等待rendercomplete。建议收藏速查，避免踩坑。
2026-09-09 17:26:45
75
原创 OpenLayers动画与视角控制：flyTo+平滑缩放+视图联动，让地图“活“起来
本文系统总结了OpenLayers的动画方案：核心API包括view.animate（支持平移、缩放、组合、回调及多段串联）和view.fit（缩放到范
2026-09-08 10:07:28
413
原创 OpenLayers轨迹回放：从GPS数据到动画回放，我实现了一个高德地图级别的轨迹回放功能
本文基于OpenLayers实现了GPS轨迹回放功能，涵盖数据清洗、坐标转换、轨迹线绘制、车标移动与朝向旋转、速度控制、进度条联动，并总结了图标旋转、坐标转换等关键踩坑点。
2026-09-08 10:06:53
190
原创 OpenLayers坐标系完全指南：从WGS84到自定义投影，一篇搞定所有坐标问题
本文系统梳理了GIS开发中WGS84、GCJ02、BD09、EPSG:3857等坐标系的原理与偏移关系，详解OpenLayers投影设置、gcoord转换及手写墨卡托公式，并总结BD09跳级转换、GeoJSON偏移等常见坑，提供全场景
2026-09-08 10:06:11
462
原创 OpenLayers对接WMS/WFS服务：天地图WMTS+GeoServer图层加载完整指南
本文全面指南介绍OpenLayers对接天地图WMTS与GeoServer WMS/WFS服务：分别说明WMTS瓦片网格配置、WMS动态图层加载与要素查询、WFS矢量数据获取，并提供关键参数表和代码示例，帮助开发者快速集成。
2026-09-08 10:05:19
427
原创 OpenLayers电子围栏：围栏绘制+进出判断+告警触发
本文介绍基于OpenLayers的车辆监控电子围栏系统，涵盖围栏绘制（圆形/多边形）、编辑、进出判断（射线法及Turf.js）、定时监控与告警触发、围栏管理（增删改、启停）及告警样式，实现车辆超出范围实时提醒。
2026-09-08 10:04:28
197
原创 OpenLayers导出功能：地图截图+GeoJSON导出完整方案，从Canvas合并到PDF生成
针对OpenLayers多Canvas图层难以直接导出的问题，文章提供完整方案：通过合并所有图层Canvas实现地图截图，支持PNG/JPEG及高清导出；实现GeoJSON数据导出（含Circle转Polygon与剪贴板复制）；并利用jsPDF生成PDF，覆盖地图导出核心需求。
2026-09-07 10:08:38
161
原创 OpenLayers性能优化：10万数据不卡顿的5种方案
针对10万点位地图卡顿，采用聚合、BBOX按需加载、Canvas优化、图层懒加载、Web Worker五方案，实现60fps流畅运行，并总结了聚合点击失效、数据丢失等踩坑经验。
2026-09-07 10:07:32
894
原创 OpenLayers选择与编辑：Select+Modify完整方案
本文介绍了OpenLayers中Select与Modify交互的完整编辑器实现，涵盖点击选中、顶点拖拽、高亮样式、编辑同步和删除功能，并封装了初始化、销毁及交互协同的完整代码方案。
2026-09-07 10:06:11
179
原创 OpenLayers弹窗Overlay深度实战
本文针对OpenLayers地图点击弹窗中Overlay的使用，对比了HTML字符串与Vue组件两种实现方式。HTML方式代码少但不支持响应式、需手动绑定事件；Vue组件方式推荐用于生产项目，利用定义暴露方法实现响应式、可维护性强。同时重点解析了Overlay核心配置（定位、偏移、自动平移）及防重复创建的实现技巧，帮助规避常见坑点。
2026-09-07 10:05:29
316
原创 OpenLayers图层切换与管理：多底图切换+图层显隐控制
本文介绍了一套生产级OpenLayers图层管理方案，涵盖多底图切换（互斥显示与动态销毁）、按code查找图层、显隐控制、zIndex排序、图层清理及完整模块封装，并分享了踩坑经验。
2026-09-07 10:04:36
537
原创 CSS性能优化
本文系统讲解CSS性能优化，涵盖文件压缩合并、缓存策略、选择器优化、避免重排重绘及GPU加速等最佳实践，旨在提升加载速度与渲染性能，改善用户体验和SEO排名。
2026-09-04 10:21:12
252
原创 浏览器兼容性与Hack
本文讲解浏览器兼容性概念，指出不同浏览器引擎对CSS支持差异导致样式不一致。重点介绍CSS兼容性问题，如属性前缀、Flexbox与Grid布局的兼容写法、选择器支持情况，并详述IE条件注释、属性Hack（下划线、星号等）技巧，帮助开发者处理跨浏览器样式适配。
2026-09-04 10:20:12
196
原创 CSS动画与过渡
本文深入讲解CSS过渡与动画的核心概念、属性用法及最佳实践。过渡通过transition实现属性值变化时的平滑效果，涵盖属性、时长、缓动函数与延迟；动画基于@keyframes定义关键帧，支持循环、方向、填充模式等控制。并介绍常见效果如淡入淡出，帮助开发者打造流畅交互体验。
2026-09-04 10:19:34
163
原创 CSS变量与预处理器
CSS变量与预处理器（如Sass）是现代CSS开发的核心工具。CSS变量通过--定义、var()使用，具备作用域与默认值，可动态修改，并支持主题切换、响应式设计等实战场景。Sass则提供变量、嵌套、混合宏等特性，提升样式的可维护性与开发效率。两者协同使用，可构建灵活高效的CSS体系。
2026-09-04 10:18:55
348
原创 响应式设计与移动端适配
响应式设计使网站自适应不同设备，核心包括流式网格、弹性图片和媒体查询。需设置视口元标签，利用断点（如移动优先）调整布局，采用Flexbox/Grid实现流式布局，并使用max-width:100%和srcset适配图片。最佳实践：移动优先、相对单位、合理断点，兼顾体验与SEO。
2026-09-04 10:18:16
225
原创 CSS选择器与优先级
本文系统讲解CSS选择器基础、类型（元素、类、ID、属性、组合、伪类、伪元素）及优先级四元组计算规则，并强调通过理解特异性避免样式冲突，是掌握CSS样式应用的核心指南。
2026-09-03 15:48:57
199
原创 Grid布局深度解析
Grid布局是CSS最强大的二维布局系统，可同时控制行与列，弥补Flexbox一维不足。核心包括容器属性（轨道尺寸、间距、区域模板与对齐方式）和项目属性（跨行跨列定位），支持fr单位、repeat()、minmax()及grid-template-areas实现灵活响应式布局，推荐结合MDN与可视化工具深入学习。
2026-09-03 15:48:13
142
原创 Flexbox布局实战
Flexbox是CSS3弹性布局模型，擅长一维排列。display:flex定义容器，子元素即flex项目。flex-direction定主轴，justify-content/align-items控制对齐。项目用flex伸缩，order排序。它简化居中、等高、自适应布局，是现代响应式设计的核心。
2026-09-03 15:47:41
328
原创 CSS定位详解
CSS定位通过position属性精确控制元素位置，是前端布局的核心技术。static为默认值；relative不脱离文档流，相对自身偏移；absolute脱离文档流，相对最近定位祖先定位；fixed相对视口固定；sticky结合relative与fixed特性。包含块决定定位参照，受transform、filter等影响。应用涵盖弹窗、工具提示、固定导航等场景，是前端开发必掌握的基础。
2026-09-03 15:46:51
165
原创 CSS盒模型与布局基础
本文详解CSS盒模型核心概念，对比标准与IE盒模型，说明box-sizing属性，区分块级、行内及行内块元素特性，并解析外边距合并现象及解决方案，帮助开发者建立扎实的CSS布局基础。
2026-09-03 15:46:05
180
原创 OpenLayers测距测面：完整测量工具
基于OpenLayers实现高德式测量功能：利用getLength/getArea计算米/千米、平方米/平方千米；通过监听绘制事件实现实时标注，测距标注随鼠标移动，测面用内部点；设计临时与永久两种Overlay，区分提示与结果；用虚线样式和顶点标记提升视觉效果；支持计算点、段数等详细信息，并管理测量历史记录以供单条删除。
2026-08-17 14:22:03
515
原创 OpenLayers绘制功能：点线面圆+测量+导出完整方案
本文分享了基于OpenLayers实现地图绘制功能的完整方案，涵盖点线面圆绘制、实时测量、样式自定义、编辑交互等核心功能。文章通过代码示例详细展示了：1）最简绘制流程的实现；2）绘制交互的生命周期管理；3）利用ol/sphere实现实时长度/面积测量；4）自定义要素样式与动态切换；5）选择与编辑功能的集成。作者还总结了撤销清除、GeoJSON导出等实用功能，为开发者提供了一套可直接复用的技术方案，帮助快速构建专业级地图绘制应用。
2026-08-17 13:50:35
229
原创 OpenLayers热力图：从数据到可视化，一个完整的人口密度分析方案
本文介绍了如何在OpenLayers 10.9.0中实现热力图可视化。主要内容包括：1）创建基础热力图图层，配置模糊半径、热点半径、透明度等参数；2）设计三层模拟数据（城市中心点、高斯分布扩散点、背景散布点）；3）自定义权重计算，结合人口密度因子和距离衰减；4）实现缩放自适应半径功能，优化不同缩放级别的显示效果。文章通过代码示例详细演示了热力图的完整实现流程，包括数据生成、图层配置和交互优化等关键技术点。
2026-08-14 17:25:23
234
原创 OpenLayers添加待图标点位、点位点击事件、点击弹窗
本文详细介绍了在OpenLayers 10.9.0中实现带自定义图标的点位标注、点击事件处理和弹窗展示的完整方案。主要内容包括：1）使用Icon样式加载带文字标注的自定义图标，并说明锚点配置对弹窗定位的影响；2）通过pointermove和click事件实现交互检测，结合forEachFeatureAtPixel方法识别可点击要素；3）提供两种弹窗实现方式——HTML字符串和Vue组件，重点讲解Overlay的创建、定位和事件绑定。文章以实际项目代码为基础，详细演示了从点位加载到交互响应的完整流程
2026-08-14 16:43:18
428
原创 OpenLayers矢量数据渲染（点、线、面、圆形、GeoJSON）
本文系统介绍了在OpenLayers 10.9.0中渲染矢量数据的全流程，主要包括：核心架构（Map-VectorLayer-Feature三层模型）、数据加载与坐标转换（支持GeoJSON解析、Geometry转换和gcoord三种方式）、图层管理（通过code标识图层）以及点线要素的创建与样式设置。重点解析了不同坐标系转换方案的选择策略，并提供了点要素的圆形标记+文字标签样式实现，以及线要素的坐标转换与渲染方法。
2026-08-13 17:15:30
368
原创 OpenLayers加载高德瓦片与GCJ02坐标转换实战（08）
本文介绍了在Vue3 + OpenLayers项目中加载高德瓦片地图并实现GCJ02与EPSG:3857坐标系双向转换的方法。重点分析了高德坐标+高德底图的简化场景，无需处理坐标偏移，只需进行投影转换。提供了手写的球体墨卡托投影转换函数（正反转换精度误差在几米级），以及高德瓦片URL配置方案。通过完整Vue组件代码演示了地图初始化、坐标转换与数据加载的集成实现，适用于需要在高德底图上叠加自定义GCJ02坐标数据的WebGIS开发场景。
2026-08-06 17:51:59
252
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人