用openlayers顯示天地圖，以及各種天地圖切片資源

本文轉載自查看原文 2017-12-01 18:11 2939 openlayers/ 天地圖

openlayers的官網上，有一個Quick Start，里面的例子向我們展示了怎么去顯示一個簡單的地圖（切片底圖），源代碼如下：

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

思路是非常清晰的，其中核心就是創建map對象那一段代碼：

      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });

其中，Map對象需要三個參數：

1.目標id，也就是放置地圖的那個div元素的id；

2.圖層序列，這是一個數組，里面可以放置多個圖層，圖層對象的創建下面會講到；

3.視圖，也就是一個View對象，表示地圖初次顯示時的中心位置（對應center參數）和比例（對應zoom參數）；

其中，圖層序列可以放置多個圖層對象，Quick Start中只放了一層，而且顯示的是Street Map的地圖底圖，那么怎樣才能把它變為天地圖呢？

我們可以通過代碼的字面意思觀察到，new ol.layer.Tile是用來創建底圖圖層的，它又一個重要參數，就是source，也就是地圖的“來源”，Quick Start中是：

new ol.layer.Tile({
    source: new ol.source.OSM()
})

它創建了一個自己的地圖對象，OSM應該是Open Source Map的縮寫。

要把它改為天地圖，其實很簡單，只需要改變這個源就可以，將source的值改為：

new ol.source.XYZ({
    url: "http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
})

由於示例里初始位置在非洲，為了顯示效果我將其切換到杭州，並且改變一下縮放級別，於是將view的值做相應修改：

view: new ol.View({
    center: ol.proj.fromLonLat([120.161, 30.206]),
    zoom: 14

new ol.source.XYZ({url: "xxxxxxxxxx"})這種創建地圖源的方式表示根據參數x、y、z（分別表示切片行序號、列序號和縮放級別）來獲取底圖切片，那么讓我們在瀏覽器打開看一下效果如何：

顯示出來啦！但是，好像哪里不對？沒有標注！

這是因為天地圖的底圖和注記層是分開的，我們只需要把注記層的source也添加進圖層數組里就可以了，Map對象的創建語句變為：

var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.XYZ({
                      url: "http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
                  })
              }),
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url:"http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}"
                    })
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([120.161, 30.206]),
                zoom: 14
            })
        });