Mapbox GL JS学习之路（一）：初识 Mapbox GL JS

孙悟空

已于 2023-07-22 10:32:07 修改

阅读量4.1k

点赞数 1

文章标签： mapbox mapbox gl js javascript

于 2023-07-18 11:37:49 首次发布

本文链接：https://blog.csdn.net/weixin_46098577/article/details/129752006

版权

Mapbox GL JS学习之路专栏收录该内容

1 篇文章 2 订阅

订阅专栏

文章目录

1 什么是Mapbox GL JS
2 Mapbox GL JS 可以用来做什么
3 Mapbox GL JS 版本
4 Mapbox GL JS v2新特性
5 Mapbx GL JS 支持哪些地图投影
6 如何学习Maxbox GL JS
7 ArcGIS API for JavaScript 和 Mapbox GL JS 两者有什么区别？各自的优缺点是什么？
8 加载地图

1 什么是Mapbox GL JS

Mapbox GL JS是一个用于Web上交互式、可自定义矢量地图的JavaScript库。它使用Mapbox样式规范和硬件加速图形（WebGL）从Mapbox Vector Tiles渲染地图数据。
Mapbox GL JS是跨平台生态系统的一部分，其中还包括用于Android和iOS应用程序的本地SDK。可以使用Mapbox Studio编写和编辑地图样式。

2 Mapbox GL JS 可以用来做什么

2.1 在交互式地图上使用自己的数据自定义设计的地图样式

可以自定义地图样式并将自己的数据添加到交互式地图中。用户可以通过Mapbox Studio创建自己的地图样式，包括地图颜色、标签、图标等，然后将自己的数据集集成到地图上。这使得用户能够以自己的方式呈现地图数据，并在地图上与其进行交互。

2.2 商店定位器（Store locator）

在地图上显示数千个点，以较低的缩放级别对其进行聚类。
通常，Store Locator应用可以让用户通过搜索商店名称、地图区域或地址等方式，查找周围的商店或服务机构，并在地图上显示它们的位置和基本信息，例如电话、营业时间等。在Mapbox平台上，Store Locator可以通过使用Mapbox API和开发者工具箱来实现。通过这种方式，商家可以将他们的门店信息上传到Mapbox中，并轻松地与Store Locator应用程序或其他地图相关应用程序集成，以便向潜在客户展示其门店位置。

2.3 故事讲述（Storytelling）

使用交互式相机和动态风格和数据更新来增强数据可视化

Mapbox中的Storytelling是一种地图展示方式，它通过使用不同的地图层、数据点、标签、图例等元素，帮助用户通过一系列交互式地图来讲述一个故事或者传达一个信息。通过Storytelling，用户可以创建一个有逻辑顺序和视觉引导的地图故事，让观众更好地理解地理数据和相关背景信息。
Mapbox的Storytelling功能包括制作交互式地图、添加多个地图层并控制它们的可见性、在地图上添加标记和描述、创建自动漫游的高级动画、并以多种方式呈现地图数据，例如: 热力图、时序数据、聚合数据等。所有这些元素都可以帮助用户在地图上展示数据，并使地图信息更加清晰和易于理解。
Mapbox的Storytelling在多个领域应用广泛，例如，新闻报道、旅游攻略、城市规划、环境监测等，为用户提供了一种清晰而有吸引力的方式来呈现地理数据、交互地探索地图、并传达信息。

2.4 用于基于位置的数据可视化的仪表板（Dashboard for location-based data visualization）

可以将各种类型的数据以地图形式进行可视化，包括地理坐标、行政区域、地形和卫星图像等，同时还支持不同层次的数据聚合和筛选。

2.5 数据可视化编辑器（Data visualization editor）

一个交互式可视化工具，可以帮助用户快速创建自定义的地图数据可视化。它提供了一个直观、可视化的界面，使得用户可以轻松地探索和呈现地图数据，并以各种方式可视化它们（如散点图、热力图、流量图等）。

2.6 标记和地图编辑器（Markup and map editor）

Markup：

Markup是Mapbox Studio的一项功能，它允许用户在地图上创建和编辑标记和注释。用户可以将标记添加到地图上，并选择标记图标，文本和颜色。这对于在地图上添加用户指南或标识特定区域非常有用。

