# @deck\.gl-community/widgets 中文文档

规范地址：https://npmcn.com/package/%40deck.gl-community/widgets/

版本：9\.4\.10
npm 元数据更新时间：2026-11-02T14:08:34.877Z
中文译文更新时间：2026-11-12T03:34:13.154Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40deck.gl-community/widgets
原文对照：https://npmcn.com/package/%40deck.gl-community/widgets/?lang=original
项目主页：https://github.com/visgl/deck.gl-community#readme
源码仓库：https://github.com/visgl/deck.gl-community

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.5 MB，178 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：@deck\.gl/core ~9\.4\.1，@luma\.gl/core ~9\.4\.2，@luma\.gl/webgl ~9\.4\.2，@luma\.gl/webgpu ~9\.4\.2，@deck\.gl-community/panels ~9\.4\.0-alpha\.0
- 首次发布：2025-11-21T14:32:56.801Z
- 最新版本发布：2026-11-02T14:08:34.549Z
- 近 30 天下载量：3064（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：29（近 12 个月 29 个）

## 中文简介

甲板的UI部件.gl

## 安装

```sh
npm install @deck.gl-community/widgets
```

也可以使用：`pnpm add @deck.gl-community/widgets`、`yarn add @deck.gl-community/widgets`、`bun add @deck.gl-community/widgets`

## README

# 概览

\* 抚慰 甲板.gl-社区寄存器为半维护. 其目标之一是收集和保存没有专用住宅的有价值甲板.gl生态系统相关代码. 一些模块可能不再有专门的维护者. 这意味着有时没有人能够对问题迅速作出反应. \* :

[![NPM Version](https://img.shields.io/npm/v/@deck.gl-community/widgets.svg)](https://www.npmjs.com/package/@deck.gl-community/widgets) [![NPM Downloads](https://img.shields.io/npm/dw/@deck.gl-community/widgets.svg)](https://www.npmjs.com/package/@deck.gl-community/widgets) ![deck.gl v9](https://img.shields.io/badge/deck.gl-v9-green.svg?style=flat-square%22) ![WebGPU supported](https://img.shields.io/badge/webgpu-yes-green.svg?style=flat-square%22)

此模块将集成的 UI 部件包 [甲板.gl (英语)](https://deck.gl/) 视图状态管理。 它包括经典导航部件, 如 `PanWidget` 财务报告和审定财务报表 `ZoomRangeWidget`, HTML 覆盖,以及 `PanelWidget`,用于面板自有UI组件的甲板适配器.

关于制造器生命周期管理,该包还出口 `DeviceManager` 财务报告和审定财务报表 `DeviceTabsWidget`。它们让应用程序共同选择WebGPU或WebGL,每个后端再使用一个缓存的luma设备,并在主机元素之间重新显示管理过的画布.

`ColorLegendWidget` 使调用者提供的 JSON 安全绝对、连续和调色板的颜色密钥,同时保持大型绝对列表的界限.

面板定义、面板容器、专用工具栏/托拉斯组件以及 独立安装 `@deck.gl-community/panels`从 `panels`,然后通过它们 `PanelWidget` 或一个薄的命名 此包中的适配器 .

## 安装

```bash
npm install @deck.gl-community/widgets
```

## 使用量

```ts
import DeckGL from '@deck.gl/react';
import {OrthographicView} from '@deck.gl/core';
import {PanWidget, ZoomRangeWidget} from '@deck.gl-community/widgets';

const widgets = [
  new PanWidget({placement: 'top-left', style: {margin: '16px'}}),
  new ZoomRangeWidget({placement: 'top-left', style: {margin: '96px 0 0 16px'}})
];

function App() {
  return (
    <DeckGL
      views={new OrthographicView({id: 'ortho'})}
      initialViewState={{target: [0, 0], zoom: 0}}
      controller={true}
      widgets={widgets}
      layers={[/* ... */]}
    />
  );
}
```

见 [泛并缩放部件示例](https://npmcn.com/package/examples/widgets/pan-and-zoom-controls) 非地理空间通道.

见 [独立部件示例](https://npmcn.com/package/examples/widgets/standalone-widgets) 通过甲板独立使用 `@deck.gl-community/panels`。 。 。 .

甲板面板部件 API 见 [部件面板示例](https://npmcn.com/package/examples/widgets/widget-panels),结合:

-   `SidebarPanelWidget` 持续控制
-   `ModalPanelWidget` 用于制表二级面板
-   `BoxPanelWidget` 静态摘要卡
-   从 `@deck.gl-community/panels`

使用 `DeviceManager` 当您的应用程序想要自定义后端选择 UI 时, 或者需要将管理过的画布移动到容器之间时, 直接 。 使用 `DeviceTabsWidget` 当您想要用于切换的现成部件时 `webgpu` 财务报告和审定财务报表 `webgl2`。 。 。 .

使用 `ColorLegendWidget` 当一个视图需要一个可以独立于其甲板.gl渲染生命周期的可序列化色彩密钥时.

独立的用户界面, 例如 `ToolbarComponent`, (中文(简体) ), `ToastComponent`,以及 `toastManager` 从 `@deck.gl-community/panels`。部件包导出 `ToolbarWidget` 财务报告和审定财务报表 `ToastWidget` 仅作为这些部件的甲板适配器.

## 常见问题

### @deck\.gl-community/widgets 是什么？

甲板的UI部件\.gl

### 如何安装 @deck\.gl-community/widgets？

在项目目录运行 npm install @deck\.gl-community/widgets，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@deck\.gl/core（~9\.4\.1）、@luma\.gl/core（~9\.4\.2）、@luma\.gl/webgl（~9\.4\.2）、@luma\.gl/webgpu（~9\.4\.2）、@deck\.gl-community/panels（~9\.4\.0-alpha\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @deck\.gl-community/widgets 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @deck\.gl-community/widgets 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @deck\.gl-community/widgets 可以商用吗？

@deck\.gl-community/widgets 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @deck\.gl-community/widgets 的下载量有多少？

根据 npm 官方下载统计，@deck\.gl-community/widgets 在 2026/10/12 – 2026/11/10 这 30 天内被下载 3,064 次，日均约 102 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @deck\.gl-community/widgets 还在维护吗？

最新版本 9\.4\.10 发布于 2026/11/02（9 天前）；至今共发布 29 个版本，其中过去 12 个月发布了 29 个；首次发布于 2025/11/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。