话不多说,先上效果图

drawShadowBound(coordinates,boundData){
/*画遮蔽层的相关方法
*思路: 首先在中国地图最外画一圈,圈住理论上所有的中国领土,然后再将每个闭合区域合并进来,并全部连到西北角。
* 这样就做出了一个经过多次西北角的闭合多边形*/
//定义中国东南西北端点,作为第一层
var pNW = {lat: 59.0, lng: 73.0};
var pNE = {lat: 59.0, lng: 136.0};
var pSE = {lat: 3.0, lng: 136.0};
var pSW = {lat: 3.0, lng: 73.0};
// let pNW = {lat: 90, lng:-180};
// let pNE = {lat: 90, lng:180 };
// let pSE = {lat: -90, lng: -180};
// let pSW = {lat:90, lng:180};
//向数组中添加一次闭合多边形,并将西北角再加一次作为之后画闭合区域的起点
var pArray = [];
pArray.push(pNW);
pArray.push(pSW);
pArray.push(pSE);
pArray.push(pNE);
pArray.push(pNW);
//循环添加各闭合区域
for (let i = 0; i < coordinates.length; i++) {
let points = [];
let item1 = coordinates[i]
for(let j=0,l1=item1.length;j<l1;j++){
let item2 = item1[j]
for(let k = 0,l2 = item2.length;k<l2;k++){
let item3 = item2[k]
points.push({lat: item3[1], lng: item3[0]});
}
}
//将闭合区域加到遮蔽层上,每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
pArray = pArray.concat(points);
pArray.push(pArray[0]);
}
//添加遮蔽层
// var plyall = L.polygon(pArray, {color: 'transparent', fillColor: '#282525', fillOpacity: 0.5}); //建立多边形覆盖物
var plyall = L.polygon(pArray, {color: '#282525', fillColor: 'transparent', fillOpacity: 0.5}); //建立多边形覆盖物
plyall.addTo(this.map);
}
实现的原理是,拿到高亮区的geometry,然后在中国以为的地区,取四个角,形成矩形,然后再通过在数据中追加第一个矩形的点,使得这个多边型闭合。但是这样就会出现一个问题,从图上可以看到,地图上会出现多余的线条,这就是连接闭合时候的线,不够美观。
前端实在没办法了,只能通过后台(java),从这个大矩形与高亮区图形处理,得到diff,就遮罩层的geojson,前端叠上去就ok了。
网友评论