地圖圖層
地圖圖層概念
地圖可以包含一個或多個圖層,每個圖層在每個層級都是由若干張圖塊組成的,它們覆蓋了地球的整個表面。例如您所看到包含街道、興趣點、學校、公園等內容的地圖展現就是一個圖層,另外交通流量的展現也是透過圖層來實現的。
目前百度地圖提供的圖層包括:
TrafficLayer:交通流量圖層。
新增和移除圖層
透過map.addTileLayer方法可新增圖層,例如下方程式碼將顯示北京市的交通流量。
var map = new BMap.Map("l-map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例 map.addTileLayer(traffic); // 将图层添加到地图上
若要從地圖移除圖層,需要呼叫map.removeTileLayer方法。
map.removeTileLayer(traffic); // 将图层移除
自訂圖層
#地圖座標系
在使用自訂圖層前,您需要了解百度地圖的地圖座標系,百度地圖座標系涉及:
經緯度球面座標系統
##墨卡托平面座標系統
圖塊編號系統
#經緯度是一種利用三維空間的球面來定義地球上的空間的球面座標系,它能夠標示地球上任何一個位置。經倫敦格林尼治天文台原址的經線為0度經線,從0度經線向東、向西各分180度。赤道為0度緯線,赤道以北的緯線稱為北緯、以南的稱為南緯。在百度地圖中,東經和北緯以正數表示,西經和南緯以負數表示。例如北京的位置大約是北緯39.9度,東經116.4度,那麼用數值標示就是經度116.6,緯度39.9。在百度地圖中,習慣經度在前,緯度在後,例如:var point = new BMap.Point(116.404, 39.915); // 创建点坐标,经度在前,纬度在后
由於百度地圖是顯示在平面上的,因此在地圖內部系統中需要將球面座標轉換為平面座標,這個轉換過程稱為投影。百度地圖使用的是墨卡托投影。墨卡托平面座標如下圖所示,平面座標與經緯度座標系的原點是重合的。
百度地圖在每個層級將整個地圖分割成若干個圖塊,透過編號系統將整個圖塊整合在一起以便顯示完整的地圖。當地圖被拖曳或層級發生變化時,地圖API將會根據平面座標計算出目前視野內所需顯示的圖塊的編號。百度地圖圖塊編號規則如下圖所示:
從平面座標原點開始的右上方向的圖塊編號為0,0,以此類推。在最低的縮放等級(等級 1)中,整個地球由 4 張圖塊組成。隨著等級的成長,地圖所使用的圖塊個數也隨之增加。
定義取圖規則
透過TileLayer類別開發者可以實作自訂圖層。其中,TileLayer實例的getTilesUrl方法需要實現,用來告訴API取圖規則。 getTilesUrl方法的參數包括tileCoord和zoom,其中tileCoord為圖塊的編號信息,zoom為圖塊的級別,每當地圖需要顯示特定級別的特定位置的圖塊時就會自動調用此方法,並提供這兩個參數。使用者需要告知API特定編號和層級所對應的圖塊的位址,這樣API就能正常顯示自訂的圖層了。
新增和移除自訂圖層
以下程式碼在每個圖塊的所有縮放層級上顯示一個簡單的透明疊加層,使用浮動紅色小水滴表示圖塊的輪廓。
var map = new BMap.Map("l-map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别 var tilelayer = new BMap.TileLayer(); // 创建地图层实例 tilelayer.getTilesUrl=function(){ // 设置图块路径 return "layer.gif"; }; map.addTileLayer(tilelayer); // 将图层添加到地图上