先抛效果图,该区域有很多个小面

之前在网上搜到的方式实现

Openlayers 为目标范围以外的区域添加遮罩 - 知乎

核心代码如下，如果您不需要兼容全国的所有省市，而刚好要加地区又是连贯的区域的话，该方法可行，但是如果需要兼容全国的省市县的话，就不要用了，会出现我下面的效果图

然后我就自己找了一种方式去实现

其实加遮罩的思路很简单，就是将世界范围和行政区相交，然后取反就是我们需要加遮罩的区域了

实现代码如下所示（该方法可以兼容所有的情况，而且即便需要对多个省市区以外加遮罩也是可以稍加修改实现的）

 xzqhAddMark(fea){
         if(!fea) return
         let _this = this
          var globalGeom = new Polygon([
            [[-180, -90], [-180, 90], [180, 90], [180, -90], [-180, -90]]
          ])
         _this.maskLayer.getSource().clear()
            var maskGeometry = fea.getGeometry()
            var difference = _this.jstsDifference(globalGeom, maskGeometry);
            var convertFt = new Feature({
                geometry: difference
            })
            _this.maskLayer.getSource().addFeature(convertFt);
            _this.map.getView().fit(maskGeometry.getExtent());
    },
    // 差异分析,可以达到相交取反的效果
    jstsDifference(geom, geomB){
          const jstsGeom = OLParser.read(geom);
          const jstsGeomB = OLParser.read(geomB);
          const difference = jstsGeom.difference(jstsGeomB);
          return OLParser.write(difference);
    },