地图编辑器

Mapbox地图编辑器是一个易于使用的网站，它允许用户创建自定义地图。用户可以添加点、线和多边形等要素，也可以编辑地图上现有的要素。它包括一个简单的拖放界面，允许用户从地图的左侧面板中选择要素，并将它们拖动到地图中心，然后将其设置为所需的属性。此外，用户还可以上传自己的地图瓦片或使用Mapbox Studio的自定义地图。

2.7 查询地图上的要素（Querying features on a map）

通过点击或者拖动地图区域来获取与之相关的所有地图要素。这些要素可以是地图上的点、线、面或其他数据。它可以帮助用户了解特定位置上的要素信息，比如建筑物、街道、公园等，并进一步了解相关的地理信息。
利用查询地图上的要素功能，用户可以自定义自己的地图标记，并在地图上添加所需的要素。此外，此功能可以将地图要素的数据绑定到应用程序中，这在开发位置相关的应用程序时特别有用。

2.8 实时资产跟踪（Live asset tracking）

用于跟踪和监控移动资产的位置和状态。它的主要功能是实时地显示资产在地图上的位置和路径，并提供实时数据更新，包括速度、方向和状态等。这个服务可以应用于广泛的场景，例如车队管理、物流配送、人员追踪、应急救援等。

2.9 路线规划和导航地图（Maps for route planning & navigation）

该功能模块集成了实时交通、公共交通等数据，可以帮助用户规划最优路线，并提供导航指引。
具体来说，该功能模块提供以下几个方面的功能：

路线规划：用户可以输入起点和终点，该功能模块会计算最短路径并显示在地图上。同时，用户还可以选择不同的交通方式和偏好，如步行、骑行、开车、公共交通等。
导航指引：一旦用户选择了路线，该功能模块会提供语音和视觉提示，引导用户沿着最优路线前进。用户可以在地图上实时查看自己的位置和行进路线，同时也会提供相关交通信息和路况警告等信息。
实时交通：Mapbox会收集并更新实时交通信息，帮助用户规划最优路线。用户可以在地图上查看交通流量、拥堵情况等信息。同时，该功能模块也会根据实时路况调整导航路线。
公共交通：该功能模块还集成了公共交通数据，用户可以查看公共交通路线和时刻表等信息，并规划最优的出行方式。该功能模块也会实时更新公共交通信息，帮助用户规避潜在的延误和调整出行计划。

2.10 交互式新闻地图（Interactive news maps）

Mapbox中的Interactive news maps 是一种交互式地图功能，它可以用来展示新闻故事、数据报道、可视化等内容。Interactive news maps可以显示不同地区的地图，同时也可以在地图上添加标记和信息窗口，用户可以通过点击标记和信息窗口来获取更多的信息。这种功能可以让用户更加深入地了解事件发生的地点和情境，也可以让新闻故事更加生动、直观、易于理解。此外，Interactive news maps还支持对地图样式、标签、颜色、动画等方面进行自定义，以便更好地匹配新闻内容和用户需求。

3 Mapbox GL JS 版本

Mapbox GL JS 是一个开源的基于WebGL的JavaScript库，用于构建交互式的地图应用程序。目前有三个大版本：v0.x，v1.x和v2.x。其中v1.x和v2.x是基于WebGL 2.0的版本，而v0.x则基于WebGL 1.0。这三个版本之间有一些重要的差异和更新。

Mapbox GL JS v0 提供了多种灵活和高度定制的地图样式和数据，可以帮助开发人员构建各种不同类型的地图应用，如空间分析、数据可视化、地理搜索等。
Mapbox GL JS v0有许多功能和特性，包括

支持矢量地图、多种地图样式，分层渲染，地图数据查询与过滤，交互式控件和事件，以及大量的API和插件等。
支持从多种数据源获取地图数据，如Mapbox自带的Mapbox Streets数据源，也支持从开放数据源、本地矢量文件等数据源获取地图数据。

