一. 介绍

官方API地址: https://docs.mapbox.com/mapbox-gl-js/api/github地址：https://github.com/mapbox/mapbox-gl-js概念：Mapbox GL JS是一个JavaScript库，使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图。以vector tiles方式数据组织，以Mapbox styles来配置地图样式规则，最终渲染得到交互式地图。

可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。

Mapbox GL JS 是Mapbox的一个开源客户端库，用于渲染 Web 端的可交互地图。作为 Mapbox 生态系统的一部分，它通常与 Mapbox 提供的其他服务集成在一起，统一对外使用。

WebGL：WebGL是一项使用JavaScript实现3D绘图的技术，浏览器无需插件支持，Web开发者就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。

WebGL基于OpenGL ES 2.0，OpenGL ES 是 OpenGL 三维图形 API 的子集，针对手机、平板电脑和游戏主机等嵌入式设备而设计。

浏览器内核通过对OpenGL API的封装，实现了通过JavaScript调用3D的能力。WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中。

WebGL渲染意味着高性能，MapboxGL能够渲染大量的地图要素，拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。

WebGL使用：提供丰富的API和示例让开发者可以快速实现地图可视化效果，同时还有自定义配图的mapbox studio，这是一个可以自定义地图风格样式的制图系统，对数据的可视化提供了很好的帮助。

更重要的是同时它制定了MBTiles瓦片存储规范和Mapbox Vector Tile(Mapbox 矢量瓦片)。

Mapbox GL 生态系统的另一部分是Mapbox Mobile，它是一个用 C++ 编写的兼容桌面和移动平台的渲染引擎。

二. Mapbox GL JS 作为地图引擎的优势

相比于 Leaflet, OpenStreetMap 等 2D 栅格图地图引擎

Mapbox GL JS 使用矢量数据渲染地图（可以使用栅格数据），矢量数据易于更改要素样式，图层顺序，也可以在数据版本迭代时快速同步更新。

矢量数据相比于栅格图片，具有更多种数据压缩的可能性；因此在相同场景中，矢量数据的数据量要比栅格数据要小（矢量数据需要组织得当）。

Mapbox GL JS 采用 WebGL 方案，相比于 Canvas 和 SVG 方案，可以支持更多的三维地图效果。

相比于 Cesium 等三维地图引擎

Mapbox GL JS 的渲染场景实际为 2.5D，并不是完全的 3D 场景（控制可视角度），这使得地图可视范围的可控，数据可以使用二维金字塔模型组织，提升了场景内数据筛选性能，也控制了同屏展示的数据量。

Mapbox GL JS 的体量相对较小，模块结构较为清晰，易于进行改造及二次开发。

相比于 Google Map, AB Map（Mapbox GL JS versions 1.x）

Mapbox GL JS 为开源软件，社区生态丰富，同样易于改造及二次开发。

Mapbox GL JS 的开源协议为 BSD-3-Clause license，可以合法进行商业化使用。

Mapbox GL 体系提供的地图方案，支持地图数据服务内网部署，可以做到内外网隔离。

三. Mapbox GL JS 架构

1.数据组织

Mapbox GL JS 采用 Web 墨卡托投影，这使得世界在地图中是一个正方形；同样所有的数据按照比例尺，均匀分布在每一个不同分辨率的相同尺寸的正方形网格中。

（墨卡托投影，是正轴等角圆柱投影。由荷兰地图学家墨卡托(G.Mercator)于 1569 年创立。假想一个与地轴方向一致的圆柱切或割于地球，按等角条件，将经纬网投影到圆柱面上，将圆柱面展为平面后，即得本投影。墨卡托投影在切圆柱投影与割圆柱投影中，最早也是最常用的是切圆柱投影。）

这种数据组织方式(tileset)，它可以快速定位当前所需数据，按需下载，并且易于存储与缓存。Mapbox 提供了可以将数据处理为 tileset 的工具，其所有的库和 SDK，都需要 tileset 来组织数据。

2.代码架构

Interface 层：

位于顶层，其中包含与地图用户交互的所有类。Map 和 Camera 控制地图状态（缩放，视角，位置等），Marker 和 Popup 是在地图上添加的标记，Control 是一系列地图上的小工具（放大缩小按钮，指南针等），Event Handler 处理地图的各种事件（move, click, zoom）。

Style 层：

包含了表现和处理 Mapbox Style 的所有类。Layer 为地图中的图层，表示地图中的不同图形要素（道路-Line，区划面-Fill），与 Mapbox Style中的layer一一对应，主要存储图层对渲染要素的一系列配置；Source 表示地图所需要的数据，同样与与 Mapbox Style 中的 source一一对应；Style 层还有 Light 等地图全局使用的公共样式类。

Render 层：

含使用 WebGL 在屏幕上渲染地图要素的所有类。Paint 是一个全局的渲染调度器，所有的渲染指令都由 Painter 下发；不同的图形要素（Fill, Line, Symbol）有着不同的 Draw Function，用来执行不同的渲染逻辑；不同的要素也有不同的 Shader，来进行着色器渲染。

Map Data 层：

为地图渲染所需要的数据，它们按照数据源的不同，分为不同的 Source 类。Source 中包含数据的请求，处理，主子线程的通信方法。每一个 Source 在子线程有一个对应的 Worker Source，用于在子线程实际执行网络请求和数据处理等逻辑。

Tile Data ：

是层是数据在被请求到后，处理为渲染（WebGL）所需要的格式所用到的所有类。不同的图形要素需要不同的数据规格，因此在数据处理时，Source 会按照使用该 Source 的不同 Layer 进行不同的数据处理和组织，完成后以 Bucket 的形式存储，等待渲染时被调用。

Util 层：为整个地图运行流程中，使用到的一些工具类。

Source, Tile, Bucket, Layer 的关系Source 按照数据源区分，里面存储着不同的 Tile 网格；每个 Source 可以被多个 Layer 使用，针对调用的不同的 Layer，每个 Tile 会存储不同的 Bucket，为不同的渲染方式提供数据。

四. 三维实现以及示例

申请access_token实例化 Map，开始渲染一帧画面

实现效果图