烟台广告公司网站建设广州网络推广定制

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

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

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

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

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

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

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

 xzqhAddMark(fea){if(!fea) returnlet _this = thisvar 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);},