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

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

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

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的交互，在低端手机显示比较卡顿，先废弃此方案。

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

2.使用Marker点贴合图片

此方案我想想就觉得扯淡，Marker本身就是做标识用的，要贴合在地图上面，缺点一堆的，点数过多，图片内存占用大，无法缩放等，后面我直接拒绝

3.使用瓦片图TileOverlay

通过查看高德的文档

显示在基本地图上面的一个图层，貌似可以完成贴合手绘地图

然后这个需要后台配合提供在线的瓦片图服务具体代码如下

 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的大小，以达到显示与手绘地图图层之上

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

2.使用Marker点贴合图片

3.使用瓦片图TileOverlay

相关文章：