前端开发中使用地图已经非常常见，在很多时候我们需要在地图上添加各种元素，例如气泡标记、路径标记等等。而 Mapboxgl 是一个功能强大、易用性优秀的地图库。在使用 Mapboxgl 构建地图应用时，我们可能会遇到需要在地图上添加元素并对这些元素进行交互的需求。本文介绍 npm 包 @react-mapboxgl/hover，该包可以帮助我们实现交互需求。
简介
@react-mapboxgl/hover 是一个 React 组件，用于在地图上添加元素，并给这些元素添加 hover 效果。即在鼠标移入元素的时候，可以实现元素的缩放、更换样式、改变位置等操作。除此之外，该组件还支持自定义事件。
下载安装
如果你的项目使用 npm 或 Yarn 管理依赖，可以使用以下命令安装 @react-mapboxgl/hover：
npm install @react-mapboxgl/hover --save
或者使用 Yarn：
yarn add @react-mapboxgl/hover
使用示例
在你的 React 项目中，可以按照以下的方式使用 @react-mapboxgl/hover：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ - ------ - ---- ------------------
------ ----- ---- ------------------------
----- ------------------- - --------------------
----- ------ - -
------- -
------ ---
------- ---
------------- ------
---------------- ----------
-------- -------
--------------- ---------
----------- ---------
---------- ---- --- --- ------- -- -- ----
-
--
-------- ----- -
----- --------------- ----------------- - ---------------
----- ------------- - ------- -------- -- -
--------------------------
--
----- ------------- - -- -- -
-----------------------
--
------ -
------
---------------------------------
------------- ----
----------
----------------- ------- -------- ------ ------- ---
------
-----------
-
------------ ----- ----
--------- -
---- ----------------------
-
------
-
--
-
------------ ----- ----
--------- -
---- ----------------------
-
------
-
--
-
------------ ----- ----
--------- -
---- ----------------------
-
------
-
--
--
------------------------------
------------------------------
--
-------------- --
-------
------------
---------------------------------------
----------------
---- -------- ---------------- ------- -------- - ---
------------------------
------
---------
-
--------
--
-
------ ------- ----代码解释：
在本示例中，我们创建了一个地图，在地图上添加了三个标记，标记内容是 A、B、C。@react-mapboxgl/hover 会将这三个标记加入监听队列中，当鼠标移动到这些标记上方时，它们将缩放并改变它们的样式。同时，也会触发 onFeatureEnter 事件处理函数，我们在该函数中将当前标记信息存储到 state 中，以便在 onFeatureLeave 事件中清除 state 中的存储信息。最后，我们根据 state 中的存储信息在标记的位置上显示对应的 tooltip。
总结
使用 @react-mapboxgl/hover，我们可以很方便地在 Mapboxgl 地图上添加各种元素，并实现 hover 效果。我们可以自由添加各种事件，交互性十分优秀。
示例代码在 GitHub 上可以找到：
https://github.com/hongxiangH/react-mapboxgl-hover-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2981e8991b448d9c70