核心架构
本文档提供了 Mapbox GL JS 的基本架构概述,重点介绍了构成该库的核心组件及其相互关系。有关渲染的详细信息,请参阅 渲染系统,有关数据源的信息,请参阅 数据源和瓦片。
概述
Mapbox GL JS 是一个用于使用 WebGL 渲染交互式地图的 JavaScript 库。其架构围绕几个关键组件设计,这些组件协同工作,将地图样式和地理数据转换为渲染的可视化。
核心组件
地图
Map 类是整个库的中央控制器和入口点。它协调所有其他组件并处理初始化、事件管理和用户交互。
Map 类是一个事件发射器,广播如 load、move、click 等事件。它负责:
- 加载和管理样式
- 初始化 WebGL 上下文
- 设置用户交互处理程序
- 管理渲染循环
- 提供用于操作地图的 API 方法
样式
Style 类负责解析和管理地图的样式规范,该规范通过数据源、图层和其他视觉属性定义地图的视觉外观。
Style 类的主要职责包括:
- 加载和解析样式规范
- 管理数据源和图层
- 管理嵌套样式的导入
- 处理样式转换
- 基于缩放级别和要素属性评估样式表达式
- 提供要素查询功能
样式图层
StyleLayer 类是 Mapbox GL JS 中所有图层类型的基类。每种图层类型(fill、line、symbol 等)都扩展此基类以实现其特定的渲染行为。
样式图层的关键方面:
- 每个图层都有自己的布局和绘制属性
- 图层可以被过滤以仅应用于特定要素
- 图层引用一个数据源,并且可以选择性地引用一个数据图层
- 布局和绘制属性可以通过表达式实现数据驱动
- 图层具有由其在样式中的位置确定的特定渲染顺序
数据源和数据源缓存
Sources 定义地图数据的来源,SourceCache 管理此数据的加载和缓存。
- 定义不同的数据源类型(vector、geojson、raster 等)
- 处理瓦片数据的加载
- 管理瓦片生命周期和缓存
- 将原始数据处理为图层可用的格式
- 与 web workers 协调进行数据处理
数据流和处理
数据在 Mapbox GL JS 中的流动遵循从样式规范到渲染像素的管道。
数据流的关键方面:
- 样式规范被解析为结构化表示
- 数据源被初始化并开始加载瓦片
- 随着瓦片的加载,其数据被处理和索引
- 图层基于缩放级别和要素属性评估其属性
- 使用处理后的数据和评估的样式渲染地图
- 用户交互触发现状状态更新,该更新流回系统
表达式
表达式系统是 Mapbox GL JS 的核心部分,支持数据驱动的样式和动态属性评估。
表达式系统允许:
- 基于要素属性的数据驱动样式
- 依赖于缩放的属性值
- 数学和字符串操作
- 条件逻辑
- 类型转换
- 颜色操作
- 插值和步进函数
样式系统
Mapbox GL JS v3 引入了通过导入进行嵌套和可配置样式的系统。
样式片段系统:
- 允许将其他样式导入到主样式中
- 对导入样式的更新会自动反映
- 可以为导入的样式设置配置属性
- 引入了用于预定义图层位置的"插槽"概念
- 支持用于访问配置值的 "config" 表达式
交互
Mapbox GL JS 包含一个用于处理用户与地图交互的综合系统。
交互系统提供:
- 鼠标和触摸事件的事件处理
- 基于交互的要素查询
- 基于要素属性的交互过滤
- 将事件委托给适当的处理程序
- 阻止事件传播
与 WebGL 的集成
Mapbox GL JS 的核心是与 WebGL 的集成,以实现高性能渲染。
WebGL 集成包括:
- 自定义 WebGL 上下文管理器
- 着色器编译和管理
- 顶点和索引的缓冲区管理
- 图像和字形的纹理管理
- WebGL 渲染的状态管理
- 针对不同图层类型的优化绘制命令
总结
Mapbox GL JS 的核心架构围绕几个关键组件构建:
- Map:管理所有其他组件的中央控制器
- Style:定义视觉外观和数据源
- Layers:基于样式渲染地图的不同方面
- Sources:提供要渲染的地理数据
- Expression System:支持数据驱动的样式
- Rendering Pipeline:使用 WebGL 将数据转换为像素
此架构为创建具有自定义样式和数据可视化的交互式地图提供了灵活而强大的基础。模块化设计允许在不同级别进行扩展和自定义。