百度地圖API詳解之自定義地圖類型


http://blog.csdn.net/sup_heaven/article/details/8461586

 

今天的文章主要介紹如何利用地圖API實現自定義地圖。

百度地圖API目前默認支持兩種地圖類型(map type):普通圖和三維圖,它們分別通過常量BMAP_NORMAL_MAP和BMAP_PERSPECTIVE_MAP來表示,在1.2版本中這兩個常量實際上是MapType對象的實例。當然開發者也可以自己實例化一個MapType從而實現一個自定義的地圖。

切圖工具的使用

我們先從切圖工具的使用開始,接着再分析該工具產生的代碼來詳細了解自定義地圖的方法。切圖工具放在了github上,具體地址為:https://github.com/jiazheng/BaiduMapTileCutter,進入后請下載TileCutter.exe:

注意,該工具是基於.NET平台開發的,所以要求有.NET Framework 4 以上的版本。

啟動這個exe后會出現這個界面:

首先我們要做的就是選擇一張圖片作為地圖的底圖(圖片下載自這里):

點擊下一步后需要設置輸出的目錄,這里我們直接選擇桌面:

繼續下一步,這里要設置輸出類型,我們使用默認值,即圖塊和相關代碼都由工具生成:

坐標設置我們使用默認值,即圖片的中心點所在的位置。由於我們制作的是獨立的地圖類型,所以中心點設置為0, 0即可。

級別范圍設置:我們使用自定義,將范圍設置為5到10級,原圖放置在第10級,這樣5到9級工具就會自動縮小圖片。建議原圖所在級別與最大級別一致,否則高於原圖所在級別的時候圖片會發虛(因為工具會將圖片進行放大處理)。

設置地圖類型的名稱:

一切就緒,最后可以確認所有的信息是否正確。然后就可以點擊“開始切圖”了。

完成了:

這時我們會發現桌面多了一個index.html和一個tiles文件夾。我們打開index.html會看到結果:

源代碼解析

現在再來看看這個頁面的代碼部分:

復制代碼
<!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=new BMap.TileLayer(); tileLayer.getTilesUrl  (tileCoord, zoom) {  x  tileCoord.x;  y  tileCoord.y;  tiles/  zoom  /tile  x  _  y  .png; }  MyMap   BMap.MapType(MyMap, tileLayer, {minZoom: , maxZoom: });  map   BMap.Map(map, {mapType: MyMap}); map.addControl( BMap.NavigationControl()); map.centerAndZoom( BMap.Point(, ), ); </script> </body> </html>
復制代碼

代碼先創建了一個TileLayer實例,它代表一個圖層,接着實現getTilesUrl方法提供圖片的路徑。getTilesUrl方法由API在鋪圖的時候進行調用,調用時會提供圖塊編號和級別信息,開發者要做的就是根據圖塊編號和級別信息返回正確圖片地址(有關坐標和圖塊編號的內容可以閱讀此文)。

下面代碼創建一個MapType實例,第一個參數為地圖類型的名字,第二個參數為地圖類型所對應的圖層,這里我們直接傳遞之前創建的TileLayer實例,后面是一些可選的配置參數,這里指定了最小級別和最大級別。

后面的代碼就很簡單了,創建map實例,並通過配置參數指定地圖類型為MyMap。

如果大家有月球或火星的圖片,那么創建一個月球地圖或者火星地圖也就不是一件難事了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM