深圳政府网站字体要求超级优化大师下载
本文介绍如何利用 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: 1062470959@qq.com* @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 入门指南
如需完整源码和在线体验，欢迎关注作者仓库或私信获取 🔧
如你觉得本篇文章对你有帮助，记得点赞 + 收藏 + 关注！