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

Openlayers4实现地图四周遮罩效果

最新推荐文章于 2025-07-25 14:22:58 发布

此爱如少年

最新推荐文章于 2025-07-25 14:22:58 发布

阅读量6.1k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： Openlayers4笔记 openlayers开发文章标签：遮罩 openlayers 覆盖层地图 webgis

本文链接：https://blog.youkuaiyun.com/u012413551/article/details/88937819

效果对比

在之前实现的遮罩效果《利用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