经纬志
首页 / OpenLayers / 使用示例

瓦片切换过渡

两个 OSM 瓦片图层叠在一起,唯一差别是瓦片淡入时长,勾选复选框即可对比。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

瓦片源的 transition 以毫秒为单位控制新瓦片淡入时间。一个图层保留默认的 250ms,另一个显式设为 0,两个图层共用同一视图,切换可见性时不再重建地图。缩放过程中,长过渡更平滑,短过渡更“硬”但能更快看清最终画面。

操作结果
勾选「启用过渡」新瓦片从透明渐变到不透明,缩放观感柔和
取消勾选瓦片立即替换,画面切换干脆
连续滚轮缩放两种模式的差异在低缩放级别最明显

带透明背景的瓦片(如边界线、标注层)适合把 transition 设为 0,避免网格状接缝闪烁。