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> 元素，并为其设置 CSS filter 即可。渲染过程通过 map.render() 强制刷新。

🛠️ 完整代码实现

<!--* @Author: 彭麒* @Date: 2025/7/7* @Email: [e-mail]* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。-->
<template><div class="container"><div class="w-full flex justify-center flex-wrap"><div class="font-bold text-[24px]">在Vue3中使用OpenLayers设置原始图、模糊、色相翻转、阴影效果</div></div><h4><el-button type="success"  size="small" @click="setFilter('none')">原始图</el-button><el-button type="primary"  size="small" @click="setFilter('blur(5px)')">模糊</el-button><el-button type="warning"  size="small" @click="setFilter('hue-rotate(180deg)')">色相翻转</el-button><el-button type="info"     size="small" @click="setFilter('drop-shadow(0 0 5px #000)')">阴影</el-button></h4><div id="vue-openlayers"></div></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'/** OpenLayers 实例引用 */
const map = ref(null)/** 统一设置滤镜 */
function setFilter(filterValue) {if (!map.value) return// 直接设置 canvas 滤镜const canvas = document.querySelector('#vue-openlayers canvas')if (canvas) {canvas.style.filter = filterValue} else {// 如果找不到canvas，可以尝试使用更精确的选择器const canvasAlt = document.querySelector('#vue-openlayers .ol-viewport canvas')if (canvasAlt) canvasAlt.style.filter = filterValue}// 强制地图重新渲染map.value.render()
}onMounted(() => {map.value = new Map({target: 'vue-openlayers',layers: [new TileLayer({source: new OSM()})],view: new View({projection: 'EPSG:4326',center: [116.648, 39.271],zoom: 7})})
})
</script><style scoped>
.container {width: 840px;height: 570px;margin: 50px auto;border: 1px solid #42B983;position: relative;
}#vue-openlayers {width: 800px;height: 400px;margin: 0 auto;border: 1px solid #42B983;position: relative;
}
</style>

---

🧠 延伸知识

你可以使用 filter 实现更多视觉效果：

效果名称	示例值
灰度图	grayscale(100%)
亮度增强	brightness(1.5)
对比度增强	contrast(200%)
色彩饱和度降低	saturate(20%)
多种滤镜叠加	blur(3px) brightness(1.2)

示例：

setFilter('grayscale(100%) contrast(1.2) brightness(0.8)')

---

📝 总结

这种基于 canvas 层的视觉滤镜方案：

• ✅ 不影响地图交互；

• ✅ 不修改图层；

• ✅ 实现简单灵活；

• ✅ 可叠加自定义动画与动效。

适合快速实现地图视觉风格定制，如暗黑主题、增强对比、界面切换特效等场景。

---

📚 推荐阅读

• OpenLayers 官方文档

• CSS filter 属性

• Vue 3 Composition API 入门指南

---

如需完整源码和在线体验，欢迎关注作者仓库或私信获取 🔧
如你觉得本篇文章对你有帮助，记得点赞 + 收藏 + 关注！