当前位置：首页 > news >正文

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

news 来源：原创 2025/5/30 14:58:22

🎬 效果预览

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

🧠 功能说明

本文将教你如何在 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数据下载所需边界数据。