Mapbox GL JS V1 用于创建交互式和高性能的Web地图应用程序。它提供了一套丰富的API和工具，可以轻松实现全球范围内的可视化和地理信息展示。

主要特点包括：

矢量地图：Mapbox GL JS V1使用矢量地图数据，可以快速加载大规模数据，并支持与其他地图数据源的集成。
高性能：它利用WebGL技术，可以在浏览器中实现高性能的地图渲染，并可以处理大数据集。
交互式：使用Mapbox GL JS V1，用户可以通过缩放、平移、旋转等手势实现对地图的交互操作，并能够与其他UI元素进行集成。
自定义样式：Mapbox GL JS V1允许开发人员针对不同的用例和需求，自定义地图样式和符号，包括地图瓦片、标注、线条、面、颜色和字体等。
地理信息和空间分析：借助Mapbox GL JS V1提供的丰富的地理信息API和工具，可以轻松实现地理信息和空间分析，比如地理编码、路线导航、地理围栏、空间查询等。

Mapbox GL JS v2 可以被用于在网页和移动应用中显示地图，同时也支持添加标记、热点、矢量图层和地图样式的自定义。
Mapbox GL JS v2 的核心依赖于 WebGL2.0 技术，可以在现代的浏览器和移动设备上快速渲染高质量的交互式地图。同时，它还可以通过扩展API实现对地图的多种定制化操作，例如导航，搜索, 分析和数据可视化等功能。

在 Mapbox GL JS v2 中还包含了一些新的功能，例如：

3D 视图的增强，支持使用 Mapbox 的高度数据和太阳角度信息创建逼真的 3D 地图。
支持在矢量和栅格图层上应用交互式的过渡和过渡动画效果。
增加了可视化数据的功能，包括线条、面、圆和点数据等。

总的来说，Mapbox GL JS目前已被广泛应用于各种领域，在移动应用、网络应用、物联网、大数据分析等领域都有广泛应用。Mapbox GL JS v0的开放源代码和丰富的文档和示例，也为开发人员提供了极大的便利和灵活性，帮助他们更容易地构建自己的地图应用程序。Mapbox GL JS v2 在功能上得到了显著的升级，为开发人员提供了更好的可定制性、更丰富的功能选择和更流畅的性能表现，使得开发高质量的地图应用变得更加容易。

4 Mapbox GL JS v2新特性

Mapbox GL JS v2（GL-JS v2）是下一代基于矢量瓦片的浏览器地图SDK。它包括：

性能改进 ---- 加载贴图库和渲染初始视口的时间更快。
三维渲染 ---- 渲染具有地形高程和天空层的矢量地图。‍
自由形式 ---- 相机自由形式相机API允许您在三维中明确定位相机。

有哪些提升？

Mapbox GL JS v2在某些样式中将地图加载时间提高了50%以上，并引入了地图的渐进渲染以提高感知的地图加载时间。渐进式渲染使页面感觉更快，并允许用户在地图完全加载之前与地图进行交互。
地图加载在浏览器的主Javascript线程上占用的时间也更少，为web应用程序的其余部分留下了更多的资源来继续加载。
地图内容的渐进加载允许在初始加载以及缩放、平移和动画过程中更早地渲染土地和水等层。这也改善了地图交互（缩放和平移）和动画的体验。
改进的大小取决于地图大小、网络条件和硬件。在我们的基准测试中，可能在v1中加载了1900ms的映射，在v2中加载了1350ms。衡量地图内容何时开始显示的速度指数也快了35%。

可以对3D渲染做些什么？

Mapbox GL JS v2实现身临其境的3D地图绘制体验。可以将卫星图像或矢量层覆盖在地形数据上，以三维可视化地图。
比如：

使用自由形式的相机API，沿着无人机飞行路线在世界各地飞行。
在三维地形的顶部显示蜂窝塔模型的信号覆盖范围。
通过实时天气条件和一天中的时间显示不断变化的天空和地平线。

3D渲染有哪些新功能或改进？

地图俯仰（倾斜）从60°增加到85°
将高程添加到所有图层的样式中的地形全局特性
样式中的天空层类型，用于对地平线建模并影响填充拉伸层上的照明

什么是Freeform相机？

