天地图引擎加载自定义WMTS图层
问题描述
最近在开发过程中碰到在天地图引擎中叠加自定义的WMTS图层,天地图官网API:天地图JavaScript API 4.0
在代码示例中添加自定义图层只有一行代码:
var imageURL = "http://t0./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./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图层失败的时候就不会出现网格图层)。