利用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實現地圖遮罩效果（二）》