烟台广告公司网站建设微信营销软件排行榜
先抛效果图,该区域有很多个小面
之前在网上搜到的方式实现
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);},