Mapbox GL JS介绍和简单使用

业余敲代码 2024-07-19 08:05:02 阅读 77

一. 介绍

官方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,开始渲染一帧画面

在这里插入图片描述

实现效果图

在这里插入图片描述

在这里插入图片描述



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。