前言
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 安装：
npm install wri-api-components
使用
wri-api-components 中要使用的组件可以通过 JavaScript 导入到您的项目中：
import { WriDataDownload } from 'wri-api-components';您可以选择使用以下方法之一：
- 通过标签将其添加到您的 HTML。这将自动注册 Web 组件。
- 在 JavaScript 中使用元素构造函数。
一些组件出现在“组件”部分的 wri-api-components 文档中，而其他组件仅出现在“可以在元数据中配置的组件”部分。
使用 WriDataDownload 组件作为示例，在 HTML 中使用组件的示例：
<wri-data-download api-url="https://api.resourcewatch.org/v1/" layer="a13e9eb2-747e-47d6-8aa1-e0eaf1ef16c3" ></wri-data-download>
使用 WriDataDownload 组件作为示例，在 JavaScript 中使用组件的示例：
import { WriDataDownload } from 'wri-api-components';
const wriDataDownload = new WriDataDownload({
'api-url': 'https://api.resourcewatch.org/v1/',
'layer': 'a13e9eb2-747e-47d6-8aa1-e0eaf1ef16c3'
});
document.body.appendChild(wriDataDownload);组件
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.
使用示例：
<wri-data-download api-url="https://api.resourcewatch.org/v1/" layer="a13e9eb2-747e-47d6-8aa1-e0eaf1ef16c3" ></wri-data-download>
import { WriDataDownload } from 'wri-api-components';
const wriDataDownload = new WriDataDownload({
'api-url': 'https://api.resourcewatch.org/v1/',
'layer': 'a13e9eb2-747e-47d6-8aa1-e0eaf1ef16c3'
});
document.body.appendChild(wriDataDownload);WriTooltip
渲染 Web 组件中的 tooltip。
属性：
tooltip-text（必需）：要显示的文本。
使用示例：
<button class="my-button" tooltip-text="这是一个按钮">按钮</button> <wri-tooltip></wri-tooltip>
-- -------------------- ---- ------- ------ - ---------- - ---- --------------------- ----- ---------- - --- ------------- -------------------------------------- ----- ------ - ------------------------------------- ------------------------------------ ------- -- - ----- ------- - -------------------------------------- ------------------------------------ ------------------------------------------- ---
WriTable
渲染 WRI API 返回的 tabular 数据的表格。
属性：
api-url（必需）：WRI API 的基本 URL。例如：https://api.resourcewatch.org/v1/。sql（必需）：要显示的表格数据的 SQL 查询或 WRI 标识符。
使用示例：
<wri-table api-url="https://api.resourcewatch.org/v1/" sql="SELECT * FROM cfb50dd9-50de-44f8-aa43-31d1fae92c7d" ></wri-table>
import { WriTable } from 'wri-api-components';
const wriTable = new WriTable({
'api-url': 'https://api.resourcewatch.org/v1/',
'sql': 'SELECT * FROM cfb50dd9-50de-44f8-aa43-31d1fae92c7d'
});
document.body.appendChild(wriTable);WriEmbed
插入可重新加载 WRI API Gems 的 iframe。
属性：
api-url（必需）：WRI API 的基本 URL。例如：https://api.resourcewatch.org/v1/。gem-slug（必需）：要嵌入的 Gem slug。
使用示例：
<wri-embed api-url="https://api.resourcewatch.org/v1/" gem-slug="hv10-historic-maps-of-scotland" ></wri-embed>
import { WriEmbed } from 'wri-api-components';
const wriEmbed = new WriEmbed({
'api-url': 'https://api.resourcewatch.org/v1/',
'gem-slug': 'hv10-historic-maps-of-scotland'
});
document.body.appendChild(wriEmbed);结论
wri-api-components 提供了可重用组件和方法，以便于前端开发人员与 WRI 的 RESTful API 进行交互和获取数据。我们展示了一些常用的组件，并提供了它们在 HTML 和 JavaScript 中使用的示例。希望这篇文章能够帮助您更好地理解如何使用 wri-api-components，并在您的项目中轻松地使用这些组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/78897