Vue+OpenLayers学习系列（八）OpenLayers调用天地图WMTS服务

最近调用天地图服务，发现之前大家调用都是用XYZ方式，而切片方式调用比较少，这里记录下，以备后续所需。

1、注册天地图并查看天地图的WMTS服务。

首先登陆后，需要注册天地图账号（这里吐槽下，天地图账号只能用邮箱注册，这样导致我邮箱不能用之后，天地图账号密码忘了无法找回密码，且账号绑定的手机号也不能解绑）。注册之后可以在控制台创建新应用，获得调用服务所需的key。

然后在地图API>地图服务那里可以查看到地图服务列表。

2、Vue+OpenLayers调用天地图WMTS服务获得底图。

可以参照官网的例子学习相关的参数，https://openlayers.org/en/latest/examples/wmts.html

在参照官网例子基础上，调整的代码如下。

<template>
  <div id="map">
  </div>
</template>

<script>
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {defaults as defaultControls} from 'ol/control.js';
import {getWidth, getTopLeft} from 'ol/extent.js';
import TileLayer from 'ol/layer/Tile.js';
import {get as getProjection} from 'ol/proj.js';
import { fromLonLat } from "ol/proj";
import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

  export default {  //调用天地图WMTS服务
    name: 'olTDT',
    data() {
      return {
        map: null
      };
    },
    mounted() {
      var projection = getProjection('EPSG:3857');
      var projectionExtent = projection.getExtent();
      var size = getWidth(projectionExtent) / 256;
      var resolutions = new Array(18);
      var matrixIds = new Array(18);
      for (var z = 1; z < 19; ++z) {
	      // generate resolutions and matrixIds arrays for this WMTS
	      resolutions[z] = size / Math.pow(2, z);
	      matrixIds[z] = z;
      }
 
      var webKey = '申请的key';
 
      var wmtsUrl_1 = 'http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk='; //矢量底图
      var wmtsUrl_2 = 'http://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk='; //矢量注记
 
      var wmtsUrl_3 = 'http://t{0-7}.tianditu.gov.cn/img_w/wmts?tk='; //影像底图
      var wmtsUrl_4 = 'http://t{0-7}.tianditu.gov.cn/cia_w/wmts?tk='; //影像注记
 
      var wmtsUrl_5 = 'http://t{0-7}.tianditu.gov.cn/ter_w/wmts?tk='; //地形底图
      var wmtsUrl_6 = 'http://t{0-7}.tianditu.gov.cn/cta_w/wmts?tk='; //地形注记
 
      var wmtsUrl_7 = 'http://t{0-7}.tianditu.gov.cn/ibo_w/wmts?tk='; //境界（省级以上）
      var wmtsUrl_8 = 'http://t{0-7}.tianditu.gov.cn/eva_w/wmts?tk='; //矢量英文注记
      var wmtsUrl_9 = 'http://t{0-7}.tianditu.gov.cn/eia_w/wmts?tk='; //影像英文注记
 
      var map1 = new Map({
	      layers: [
	        new TileLayer({
		        opacity: 0.7,
		        source: new WMTS({
		          url: wmtsUrl_3 + webKey,
		          layer: 'img',  //注意每个图层这里不同
		          matrixSet: 'w',
		          format: 'tiles',
		          style: 'default',
		          projection: projection,
		          tileGrid: new WMTSTileGrid({
			          origin: getTopLeft(projectionExtent),
			          resolutions: resolutions,
			          matrixIds: matrixIds
		          }),	  
		          wrapX: true
		        })
	        }),
	        new TileLayer({
	        	opacity: 0.7,
		        source: new WMTS({
		          url: wmtsUrl_4 + webKey,
		          layer: 'cia',   //注意每个图层这里不同
		          matrixSet: 'w',
		          format: 'tiles',
		          style: 'default',
		          projection: projection,
		          tileGrid: new WMTSTileGrid({
		        	  origin: getTopLeft(projectionExtent),
			          resolutions: resolutions,
			          matrixIds: matrixIds
		          }),	  
		          wrapX: true
		        })
	        })
	      ],
	      target: 'map',
	      view: new View({
	        center: fromLonLat([113.38, 23.09]),  //惠州
	        zoom: 5
	      })
      });
    }
  };
</script>

<style>
  #map{
    height:800px;
    width: 1400px;
  }

</style>

注意：上述代码中source里面的“layer、matrixSet、format、style”这几个参数不能写错，否则结果出不来。比如矢量底图的layer是vec，而影像底图的layer是img，地形底图的layer是ter。这些参数是由WMTS的GetCapabilities接口返回的结果来决定的。

可以参照：http://t0.tianditu.gov.cn/img_w/wmts?request=GetCapabilities&service=wmts&tk=申请的key

3、最终运行的结果

参考：https://blog.csdn.net/envon123/article/details/82706185