瓦片系统
Mapbox GL JS 中的瓦片系统管理地图瓦片的组织、加载和缓存——这是 Web 地图的基本构建块。该系统负责高效地请求、处理和渲染各种缩放级别的地理数据,以创建无缝的地图体验。
有关提供这些瓦片的不同 source 类型的信息,请参阅 数据源类型。有关瓦片如何并行处理的详细信息,请参阅 工作线程架构。
瓦片坐标和结构
Web Mercator 投影
Mapbox GL JS 使用 Web Mercator 投影（EPSG:3857）,将球形地球映射到可以划分为瓦片的正方形。
瓦片坐标系统
瓦片由三个整数坐标标识:
| Coordinate | Description |
|---|---|
| z | 缩放级别（0 是整个世界,每次增量使分辨率翻倍） |
| x | 列（从 0 到 2^z-1 向东增加） |
| y | 行（从 0 到 2^z-1 向南增加） |
TileCoord 类封装这些坐标并提供比较瓦片和计算关系的方法。
来源:
瓦片加载生命周期
地图瓦片在其生命周期中经历几个状态,由 SourceCache 类管理。
SourceCache 实现了优化性能的策略:
- 预测性加载: 预先加载视口相邻的瓦片,以预期用户的平移
- 父瓦片显示: 在加载更高缩放级的子瓦片时显示较低缩放级的父瓦片
- 保留策略: 将最近使用的瓦片保留在内存中,以避免在返回区域时重新加载
- 淡入动画: 在不同分辨率的瓦片之间平滑过渡
来源:
过缩放
过缩放是一种技术,允许用户缩放超过瓦片数据可用的最大缩放级别。
当用户缩放超过最大可用缩放级别时:
TileCoord类创建一个"过缩放"坐标,包括:- 与用户视图匹配的显示缩放级别
- 指向实际源数据的"规范"缩放级别
- 调整后的 x 和 y 坐标
对于 vector tiles,vertex 数据被转换以更高分辨率渲染
对于 raster tiles,像素数据被放大（可能会显得模糊）
来源:
Source 缓存
SourceCache 类是瓦片系统的核心组件,管理特定 source 的瓦片。
当地图视图更改时,SourceCache.update() 方法:
- 计算当前视图需要哪些瓦片
- 请求缺失的瓦片
- 卸载不再需要的瓦片
- 确定要渲染哪些已加载的瓦片
来源:
瓦片生成和处理
对于 vector tiles,过程包括:
Map类根据当前视图触发updateSources()SourceCache使用getCoveringTiles()确定需要的瓦片- 对于每个需要的瓦片,创建并加载一个
Tile实例 - Vector tile 数据被发送到 web workers 进行解析
- 解析的数据返回到主线程并被组织为用于渲染的"buckets"
- 地图使用新的瓦片数据重新绘制
来源:
瓦片坐标工具
Mapbox GL JS 包括几个用于处理瓦片坐标的工具函数:
| Function | Purpose |
|---|---|
pointToTileCoord | 将墨卡托坐标中的点转换为瓦片坐标 |
tileCoordsAtZoom | 获取给定缩放级别的所有可能瓦片坐标 |
getTileCoordCenter | 计算瓦片中心的墨卡托坐标 |
pointToLatLng | 将墨卡托坐标转换为纬度/经度 |
latLngToPoint | 将纬度/经度转换为墨卡托坐标 |
这些工具有助于执行以下操作:
- 确定给定地图视图需要加载哪些瓦片
- 在不同坐标系统之间转换
- 计算瓦片的地理边界
来源:
与其他系统的集成
瓦片系统与 Mapbox GL JS 中的其他几个组件交互:
关键集成点:
- Style 系统: Style 确定哪些 sources 和 layers 处于活动状态,这影响需要加载哪些瓦片
- Source 类型: 不同的 source 类型（vector、raster、GeoJSON）实现专门的加载行为
- Worker 架构: Web workers 解析和处理 vector tile 数据而不阻塞主线程
- 渲染系统: 处理后的瓦片数据被传递到渲染管线进行绘制
- 交互: Feature 索引允许查询瓦片内的 features 以实现交互式地图
来源:
缓存和性能优化
Mapbox GL JS 实现了几种缓存策略来优化性能:
- 本地瓦片缓存:
SourceCache维护最近使用的瓦片的内存缓存 - HTTP 缓存: 利用标准 HTTP 缓存头进行网络请求
- 父/子关系: 在加载子瓦片时显示可用的父瓦片
- 坐标覆盖算法: 优化为当前视图请求哪些瓦片
- 瓦片过期: 在瓦片过期时间后自动重新加载
这些策略协同工作,以提供响应式地图体验,同时最大限度地减少网络使用和处理时间。