OpenLayers如何给地图添加遮罩层

（本篇文章前提是了解openlayers具体使用方法）

先上图：

如图所示，遮罩层就是覆盖在地图上面的蓝色透明图层，但是中间是挖空掉的，挖空掉的部分就显示地图原本的样子。一些业务需求就是要这种效果，感觉只是在造型上起到作用吧（bushi）。

大致原理其实就是：emm...上图

所以我们需要两个主要的数据，一个是遮罩层（相当于橡皮泥），一个是边界线（相当于磨具）

代码如下：

// 开始之前记得先import引入ol的相关方法哦，这里不再赘述了
addReverseBoundary() {
    let features = [];
    const format = new GeoJSON();
    // boundLine就是边界线了，一般都是从后端获取，我的是json文件，也有的是wkt，目标都是要转成feature，具体百度一下
    let fes = format.readFeature(boundLine, {
        dataProjection: 'EPSG:4326', // 数据坐标系
        featureProjection: 'EPSG:4326', // 目标坐标系
    });
    features.push(fes);
    const reversalGeom = this.reversalGeometry(features);
    const convertFt = new Feature({
        geometry: reversalGeom.transform('EPSG:4326', 'EPSG:3857'),
    });
    convertFt.setStyle(
        new Style({
            fill: new Fill({
                color: 'rgba(8,5,66,0.65)',
            }),
            stroke: new Stroke({
                color: '#1c8acf ',
                width: 3,
            }),
        })
	);
    const vLayer = new VectorLayer({
        source: new sourceVector({
            features: [convertFt],
        }),
    });
    vLayer.setZIndex(2); // 设置一下层级
    this.map.addLayer(vLayer); // 添加到地图上
},
reversalGeometry(fes) {
    // 先平铺一张遮罩层，遮罩层的大小当前屏幕视窗的四个角范围
    const polygonRing = fromExtent([-180, -90, 180, 90]);
    // 边界线可能不止一个，所以得循环操作一下
    for (let i = 0, len = fes.length; i < len; i++) {
        let geom = fes[i].getGeometry();
        let isMulit = false;
        if (geom instanceof MultiPolygon) isMulit = true; 
        const coords = geom.getCoordinates();
        coords.forEach((coord) => {
            let arr = coord[0];
            if (!isMulit) arr = coord; //单面
			const linearRing = new LineString(arr);
			polygonRing.appendLinearRing(linearRing);
		});
	}
    return polygonRing;
}