一、制作地图的准备工作
其实,你只需要准备一些地图的瓦片图,就可以了。
用切片工具,把一张完整的图片(最好大一些,清楚一些),切成小片,可使用 TileCutter工具。
二、了解百度地图API的地图图层接口
构造函数
描述
TileLayer([opts:TileLayerOptions])
创建一个地图图层实例。
使用这个接口,就可以将切好的地图瓦片铺在原有的百度地图上。
vartileLayer =newBMap.TileLayer();
tileLayer.getTilesUrl =function(tileCoord, zoom) {
varx =tileCoord.x;
vary =tileCoord.y;
varurl ='images/tiles/'+zoom +'/tile'+x +'_'+y +'.png';
returnurl;
}
三、限制地图的显示级别
如果,你只切了1-4级的地图,那么你的魔兽地图应该只能显示1-4级。
所以,要对map的显示做一个限制。看下面源代码第一行。
还需要规定出自定义地图类型,看源代码第二行。
第三行,添加的鱼骨控件,只会显示1-4级哟~因为在第一行控制了minZoom和maxZoom。
varMyMap =newBMap.MapType('MyMap', tileLayer, {minZoom: 1, maxZoom: 4});
varmap =newBMap.Map('container', {mapType: MyMap});
map.addControl(newBMap.NavigationControl());
----------------------------------------------------------------------------------
我是采用的
1.利用TileCutter工具将原始图片切为1-5级,原始图片所在级别为2级。
2.直接修改了离线API的js
改为:Uc.getTilesUrl=function(a,b,c){var x=a.x,y=a.y,e=1,z=b;return "tiles/"+z+"/"+x+"/tile"+x+"_"+y+".png";};
3.替换瓦片地图文件夹images/tiles/XXX