百度地图（BMapGL） 显示可视范围的插件 mapMaxBounds

class mapMaxBounds {
　　
　　
    // map 是百度的BMap实例对象
    // bounds 是百度的可视范围类型 BMap.bounds
    // 这里的map类型在我开发的时候使用的是BMapGL
    constructor(map, bounds) {

this.map = map;
        map.disableInertialDragging();
        this.enableMaxBounds(bounds);
    }

    // 关闭限制区域
    disableMaxBounds() {
        this.map.container.removeEventListener("mouseup", this.containerMounseup);
        this.map.removeEventListener("moving", this.moving);
        this.map.removeEventListener("zoomstart", this.zoomstart);
        this.map.removeEventListener("zoomend", this.zoomend);
    }

    // 开启限制最大范围
    enableMaxBounds(bounds) {
        // 开启监听
        // var extent=new Object();
        // extent.minX="-180.380133";
        // extent.maxX="177.557674";
        // extent.minY="-80.395352";
        // extent.maxY="86"; 

        let _this = this;

        let oldPoint = null;
        let oldBounds = null, oldCenter = null, oldZoom = null;

        // this.containerMousedown = (e)=>{  };
        // this.map.container.addEventListener("mousedown", this.containerMousedown);

        this.containerMounseup = (e) => { this.map.enableDragging(); }
        this.map.container.addEventListener("mouseup", this.containerMounseup);

        // this.movestart = function(){ }
        // this.map.addEventListener("movestart", this.movestart);

        // this.dragend = function(){ console.log("dragend"); }
        // this.map.addEventListener("dragend", function(){ console.log("dragend"); });

        this.moving = function (type, target) {
            if (!bounds.containsBounds(this.getBounds())) {

                if (oldPoint) {

                    this.panTo(oldPoint, { noAnimation: false });
                }
                this.disableDragging();
            } else {
                oldPoint = this.getCenter();
            }
        }
        this.map.addEventListener("moving", this.moving);

        this.zoomstart = function () {
            if (!map.config.enableWheelZoom) return;
            oldBounds = this.getBounds();
            oldCenter = this.getCenter();
            oldZoom = this.getZoom();
        }
        this.map.addEventListener("zoomstart", this.zoomstart);

        const keyZoom = true;

        this.zoomend = function (type, target) {

            if (!map.config.enableWheelZoom) return;

            if (!bounds.containsBounds(this.getBounds())) {
                this.disableScrollWheelZoom();
                setTimeout(() => {
                    this.enableScrollWheelZoom()
                }, 1000)
                // oldBounds && this.setViewport([oldBounds.sw,oldBounds.ne], { enableAnimation: false, delay: 0, zoomFactor: -1});
                if (oldZoom < 4.4 || this.getZoom() < 4.6) {
                    // this.setBounds(bounds);
                    // this.panTo(new BMapGL.Point(106.75431201486032, 34.13381700418861), { noAnimation: false });
                    // this.setZoom(4.5);
                    this.setViewport({ center: new BMapGL.Point(106.75431201486032, 34.13381700418861), zoom: 4.5 })
                }
                else if (this.getZoom() != oldZoom) {
                    //this.panTo(oldCenter, { noAnimation: false });
                    //this.setZoom(oldZoom);
                    //this.centerAndZoom(oldCenter, oldZoom);
                    this.setViewport({ center: oldCenter, zoom: oldZoom });
                }
            };
        }
        this.map.addEventListener("zoomend", this.zoomend);

        this.map._off = this.map.off;
        this.map.off = function (type) {
            this._off.apply(this, arguments);
            if (type === "zoomend") {
                this.addEventListener("zoomend", _this.zoomend);
            }
        }
    }
}