百度地圖API目前默認支持兩種地圖類型（map type）：普通圖和三維圖，它們分別通過常量BMAP_NORMAL_MAP和BMAP_PERSPECTIVE_MAP來表示，在1.2版本中這兩個常量實際上是MapType對象的實例。當然開發(fā)者也可以自己實例化一個MapType從而實現(xiàn)一個自定義的地圖。
切圖工具的使用
我們先從切圖工具的使用開始，接著再分析該工具產生的代碼來詳細了解自定義地圖的方法。切圖工具放在了github上，具體地址為：https://github.com/jiazheng/BaiduMapTileCutter，進入后請下載TileCutter.exe：
注意，該工具是基于.NET平臺開發(fā)的，所以要求有.NET Framework 4 以上的版本。
啟動這個exe后會出現(xiàn)這個界面：
首先我們要做的就是選擇一張圖片作為地圖的底圖（圖片下載自這里）：
點擊下一步后需要設置輸出的目錄，這里我們直接選擇桌面：
繼續(xù)下一步，這里要設置輸出類型，我們使用默認值，即圖塊和相關代碼都由工具生成：
坐標設置我們使用默認值，即圖片的中心點所在的位置。由于我們制作的是獨立的地圖類型，所以中心點設置為0, 0即可。
級別范圍設置：我們使用自定義，將范圍設置為5到10級，原圖放置在第10級，這樣5到9級工具就會自動縮小圖片。建議原圖所在級別與最大級別一致，否則高于原圖所在級別的時候圖片會發(fā)虛（因為工具會將圖片進行放大處理）。
設置地圖類型的名稱：
一切就緒，最后可以確認所有的信息是否正確。然后就可以點擊“開始切圖”了。
完成了：
這時我們會發(fā)現(xiàn)桌面多了一個index.html和一個tiles文件夾。我們打開index.html會看到結果：
源代碼解析
現(xiàn)在再來看看這個頁面的代碼部分：
<!DOCTYPE html> <html> <head> <title>自定義地圖類型</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body> <div id="map" style="width:800px;height:540px"></div> <script type="text/javascript"> var tileLayer = new BMap.TileLayer(); tileLayer.getTilesUrl = function(tileCoord, zoom) { var x = tileCoord.x; var y = tileCoord.y; return 'tiles/' + zoom + '/tile' + x + '_' + y + '.png'; }var MyMap = new BMap.MapType('MyMap', tileLayer, {minZoom: 5, maxZoom: 10});var map = new BMap.Map('map', {mapType: MyMap}); map.addControl(new BMap.NavigationControl()); map.centerAndZoom(new BMap.Point(0, 0), 10);</script> </body> </html>
代碼先創(chuàng)建了一個TileLayer實例，它代表一個圖層，接著實現(xiàn)getTilesUrl方法提供圖片的路徑。getTilesUrl方法由API在鋪圖的時候進行調用，調用時會提供圖塊編號和級別信息，開發(fā)者要做的就是根據圖塊編號和級別信息返回正確圖片地址（有關坐標和圖塊編號的內容可以閱讀此文）。
下面代碼創(chuàng)建一個MapType實例，第一個參數(shù)為地圖類型的名字，第二個參數(shù)為地圖類型所對應的圖層，這里我們直接傳遞之前創(chuàng)建的TileLayer實例，后面是一些可選的配置參數(shù)，這里指定了最小級別和最大級別。
后面的代碼就很簡單了，創(chuàng)建map實例，并通過配置參數(shù)指定地圖類型為MyMap。
湘公網安備 43010302000270號