高德地图添加图片覆盖物，限制拖拽缩放范围

 第一步  ： 初始化地图

// 创建地图
      creatMap() {
        this.map = new AMap.Map("mapView", {
          rotateEnable: true,
          pitchEnable: true,
          zoom: 14.5,
        });
      },

第二步 ：将图片覆盖到高德地图上 是图片随着地图放大缩小和拖拽位移

         //声明覆盖物
        const imageLayer = new AMap.ImageLayer({
          url: "图片链接",
          bounds: new AMap.Bounds(
                  [xxx, xxxx], //右上角经纬度
                  [xxx, xxxx]  //左下角经纬度
          ),//范围
          zooms: [12, 20],
        });

          //第一步 初始化地图  
         this.map = new AMap.Map("mapView", {
          rotateEnable: true,
          pitchEnable: true,
          zoom: 14.5,
          zooms: [14.5, 20], // 缩放区间
          center: [xxx, xxxx],  // 中心点坐标
          resizeEnable: false, //是否监控地图容器尺寸变化
          showLabel: false,//是否显示标注
          mapStyle: "amap://styles/30a69840de521825d1c73041ed88fbb6",
          layers: [AMap.createDefaultLayer(), imageLayer],//叠加图层
        });

第三步 ： 限制地图的放大缩小范围已经在map的zooms中限制了，接下来主要是限制地图的拖拽区域，超出区域后回弹到限制区域范围 

此处高德api有现成的方法  ：https://lbs.amap.com/demo/javascript-api/example/map/limit-map-show-range

       logMapInfo() {
        var limitBounds = this.map.getLimitBounds();
        if (limitBounds) {
          document.querySelector("#ne").innerText = limitBounds.northeast.toString();
          document.querySelector("#sw").innerText = limitBounds.southwest.toString();
        } else {
          document.querySelector("#ne").innerText = document.querySelector("#sw").innerText = "未限定";
        }
      },
      
      lockMapBounds(){
        var bounds = this.map.getBounds();
        this.map.setLimitBounds(bounds);
        this.logMapInfo();
      },

在creatMap方法里调用this.lockMapBounds() 就会限制拖拽区域

2023.3.14（补充）

直接声明

imageLayer 

将他add到map即可，前面太麻烦了。

  //声明覆盖物
            const imageLayer = new AMap.ImageLayer({
                url: "",
                bounds: new AMap.Bounds(
                    [120.58, 36.235], //右上角经纬度
                    [120.54, 36.205]  //左下角经纬度
                ),//范围
                zooms: [12, 20],
            });
            _that.map = map;