导入包的目的
在前端开发中，我们通常需要各种工具和框架来辅助我们开发。使用 npm 包的好处在于，我们可以直接在我们的项目中引入需要的库或工具。在这个文章中，我们将介绍一个前端库 @conveyal/taui，它为交通运输应用开发者提供了一系列的工具和组件。
安装和引入
首先，在我们的项目中安装 @conveyal/taui:
npm install @conveyal/taui
在我们的 JavaScript 代码中引入 @conveyal/taui:
import * as taui from "@conveyal/taui";
组件
@conveyal/taui 提供了许多用于交通运输应用的组件。以下是一些常用的组件:
RouteViewer
用于显示公交或其他交通方式的路线及其详细信息。
-- -------------------- ---- -------
------ - ----------- - ---- -----------------
-------- ----- -
------ -
------------
-------
-
---------- ----
--------- ------
-
-
--
--
-LocationField
用于输入地点并返回地点的 GeoJSON 。可以在搜索框中输入地址、 POI 或坐标。
-- -------------------- ---- -------
------ - ------------- - ---- -----------------
-------- ----- -
----- -------------------- - -------- -- -
--------------------
--
------ -
--------------
-----------------------------------------
------------------------
--
--
-工具
@conveyal/taui 还提供了一些有用的工具:
routeToGeoJSON
将公交或其他交通方式的路线转换为 GeoJSON。
-- -------------------- ---- ------- ------ - -------------- - ---- ----------------- ----- ----- - - ---------- ---- --------- ------ -- ----- ------- - ---------------------- ---------------------
calculateFare
根据路线和站点计算票价。
-- -------------------- ---- -------
------ - ------------- - ---- -----------------
----- ----- - -
---------- ----
--------- ------
--
----- ----- - -
-
----- ----- ---
---- ----------
---- ------------
--
-
----- ----- ---
---- ----------
---- ------------
--
--
----- ---- - -------------------- -------
------------------parseCustomizedDateRange
解析自定义日期和时间范围的字符串。
import { parseCustomizedDateRange } from "@conveyal/taui";
const dateString = "Fri Jul 16 2021 08:00:00 GMT-0700 (Pacific Daylight Time) to Fri Jul 16 2021 10:00:00 GMT-0700 (Pacific Daylight Time)";
const dateRange = parseCustomizedDateRange(dateString);
console.log(dateRange);结论
通过使用 @conveyal/taui，我们可以轻松地添加用于交通运输应用的组件和工具。它为我们的应用提供了丰富的功能，同时也能提高我们的开发效率。如果你正在开发交通运输应用，@conveyal/taui 值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822d1b