FGMap學習之–載入百度地圖

今天我們用FGMap來載入百度地圖資料。

從目前國內的地圖服務商提供的地圖來看，地圖瓦片切圖規則只少分為三種。其中Google Map、Bing地圖、MapABC、QQ地圖是一類，而百度地圖、搜狗地圖是使用的另一類，還有一類應該是mapbar的地圖(還沒有仔細去分析它的瓦片編號規則)。

第一類FGMap中已經都是整合，這裡就不再說了，今天說說第二類：百度地圖。前幾天看到獅兄寫的百度地圖Silverlight版和Flex版(via SuperMap iClient) ，裡面有一個例子是用Flex寫的，可能是我的知識有限，沒有太明白他說的內容。但大體知道他說的瓦片組織的方式需要用一個位移量，所以今天特意去BaiduMap 的API裡看看了，發現有一個很有意義的資訊，在開發指南->地圖圖層->自訂圖層有這麼一段話：

經緯度是一種利用三維空間的球面來定義地球上的空間的球面座標系，它能夠標示地球上任何一個位置。通過倫敦格林尼治天文台原址的經線為0度經線，從0度經線向東、向西各分180度。赤道為0度緯線，赤道以北的緯線稱為北緯、以南的稱為南緯。在百度地圖中，東經和北緯用正數標示，西經和南緯用負數標示。

使用百度地圖和Google地圖進行了一個對比，可能大家更能明白些：

從中可以出來，百度是以經緯度0，0開始編號，向東X正增加，向西X負增加，向北Y增加，向南Y負增加，而Google地圖是從左上方開始編號，向東X增加，向南Y增加，這種計算很方便。

知道了這種對應規則後，我們就可以得到計算的方式，代碼如下：

package com.fgmap.maps.examples{import com.fgmap.maps.Copyright;import com.fgmap.maps.CopyrightCollection;import com.fgmap.maps.LatLng;import com.fgmap.maps.LatLngBounds;import com.fgmap.maps.TileLayerBase;import com.fgmap.maps.interfaces.ICopyrightCollection;import flash.display.DisplayObject;import flash.display.Loader;import flash.events.IOErrorEvent;import flash.geom.Point;import flash.net.URLRequest;public class BaiduTileLayer extends TileLayerBase{private var mapMinZoom:int = 1;//最小顯示等級private var mapMaxZoom:int = 18;//最大顯示等級public function BaiduTileLayer(tileSize:Number){var copyrightCollection:CopyrightCollection = new CopyrightCollection();super(copyrightCollection, mapMinZoom, mapMaxZoom, 1);//調用父類的方法//建立一個自己的著作權說明copyrightCollection.addCopyright(new Copyright("BaiduData",new LatLngBounds(new LatLng(-180, -90),new LatLng(180, 90)),  0,"百度地圖資料"));}//覆蓋載入地圖資料的方法，這個很重要，地圖資料從這裡讀取override public function loadTile(tilePos:Point, zoom:Number):DisplayObject {var testLoader:Loader = new Loader();zoom = zoom - 1;var offsetX:Number = Math.pow(2,zoom);var offsetY:Number = offsetX - 1;var numX:Number = tilePos.x - offsetX;var numY:Number = (-tilePos.y) + offsetY;zoom = zoom + 1;var num:int = (tilePos.x + tilePos.y) % 8 + 1;var x:String = numX.toString().replace("-","M");var y:String = numY.toString().replace("-","M");var strURL:String = "";strURL = "http://q" + num + ".baidu.com/it/u=x=" + x + ";y=" + y + ";z=" + zoom + ";v=005;type=web&fm=44";var urlRequest:URLRequest;urlRequest =  new URLRequest(strURL);//沒有地圖時顯示的內容testLoader.load(urlRequest);testLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);return testLoader;}//出錯處理private function ioErrorHandler(event:IOErrorEvent):void {trace("ioErrorHandler: " + event);}}}

因為地圖瓦片都是以四叉樹的形式存在的，所以計算相對就會簡單些了。運行結果如下：

這隻是地圖瓦片載入了，可能還會存在座標轉換的問題。

下次有時間，可以把mapbar的地圖資料也載入進來，這樣，國內的地圖資料都應該可以載入了。

如果不明白的地方，可以與我聯絡。