# @deckgl-fiber-renderer/dom 中文文档
规范地址：https://npmcn.com/package/%40deckgl-fiber-renderer/dom/
版本：2\.0\.1
npm 元数据更新时间：2026-05-26T13:56:00.249Z
中文译文更新时间：2026-11-11T19:19:24.327Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40deckgl-fiber-renderer/dom
原文对照：https://npmcn.com/package/%40deckgl-fiber-renderer/dom/?lang=original
项目主页：https://github.com/deckgl-fiber-renderer/fiber.gl#readme
源码仓库：https://github.com/deckgl-fiber-renderer/fiber.gl
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：32.7 kB，11 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：@deck\.gl/core \>=9\.1，@deck\.gl/geo-layers \>=9\.1，@deck\.gl/layers \>=9\.1，@deck\.gl/mapbox \>=9\.1，@deck\.gl/mesh-layers \>=9\.1，react ^19，react-dom ^19
- 首次发布：2025-03-14T04:15:03.708Z
- 最新版本发布：2026-05-26T13:56:00.100Z
- 近 30 天下载量：36015（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 2 个）
## 中文简介
Deck.gl 的反相渲染器
## 安装
```sh
npm install @deckgl-fiber-renderer/dom
```
也可以使用：`pnpm add @deckgl-fiber-renderer/dom`、`yarn add @deckgl-fiber-renderer/dom`、`bun add @deckgl-fiber-renderer/dom`
## README
# @ deckgl-fiber-resters/dom (英语)
甲板反射渲染器 利用React组件和钩子来构建地理空间可视化,并配有完整的TypeScript支持.
## 安装
```bash
pnpm add @deckgl-fiber-renderer/dom
```
### 同伴依赖关系
```bash
pnpm add react react-dom @deck.gl/core @deck.gl/layers
```
**所需经费:** 反应 `19.0.0+`, 甲板. gl 数据 `^9.1.0`
* * *
## 教学
### 您的第一个地图
构建3个步骤的可工作散点可视化.
**1\. 创建该部分**
```tsx
import { Deckgl } from "@deckgl-fiber-renderer/dom";
import { ScatterplotLayer } from "@deck.gl/layers";
function App() {
const data = [
{ position: [-122.45, 37.8], size: 100, name: "Point A" },
{ position: [-122.46, 37.81], size: 200, name: "Point B" },
];
return (
d.position,
getRadius: (d) => d.size,
getFillColor: [255, 140, 0],
})
}
/>
);
}
```
**2\. 增加互动性**
```tsx
import { useState } from "react";
function App() {
const [hovered, setHovered] = useState(null);
return (
setHovered(info.object)}
getCursor={() => (hovered ? "pointer" : "grab")}
>
d.position,
getRadius: (d) => d.size,
getFillColor: hovered ? [255, 200, 0] : [255, 140, 0],
pickable: true,
})
}
/>
{hovered && {hovered.name}
}
);
}
```
**3\. 成功标准**
- 在地图上看到橙色点
- 盘旋时的光标变化
- QQ 工具提示显示点名
**更多关于甲板. gl 层:** [https://deck.gl/docs/api-参考资料/层](https://deck.gl/docs/api-reference/layers)
* * *
## 如何向导
### 与 MapLibre/ Mapbox 合并
使用间叶渲染来将甲板.gl和基底映射层结合.
```tsx
import { Map, useControl } from "react-map-gl/maplibre";
import { Deckgl, useDeckgl } from "@deckgl-fiber-renderer/dom";
function DeckglOverlay() {
const deck = useDeckgl();
useControl(() => deck);
return null;
}
function App() {
return (
);
}
```
**要点:**
- `