利用Openlayers4简单实现地图遮罩效果（一）

地图遮罩通常用来突出显示某一块特定区域，先来看下效果。(中间带白边的为遮罩层)

原理：在原地图上增加一个矢量图层，在图层中添加一个面要素，并对面要素使用半透明的样式。

var map,baseLayer;

//定义图层样式
var mystyle = new ol.style.fill({
    fill: new ol.style.Fill({
        color:"rgba(72,61,139, 0.2)",//重点在这里，采用rgba颜色，最后一个值用来表示透明度
    }),
    stroke: new ol.style.Stroke({
        color:"#BDBDBD",
        width:2
    }) 
})
var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: mystyle
})

/**
 * 初始化地图
 */
function initMap(){
    baseLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: "http://localhost:8080/geoserver/china/wms",
            params:{
                'LAYERS': "china:baseMap;",
                'TILED': false
            },           
        })
    });
    
    var view = new ol.View({
        center: [116.727085860608, 35.20619600133295],
        zoom:10.5,
        projection: "EPSG:4326"
    });

    map = new ol.Map({
        target: "map",
        view: view,
        layers:[baseLayer,vectorLayer]
    });
}

/**
 * 根据名称加载遮罩层
 * @param {*} name1 
 */
function addCoverLayer(name1){
	//清除原来的要素
    vectorSource.clear();

    $.getJSON('/region.geojson',function(data){
        var features = (new ol.format.GeoJSON()).readFeatures(data);        
        features.forEach(function(element) {
            //从数据中取出name字段值为name1的区域,进行加载
            if(element.get("name") === name1){
                vectorSource.addFeature(element);
            }
        });
    })
}

其中，在开头新建了一个样式，并且使用透明填充。然后将样式应用到矢量图层上。通过函数过滤出遮罩区域，并将区域范围加载到矢量图层上。
遮罩的数据来源是geojson格式，里面为面类型的数据，采用name字段来进行数据过滤。
在页面加载完地图后，调用addConverLayer并传如name参数就即可。
如果需要在外围添加遮罩，参考另一篇博文：《利用Openlayers4实现地图遮罩效果（二）》