前言
在前端开发中，地图是一个非常基础也非常常见的需求。而 Mapbox 提供了一套非常好用的地图解决方案，它可以帮助我们实现各种地图需求。而今天要介绍的是一个基于 Mapbox 的 npm 包：@appearhere/mapbox-gl。
@appearhere/mapbox-gl 是 Mapbox GL JS（Mapbox 的 JavaScript 库）的移植版，提供了一些额外的功能，并且可以更加方便地在项目中使用。本教程将详细介绍 @appearhere/mapbox-gl 的使用方法。
安装
如果你已经熟悉 npm 包的安装流程，那么直接使用以下命令进行安装即可：
npm install @appearhere/mapbox-gl
使用
初始化地图
在使用 @appearhere/mapbox-gl 之前，需要先初始化地图。具体步骤如下：
- 在 HTML 中添加地图容器：
<div id="map" style="height: 400px"></div>
- 在 JavaScript 中初始化地图：
import Mapbox from '@appearhere/mapbox-gl';
const map = new Mapbox.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [116.404, 39.915],
zoom: 14,
});这里的 Mapbox 对象就是我们要用到的 @appearhere/mapbox-gl 中的对象。可以看到，初始化地图的方式和原生的 Mapbox GL JS 一样，只需要将 mapbox-gl 替换为 @appearhere/mapbox-gl 即可。
添加图层
添加图层是地图开发中最常见的需求之一。下面我们将介绍如何使用 @appearhere/mapbox-gl 添加图层。
添加 GeoJSON 图层
GeoJSON 是一种非常常见的地理数据格式。我们可以使用 @appearhere/mapbox-gl 添加一个 GeoJSON 图层：
-- -------------------- ---- -------
--------------
--- ----------------
----- ---------
------- -
----- ----------
----- -
----- --------------------
--------- -
-
----- ----------
----------- -
----- ------- ---
--
--------- -
----- --------
------------ --------- --------
--
--
-
----- ----------
----------- -
----- ------- ---
--
--------- -
----- --------
------------ --------- --------
--
--
--
--
--
------ -
---------------- ---
--------------- ----------
--
---添加图层的方式和原生的 Mapbox GL JS 一样，这里的 addLayer 方法也只是被替换成了 @appearhere/mapbox-gl 的实现。
我们可以看到，这里添加了一个圆形的图层，并且指定了图层的样式（radius 和 color）和数据源（GeoJSON 格式的数据）。
添加 Image 图层
除了 GeoJSON 图层之外，@appearhere/mapbox-gl 还支持添加 Image 图层：
-- -------------------- ---- -------
--------------
--- --------------
----- ---------
------- -
----- --------
---- -------------------------------------------------------
------------ -
--------- --------
--------- --------
--------- --------
--------- --------
--
--
------ -
----------------- -----
--
---这里的 url 参数就是要加载的图片地址。需要注意的是，这里的 type 必须为 raster。
添加视频
除了图片，@appearhere/mapbox-gl 还支持添加视频图层：
-- -------------------- ---- -------
--------------
--- --------------
----- -------------
------ -
------------------- --------------
--
---
-------------- -- -- -
----------------------------- -
----- --------
----- ---------------------------------------------------------
------------ -
-------- ------
-------- ------
-------- ------
-------- ------
--
---
--------------
--- --------------
----- ---------
------- ---------------
---
----- ----- - ---------------------------------
--------- - -------------------------------------------------------
-------------
---这里需要添加一个 background 类型的图层，并且将 background-color 设为 transparent。然后需要监听 map 的 load 事件，在地图加载完成之后添加视频。需要注意的是，视频地址和视频源的坐标都需要指定。
添加控件
控件是 Mapbox GL JS 中非常重要的一部分，可以帮助用户实现地图的交互和导航。下面我们将介绍如何使用 @appearhere/mapbox-gl 添加控件。
添加导航控件
导航控件是地图中最重要的控件之一，它可以帮助用户控制地图的缩放和旋转。使用 @appearhere/mapbox-gl 添加导航控件非常简单：
const nav = new Mapbox.NavigationControl(); map.addControl(nav, 'top-left');
这里的 NavigationControl 对象就是导航控件的实现。我们可以使用 addControl 方法将导航控件添加到地图上，需要指定控件的位置（这里是左上角）。
添加缩略图控件
缩略图控件可以帮助用户快速地了解地图的区域和缩放级别。使用 @appearhere/mapbox-gl 添加缩略图控件也非常简单：
const thumbnail = new Mapbox.ThumbnailControl(); map.addControl(thumbnail, 'bottom-right');
这里的 ThumbnailControl 对象就是缩略图控件的实现。我们可以使用 addControl 方法将缩略图控件添加到地图上，需要指定控件的位置（这里是右下角）。
其他功能
添加 Popup
Popup 是 Mapbox GL JS 中非常常见的弹窗功能。使用 @appearhere/mapbox-gl 添加 Popup 也非常简单：
const popup = new Mapbox.Popup({
closeButton: false,
closeOnClick: false,
}).setLngLat([116.404, 39.915])
.setHTML('<h3>Hello World!</h3>')
.addTo(map);这里我们创建了一个 Popup 对象，并且指定了 Popup 的位置和内容，并将其添加到地图上。需要注意的是，如果不指定 closeButton 和 closeOnClick，则默认为 true。
结语
到这里，我们已经介绍完了 @appearhere/mapbox-gl 的全部功能。使用 @appearhere/mapbox-gl 可以更加方便地使用 Mapbox GL JS，从而实现各种地图需求。希望本教程可以帮助到大家，也希望大家能够善加利用 @appearhere/mapbox-gl，为地图开发贡献自己的力量。
示例代码
完整的示例代码可以在下面的链接中找到：
https://codesandbox.io/s/appearheremapboxgl-tutorial-ty1uv
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/102143