百度地图只显示行政区域,超出视野范围返回地图中心点,完整案列

 这里吃了一个小亏,就是已经创建了地图的实例之后,你去获取可视区域的左下右上和夹角,是不准确的

  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();
        }
    })

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值