npm 包 @react-mapboxgl/toggle 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

随着大规模数据可视化技术的快速发展，地图成为了实现数据可视化的重要手段。而 React-Mapboxgl 是一个基于 React 的 Mapboxgl 封装库，大幅度简化了地图应用的开发难度。本文将主要介绍该库中的一个 npm 包 @react-mapboxgl/toggle 的使用教程，希望能在 React-Mapboxgl 的用户群中有所帮助。

什么是 @react-mapboxgl/toggle

@react-mapboxgl/toggle 是集成在 React-Mapboxgl 库中的一个 npm 包，用于在地图上添加切换开关。如下图所示：

如何安装 @react-mapboxgl/toggle

在终端进入 React 项目所在目录；
运行命令 npm install @react-mapboxgl/toggle 。

如何使用 @react-mapboxgl/toggle

引入必要组件

需要先引入必要的组件。在 import 中添加如下代码：

import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
import Toggle from '@react-mapboxgl/toggle';

添加 `Toggle` 组件

在 ReactMapboxGl 组件中添加 Toggle 组件，如下所示：

-- -------------------- ---- -------
--------------
  -----------------------------------------
  ------------------- ----------
  ---
-
  ------ ------------- ----------- --------- ------------- ----------- ---
    -------- ------------------------ ---------- --
  --------
  -------
    ------------
    ---------------------
    --------------------------------------
  --
----------------

其中，label 是添加切换开关的标签；defaultChecked 表示启动应用时默认开关是打开还是关闭状态；onChange 表示开关状态改变时执行的函数。

设置 `onChange` 函数

需要额外设置一个函数，用于处理 onChange 函数的参数：

handleMarkerVisibility = (checked) => {
  this.setState({ markerVisible: checked });
}

把 `markerVisible` 布尔值传递给 `Layer` 组件

在 Layer 组件中添加一个显示或隐藏的判断语句，如下所示：

<Layer
  type="symbol"
  id="marker"
  layout={{ 'icon-image': 'marker-15' }}
  visibility={this.state.markerVisible ? 'visible' : 'none'}
>
  <Feature coordinates={[longitude, latitude]} />
</Layer>

其中，visibility 表示是否显示。

示例代码

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------------- - ------ ------- - ---- ------------------
------ ------ ---- -------------------------

----- --------- - -------
----- -------- - -----

----- --- ------- --------- -
  ----- - -
    -------------- ----
  --

  ---------------------- - --------- -- -
    --------------- -------------- ------- ---
  -

  -------- -
    ------ -
      --------------
        -----------------------------------------
        ------------------- ----------
        ----------------- ------- -------- ------ ------- --
      -
        ------
          -------------
          -----------
          --------- ------------- ----------- --
          ------------------------------------ - --------- - -------
        -
          -------- ------------------------ ---------- --
        --------
        -------
          ------------
          ---------------------
          --------------------------------------
        --
      ----------------
    --
  -
-

------ ------- ----

结尾

通过本教程，相信读者已经学会了如何使用 @react-mapboxgl/toggle 包。通过这个小小的东西，再加上一些实际应用，开发出更加美观、易于使用的应用也许并不遥远。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055c2981e8991b448d9c71

npm 包 @react-mapboxgl/toggle 使用教程

前言