npm 包 spartanburg-bikes 使用教程

阅读时长 4 分钟读完

介绍

spartanburg-bikes 是一个基于 ReactMapbox GL JS 的前端组件库,用于展示斯巴达堡市 bike-share 系统的实时信息。它的主要功能包括:展示 bike-share 系统的站点位置和自行车可借用量,允许用户筛选站点、查看站点详情和保持展示位置的稳定性。

安装

在使用 spartanburg-bikes 之前,需要先安装并配置好以下环境:

  • Node.js (version > 8.10.0)
  • npm (version > 5.6.0)

然后,在终端中运行以下命令进行安装:

使用

引入组件

在需要使用 spartanburg-bikes 组件的文件中,可以通过以下方式引入:

配置参数

在使用 SpartanburgBikes 组件时,需要配置以下参数:

  • dataUrl: bike-share 系统实时信息的 REST API 地址。
  • accessToken: Mapbox GL JS 的 Mapbox access token,用于访问 Mapbox 的地图瓦片服务。
  • center: 展示地图的中心点,格式为 [longitude, latitude]
  • zoom: 地图的初始缩放级别。
  • stationIcon: 地图上站点的图标,可以是 Mapbox GL JS 的内置图标或者自定义图标的 URL。
  • stationHoverColor: 鼠标悬停在站点上时的颜色。
  • stationSelectedColor: 选中站点后的颜色。
  • stationSelectedBorderWidth: 选中站点后的边框宽度。
  • stationSelectedBorderColor: 选中站点后的边框颜色。

使用示例

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

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

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

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

参考资料

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

纠错
反馈