[JavaScript知识库]天地图引擎加载自定义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}**即可。