高德地图覆盖自定义瓦片图

前提：前端数据展示大屏需要展示一张1G左右的水库周边全景图（原计划20G，实际1G左右就已经够用了），此文章只作为本人项目工作经验总结。1G直接加载的话对浏览器的压力太大，而且需要缩放和拖拽，所以借鉴地图的展示原理。

项目需求：

1.展示一张1G的全景图

2.需要拖拽、缩放

3.限制缩放范围（zooms）

4.限制拖拽区域

5.将图片切成瓦片图

需要的工具和文档

1.ps  （需要将tiff格式的图片转成能用的png或jpg、需要确定初始的放大倍率，将图片完美嵌入到卫星云图中）

2.切片工具 

（1）maptile专业测试版 （需要付费使用，测试版有水印）

 这个软件很好用，可以加微信买正版，网上有教程，很全面

https://blog.csdn.net/bq_cui/article/details/47372005?spm=1001.2014.3001.5502

下载地址

http://www.1hwj.net/forum.php?mod=viewthread&tid=1&extra=page%3D1

（2）高德切图工具   （开源的，但是处理不了大图，也有百度切图工具，感兴趣的可以下一个玩一下）

 下载地址：GitHub - jiazheng/BaiduMapTileCutter: Tile cutter for baidu map api  

（3）高德地图文档   （捡几个关键的）

图层-参考手册-地图 JS API | 高德地图API  （瓦片地图参考api）

高德坐标拾取   （拾取地图经纬度）

限制地图显示范围-地图属性-示例中心-JS API 示例 | 高德地图API   （限制拖拽区域）

思路：

1.确定地图的放大倍数区间

2.使用切片工具切成瓦片，让后端传到服务器上（注意同源策略）

切出来的每一放大级别都放在各自文件夹下（文件夹名称对应地图zoom）

var layer_std = new AMap.TileLayer();
        this.map = new AMap.Map("mapView", {
          rotateEnable: true,
          pitchEnable: true,
          zoom:14,
          zooms:[14,19],
          center: [120.145147, 36.868],  // 中心点
          resizeEnable: false, //是否监控地图容器尺寸变化
          showLabel: false,//是否显示标注
          mapStyle: "amap://styles/30a69840de521825d1c73041ed88fbb6",
          layers: [layer_std,new AMap.TileLayer.Satellite()],//叠加图层
        });
        var tilerLayer = new AMap.TileLayer({
          zIndex:10,
          getTileUrl: function(x,y,z){
            // console.log('http://zz.xizhengtech.com/resource/tiles/' + z + '/' + x +'_' + y + '.png')
            return 'http://*********/resource/tiles/' + z + '/' + x +'_' + y + '.png'
          }
        });
        tilerLayer.setMap(this.map);

zooms是指定的的放大区间

new AMap.TileLayer.Satellite()是将地图设置成卫星云图

var tilerLayer = new AMap.TileLayer({
          zIndex:10,
          getTileUrl: function(x,y,z){
            // console.log('http://zz.xizhengtech.com/resource/tiles/' + z + '/' + x +'_' + y + '.png')
            return 'http://*********/resource/tiles/' + z + '/' + x +'_' + y + '.png'
          }
        });
 tilerLayer.setMap(this.map); 

getTileUrl  这里是按照放大倍数，区域位置请求线上的图片资源

 var tilerLayer = new AMap.TileLayer({
      zIndex:10,
      getTileUrl: function(x,y,z){
     //return /*dir*/'tiles/' + z + '/' + x + '_' + y + '.png'; 
     return /*dir*/'tiles/' + z + '/' + x + '_' + y + '.png'; 
      }
   });
tilerLayer.setMap(map);

这个是取本地资源的方法

限制拖拽区域  用的高德的公用方法

   限制地图显示范围-地图属性-示例中心-JS API 示例 | 高德地图API （限制拖拽区域）

 lockMapBounds(){
        var bounds = this.map.getBounds();
        this.map.setLimitBounds(bounds);
        this.logMapInfo();
      },


      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 = "未限定";
        }
      },

其他的想起来再补充

高德地图在添加marker的时候会有缩放导致marker位置发生位移的情况需要提前设置一个偏移量

　var marker = new AMap.Marker({
            offset: new AMap.Pixel(-18,-38),
        });