132.在 Vue3 中使用 OpenLayers 实现地图剪切与遮罩效果

🎬 效果预览

👇 点击按钮即可对地图进行遮罩、剪切、取消操作：

🧠 功能说明

本文将教你如何在 Vue 3 中使用 OpenLayers + ol-ext 插件，实现以下功能：

• 加载地图并显示中国边界图层；

• 点击“遮罩”按钮，对地图指定区域进行灰色遮罩处理；

• 点击“剪切”按钮，只显示地图中指定区域，其他部分裁剪掉；

• 点击“取消”按钮恢复地图原始显示效果。

🛠️ 技术栈

• Vue 3 + Composition API

• OpenLayers（地图渲染）

• ol-ext（高级图层效果如 Mask、Crop）

• Element Plus（按钮组件）

• Tailwind CSS（页面布局）

🧩 整体结构

├── src/
│   ├── assets/
│   │   └── map/
│   │       └── china.json        // 中国边界 GeoJSON 数据
│   ├── views/
│   │   └── MapMaskCrop.vue       // 本文的核心组件

📦 安装依赖

npm install ol ol-ext

确保你已经安装并使用 element-plus 和 tailwindcss。

📄 核心代码实现（Vue3 + Composition）

<!--
 * @Author: 彭麒
 * @Date: 2025/5/28
 * @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加载 Feature 做剪切、遮罩处理</div>
    </div>
    <h4>
      <el-button type="primary" size="small" @click="mapmask">遮罩</el-button>
      <el-button type="danger" size="small" @click="mapcrop">剪切</el-button>
      <el-button type="danger" size="small" @click="cancel">取消</el-button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import 'ol/ol.css'
import 'ol-ext/dist/ol-ext.min.css'

import { Map, View } from 'ol'
import OSM from 'ol/source/OSM'
import TileLayer from 'ol/layer/Tile'
import GeoJSON from 'ol/format/GeoJSON'
import Fill from 'ol/style/Fill'
import Mask from 'ol-ext/filter/Mask'
import Crop from 'ol-ext/filter/Crop'

// 引入地理数据
import jsonData from '@/assets/map/china.json'

let map = null
let osmLayer = null
const mask = ref(null)
const crop = ref(null)

const cancel = () => {
  if (mask.value) {
    mask.value.set('active', false)
  }
  if (crop.value) {
    crop.value.set('active', false)
  }
}

const mapcrop = () => {
  cancel()
  const feature = new GeoJSON().readFeature(jsonData.features[0])
  crop.value = new Crop({
    feature,
    wrapX: true,
    inner: false,
  })
  osmLayer.addFilter(crop.value)
}

const mapmask = () => {
  cancel()
  try {
    const feature = new GeoJSON().readFeature(jsonData.features[0])
    console.log('加载的要素：', feature)
    mask.value = new Mask({
      feature,
      wrapX: true,
      inner: false,
      fill: new Fill({
        color: [0, 0, 0, 0.5],
      }),
    })
    osmLayer.addFilter(mask.value)
  } catch (error) {
    console.error('遮罩创建错误：', error)
  }
}

const initMap = () => {
  osmLayer = new TileLayer({
    source: new OSM(),
  })

  map = new Map({
    layers: [osmLayer],
    target: 'vue-openlayers',
    view: new View({
      // 调整为中国的合适坐标范围
      center: [105, 35],  // 中国中心大致位置
      zoom: 4,  // 缩小以显示整个中国
      projection: 'EPSG:4326',
    }),
  })
}

onMounted(() => {
  initMap()
})
</script>

<style scoped>
.container {
  width: 840px;
  height: 570px;
  margin: 50px auto;
  border: 1px solid #42B983;
}
#vue-openlayers {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
  background-color: #f5f5f5; /* 添加背景色以便于调试 */
}
</style>

📁 附：china.json 示例结构

确保你使用的是标准 GeoJSON 格式的中国边界数据：

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ ... ] }, "properties": { ... } } ] }

你可以从 阿里地图GeoJSON数据 下载所需边界数据。

✅ 总结

本文通过 Vue3 + OpenLayers + ol-ext 演示了地图遮罩与裁剪的效果，适用于政务可视化、地理信息系统、可交互地图开发等场景。

✨ 如果你觉得有帮助，欢迎留言交流、点赞收藏！
📌 更多 OpenLayers 高级玩法，后续会持续更新！