JSAPI GL提供XYZLayer类支持加载EPSG3857 坐标系统的 WMS 图层、WMTS图层、TMS图层以及自定义栅格图层。

构造函数：

options属性变量：

XYZLayer方法

使用服务示例代码如下：

// 创建位置点
var map = new BMapGL.Map('allmap');
var point = new BMapGL.Point(-99.41413316281799, 39.82354027110903);
map.centerAndZoom(point, 4);
// tileUrlTemplate 包含OGC标准的WMS地图服务的GetMap接口的参数
var wms = BMapGL.XYZLayer({
    tileUrlTemplate:
        'https://ahocevar.com/geoserver/wms?REQUEST=GetMap&SERVICE=WMS&layers=topp:states&version=1.3.0&CRS=EPSG:3857&WIDTH=256&HEIGHT=256&FORMAT=image/png&TRANSPARENT=true&BBOX=[b] ',
});
map.addTileLayer(wms);

使用服务示例代码如下：

// 创建位置点
var map = new BMapGL.Map('allmap');
var point = new BMapGL.Point(-99.41413316281799, 39.82354027110903);
map.centerAndZoom(point, 4);
// tileUrlTemplate 包含OGC标准的WMTS地图服务的GetTile接口的参数
var wmts = BMapGL.XYZLayer({
    tileUrlTemplate:
        ' https://mrdata.usgs.gov/mapcache/wmts?layer=sgmc2&style=default&tilematrixset=GoogleMapsCompatible&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=[z]&TileCol=[x]&TileRow=[y]',
    useThumbData: true,
});
map.addTileLayer(wmts);

使用服务示例代码如下：

// 创建位置点
var map = new BMapGL.Map('allmap');
var point = new BMapGL.Point(116.59141044992062, 40.30466588726649);
map.centerAndZoom(point, 4);
// tileUrlTemplate 包含tms服务瓦片请求地址
var tms = BMapGL.XYZLayer({
    tileUrlTemplate: ' https://mapopen-pub-jsapigl.cdn.bcebos.com/tms-bj/[z]/[x]/[y].png',
    tms: true,
    useThumbData: true,
    // 如果不设置tms:true，可以采用以下方式
    // yTemplate: function (x, y, z) {
    //     return Math.pow(2, z) - y - 1;
    // }
});

map.addTileLayer(tms);

使用服务示例代码如下：

// 创建位置点
var map = new BMapGL.Map('allmap');
var point = new BMapGL.Point(116.0970093263384, 49.9429305258067);
map.centerAndZoom(point, 7);
var custom = new BMapGL.XYZLayer({
    useThumbData: true,
    // 自定义图层瓦片请求地址，可使用xTemplate，yTemplate，zTemplate匹配自定义网格编号规则
    tileUrlTemplate: 'http://c.tile.opencyclemap.org/cycle/[z]/[x]/[y].png',
    // xTemplate: function (x, y, z) {
    //     return x;
    // },
    // yTemplate: function (x, y, z) {
    //     return y;
    // },
    // zTemplate: function (x, y, z) {
    //     return z;
    // }
});
var bd = new BMapGL.Boundary();
bd.get('河北', function (rs) {
    custom.addBoundary(rs.boundaries);
});
map.addTileLayer(custom);