地圖圖層概念

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

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

TrafficLayer：交通流量圖層。

添加和移除圖層

通過(guò)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)和地圖級(jí)別     
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)

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

經(jīng)緯度是一種利用三維空間的球面來(lái)定義地球上的空間的球面坐標(biāo)系，它能夠標(biāo)示地球上任何一個(gè)位置。通過(guò)倫敦格林尼治天文臺(tái)原址的經(jīng)線(xiàn)為0度經(jīng)線(xiàn)，從0度經(jīng)線(xiàn)向東、向西各分180度。赤道為0度緯線(xiàn)，赤道以北的緯線(xiàn)稱(chēng)為北緯、以南的稱(chēng)為南緯。在百度地圖中，東經(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)換過(guò)程稱(chēng)為投影。百度地圖使用的是墨卡托投影。墨卡托平面坐標(biāo)如下圖所示，平面坐標(biāo)與經(jīng)緯度坐標(biāo)系的原點(diǎn)是重合的。

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

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

定義取圖規(guī)則

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

添加和移除自定義圖層

以下代碼在每個(gè)圖塊的所有縮放級(jí)別上顯示一個(gè)簡(jiǎn)單的透明疊加層，使用浮動(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)和地圖級(jí)別     
var tilelayer = new BMap.TileLayer();         // 創(chuàng)建地圖層實(shí)例    
tilelayer.getTilesUrl=function(){             // 設(shè)置圖塊路徑     
          return "layer.gif";      
};      
map.addTileLayer(tilelayer);                // 將圖層添加到地圖上