使用百度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();
}
}
});
}
效果展示: