天地图引擎加载自定义WMTS图层

天地图引擎加载自定义WMTS图层

问题描述

最近在开发过程中碰到在天地图引擎中叠加自定义的WMTS图层，天地图官网API：天地图JavaScript API 4.0
在代码示例中添加自定义图层只有一行代码：

var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥";
//创建自定义图层对象
var lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 18});
//将图层增加到地图上
map.addLayer(lay);

解决方法

和叠加WMS图层的方式不太一样，叠加WMTS图层只需要将地址和参数全部写在图层地址中，例如上面的示例。要注意的一点就是，地址中的TileMatrix={z}&TileCol={x}&TileRow={y}这一串参数，TileMatrix={z}其中z代表的就是地图的层级，因为在一些别的图层地址中可能这个参数的值不仅仅是缩放层级，还会有前缀，例如：

// 仅仅举例
TileMatrix: Google84:13

这时候在要叠加的地址上面就要加上前缀，也就是Google84。即：

var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX=Google84:{z}&TILEROW={y}&TILECOL={x}&tk=您的密钥";

这个参数比较重要。另外x和y代表切片的横纵坐标，默认**{x}{y}**即可。

另外，在天地图添加自定义WMTS图层的时候，当图层请求不到瓦片时，地图上会出现网格图层(报错)，那么如何避免呢？官方文档中给出了这样一个属性：

一开始想的是这里是不是可以填一个空白透明瓦片，但是经过一番琢磨发现不可行，errorTileUrl可以放本地图片地址(透明图片)，这样当加载不到瓦片的时候就不会出现网格图层了。出现网格图层的原因就是因为天地图的引擎自带的加载机制，因此它也给我们准备了errorTileUrl这样一个属性来解决(另一个二维地图引擎openLayers当加载WMTS图层失败的时候就不会出现网格图层)。