OpenLayer4——多边形遮罩层

知识点：多边形异或运算的使用

业务场景：如下图，有些时候，会有一些特殊的需求，只保留某个区域内部的地图部分。

这时候，可以使用多边形的异或运算知识，取-180,-90,180,90范围的区域，与需要截取的区域异或运算，最后保留需要的部分。

 

 

核心代码如下：

/**
 * 图层截取，多余的部分添加白色遮罩层
 * @param polygon
 */
function cutImageByShade(polygon) {
    //地图全部范围
    var extent = [-180, -90, 180, 90];
    var polygonShade = ol.geom.Polygon.fromExtent(extent);
    var corr1 = polygonShade.getCoordinates();

    //异或逻辑，需要截取的部分，与整张地图进行异或计算
    polygonShade.setCoordinates([corr1[0], polygon]);

    //除了需要截取的部分，全部渲染成白色，按需调整
    var shadeFeature = new ol.Feature(polygonShade);
    shadeFeature.setStyle(new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'white'
        })
    }));
    vector.getSource().addFeature(shadeFeature);
}