百度地图根据绘制区域显示,周边城市添加遮罩层。并且能自动缩放比例和视野
之前在做这方面时百度了一些相关的例子!但是都是有一些问题存在!
相关的代码如下:
var map=new BMap.Map("allmap",{
minZoom:12,
maxZoom:18 //设置最大和最小缩放比例
})
map.centerAndZoom(new BMap.Point(114.707802, 23.720266), 12);// 初始化地图,设置中心点坐标和地图级别
map.setCurrentCity("河源市源城区");//设置默认城市
map.enableScrollWheelZoom();
map.disableDoubleClickZoom();
map.setMapStyleV2({ styleJson: styleJson });//个性化主题
var bdary = new BMap.Boundary();
let name="源城区"
bdary.get(name,rs=>{
map.clearOverlays();
var EN_JW = "180, 90;";
var NW_JW = "-180, 90;";
var WS_JW = "-180, -90;";
var SE_JW = "180, -90;";
var locBounds = rs.boundaries[0];
for (var s = 1; s < rs.boundaries.length; s++) { //这个主要解决有些区域遮罩层不全问题
if (rs.boundaries[s].split(";").length > locBounds.length) {
locBounds = rs.boundaries[s];
}
}
var cords = locBounds.split(";");
cords.push(cords[0]);
locBounds = cords.join(";");
var ply = new BMap.Polygon(
locBounds + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
{
strokeColor: "none",
fillColor: "#0C427D",
fillOpacity: 1,
strokeOpacity: 0
}
);
var ply1 = new BMap.Polygon(rs.boundaries[0], {
strokeWeight: 0,
strokeColor: "none",
fillColor: ""
});
map.addOverlay(ply);
map.addOverlay(ply1);
map.setViewport(ply1.getPath()); //调整视野
})