咱们书接上上文,在上上文里面给大家分享了”ol4中实现只能查看用户权限所在区的地图“,在本文给大家分享一个结合turf.js实现区域裁剪实现地图模态层的效果。
1、输入 1)最大的四至(-180,-90,180,90) 2)裁剪区域的地图边界数据;
2、操作 计算最大四至和裁剪区域的difference
3、输出 裁除了裁剪区域的多边形
var boundCoord = [[[-180,-90], [180,-90], [180,90], [-180,90], [-180,-90]]];
var zoneCoord = [[[],[]]];
var boundGeo = turf.polygon(boundCoord),
zoneGeo = turf.polygon(zoneCoord);
var modalJson = turf.difference(boundGeo, zoneGeo);
var features = (new ol.format.GeoJSON()).readFeatures(modalJson);
var vector = new ol.layer.Vector({
renderMode: "image",//image, vector
source: new ol.source.Vector({
features: features
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 0, 0, 0.5)'
})
}),
zIndex: 999
});
map.addLayer(vector);
注意: