个人建什么样的网站好郑州小程序开发报价
🎬 效果预览
👇 点击按钮即可对地图进行遮罩、剪切、取消操作：
🧠 功能说明
本文将教你如何在 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 高级玩法，后续会持续更新！