这里吃了一个小亏,就是已经创建了地图的实例之后,你去获取可视区域的左下右上和夹角,是不准确的
const { BMapGL } = window as any;
const map = new BMapGL.Map("allmap");
map.setMapType(BMAP_SATELLITE_MAP)//卫星图
const cityName = '湖北省';
map.centerAndZoom(cityName, 11);
const xy = new BMapGL.Point(114.42972, 30.54086);
const bdary = new BMapGL.Boundary();//创建行政区实例
map.enableScrollWheelZoom();
const least = 11.523573921952732
bdary.get("湖北省武汉市洪山区", (rs: any) => {
//东西经南北纬的范围
map.clearOverlays(); //清除地图覆盖物
const EN_JW = "180, 90;"; //东北角
const NW_JW = "-180, 90;";//西北角
const WS_JW = "-180, -90;"; //西南角
const SE_JW = "180, -90;";//东南角
//添加环形遮罩层
const ply1 = new BMapGL.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "#fffff9", fillOpacity: 1, strokeOpacity: 0 }); //建立多边形覆盖物
map.addOverlay(ply1);
//5. 给目标行政区划添加边框,其实就是给目标行政区划添加一个没有填充物的遮罩层
const ply = new BMapGL.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#69b0ac", fillColor: "", enableEditing: false });
map.addOverlay(ply);
map.setViewport(ply.getPath()); //调整视野
const bounds = map.getBounds(); //获取地图可视区
const sw = bounds.getSouthWest();
const ne = bounds.getNorthEast();
const boundary = new BMapGL.Bounds(new BMapGL.Point(sw.lng, sw.lat), new BMapGL.Point(ne.lng, ne.lat))
//超出地图可视区返回地图
map.addEventListener("dragend", () => {
if (boundary.containsBounds(map.getBounds())) {
return;
} else {
map.flyTo(xy, least);
}
});
});
map.setMinZoom(least);
map.setMaxZoom(21);
//控制缩放级别
map.addEventListener("zoomend", () => {
const getzoom = map.getZoom()
if (getzoom >= 12) {
map.enableDragging();
} else {
map.disableDragging();
}
})