XYZLayer

第三方标准瓦片图层类，用于加载 XYZ/WMTS/WMS/TMS 等标准瓦片服务。 与 TileLayer 的区别：

  • TileLayer 适用于自有百度坐标系(BD09MC)瓦片，通过 getTilesUrl 或 tileUrlTemplate 指定瓦片地址
  • XYZLayer 专为第三方标准瓦片服务设计，内置坐标转换（默认将 EPSG:3857 转为 BD09MC），支持 minZoom/maxZoom/extent 等范围控制

使用场景：加载天地图、OSM、Mapbox 等第三方瓦片服务时使用 XYZLayer；加载自有百度坐标系瓦片时使用 TileLayer

构造函数

  • 创建第三方标准瓦片图层

    参数类型说明
    optionsXYZLayerOptions图层配置选项
    属性类型说明
    boundarystring设置图层掩膜。可通过BMapGL.Boundary()获取行政区域的坐标数据
    bTemplateFunction通过输入的网格x、y、z参数计算[b]具体返回值，返回值默认为四至坐标拼接成的字符串：'minX,minY,maxX,maxY'。 x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。
    extentnumber设置图层加载数据的四至范围，输入的范围数值为EPSG:3857坐标[minX,minY,maxX,maxY]
    extentCRSIsWGS84boolean标记参数extent数组数据是否为EPSG:4326坐标。如果设置为true，参数extent数值需要是EPSG:4326坐标
    maxZoomnumber设置图层显示的最大缩放等级
    minZoomnumber设置图层显示的最小缩放等级
    opacitynumber图层透明度，取值范围0 - 1
    tileUrlTemplatestring图像数据请求地址。可通过{0,1,2}标记实现多请求地址的配置；可通过[z]，[x]，[y]，[b]引用默认的Template。 WMTS/TMS/自定义栅格图层服务默认使用[z]，[x]，[y]，瓦片大小为256256。WMS服务默认使用[b]。
    tmsbooleantileUrlTemplate中[y]是否为tms请求服务形式。如果是则设置为true
    useThumbDataboolean缩放图层时，是否使用跨图层的瓦片进行平滑切换
    xTemplateFunction通过输入的网格x、y、z参数计算[x]具体返回值。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。
    yTemplateFunction通过输入的网格x、y、z参数计算[y]具体返回值。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。
    zIndexnumber图层层叠顺序
    zTemplateFunction通过输入的网格x、y、z参数计算[z]具体返回值。x、y、z参数对应是Google web墨卡托网格的列号、行号、缩放等级。

    返回值 XYZLayer

    示例代码1：加载OpenStreetMap瓦片

    const osmLayer = new BMap.XYZLayer({
      tileUrlTemplate: 'https://tile.openstreetmap.org/[z]/[x]/[y].png',
      maxZoom: 19,
    });
    map.addLayer(osmLayer);

    示例代码2：加载Stadia Maps水彩风格瓦片

    const watercolorLayer = new BMap.XYZLayer({
      tileUrlTemplate: 'https://tiles.stadiamaps.com/tiles/stamen_watercolor/[z]/[x]/[y].jpg',
      maxZoom: 16,
    });
    map.addLayer(watercolorLayer);

    示例代码3：加载天地图影像瓦片（需替换为自己的tk）

    const tdtLayer = new BMap.XYZLayer({
      tileUrlTemplate: 'https://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=[x]&TILEROW=[y]&TILEMATRIX=[z]&tk=你的天地图key',
      minZoom: 1,
      maxZoom: 18,
    });
    map.addLayer(tdtLayer);

    示例代码4：加载TMS服务（y轴翻转）

    const tmsLayer = new BMap.XYZLayer({
      tileUrlTemplate: 'https://yourhost/tms/[z]/[x]/[y].png',
      tms: true,
    });
    map.addLayer(tmsLayer);

方法

  • 设置图层掩膜，在掩膜区域内显示瓦片

    参数类型说明
    boundarystring掩膜边界坐标字符串或字符串数组

    返回值 void

    示例代码1

    xyzLayer.addBoundary('北京市');

  • 清空图层掩膜

    返回值 void

  • 清除瓦片缓存并强制重新加载

    返回值 void

    示例代码1

    xyzLayer.clearCache();

  • 隐藏图层

    返回值 void

    示例代码1

    xyzLayer.hide();

  • 返回图层是否可见

    返回值 boolean

  • 设置图层的叠加顺序

    参数类型说明
    zIndexnumber层级值

    返回值 void

    示例代码1

    xyzLayer.setZIndex(5);

  • 显示图层

    返回值 void

    示例代码1

    xyzLayer.show();