要使用 OpenLayers 3 加載天地圖，首先要弄清楚天地圖發佈的原理，以及遵循的發佈規範，上一篇中我們提到了使用 OpenLayers 3 加載百度地圖，我們提到一般網絡地圖爲了加快訪問速度，都採用緩存切片地圖的方式，天地圖也不例外，而且原理極其類似，但是其切片的索引組織方式還是有一些不同，雖然都是切片，但是切片的起始座標原點不一致，百度地圖是屏幕的左下角，而天地圖是屏幕的左上角（與谷歌地圖一致），且所在的座標系是球形墨卡託投影座標系（EPSG:3857）。
針對這種形式發佈的地圖切片，OpenLayers 3 中有一個對應的數據源（ol.source）類 – ol.source.TileImage，上一篇的 OpenLayers 3 加載百度地圖，就是使用的這個類。當然，我們使用這個類，加載天地圖也是可以的，但是天地圖的發佈方式和切片組織方式與谷歌地圖是一致的，在 OpenLayers 3 中有針對加載谷歌地圖專門寫好的類 - ol.source.XYZ，這個類是 ol.source.TileImage 的一個特例，繼承了 ol.source.TileImage，其中 XYZ 分別對應切片所在的 x y 座標和當前的縮放級別 z。
注：代碼部分基於上一篇文章， OpenLayers 3 之 加載百度地圖。
確定服務地址
天地圖共有 8 個服務地址，子域名分別從 t0 到 t7，如下列表所示。獲取的方法和上一篇中獲取百度地圖服務地址是一樣的，F12 查看了瀏覽器的通信信息：
http://t0.tianditu.com/DataServer?http://t1.tianditu.com/DataServer?http://t2.tianditu.com/DataServer?http://t3.tianditu.com/DataServer?http://t4.tianditu.com/DataServer?http://t5.tianditu.com/DataServer?http://t6.tianditu.com/DataServer?http://t7.tianditu.com/DataServer?
加載路網
我們查看一個路網切片的 url 地址： http://t4.tianditu.com/DataServer?T=vec_c&x=3233&y=673&l=12，一共有四個參數，T=vec_c表示請求的是路網數據，x 表示切片的 x 軸座標，y 表示切片的y軸座標，z表示切片所在的縮放級別。我們使用 ol.source.XYZ 加載切片，並將獲取的數據初始化一個切片圖層 ol.layer.Tile：
var tian_di_tu_road_layer = new ol.layer.Tile({
title: "天地圖路網",
source: new ol.source.XYZ({
url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
})
});
map.addLayer(tian_di_tu_road_layer);
我們可以看到 ol.source.XYZ 有一個 url 參數，表示切片地址的模板： http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}，在使用 OpenLayers 時候，用戶的操作都會被轉化爲相應的x、y、z值，並賦予地址模板，這樣就可以根據用戶的操作請求需要的切片了。
加載完成後，發現只有路網圖片，並沒有路段的名稱等註記層，我們並沒有做錯什麼，只是天地圖是將路網圖層和註記圖層分開發布的，我們還要單獨請求註記圖層，然後疊加在路網上面，纔會看到和百度地圖一樣的效果：
圖1 天地圖路網切片
我們可以想象，註記圖層應該是一個除了文字之外都是透明的 PNG 格式的圖片，接下來我們就來加載註記圖層：
圖2 天地圖註記圖層切片
加載註記圖層
使用同樣的方法，加載註記圖層，可以看到其 url 參數中，只有 T 參數變化了，cva_w 表示請求的切片類型是註記圖層切片：
var tian_di_tu_annotation = new ol.layer.Tile({
title: "天地圖文字標註",
source: new ol.source.XYZ({
url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
})
});
map.addLayer(tian_di_tu_annotation);
通過加載路網和註記圖層後，我們就可以看到效果了：
圖3 天地圖調用結果
加載衛星影像
天地圖除了路網數據和註記數據之外，還有衛星影像切片數據，所以我們可以使用同樣的方法加載衛星影像，同樣， url 參數中的 T參數值 img_w 表示請求的數據類型是衛星影像切片。代碼和效果圖如下：
var tian_di_tu_satellite_layer = new ol.layer.Tile({
title: "天地圖衛星影像",
source: new ol.source.XYZ({
url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
})
});
map.addLayer(tian_di_tu_satellite_layer);
圖4 天地圖衛星影像切片
總結
從結果看，天地圖並沒有對地圖進行偏移處理，這點來看要比百度地圖好多了。天地圖本意就是服務大衆，所以其數據可以供人們免費調用，也開放了數據服務接口，但其服務文檔太過簡單，沒有LBS或者GIS相關知識的人，文檔相當於沒有，就算是懂點專業知識，也要鼓搗很長時間。
總之，我們調用天地圖的數據作爲底圖還是非常合適的，不用承擔法律責任，因爲它是開放的，可以免費使用。
好的，就寫到這裏，有什麼問題，可以在文章下面留言。