前言
wri-api-components 是一个由 WRI（World Resources Institute）开发的基于 Web Components 的 JavaScript 库，用于创建与 WRI 的 RESTful API 包含的数据进行交互的可重用组件。它既可以在 Web 上的现代浏览器中使用，也可以在服务器端使用。
它提供了一些常用的 Web 组件，如 WRI 数据下载按钮、气泡提示和 WRI 数据列出等组件。此外，它还提供方法，用于与 WRI API 进行交互和查询数据。
这篇文章将提供使用 wri-api-components 的详细教程，以及一些示例代码，帮助读者更好地理解使用方法。
安装
wri-api-components 可以通过 npm 安装：
--- ------- ------------------
使用
wri-api-components 中要使用的组件可以通过 JavaScript 导入到您的项目中：
------ - --------------- - ---- ---------------------
您可以选择使用以下方法之一：
- 通过标签将其添加到您的 HTML。这将自动注册 Web 组件。
- 在 JavaScript 中使用元素构造函数。
一些组件出现在“组件”部分的 wri-api-components 文档中，而其他组件仅出现在“可以在元数据中配置的组件”部分。
使用 WriDataDownload 组件作为示例，在 HTML 中使用组件的示例：
------------------ ------------------------------------------- -------------------------------------------- ---------------------
使用 WriDataDownload 组件作为示例，在 JavaScript 中使用组件的示例：
------ - --------------- - ---- --------------------- ----- --------------- - --- ----------------- ---------- ------------------------------------ -------- -------------------------------------- --- -------------------------------------------
组件
wri-api-components 包含许多 Web 组件，包括：
WriDataDownload
渲染 WRI API 上存储的 geospatial 数据的下载 button。
属性：
api-url（必需）：WRI API 的基本 URL。例如：https://api.resourcewatch.org/v1/。layer（必需）：获取数据的 WRI Layer UUID。query-params：可选查询参数。通过 Data API 进行设置，例如&sql=SELECT a,b FROM table WHERE c > 2.
使用示例：
------------------ ------------------------------------------- -------------------------------------------- ---------------------
------ - --------------- - ---- --------------------- ----- --------------- - --- ----------------- ---------- ------------------------------------ -------- -------------------------------------- --- -------------------------------------------
WriTooltip
渲染 Web 组件中的 tooltip。
属性：
tooltip-text（必需）：要显示的文本。
使用示例：
------- ----------------- --------------------------------- ---------------------------
------ - ---------- - ---- --------------------- ----- ---------- - --- ------------- -------------------------------------- ----- ------ - ------------------------------------- ------------------------------------ ------- -- - ----- ------- - -------------------------------------- ------------------------------------ ------------------------------------------- ---
WriTable
渲染 WRI API 返回的 tabular 数据的表格。
属性：
api-url（必需）：WRI API 的基本 URL。例如：https://api.resourcewatch.org/v1/。sql（必需）：要显示的表格数据的 SQL 查询或 WRI 标识符。
使用示例：
---------- ------------------------------------------- ----------- - ---- ------------------------------------- -------------
------ - -------- - ---- --------------------- ----- -------- - --- ---------- ---------- ------------------------------------ ------ ------- - ---- ------------------------------------- --- ------------------------------------
WriEmbed
插入可重新加载 WRI API Gems 的 iframe。
属性：
api-url（必需）：WRI API 的基本 URL。例如：https://api.resourcewatch.org/v1/。gem-slug（必需）：要嵌入的 Gem slug。
使用示例：
---------- ------------------------------------------- ----------------------------------------- -------------
------ - -------- - ---- --------------------- ----- -------- - --- ---------- ---------- ------------------------------------ ----------- -------------------------------- --- ------------------------------------
结论
wri-api-components 提供了可重用组件和方法，以便于前端开发人员与 WRI 的 RESTful API 进行交互和获取数据。我们展示了一些常用的组件，并提供了它们在 HTML 和 JavaScript 中使用的示例。希望这篇文章能够帮助您更好地理解如何使用 wri-api-components，并在您的项目中轻松地使用这些组件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/78897