<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[wcxrib的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/wcxrib</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; wcxrib]]></copyright><item><title><![CDATA[Vue 水印指令 @yuwenlin/vue-watermark-plus 使用指南]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/166135674</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/166135674</guid><author>wcxrib</author><pubDate>Sun, 20 Sep 2026 16:41:25 +0800</pubDate><description><![CDATA[本文介绍一款兼容 Vue2 与 Vue3 的通用前端水印指令 @yuwenlin/vue-watermark-plus，支持多行文本、高清适配、防误删、自适应重排及全页水印。通过简单指令绑定，可实现动态水印、工厂模式配置、SVG/CSS 渲染与自定义绘制，适用于敏感数据保护、身份标识等场景，提升开发效率与安全性。]]></description><category></category></item><item><title><![CDATA[vue-time-axis-plus高级：原生class+移动端适配+性能优化，从使用到原理]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/165297643</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/165297643</guid><author>wcxrib</author><pubDate>Mon, 14 Sep 2026 11:18:54 +0800</pubDate><description><![CDATA[本文详解vue-time-axis-plus在非Vue环境下的原生class使用、移动端手势适配、Canvas双层渲染原理及性能优化策略。支持React、原生JS等场景，通过双指缩放、自动降级、分层渲染提升移动端体验；利用原生API实现零依赖、低开销，结合动态更新与内存管理，确保高性能与深度定制能力，适合需灵活控制的开发者。]]></description><category></category></item><item><title><![CDATA[vue-time-axis-plus进阶：双进度条+跨空白续播+播放指针，打造专业级监控回放体验]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/165297566</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/165297566</guid><author>wcxrib</author><pubDate>Mon, 14 Sep 2026 11:18:12 +0800</pubDate><description><![CDATA[本文详解vue-time-axis-plus的三大进阶功能：双进度条实现主轴与全天概览联动，播放指针居中跟随确保视觉聚焦，跨空白续播通过snapToNearest自动跳转至下一录像段。结合getNextSegment等API实现智能续播逻辑，并支持动态开关、自定义样式与主题切换。解决手势冲突、高度重绘等实战坑点，打造专业级监控回放体验。]]></description><category></category></item><item><title><![CDATA[vue-time-axis-plus入门：从安装到监控录像回放，30秒跑通一个专业级时间轴]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/165297424</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/165297424</guid><author>wcxrib</author><pubDate>Mon, 14 Sep 2026 11:17:02 +0800</pubDate><description><![CDATA[本文介绍轻量级时间轴组件vue-time-axis-plus，30秒内完成安装与基础配置，实现监控录像回放核心功能：片段可视化、点击/拖动定位、播放指针跟随、跨空白续播及双进度条。基于Canvas双层渲染，零依赖、内联样式，支持Vue 3.2+。关键点包括毫秒时间戳构造（本地时区）、自动去重叠、changeTime事件处理及常见坑位（如时间偏移、样式失效）。适合高效构建专业级时间轴交互。]]></description><category></category></item><item><title><![CDATA[OpenLayers地图权限控制：图层可见性+要素编辑权限，让不同用户看到不同的地图]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164864468</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164864468</guid><author>wcxrib</author><pubDate>Thu, 10 Sep 2026 17:06:14 +0800</pubDate><description><![CDATA[本文详解地图权限控制方案：基于角色（管理员、编辑员、查看员）动态管理图层可见性与要素编辑权限。通过setVisible()控制图层显示，结合交互组件的启用/禁用实现权限隔离；利用feature.set('locked')标记锁定状态并配以灰化样式，增强视觉区分。关键点包括权限切换时强制刷新图层、交互添加前检查权限，避免遗漏。附踩坑记录与完整代码示例，适用于OpenLayers 10.9.0环境。]]></description><category></category></item><item><title><![CDATA[OpenLayers地图打印：打印样式+分页打印，让地图也能打印出来]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164864409</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164864409</guid><author>wcxrib</author><pubDate>Thu, 10 Sep 2026 17:05:44 +0800</pubDate><description><![CDATA[本文详细介绍了地图打印的完整解决方案，针对直接打印页面导致控件混入、样式错乱、分页异常等问题，提出三种优化方案：使用@media print隐藏非必要元素实现基础打印；通过Canvas导出高清图片并嵌入新窗口打印，提升画质；针对大地图采用分页切割为A4尺寸，支持多页打印。重点解决打印模糊（通过devicePixelRatio提高分辨率）和控件误打印等常见坑点，推荐在高精度输出场景下优先使用Canvas导出方案。]]></description><category></category></item><item><title><![CDATA[OpenLayers离线地图：瓦片下载+本地加载，无网络也能看地图]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164864328</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164864328</guid><author>wcxrib</author><pubDate>Thu, 10 Sep 2026 17:05:04 +0800</pubDate><description><![CDATA[本文详解离线地图实现方案：通过预下载瓦片并存储至IndexedDB，支持无网络环境下加载。核心包括基于OpenLayers自定义TileSource、并发下载控制、分区域存储规避容量限制，并提供在线/离线自动切换机制，完整解决瓦片下载慢、存储满等关键问题。]]></description><category></category></item><item><title><![CDATA[OpenLayers地图对比：卷帘对比+分屏对比，让地图数据一目了然]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164864223</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164864223</guid><author>wcxrib</author><pubDate>Thu, 10 Sep 2026 17:04:01 +0800</pubDate><description><![CDATA[本文介绍了在OpenLayers中实现卫星影像对比的两种方案：卷帘对比（通过Canvas裁剪与拖拽分割线实现）和分屏对比（双地图并排同步视角）。分别给出了完整代码实现，涵盖事件监听、渲染控制与样式设计，并总结了常见问题如裁剪失效、视角不同步的解决方案。适用于需要多时期影像对比的地理信息应用。]]></description><category></category></item><item><title><![CDATA[OpenLayers实时监控：WebSocket+车辆位置实时推送，从数据接收到地图渲染]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164864152</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164864152</guid><author>wcxrib</author><pubDate>Thu, 10 Sep 2026 17:03:25 +0800</pubDate><description><![CDATA[本文详解实时车辆监控系统实现方案：通过WebSocket接收每秒一次的GPS数据，结合OpenLayers实现车辆位置的平滑移动与轨迹绘制。核心包括数据缓冲避免卡顿、requestAnimationFrame实现线性插值平滑动画、动态更新轨迹线及方向图标。完整解决了断线重连、性能优化等实际问题，适用于高频率实时定位场景。]]></description><category></category></item><item><title><![CDATA[OpenLayers+ECharts联动：地图点击联动图表，数据可视化大屏方案]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164750505</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164750505</guid><author>wcxrib</author><pubDate>Wed, 09 Sep 2026 17:31:27 +0800</pubDate><description><![CDATA[本文详解OpenLayers与ECharts的联动实现：通过地图点击获取区域数据并更新图表，图表点击则定位并高亮对应地图区域。结合pointermove实现悬停高亮，利用resize事件保证自适应。完整Vue组件封装，解决事件穿透、图表不自适应等常见问题，提供可复用的可视化大屏解决方案。]]></description><category></category></item><item><title><![CDATA[OpenLayers地图分享：URL参数同步+分享链接生成，让用户一键分享地图视角]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164750449</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164750449</guid><author>wcxrib</author><pubDate>Wed, 09 Sep 2026 17:30:21 +0800</pubDate><description><![CDATA[本文详解了地图视角分享功能的完整实现方案：通过URLSearchParams编码地图中心点、缩放级别及图层状态，利用history.replaceState实时同步URL，页面加载时解码恢复状态。结合剪贴板复制分享链接，并通过throttle优化性能。针对URL过长和浏览器历史干扰问题，提出仅同步核心状态、使用replaceState等解决方案，确保分享链接简洁可靠。]]></description><category></category></item><item><title><![CDATA[OpenLayers自定义控件：从比例尺到工具栏，打造专属地图UI]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164750398</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164750398</guid><author>wcxrib</author><pubDate>Wed, 09 Sep 2026 17:28:54 +0800</pubDate><description><![CDATA[本文分享了在OpenLayers中自定义控件的实战经验，针对默认控件样式不佳的问题，封装了比例尺、图例、工具栏及坐标显示等可复用控件。通过继承ol/control/Control类，结合CSS定位与地图事件监听，实现高度可定制化。推荐使用Vue组件封装复杂交互控件，提升开发效率。文中还总结了常见坑点及解决方案，如位置偏移、事件未响应等，适用于项目化开发中的UI统一需求。]]></description><category></category></item><item><title><![CDATA[OpenLayers+Vue3深度集成：Composables封装+响应式地图+内存泄漏治理，从入门到生产级方案]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164750380</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164750380</guid><author>wcxrib</author><pubDate>Wed, 09 Sep 2026 17:28:15 +0800</pubDate><description><![CDATA[本文详解Vue3与OpenLayers深度集成的生产级方案，核心解决响应式冲突、内存泄漏等问题。通过shallowRef避免对象深度代理，结合onMounted/onBeforeUnmount精准管理生命周期，使用Composables（如useMap、useLayer、useDraw）实现逻辑复用，借助provide/inject跨组件共享地图实例，构建高效、可维护的地理可视化应用。]]></description><category></category></item><item><title><![CDATA[OpenLayers避坑大全：我踩过的30个坑，看完少走半年弯路]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164374182</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164374182</guid><author>wcxrib</author><pubDate>Wed, 09 Sep 2026 17:26:45 +0800</pubDate><description><![CDATA[本文总结了使用OpenLayers两年来的30个常见坑，涵盖坐标系、图层、交互、样式、性能和导出六大类。核心问题包括坐标偏移（需经GCJ02中转）、图层切换闪烁、交互协同错误、样式不更新及内存泄漏等。关键解决原则：坐标转换分步进行，交互操作先添加后移除，动态更新需调用changed()，大数据用聚合，动画用requestAnimationFrame，导出前等待rendercomplete。建议收藏速查，避免踩坑。]]></description><category></category></item><item><title><![CDATA[OpenLayers动画与视角控制：flyTo+平滑缩放+视图联动，让地图“活“起来]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164452075</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164452075</guid><author>wcxrib</author><pubDate>Tue, 08 Sep 2026 10:07:28 +0800</pubDate><description><![CDATA[本文系统总结了OpenLayers的动画方案：核心API包括view.animate（支持平移、缩放、组合、回调及多段串联）和view.fit（缩放到范]]></description><category></category></item><item><title><![CDATA[OpenLayers轨迹回放：从GPS数据到动画回放，我实现了一个高德地图级别的轨迹回放功能]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164374173</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164374173</guid><author>wcxrib</author><pubDate>Tue, 08 Sep 2026 10:06:53 +0800</pubDate><description><![CDATA[本文基于OpenLayers实现了GPS轨迹回放功能，涵盖数据清洗、坐标转换、轨迹线绘制、车标移动与朝向旋转、速度控制、进度条联动，并总结了图标旋转、坐标转换等关键踩坑点。]]></description><category></category></item><item><title><![CDATA[OpenLayers坐标系完全指南：从WGS84到自定义投影，一篇搞定所有坐标问题]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164373937</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164373937</guid><author>wcxrib</author><pubDate>Tue, 08 Sep 2026 10:06:11 +0800</pubDate><description><![CDATA[本文系统梳理了GIS开发中WGS84、GCJ02、BD09、EPSG:3857等坐标系的原理与偏移关系，详解OpenLayers投影设置、gcoord转换及手写墨卡托公式，并总结BD09跳级转换、GeoJSON偏移等常见坑，提供全场景]]></description><category></category></item><item><title><![CDATA[OpenLayers对接WMS/WFS服务：天地图WMTS+GeoServer图层加载完整指南]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164373921</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164373921</guid><author>wcxrib</author><pubDate>Tue, 08 Sep 2026 10:05:19 +0800</pubDate><description><![CDATA[本文全面指南介绍OpenLayers对接天地图WMTS与GeoServer WMS/WFS服务：分别说明WMTS瓦片网格配置、WMS动态图层加载与要素查询、WFS矢量数据获取，并提供关键参数表和代码示例，帮助开发者快速集成。]]></description><category></category></item><item><title><![CDATA[OpenLayers电子围栏：围栏绘制+进出判断+告警触发]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164374189</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164374189</guid><author>wcxrib</author><pubDate>Tue, 08 Sep 2026 10:04:28 +0800</pubDate><description><![CDATA[本文介绍基于OpenLayers的车辆监控电子围栏系统，涵盖围栏绘制（圆形/多边形）、编辑、进出判断（射线法及Turf.js）、定时监控与告警触发、围栏管理（增删改、启停）及告警样式，实现车辆超出范围实时提醒。]]></description><category></category></item><item><title><![CDATA[OpenLayers导出功能：地图截图+GeoJSON导出完整方案，从Canvas合并到PDF生成]]></title><link>https://blog.youkuaiyun.com/wcxrib/article/details/164373894</link><guid>https://blog.youkuaiyun.com/wcxrib/article/details/164373894</guid><author>wcxrib</author><pubDate>Mon, 07 Sep 2026 10:08:38 +0800</pubDate><description><![CDATA[针对OpenLayers多Canvas图层难以直接导出的问题，文章提供完整方案：通过合并所有图层Canvas实现地图截图，支持PNG/JPEG及高清导出；实现GeoJSON数据导出（含Circle转Polygon与剪贴板复制）；并利用jsPDF生成PDF，覆盖地图导出核心需求。]]></description><category></category></item></channel></rss>