百度地圖API：利用瓦片生成工具，自定義背景圖片

       參考酸奶小妹的博文《【百度地圖API】如何制作一張魔獸地圖！！——CS地圖也可以，哈哈哈》 （http://www.cnblogs.com/milkmap/archive/2011/05/27/2060021.html）。

       及博文 《百度地圖：新的瓦片生成工具來了》 鏈接：http://blog.csdn.net/bq_cui/article/details/9396703，開發的工具下載地址：http://blog.csdn.net/bq_cui/article/details/47372005。

一、制作地圖的准備工作

　　其實，你只需要准備一些地圖的瓦片圖，就可以了。

　　用切片工具，把一張完整的圖片（最好大一些，清楚一些），切成小片，可使用 TileCutter工具。

二、了解百度地圖API的地圖圖層接口

構造函數	描述
TileLayer([opts:TileLayerOptions])	創建一個地圖圖層實例。

     接口地址：http://openapi.baidu.com/map/classReference.html#anchor6_TileLayer

使用這個接口，就可以將切好的地圖瓦片鋪在原有的百度地圖上。　

 
          var tileLayer = new BMap.TileLayer();
tileLayer.getTilesUrl = function(tileCoord, zoom) {
 var x = tileCoord.x;
 var y = tileCoord.y;
 var url = 'images/tiles/' + zoom + '/tile' + x + '_' + y + '.png';
 return url;
} 
         

三、限制地圖的顯示級別

　　如果，你只切了1-4級的地圖，那么你的魔獸地圖應該只能顯示1-4級。

　　所以，要對map的顯示做一個限制。看下面源代碼第一行。

　　還需要規定出自定義地圖類型，看源代碼第二行。

　　第三行，添加的魚骨控件，只會顯示1-4級喲~因為在第一行控制了minZoom和maxZoom。

 
          var MyMap = new BMap.MapType('MyMap', tileLayer, {minZoom: 1, maxZoom: 4});
var map = new BMap.Map('container', {mapType: MyMap});
map.addControl(new BMap.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