Freeform相机是一种可以自由旋转和缩放的相机，用户可以通过手势或鼠标控制相机的视角和位置。它常用于虚拟现实、增强现实和视频游戏中，以提供更自然和沉浸式的体验。
您可以使用FreeCameraOptions在应用程序级别实现自己的相机操作和动画逻辑。曝光的摄影机参数集允许将摄影机移动与不同的平台动画系统集成在一起。

用Freeform相机能做什么？

自由形式的摄影机可以移动摄影机并设置其动画，而不需要在场景中心设置精确的纬度和经度。这对于忽略焦点、具有多个焦点或动态更新焦点的运动非常有用。它对于视图方向的平滑相对运动也很有用，比如在多个焦点之间进行扫掠旋转、飞行或放松。
相机可以沿着空中飞行路径飞行，以恒定的相机速度跟踪地面物体，或者构建围绕固定兴趣点旋转的信息亭动画。此API还可以轻松地在多个SDK或其他应用程序状态之间同步相机。

5 Mapbx GL JS 支持哪些地图投影

首先，我们在想知道Mapbx GL JS 支持哪些地图投影之前，需要了解什么是地图投影。

地图投影是将地球表面的三维地球体投影到二维平面上的方法。由于地球是一个球体，而地图通常是平面，因此需要将地球表面的曲面映射到平面上。投影的过程会影响地图的形状、大小、比例、方向和距离等属性。由于不同的投影方法有不同的优缺点，因此在制作地图时需要根据具体需要选择合适的投影方式。常见的地图投影包括等距圆柱投影、等角圆柱投影、等面积投影和方位投影等。

Mapbx GL JS 支持以下地图投影方式：

阿伯斯投影（Albers），又名“正轴等积割圆锥投影”，“双标准纬线等积圆锥投影”。圆锥投影的一种，为阿伯斯（Albers）拟定。
朗伯等角圆锥投影（Lambert Conformal Conic），是一种等角(正形)圆锥投影.由德国数学家朗伯(Lambert , J.H.)提出。
Equal Earth 投影，是一种等面积投影，它的设计旨在提供更加准确和公正的地球表面的表达。它是由美国国家地理空间情报局的Bojan Savric和Tom Patterson领导的团队开发的，该投影于2018年推出。这种投影可以在没有任何地图变形的情况下将球形地球表面投影到二维表面上。它使用了椭球体方程和校正形变因素，以适合大地图比例的用途。
Natural Earth 投影，是一种基于等面积的投影方式，它使用了Cylindrical Equal-Area投影的变体。Natural Earth投影旨在呈现地球表面的整体形状，尤其是在较小的地图上。它被广泛用于制作世界地图和国家地图。与其他等面积投影不同的是，Natural Earth投影还能够保留较高的几何精度。它是一种相对简单的投影方式，具有易于绘制和理解的优点。
Winkel Tripel 投影，是一种常用于世界地图的等面积投影方法，被广泛使用于各种大型的世界地图中。它是众多投影方法中的一种，其特点是能够比较准确的反映出地球表面的真实形状和大小关系，并且保持了同一纬度上的距离相等，但是不同纬度之间的距离会有一些变形。Winkel Tripel投影是由德国地理学家Oswald Winkel于1921年发明的，它折中了Mercartor投影和平面等面积正六边形网格投影的特点，因此得名Winkel Tripel。
Equirectangular 投影，是一种经典的地球表面投影方法，也称作平面经纬度投影或直角经纬度投影。该投影方法将地球表面上的经度和纬度映射到一个平面矩形网格上，经度和纬度分别对应该网格的横纵坐标。这种投影方法通常用于展示全球的地图或气象数据等。
墨卡托投影（Mercator），墨卡托投影是等角圆柱投影的一种，它将球体表面的经纬度网格，投影到平面上，以便在地图上显示。它假设地球是一个理想的完整球体，并将其展平到一个矩形上。在这种投影下，经线与纬线平行地形成相互垂直的网格。经线的间距相等，代表东西方向，每个纬线到赤道的距离相等，代表南北方向。墨卡托投影通常使用于地图制图，它的主要优点是保持角度不变，也就是说在地图上的任意两点之间的方位角不会发生改变。它还可以减小地球表面上的距离扭曲，但在极地区域，墨卡托投影也会引起显著的形变。墨卡托投影在航空、海洋、地图制图等领域广泛应用，它保持方向和等面积性质的特点使得它成为一种实用性非常强的地图投影方式。

