利用Openlayers4实现地图遮罩效果（二）

原创

于 2019-06-27 22:23:00 发布 · 6.1k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#遮罩 #openlayers #覆盖层 #地图 #webgis

效果对比

在之前实现的遮罩效果《利用Openlayers4简单实现地图遮罩效果（一）》，在深色背景的底图上，对要突出的区域采用半透明遮罩，以此来突出该区域。暂且称之为中心遮罩，遮罩前后对比如下图：

遮罩后
但是有时底图颜色偏白，这时候不再适合对要突出的区域采用遮罩，而是要对突出区域之外进行遮罩处理。暂且称为四周遮罩如下图：

代码实现

实现代码如下：
js代码

(function(){
   
   
    
    var map, converLayer;
    function initMap() {
   
   
        var baselayer = new ol.layer.Tile({
   
   
            source: new ol.source.XYZ({
   
   
                url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}'
            })
        });
    
        map = new ol.Map({
   
   
            target: 'map',
            layers: [baselayer],
            view: new ol.View({
   
   
                projection: 'EPSG:4326',
                center: [112, 36],
                zoom: 6
            })
        });

        var mystyle = new ol.style.Style({
   
   
            fill: new ol.style.Fill