阅读 132

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

通过查看高德的文档

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

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

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

关注下面的标签,发现更多相似文章
评论