145.在 Vue3 中使用 OpenLayers 设置原始图、模糊、色相翻转、阴影效果

本文介绍如何利用 OpenLayers 和 Vue3 实现地图画布的滤镜效果，例如：原始图、模糊、色相翻转、阴影等。无需操作地图图层，只需对 canvas 元素设置 CSS 样式即可。

✨ 实现效果预览

点击不同按钮，实现地图滤镜快速切换：

• ✅ 原始图：none

• 🔍 模糊：blur(5px)

• 🎨 色相翻转：hue-rotate(180deg)

• 🌑 阴影：drop-shadow(0 0 5px #000)

📦 技术栈

• Vue 3 + Composition API

• OpenLayers v6+

• Element Plus

• CSS Filter 滤镜样式

🧩 核心思路

我们无需操作底图图层，只需获取地图对应的 <canvas> 元素，并为其设置