通过配置符合百度网格瓦片标准的数据源，加载到基础地图上进行显示。

2.0.0版本及以后，瓦片图层的创建方式有变化，详见「加载到地图」部分

瓦片图层的绘制方式包括本地加载和在线下载两种方式。

1、本地加载

瓦片图层通过TileOverlay类定义，开发者需要实现FileTileProvider抽象类来加载打包至项目中的瓦片图资源。

注：瓦片图的尺寸必须满足256 * 256

示例代码如下：

/**
 * 定义瓦片图的在线Provider，并实现相关接口
 * MAX_LEVEL、MIN_LEVEL 表示地图显示瓦片图的最大、最小级别
 * urlString 表示在线瓦片图的URL地址
 */
class OfflineTileProvider extends FileTileProvider{
  override getMaxDisLevel() {
    return 16;
  }

  override getMinDisLevel() {
    return 6;
  }

  override async getTile(x:number, y:number, zoom:number):Promise<IImageBundle> {
    const image = new ImageEntity(`rawfile://LocalTileImage/${zoom}/${zoom}_${x}_${y}.jpg`);
    const imagedata = await image.getArrayBufferSync();
    if (imagedata) {
      return {
        imagedata: imagedata
      };
    } else {
      return {
        imagedata: new ArrayBuffer(0)
      };
    }
  }
}

2、在线下载

开发者需要实现UrlTileProvider抽象类，在其中设置缩放级别范围和在线瓦片图的URL地址。

/**
 * 定义瓦片图的在线Provider，并实现相关接口
 * MAX_LEVEL、MIN_LEVEL 表示地图显示瓦片图的最大、最小级别
 * urlString 表示在线瓦片图的URL地址
 */
class OnlineTileProvider extends UrlTileProvider{
  override getMaxDisLevel() {
    return 16;
  }

  override getMinDisLevel() {
    return 6;
  }

  override getTileUrl() {
    return "http://online1.map.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20190528";
  }
}

可以设置显示层级范围、地理范围和显示隐藏等。

// 2.0.0版之前，通过外部调用实例化
this.imageTileLayer = new ImageTileLayer(new OnlineTileProvider());

// 2.0.0版本及之后，通过内部实例化
this.imageTileLayer = ImageTileLayer.createWithMapControl(this.mapController,new OnlineTileProvider()) as ImageTileLayer;

this.imageTileLayer?.setDisplayLevel(8,21);
this.imageTileLayer?.setSourceRegion(new Bounds(new LatLng(30, 100),new LatLng(60, 120)));

// 2.0.0版之前需要手动添加，2.0.0版本及之后不需要手动添加
this.mapController?.addTileLayer(this.imageTileLayer);

// 显示隐藏控制
this.imageTileLayer?.setVisible(true);
this.imageTileLayer?.setVisible(false);

移除瓦片图层，并销毁

this.mapController?.removeTileLayer(this.imageTileLayer);
this.imageTileLayer = undefined;