使用 npm 包 react-map-gl-ssta 制作地图

阅读时长 12 分钟读完

前言

react-map-gl-ssta 是一个基于 React 的地图组件,能够快速、轻松地制作交互式的地图应用程序。本文将介绍如何使用该 npm 包来创建地图,并给出详细的教程和代码示例。

安装

首先,在你的项目目录下,打开终端,输入以下指令:

这样,你就成功地将 react-map-gl-ssta 安装到了你的项目中。

使用

在你的 React 组件中引入 react-map-gl-ssta:

接着,定义你的地图组件,并传入相应的参数:

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

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

这个示例定义了一个名为 App 的组件,并在其中定义了一个 state 对象,其中包含有初始的 viewport 对象。viewport 是 react-map-gl-ssta 中用来描述地图中心点、缩放程度等属性的对象。

ReactMapGL 组件接受 viewport 对象作为其 props,还需要传入 mapboxApiAccessTokenonViewportChange 函数。前者是你的 Mapbox API Token; 后者是当地图被用户操作时,触发的函数。

教程

显示地图

首先,我们需要确定地图的初选视角。这可以通过 state 中的 viewport 对象来完成,比如:

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

这样设置了初始视角的 viewport 对象就可以被传入 <ReactMapGL /> 组件中,从而呈现出最基础的地图。

用户与地图的交互

用户可以通过多种方式与地图进行交互。例如,可以使用鼠标滚轮进行缩放,使用鼠标左键进行拖拽等。你可以使用 react-map-gl-ssta 的 onViewportChange 属性捕获这些操作。

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

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

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

通过 handleViewportChange 函数来捕获视角变化,从而更新 state 中的 viewport 对象。

添加标记

在地图上添加标记也是非常常见的需求。我们可以使用 react-map-gl-ssta 的 Marker 组件来实现这个需求。

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

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

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

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

在以上示例中,我们使用了 <Marker> 组件,并为其传入了 latitudelongitude 属性来定义标记的位置。同时,我们还可以传入一些其他属性来定义标记的样式、大小等。

绘制图形

react-map-gl-ssta 支持在地图上绘制多种图形,如折线、多边形、圆等。在下面的示例中,我们将绘制一个多边形。

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

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

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

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

在以上示例中,我们使用了 <Polygon> 组件,并为其传入了 points 属性来定义多边形的位置。另外,我们还可以传入其他的属性来定义绘制的多边形的样式等属性。

使用更多的 React 组件

除了 <Marker><Polygon> 组件外,react-map-gl-ssta 还支持许多其他的组件。

以下是一系列的示例,指导你如何使用这些组件。

  • <NavigationControl>:添加地图导航控件。

    -- -------------------- ---- -------
    ------ ----------- - ----------------- - ---- --------------------
    
    ----- --- ------- --------------- -
      ----- - -
        --------- -
          ------ ----
          ------- ----
          --------- --------
          ---------- ----------
          ----- ---
        --
      --
    
      -------------------- - ---------- -- -
        ---------------
          ---------
        ---
      --
    
      -------- -
        ------ -
          -----------
            ------------------------
            --------------------------------------------
            --------------------------------------
          -
            ---- -------- --------- ----------- ------ - ---
              ------------------ --
            ------
          -------------
        --
      -
    -
  • <GeolocateControl>:添加地图定位控件。

    -- -------------------- ---- -------
    ------ ----------- - ---------------- - ---- --------------------
    
    ----- --- ------- --------------- -
      ----- - -
        --------- -
          ------ ----
          ------- ----
          --------- --------
          ---------- ----------
          ----- ---
        --
      --
    
      -------------------- - ---------- -- -
        ---------------
          ---------
        ---
      --
    
      -------- -
        ------ -
          -----------
            ------------------------
            --------------------------------------------
            --------------------------------------
          -
            ----------------- --
          -------------
        --
      -
    -
  • <Popup>:添加弹出框组件。

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

结语

我们已经介绍了使用 react-map-gl-ssta 组件来创建地图的详细教程,并提供了上述示例代码。希望本文对你学习和使用该组件有帮助。

react-map-gl-ssta 提供了许多其他有用的功能,在创建地图时,我们可以根据自己的需求进行选择性使用。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600567a981e8991b448e3f65

纠错
反馈