上周刚接到一个需求,产品以为高德的默认地图样式很差看,想要一个手绘地图贴合上去,看着美观不少,然而我心里确是抵触的,没法 ,产品讲了,只能先回答试试看看。接下拉就是一搏谷歌搜索。html
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
此方案我想一想就以为扯淡,Marker自己就是作标识用的,要贴合在地图上面,缺点一堆的,点数过多,图片内存占用大,没法缩放等,后面我直接拒绝性能
经过查看高德的文档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