openlayers实现四周遮罩，特定区域透明效果

1、效果如图所示

2、地图标签

<template><div id=icingliveMap class=icingliveMap></div>
</template>

、样式

<style>
html, body, #app, .icingliveMap{width: 100%;height: 100%;
}
</style>

4、导入openlayers的API、导入axios

import ol/;
import { Map, View, Tile, Feature, Overlay } from ol;
import { XYZ, Vector as VectorSource, ImageStatic, ImageCanvas as ImageCanvasSource} from ol/source;
import { Tile as TileLayer, Vector as VectorLayer, Image as ImageLayer,} from ol/layer; 
import { GeoJSO, WKT } from ol/format;
import { defaults, MousePosition } from ol/control;
import { createStringXY } from ol/coordinate;
import { LinearRing, LineString, Point, Polygon } from ol/geom;
import { fromExtent } from ol/geom/Polygon;
import { Style, Stroke, Text, Fill, Circle, Icon, IconImage, RegularShape,} from ol/style;
import axios from 	axios	

5、地图对象

data(){return{icingMap: null,}
}

6、加载地图

mounted(){this.initIcingMap();
}

7、方法调用

methods: {//初始化地图initIcingMap(){//地图对象this.icingMap = new Map({target: icingliveMap,controls: defaults({attribution: false,rotate: false,zoom: false,}),view: new View({projection: EPSG:426,center: [109.24, 2.96],zoom: 7,}),layers: [],overlays: [],});//添加地图类型let baseMap = [{ name: 天地图交通图, type: vec_w, zindex: 1 },{ name: 天地图交通图标注, type: cva_w, zindex: 2 },];((item) => {let mapUrl = `=${}&x={x}&y={y}&l={z}&tk=`  token;( `tianditu_${}`, mapUrl, item.zindex);});//创建蒙层，凸显广西区域this.showGuangxiArea();},//显示隐藏图层showHideLayer(layerIds, flag) {let layer = null;let arr = [];Array.isArray(layerIds) ? (arr = layerIds) : arr.push(layerIds);((id) => {layer = this.findLayerById(id);if (layer) {layer.setVisible(flag);}});},//根据图层ID查图层findLayerById(layerId) {let layerGroup = this.icingMap.getLayers();let layers = layerGroup.getArray();let matchLayer = null;for (let i = 0; i < layers.length; i) {let prop = layers[i].getProperties();if (prop[layerId] === layerId) {matchLayer = layers[i];break;}}return matchLayer;},//创建天地图类型createTianDiTuLayer(layerId, url, zIndex) {let tianDiTuLayer = new TileLayer({layerId: layerId,source: new XYZ({ url: url }),zIndex: zIndex,});this.icingMap.addLayer(tianDiTuLayer);},//创建蒙层，凸显广西区域showGuangxiArea(){ let initLayer = new VectorLayer({zIndex: ,source: new VectorSource(),style: new Style({fill: new Fill({color:rgba( 255, 255, 255, 0.7),}),stroke: new Stroke({color:#f4b49f,width:})})});this.icingMap.addLayer(initLayer);axios.get(	../../geojson/gx.geojson	).then(({ data }) => {this.addConver(initLayer, data);});},//添加遮罩addConver(converLayer, data) {ct fts = new GeoJSO().readFeatures(data);ct ft = fts[0];ct converGeom = (ft.getGeometry());ct convertFt = new Feature({geometry: converGeom,});converLayer.getSource().addFeature(convertFt);},//擦除操作，生产遮罩范围erase(geom) {ct extent = [-180, -90, 180, 90];ct polygonRing = fromExtent(extent);ct coords = geom.getCoordinates();coords.forEach(coord => {ct linearRing = new LinearRing(coord[0]);polygonRing.appendLinearRing(linearRing);});return polygonRing;}}