一、背景
近年来跨平台开发技术的发展已然成熟，React Native 作为其中代表之一，广泛应用于移动开发领域。然而大型业务项目中，往往需要处理海量的地图数据以及地图展示交互，因此需要一个可扩展、高可用的地图组件库。
于是就有了我们今天要介绍的 npm 包 @mapbox/react-native-mapbox-gl。
@mapbox/react-native-mapbox-gl 是一个基于 React Native 框架的地图组件库，提供了地图数据加载、地图缩放平移、标记添加等常用的地图功能。集成了 Mapbox 平台的地图 SDK，支持 Android 和 iOS 平台，且可以使用相同的 API 调用。
市面上地图组件有很多，那么 @mapbox/react-native-mapbox-gl 有什么优势呢？我们看一下官方宣传：
- 使用灵活，可定制性强；
- 功能强大，API 丰富；
- 数据加载快速，渲染性能高；
- 支持多种地图样式（包括高清卫星地图）；
- 有成熟的开发社区维护。
我个人也使用过这个组件库，确实不错。渲染快，使用方便，API 大致上符合直觉。
那么，我们接下来就可以来看一下如何使用这个地图组件库。
二、安装和初始化
npm 包管理工具的使用不再赘述。安装 @mapbox/react-native-mapbox-gl 包，输入以下命令：
npm install @mapbox/react-native-mapbox-gl --save
本文主要介绍的版本是 7.3.0，官方文档中可能存在与此不同的版本差异点。
关于 React Native 应用初始化的步骤，此处不再阐述。我们创建一个 MapScreen 组件，在其中添加地图组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ---------------------------------
------------------------
---- ------ ------ ------
--
----------------------------
----- --------- - -- -- -
------ -
-----------------
----------------------------------
-------------
------------------------------ -----------
-------- ----- - --
--
--
--
------ ------- ----------以上代码片段主要包含以下几个关键点：
- 引入 MapboxGL 组件；
- 设置组件的访问令牌，可以从 Mapbox 官网注册获得；
- 初始化 MapboxGL.MapView 组件，设置地图肚子的各类属性，包括地图样式、地图缩放比例和中心点以及组件占据屏幕的相对大小。
需要注意的是，在地图组件的使用之前，需要进行初始化，包括设置访问令牌、设置 MapboxGL SDK 和设置是否启用网络模式（如需使用离线缓存，可以设置为 false，在网络模式下将自动缓存）。需要检查网络连接情况，启用网络模式后，需要在应用全局范围内设置 MapboxGL.setConnected(true)。
三、添加标记
添加标记是地图应用的基础操作之一，@mapbox/react-native-mapbox-gl 提供了灵活的 API 接口以供开发者使用。接下来我们看一下如何添加标记。
-- -------------------- ---- -------
------------------------------------
------------------------
---- ------ ------ ------
--
----------------------------
----- ----------- - ------------- ------------
----- ---- - ----------- --- --------- - ---------------- - -------------
----- ----------- - ---
----- --------- - -- -- -
------ -
-----------------
----------------------------------
-------------
------------------------------ -----------
-------- ----- - --
-
--------------------- ----------------- -------- ----- -------- ----------- ---
--------------------- ---------------- -------- ---------- ----- --------- --- -- --
-----------------------
-------------------
--
--
------ ------- ----------上述代码片段中，我们使用了 ShapeSource 组件包裹了 SymbolLayer 组件，其中 ShapeSource 设置了点的坐标信息，SymbolLayer 设置标记的样式和大小。
在运行上述代码后，我们可以看到屏幕中央出现了一个符号样式的标记，如下图所示：
如果想要批量添加标记，只需要将 coordinates 数组扩展为多个坐标组即可。
四、展示数据
虽然现代浏览器已经可以异步加载海量数据，但对于分区分级的大数据展示，前端往往存在网络传输速度瓶颈、浏览器性能低等困扰，因此服务端的数据聚合、筛选和压缩成为必经之路。前端的渲染和交互则需要快速而平滑。
@mapbox/react-native-mapbox-gl 提供了展示数据的两种方式：使用 GeoJsonLayer 组件，或使用 CircleLayer 组件。
1. GeoJsonLayer
-- -------------------- ---- -------
------------------------------------
------------------------
---- ------ ------ ------
--
----------------------------
----- ----------- - ------------- ------------
----- ---- - ----------- --- --------- - ---------------- - -------------
----- ---- - -
----- --------------------
--------- -
-
----- ----------
--------- -
----- --------
------------ ---------- ----------
--
----------- ---
--
--
--
----- --------- - -- -- -
------ -
-----------------
----------------------------------
-------------
------------------------------ -----------
-------- ----- - --
-
--------------------- ----------------- -------------
----------------------
---------------
-----------------------
-------------------
--
-----------------------
-------------------
--
--
------ ------- ----------其中，data 为 GeoJson 格式的数据（详见GeoJSON）。创建 GeoJsonLayer 时，需要指定 sourceID，即 ShapeSource 组件的 id。GeoJsonLayer 组件的 style 属性包含多个子属性，可以设置不同类型的几何图形的显示样式。
五、自定义样式
@mapbox/react-native-mapbox-gl 提供了多种地图样式，可以满足一般的应用需求。如果不满足业务需求，可以进行详细的地图样式的定制化。
1. 添加自定义图层
-- -------------------- ---- -------
------------------------------------
------------------------
---- ------ ------ ------
--
----------------------------
--------------------------------
--------------
-
-------------- ----------
------- -
------
------ -------- ---
------ ----------- ------- -------- ---------
--
------ -
------------ ----
---------- ----------
----------------- ----------
------------ -----------
-------------- ----------
----------------- --
--
--
---
--
-------------------------------------- - -------- --------- ---
-------------------------------------- -------------
----- --------- - -- -- -
------ -
-----------------
--------------------
--------------
------------------------------ -----------
----------------------------------
--------
----- --
--
-
--------------------- ----------- -----------------------------------------------------------------------------
-------------------
--------------
------------------
-----------------
-------- ---------- -- ---------- ------- --
--
-----------------------
-----------------------
--------------------- ------------------ ---------------- --
------------------------
-------------------
--
--上述代码中：
- 使用
createStyleLayer函数来创建一个样式图层，参数customLayer为要创建的图层的名称； - 指定
sourceLayerID；设置filter以及style属性； - 使用
addColorScheme函数给定名称myDay和对象{ landuse: "#708238" }，将一个自定义的颜色方案添加到样式中； - 使用
addImage函数，在语义名称customImage与具体图像markerImage之间建立映射； - 在 MapView 中添加 ShapeSource 和 VectorSource；
- 向 CustomLayer 组件传递 layerIndex 属性和 id 属性（指明图层名称）。
在应用 customLayer 和 customImage 时，可以根据 mapbox 语义内容在样式表中改变层的样式，使用图像 customImage 并在 VectorSource 上使用该自定义图像。（示例代码省略这一部分）
六、总结
本文主要介绍了 @mapbox/react-native-mapbox-gl 这一地图组件库的使用方法。其中，我们了解了如何安装和初始化，如何添加标记，如何展示数据，如何自定义样式等。
其中还有很多细节点需要注意，比如在适当的时候清理地图资源，减少内存占用。同时，根据业务需求，也需要合理地设计地图的用户交互和标记显示等，为用户提供更好的使用体验。
总之，@mapbox/react-native-mapbox-gl 是一个非常优秀的地图组件库。希望本文能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446db