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端的具体贴合可以参考]https://www.cnblogs.com/milkmap/p/6430052.html
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的大小,以达到显示与手绘地图图层之上