地圖圖層概念

地圖可以包含一個(gè)或多個(gè)圖層，每個(gè)圖層在每個(gè)級別都是由若干張圖塊組成的，它們覆蓋了地球的整個(gè)表面。例如您所看到包括街道、興趣點(diǎn)、學(xué)校、公園等內(nèi)容的地圖展現(xiàn)就是一個(gè)圖層，另外交通流量的展現(xiàn)也是通過圖層來實(shí)現(xiàn)的。

目前百度地圖提供的圖層包括：

TrafficLayer：交通流量圖層。

添加和移除圖層

通過map.addTileLayer方法可向地圖添加圖層，例如下面代碼將顯示北京市的交通流量。

var map = new BMap.Map("l-map");         // 創(chuàng)建地圖實(shí)例      
var point = new BMap.Point(116.404, 39.915);  // 創(chuàng)建點(diǎn)坐標(biāo)     
map.centerAndZoom(point, 15);                 // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級別     
var traffic = new BMap.TrafficLayer();        // 創(chuàng)建交通流量圖層實(shí)例      
map.addTileLayer(traffic);                    // 將圖層添加到地圖上

若要從地圖上移除圖層，需要調(diào)用map.removeTileLayer方法。

map.removeTileLayer(traffic);                // 將圖層移除

自定義圖層

地圖坐標(biāo)系

在使用自定義圖層前，您需要了解百度地圖的地圖坐標(biāo)系，百度地圖坐標(biāo)系涉及：

? 經(jīng)緯度球面坐標(biāo)系統(tǒng)

? 墨卡托平面坐標(biāo)系統(tǒng)

? 圖塊編號系統(tǒng)

經(jīng)緯度是一種利用三維空間的球面來定義地球上的空間的球面坐標(biāo)系，它能夠標(biāo)示地球上任何一個(gè)位置。通過倫敦格林尼治天文臺(tái)原址的經(jīng)線為0度經(jīng)線，從0度經(jīng)線向東、向西各分180度。赤道為0度緯線，赤道以北的緯線稱為北緯、以南的稱為南緯。在百度地圖中，東經(jīng)和北緯用正數(shù)表示，西經(jīng)和南緯用負(fù)數(shù)表示。例如北京的位置大約是北緯39.9度，東經(jīng)116.4度，那么用數(shù)值標(biāo)示就是經(jīng)度116.6，緯度39.9。 在百度地圖中，習(xí)慣經(jīng)度在前，緯度在后，例如：

var point = new BMap.Point(116.404, 39.915);  // 創(chuàng)建點(diǎn)坐標(biāo)，經(jīng)度在前，緯度在后

由于百度地圖是顯示在平面上的，因此在地圖內(nèi)部系統(tǒng)中需要將球面坐標(biāo)轉(zhuǎn)換為平面坐標(biāo)，這個(gè)轉(zhuǎn)換過程稱為投影。百度地圖使用的是墨卡托投影。墨卡托平面坐標(biāo)如下圖所示，平面坐標(biāo)與經(jīng)緯度坐標(biāo)系的原點(diǎn)是重合的。

百度地圖在每一個(gè)級別將整個(gè)地圖劃分成若干個(gè)圖塊，通過編號系統(tǒng)將整個(gè)圖塊整合在一起以便顯示完整的地圖。當(dāng)?shù)貓D被拖動(dòng)或者級別發(fā)生變化時(shí)，地圖API將會(huì)根據(jù)平面坐標(biāo)計(jì)算出當(dāng)前視野內(nèi)所需顯示的圖塊的編號。百度地圖圖塊編號規(guī)則如下圖所示：

從平面坐標(biāo)原點(diǎn)開始的右上方向的圖塊編號為0,0，以此類推。在最低的縮放級別（級別 1）中，整個(gè)地球由 4 張圖塊組成。隨著級別的增長，地圖所使用的圖塊個(gè)數(shù)也隨之增多。

定義取圖規(guī)則

通過TileLayer類開發(fā)者可以實(shí)現(xiàn)自定義圖層。其中，TileLayer實(shí)例的getTilesUrl方法需要實(shí)現(xiàn)，用來告訴API取圖規(guī)則。getTilesUrl方法的參數(shù)包括tileCoord和zoom，其中tileCoord為圖塊的編號信息，zoom為圖塊的級別，每當(dāng)?shù)貓D需要顯示特定級別的特定位置的圖塊時(shí)就會(huì)自動(dòng)調(diào)用此方法，并提供這兩個(gè)參數(shù)。使用者需要告知API特定編號和級別所對應(yīng)的圖塊的地址，這樣API就能正常顯示自定義的圖層了。

添加和移除自定義圖層

以下代碼在每個(gè)圖塊的所有縮放級別上顯示一個(gè)簡單的透明疊加層，使用浮動(dòng)紅色小水滴表示圖塊的輪廓。

var map = new BMap.Map("l-map");          // 創(chuàng)建地圖實(shí)例     
var point = new BMap.Point(116.404, 39.915);  // 創(chuàng)建點(diǎn)坐標(biāo)     
map.centerAndZoom(point,15);                  // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級別     
var tilelayer = new BMap.TileLayer();         // 創(chuàng)建地圖層實(shí)例    
tilelayer.getTilesUrl=function(){             // 設(shè)置圖塊路徑     
          return "layer.gif";      
};      
map.addTileLayer(tilelayer);                // 將圖層添加到地圖上