在 Web 开发中，有时需要在美国地图中展示数据，ng4-us-map 是一个基于 Angular 的 npm 包，可以帮助快速实现这个功能。本文将详细介绍如何安装和使用 ng4-us-map。
安装
安装 ng4-us-map 很简单，只需要在终端中输入以下命令即可：
npm i ng4-us-map --save
使用
使用 ng4-us-map 时，需要在组件中引入 ng4-us-map 模块：
-- -------------------- ---- -------
------ - -------------- - ---- -------------
-----------
------------- -
------------
--
-------- -
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在模板中添加 ng4-us-map 组件：
<ng4-us-map [data]="data"></ng4-us-map>
注意：data 属性是传入的数据，需要根据具体需求进行更改。
配置
ng4-us-map 提供了一些可选的配置项，让用户能够更自由地控制地图的展示效果。下面是配置项的详细说明：
tooltip
tooltip 选项控制鼠标悬停在地图上时是否显示提示框，提示框中可以展示更详细的信息。默认值为 false。
<ng4-us-map [data]="data" [tooltip]="true"></ng4-us-map>
colorScheme
colorScheme 选项控制地图中不同位置的颜色，提供了多种颜色主题可供选择。
<ng4-us-map [data]="data" [colorScheme]="'cool'"></ng4-us-map>
支持的主题包括：
cool: 冷色调warm: 暖色调high-contrast: 高对比度dark: 暗黑模式
clickHandler
clickHandler 选项可以为地图上的州（state）和县（county）添加点击事件，用户可以通过点击触发业务逻辑。
-- -------------------- ---- -------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
---- - -
- ------ ----- ------ - --
- ------ ----- ------ -- --
- ------ ----- ------ - --
- ------ ----- ------ -- -
--
-------------- ------- -
-------------------
-
-<ng4-us-map [data]="data" (clickHandler)="onClick($event)"></ng4-us-map>
数据格式
ng4-us-map 接受的数据格式包括两种：
状态级别数据
状态级别数据是指仅包含 50 个州的数据。每一条数据至少包括两个属性：state 和 value。
-- -------------------- ---- ------- - ------- ----- ------ --- ------- ----- ------ ---- ------- ----- ------ --- ------- ----- ------ ---- --- ------- ----- ------ ---- ------- ----- ------ -- -
县级别数据
县级别数据是指包含所有 3143 个县（county）的数据。每一条数据至少包括三个属性：state、county 和 value。
[
{state: 'AL', county: 'Autauga County', value: 10},
{state: 'AL', county: 'Baldwin County', value: 15},
{state: 'AL', county: 'Barbour County', value: 5},
{state: 'AK', county: 'Aleutians East Borough', value: 8},
...
{state: 'PR', county: 'Vieques Municipio', value: 2}
]示例代码
在这里，我们提供一个综合了上述几个功能的示例代码，可以用于快速了解 ng4-us-map 的使用方式。这个示例代码实现了一个美国地图，用户可以通过点击每一个州或区域来查看该区域的具体数值。同时，为了方便用户查阅，该示例还提供了 tooltip，用户可以在鼠标悬停在地图上时查看该区域的具体数值。
<ng4-us-map [data]="data" [tooltip]="true" [colorScheme]="'high-contrast'" (clickHandler)="onClick($event)"></ng4-us-map>
<div class="container">
<h3>{{selectedState}}</h3>
<p>{{selectedValue}}</p>
</div>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- -------------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - ------------------
---- - -
- ------ ----- ------ - --
- ------ ----- ------ -- --
- ------ ----- ------ -- --
- ------ ----- ------ -- --
- ------ ----- ------ - -
--
------------- - ---
------------- - ---
------------------- ---------------- ---------------- --
-------------- ------- -
------------------ - ------
-- -------------------------------------------- -
------------------ - ------------------- -- ---------- --- -------------
- ---- -
------------------ - ------
-
-
-在这个示例代码中，我们向 ng4-us-map 传入了一个数据数组，同时在 onClick 回调中根据 state 判断点击的是哪个区域，并展示对应的数值。
总结
在本文中，我们介绍了 npm 包 ng4-us-map 的安装和配置，同时提供了示例代码演示了如何使用 ng4-us-map。ng4-us-map 提供了丰富的配置选项和数据格式支持，可用于快速实现美国地图中的数据展示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b281e8991b448e2f56