詳解百度地圖API之自定義地圖類(lèi)型
今天的文章主要介紹如何利用地圖API實(shí)現(xiàn)自定義地圖。
百度地圖API目前默認(rèn)支持兩種地圖類(lèi)型（map type）：普通圖和三維圖，它們分別通過(guò)常量BMAP_NORMAL_MAP和BMAP_PERSPECTIVE_MAP來(lái)表示，在1.2版本中這兩個(gè)常量實(shí)際上是MapType對(duì)象的實(shí)例。當(dāng)然開(kāi)發(fā)者也可以自己實(shí)例化一個(gè)MapType從而實(shí)現(xiàn)一個(gè)自定義的地圖。
切圖工具的使用
我們先從切圖工具的使用開(kāi)始，接著再分析該工具產(chǎn)生的代碼來(lái)詳細(xì)了解自定義地圖的方法。切圖工具放在了github上，具體地址為：https://github.com/jiazheng/BaiduMapTileCutter，進(jìn)入后請(qǐng)下載TileCutter.exe：
注意，該工具是基于.NET平臺(tái)開(kāi)發(fā)的，所以要求有.NET Framework 4 以上的版本。
啟動(dòng)這個(gè)exe后會(huì)出現(xiàn)這個(gè)界面：
首先我們要做的就是選擇一張圖片作為地圖的底圖（圖片下載自這里）：
點(diǎn)擊下一步后需要設(shè)置輸出的目錄，這里我們直接選擇桌面：
繼續(xù)下一步，這里要設(shè)置輸出類(lèi)型，我們使用默認(rèn)值，即圖塊和相關(guān)代碼都由工具生成：
坐標(biāo)設(shè)置我們使用默認(rèn)值，即圖片的中心點(diǎn)所在的位置。由于我們制作的是獨(dú)立的地圖類(lèi)型，所以中心點(diǎn)設(shè)置為0, 0即可。
級(jí)別范圍設(shè)置：我們使用自定義，將范圍設(shè)置為5到10級(jí)，原圖放置在第10級(jí)，這樣5到9級(jí)工具就會(huì)自動(dòng)縮小圖片。建議原圖所在級(jí)別與最大級(jí)別一致，否則高于原圖所在級(jí)別的時(shí)候圖片會(huì)發(fā)虛（因?yàn)楣ぞ邥?huì)將圖片進(jìn)行放大處理）。
設(shè)置地圖類(lèi)型的名稱：
一切就緒，最后可以確認(rèn)所有的信息是否正確。然后就可以點(diǎn)擊“開(kāi)始切圖”了。
完成了：
這時(shí)我們會(huì)發(fā)現(xiàn)桌面多了一個(gè)index.html和一個(gè)tiles文件夾。我們打開(kāi)index.html會(huì)看到結(jié)果：
源代碼解析
現(xiàn)在再來(lái)看看這個(gè)頁(yè)面的代碼部分：
- <!DOCTYPE html>
- <html>
- <head>
- <title>自定義地圖類(lèi)型</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">
- vartileLayer =newBMap.TileLayer();
- tileLayer.getTilesUrl =function(tileCoord, zoom) {varx =tileCoord.x;vary =tileCoord.y;return'tiles/'+zoom +'/tile'+x +'_'+y +'.png';
- }varMyMap =newBMap.MapType('MyMap', tileLayer, {minZoom: 5, maxZoom: 10});varmap =newBMap.Map('map', {mapType: MyMap});
- map.addControl(newBMap.NavigationControl());
- map.centerAndZoom(newBMap.Point(0, 0), 10);</script>
- </body>
- </html>
代碼先創(chuàng)建了一個(gè)TileLayer實(shí)例，它代表一個(gè)圖層，接著實(shí)現(xiàn)getTilesUrl方法提供圖片的路徑。getTilesUrl方法由API在鋪圖的時(shí)候進(jìn)行調(diào)用，調(diào)用時(shí)會(huì)提供圖塊編號(hào)和級(jí)別信息，開(kāi)發(fā)者要做的就是根據(jù)圖塊編號(hào)和級(jí)別信息返回正確圖片地址（有關(guān)坐標(biāo)和圖塊編號(hào)的內(nèi)容可以閱讀此文）。
下面代碼創(chuàng)建一個(gè)MapType實(shí)例，第一個(gè)參數(shù)為地圖類(lèi)型的名字，第二個(gè)參數(shù)為地圖類(lèi)型所對(duì)應(yīng)的圖層，這里我們直接傳遞之前創(chuàng)建的TileLayer實(shí)例，后面是一些可選的配置參數(shù)，這里指定了最小級(jí)別和最大級(jí)別。
后面的代碼就很簡(jiǎn)單了，創(chuàng)建map實(shí)例，并通過(guò)配置參數(shù)指定地圖類(lèi)型為MyMap。
如果大家有月球或火星的圖片，那么創(chuàng)建一個(gè)月球地圖或者火星地圖也就不是一件難事了。
原文鏈接：http://www.cnblogs.com/jz1108/archive/2011/10/08/2202239.html
【編輯推薦】
