用openlayers显示天地图切片资源

by giser · 2019-04-03

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
            })
        });

注意，图层数组第二个元素就是注记层，位于后面的元素在地图上显示在上层，再打开网页，会变为：