Android高德地图贴合图片完成手绘地图展现

上周刚接到一个需求，产品以为高德的默认地图样式很差看，想要一个手绘地图贴合上去，看着美观不少，然而我心里确是抵触的，没法 ，产品讲了，只能先回答试试看看。接下拉就是一搏谷歌搜索。html

1.使用web版本的高德地图，而后和native交互完成

web端有现成的方案，直接贴合自定义图片web

var imageLayer = new AMap.ImageLayer({
        url: 'gulangyu.png',
        bounds: new AMap.Bounds(
         [118.057708, 24.436293],   //左下角
         [118.077706, 24.454069]    //右上角
         ),
        zooms: [15, 18]
    });
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [118.067042,24.444673],
        zoom: 15,
        layers: [
            new AMap.TileLayer(),
            imageLayer
        ]
    });
复制代码

上面就能够直接贴合手绘地图，须要四角定位，而后直接把图片的图层贴合上去。缓存

考虑到性能问题以及后续的web和native的交互，在低端手机显示比较卡顿，先废弃此方案。bash

[web端的具体贴合能够参考]www.cnblogs.com/milkmap/p/6…ide

2.使用Marker点贴合图片

此方案我想一想就以为扯淡，Marker自己就是作标识用的，要贴合在地图上面，缺点一堆的，点数过多，图片内存占用大，没法缩放等，后面我直接拒绝性能

3.使用瓦片图TileOverlay

经过查看高德的文档ui

而后这个须要后台配合提供在线的瓦片图服务 具体代码以下url

private void initTile() {
    //后台的瓦片图路径
    final String tileUrl = "http://******/mapImg/tiles/";
    TileOverlayOptions tileOverlayOptions =
        new TileOverlayOptions().tileProvider(new UrlTileProvider(256, 256) {

          @Override
          public URL getTileUrl(int x, int y, int zoom) {
            try {
              // x横坐标 ，y纵坐标，zoom缩放比
              String url = tileUrl + zoom+ "/"+x + "_" + y + ".png";
              LogUtils.i(url);
              return new URL(url);
            } catch (Exception e) {
              e.printStackTrace();
            }
            return null;
          }
        });
    tileOverlayOptions.diskCacheEnabled(true)
        //添加缓存路径
        .diskCacheDir("/storage/emulated/0/amap/OMCcache")
        //瓦片图数量
        .diskCacheSize(100000)
        .memoryCacheEnabled(true)
        .memCacheSize(100000)
        //显示的优先级
        .zIndex(-9999);
    //添加到地图
    TileOverlay mtileOverlay = aMap.addTileOverlay(tileOverlayOptions);
  }
复制代码

只须要返回后台的图片url路径便可完成瓦片图加载,其中x,y都是根据zoom的缩放比计算的，并且获取图片，要注意对应的参数，还有一个比较重要的是zIndex的设置，若是还有路径规划相似的Overlay须要设置zIndex的大小，以达到显示与手绘地图图层之上spa