6 如何学习Maxbox GL JS

学习 Mapbox GL JS 的方式有很多，比如：

官方网站：Mapbox GL JS 官方网站上提供了详细的文档和教程，包括新手指南、API 文档、示例代码等等。建议先阅读新手指南，了解 Mapbox GL JS 的基本概念和使用方法。
示例代码：Mapbox GL JS 提供了丰富的示例代码，可以通过官方网站或官方 GitHub 仓库获取。这些示例代码可以帮助你快速地学习和理解 Mapbox GL JS 的使用方法和功能。
教程和博客：各种教程和博客也是学习 Mapbox GL JS 不错的选择。这些资源可以从互联网上搜索到，包括 YouTube 视频、Medium 论坛、StackOverflow 等等。
实践项目：最好的学习方法是通过实践项目来掌握技能。你可以尝试使用 Mapbox GL JS 开发一个小型的地图应用程序，如实时交通、地图分析、航行路线等等。

总之，学习 Mapbox GL JS 需要耐心和实践，相信只要认真学习，并不断实践，就能掌握这个强大的工具。

7 ArcGIS API for JavaScript 和 Mapbox GL JS 两者有什么区别？各自的优缺点是什么？

ArcGIS API for JavaScript和Mapbox GL JS都是用于构建交互式地图应用程序的JavaScript库。以下是它们之间的区别和各自的优缺点：

数据支持和内容：ArcGIS API for JavaScript有更丰富的地图数据支持和内容，因为它可以直接使用Esri的ArcGIS平台进行数据检索和交换。Mapbox GL JS则主要专注于统一的地图绘制和样式，并且可以使用其他数据源（如OpenStreetMap）。
图层控制：ArcGIS API for JavaScript具有更丰富的图层控制功能，可以很容易地添加和控制各种图层。Mapbox GL JS相对较少的内置图层控制功能，但是可以使用第三方插件增强其功能。
样式和外观：Mapbox GL JS在设计方面更加注重外观和样式，并且提供了更多的设计选项和控制选项。ArcGIS API for JavaScript则更加注重地图功能和实用性。
跨平台支持：Mapbox GL JS支持跨平台，可以很容易地在Web、移动和桌面应用程序中部署。ArcGIS API for JavaScript则主要用于Web应用程序，但是也可以使用其他Esri产品进行桌面和移动部署。
交互性：ArcGIS API for JavaScript提供了更多的交互性和用户体验控制功能，包括动画、弹出窗口、标注和可视化效果等。Mapbox GL JS也提供了一些交互性，但是主要关注地图绘制和外观方面。

总的来说，两者都有自己的优点和缺点，取决于应用程序的需求和开发人员的技能水平。如果需要更丰富的数据支持和图层控制功能，则ArcGIS API for JavaScript是更好的选择。如果需要更注重样式和外观方面，则Mapbox GL JS可能更适合。

8 加载地图

代码实现：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Display a web map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <!-- 引入在线mapbox-gl css样式 -->
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet">
    <!-- 引入在线mapbox-gl js库 -->
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>

    <!-- 自定义CSS样式 -->
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map-container"></div>

    <script>
        // token
        mapboxgl.accessToken = 'pk.eyJ1IjoieGlhb3NoaWhkIiwiYSI6ImNrNngzYnRhdzBqNm0zZnJ4eWZjdndrYzkifQ.qQjf8zANr9PsMpwq2NsRWQ';

        const map = new mapboxgl.Map({
            container: 'map-container', // 存放地图的容器id
            // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
            style: 'mapbox://styles/mapbox/streets-v12',
            center: [100.9, 34.2], // 地图中心位置经纬度[longitude,latitude]
            zoom: 2.5,      // 地图缩放等级
            projection: 'globe' // 投影方式，默认 'globe'
        });

    </script>

</body>

</html>