TileLayer

此类表示一个地图图层，您可以向地图中添加自定义图层。

构造函数

构造函数	描述
TileLayer(opts: TileLayerOptions)	创建一个地图图层实例

TileLayerOptions

属性名	类型	描述
transparentPng	Boolean	是否使用了带有透明信息的PNG。由于IE6不支持PNG透明，因此需要特殊处理
tileUrlTemplate	String	指定图块网址模板，该模板可以针对每个图块请求而展开，以根据现有的图块坐标系引用唯一的图块。模板的格式应该为：http://yourhost/tile?x={X}&y={Y}&z={Z}.png 其中X和Y分别指纬度和经度图块坐标，Z指缩放级别，比如： http://yourhost/tile?x=3&y=27&z=5.png 如果您没有提供图块网址模板，您需要实现TileLayer.getTileUrl()抽象方法
zIndex	Number	图层的zIndex

实例方法

方法	返回值	描述
getTilesUrl(tileCoord: Pixel, zoom: Number)	String	抽象。向地图返回地图图块的网址，图块索引由tileCoord的x和y属性在指定的缩放级别zoom提供。如果您在TileLayerOptions中提供了tileUrlTemplate参数，则可不实现此接口
isTransparentPng()	Number	如果图层所用的图片为PNG格式并且包含透明信息，则返回true

示例

使用URL模板创建图层：

const tileLayer = new BMapGL.TileLayer({
  tileUrlTemplate: 'http://yourhost/tile?x={X}&y={Y}&z={Z}.png',
  transparentPng: true
});

map.addTileLayer(tileLayer);

自定义getTilesUrl方法：

class CustomTileLayer extends BMapGL.TileLayer {
  getTilesUrl(tileCoord, zoom) {
    // 根据坐标和缩放级别构造图块URL
    return 'http://yourhost/tile/' + zoom + '/' + tileCoord.x + '/' + tileCoord.y + '.png';
  }
}

const customLayer = new CustomTileLayer();
map.addTileLayer(customLayer);

常见用途

1. 自定义底图：

   • 加载自定义地图服务
   • 叠加专题地图
   • 显示历史地图影像

2. 图层叠加：

   • 叠加业务数据图层
   • 显示热力图层
   • 展示专题数据

注意事项

1. 图块加载：

   • 确保图块服务稳定可用
   • 注意图块大小和加载性能
   • 处理图块加载失败情况

2. 自定义getTilesUrl：

   • 返回的URL必须有效
   • 正确处理坐标转换
   • 考虑缓存机制

3. 性能优化：

   • 合理控制图层数量
   • 适当使用图块缓存
   • 注意内存占用