介绍
spartanburg-bikes
是一个基于 React
和 Mapbox GL JS
的前端组件库,用于展示斯巴达堡市 bike-share 系统的实时信息。它的主要功能包括:展示 bike-share 系统的站点位置和自行车可借用量,允许用户筛选站点、查看站点详情和保持展示位置的稳定性。
安装
在使用 spartanburg-bikes
之前,需要先安装并配置好以下环境:
- Node.js (version > 8.10.0)
- npm (version > 5.6.0)
然后,在终端中运行以下命令进行安装:
npm install spartanburg-bikes --save
使用
引入组件
在需要使用 spartanburg-bikes
组件的文件中,可以通过以下方式引入:
import { SpartanburgBikes } from '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