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: 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 实现更多视觉效果：

示例：

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

📝 总结

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

• ✅ 不影响地图交互；

• ✅ 不修改图层；

• ✅ 实现简单灵活；

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

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

📚 推荐阅读

• OpenLayers 官方文档

• CSS filter 属性

• Vue 3 Composition API 入门指南

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