首页 / OpenLayers / API 文档
TileLayer
先看结论
瓦片图层。把切成网格的图片按当前级别铺满视野，是底图和栅格服务的主力图层类型。
new ol.layer.Tile(options)
构造参数
| 参数 | 说明 |
|---|---|
source | 瓦片数据源，如 ol.source.OSM、ol.source.XYZ、ol.source.TileWMS |
opacity | 图层透明度，0 到 1 |
visible | 是否可见，默认 true |
zIndex | 叠放顺序，数值大的在上层 |
extent | 只在该范围内渲染 |
preload | 预加载级别数，0 只取当前级，1 多加一级 |
transition | 新瓦片淡入时长，毫秒，默认 250 |
minZoom / maxZoom | 图层可见的缩放级别区间 |
minResolution / maxResolution | 图层可见的分辨率区间，与上面二者等价 |
常用方法
| 方法 | 说明 |
|---|---|
getSource() / setSource(s) | 读写数据源，切换底图常用 setSource |
setOpacity(o) / getOpacity() | 调节透明度 |
setVisible(v) / getVisible() | 显示与隐藏 |
setZIndex(i) | 调整叠放顺序 |
setPreload(n) | 运行中改变预加载级别 |
setExtent(extent) | 限制渲染范围 |
setMap(map) | 手动挂载或解绑地图 |
var baseLayer = new ol.layer.Tile({
source: new ol.source.OSM(),
preload: 1,
transition: 200,
zIndex: 0
});
/* 用同一个图层实例换源，避免反复增删图层 */
baseLayer.setSource(new ol.source.XYZ({
url: 'https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
}));preload 与 transition 的取舍
| 设置 | 请求量 | 体验 |
|---|---|---|
preload: 0 | 最少，只取当前级别 | 缩放时可能有短暂空白 |
preload: 1 | 约为 1.3 倍 | 缩放过渡更顺滑 |
transition: 0 | 不变 | 瓦片直接替换，无淡入 |
transition: 250 | 不变 | 默认的柔和新旧交替 |
瓦片图层只负责“怎么显示”，请求地址与参数都在数据源里。 同一个图层换源即可切换底图，这是图层切换面板最省内存的写法。
设置 extent 时注意投影：范围必须是视图投影下的坐标。
用经纬度直接写会让图层只在赤道附近的一个小矩形里渲染。
正确写法是 ol.proj.transformExtent(extent4326, 'EPSG:4326', 'EPSG:3857')。
经纬志（2026）。《TileLayer》。https://www.jingweizhi.com/openlayers/api/tile-layer.html（访问日期 2026-11-03）。