百度地图实现区域省市周边覆盖模糊化(简单实现)

使用百度js api2.0实现,简单实现覆盖模糊化周边.实现原理是用两块三角形区域覆盖,取地图0,0;0,180;180,180;180,0四个角形成周边覆盖效果.仅供参考学习,如有不足之处,欢迎大家提供建议.

function getBoundary(address, linecolor, fillcolor, fillopacity, callback, strokeWeight) {
    if (strokeWeight == null) {
        strokeWeight = 1;
    }
    var boundary = new BMap.Boundary();
	var fx = 0;
	var fy = 0;
    boundary.get(address,
    function(rs) { //获取行政区域
        var count = rs.boundaries.length; //行政区域的点集合有多少个
        for (var i = 0; i < count; i++) {
	    var boundariesArray = rs.boundaries[i];
            var ply = new BMap.Polyline(boundariesArray, {	
                strokeWeight: strokeWeight,
                strokeColor: linecolor,
				strokeStyle: "dashed"
            }); //建立多边形覆盖物
            map.addOverlay(ply); //添加覆盖物
            if (i == 0) {//取第一个坐标集,部分省市有多个坐标集
                map.setViewport(ply.getPath()); //调整视野
                map.setZoom(map.getZoom() - 2);
                //计算东南西北四个顶点经纬度
                var bs = map.getBounds(); //获取可视区域
                var north = bs.getNorthEast().lat; //北
                var south = bs.getSouthWest().lat; //南
                var west = bs.getSouthWest().lng; //西
                var east = bs.getNorthEast().lng; //东
                var mapMaxX = east > west ? east: west;
                var mapMinX = east > west ? west: east;
                //计算最大边界
                var boundaries = boundariesArray.split(";");
                var maxX;
                var maxXIndex = 0;
                var minX;
                var minXIndex = 0;
                var maxY;
                var minY;
                for (var k = 0; k < boundaries.length; k++) {
                    var point = boundaries[k].split(",");
                    if (!maxX) {
                        maxX = point[0];
                        minX = point[0];
                        maxY = point[1];
                        minY = point[1];
                    } else {
                        if (maxX * 1 < point[0] * 1) {
                            maxX = point[0];
                            maxXIndex = k;
                        } else if (minX * 1 > point[0] * 1) {
                            minX = point[0];
                            minXIndex = k;
                        }
                        maxY = maxY * 1 > point[1] * 1 ? maxY: point[1];
                        minY = minY * 1 < point[1] * 1 ? minY: point[1];
                    }
                }
                var start = maxXIndex > minXIndex ? minXIndex: maxXIndex;
                var end = maxXIndex > minXIndex ? maxXIndex: minXIndex;
                var polygonA = [180 + "," + 180 ,0 + "," + 180, 0 + "," + 0];
                var polygonB = [ 0 + "," + 0, 180 + "," + 0,180 + "," + 180];
                var polygonA = polygonA.concat(boundaries.slice(start, end + 1));
                var polygonB = polygonB.concat(boundaries.slice(end, boundaries.length).concat(boundaries.slice(0, start + 1)));
                mapAddPolygon(map, polygonA.join(";"), 0.01, fillcolor, fillopacity, fillcolor);
                mapAddPolygon(map, polygonB.join(";"), 0.01, fillcolor, fillopacity, fillcolor);
            }
            map.setViewport(ply.getPath()); //调整视野
            if (callback) {
                callback();
            }
        }
    });
}

效果展示: