# @uiw/react-baidu-map-canvas-layer
> Baidu Map canvas-layer Components for React.
Latest version **2.7.5** (published 2025-12-12) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install @uiw/react-baidu-map-canvas-layer
pnpm add @uiw/react-baidu-map-canvas-layer
yarn add @uiw/react-baidu-map-canvas-layer
bun add @uiw/react-baidu-map-canvas-layer
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 2.7.5 |
| Published | 2025-12-12 |
| First published | 2021-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 19.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kenny Wong |
| Maintainers | wcjiang, uiwjs |
| Keywords | react-baidu-map, baidu, baidu-map, baidu-map-utils, utils, map, react, bdmap, types, 百度, 地图, 百度地图 |
## Links
- npm: https://www.npmjs.com/package/@uiw/react-baidu-map-canvas-layer
- Repository: https://github.com/uiwjs/react-baidu-map
- Homepage: https://uiwjs.github.io/react-baidu-map/#/canvas-layer
- Issues: https://github.com/uiwjs/react-baidu-map/issues
- Funding: https://jaywcjlove.github.io/#/sponsor
- npm.io page: https://npm.io/package/@uiw/react-baidu-map-canvas-layer
## Dependencies (3)
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.18.0
- [@uiw/react-baidu-map-map](https://npm.io/package/@uiw/react-baidu-map-map.md) 2.7.5
- [@uiw/react-baidu-map-utils](https://npm.io/package/@uiw/react-baidu-map-utils.md) 2.7.5
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.7.5 (latest) — 2025-12-12
- 2.4.0 — 2022-03-02
- 2.3.0 — 2022-03-02
- 2.2.0 — 2022-03-02
- 2.1.2 — 2022-02-28
- 2.1.1 — 2022-02-28
- 2.1.0 — 2022-02-28
- 2.0.8 — 2022-01-19
- 2.0.7 — 2022-01-08
- 2.0.6 — 2021-11-11
- 2.0.5 — 2021-09-24
- 2.0.4 — 2021-09-20
- 2.0.3 — 2021-09-19
- 2.0.2 — 2021-09-18
- 2.0.1 — 2021-09-18
- … 1 more at https://npm.io/package/@uiw/react-baidu-map-canvas-layer/versions
## README
CanvasLayer 自定义Canvas
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://www.npmjs.com/package/@uiw/react-baidu-map-canvas-layer)
[](https://www.npmjs.com/package/@uiw/react-baidu-map-canvas-layer)
> [!WARNING]
> ⚠️ `BMap.CanvasLayer` API 不知道为何没有了，不再发布此包
用于在地图上绘制自定义的canvas2D或WebGL图形，[百度 CanvasLayer 文档](http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a3b28)。
```jsx
import { CanvasLayer, useCanvasLayer } from '@uiw/react-baidu-map';
// 或者单独安装使用
import CanvasLayer, { useCanvasLayer } from '@uiw/react-baidu-map-canvas-layer';
```
### 基本用法
```jsx
import React, { useState } from 'react';
import { Map, CanvasLayer, APILoader } from '@uiw/react-baidu-map';
const Example = () => {
const [visiable, setVisiable] = useState(true);
function canvasLayerRef(props) {
if (props && props.canvasLayer) {
console.log('canvasLayer:', props.canvasLayer, props.map, props.BMap);
}
}
return (
<>
);
}
const Demo = () => (
);
export default Demo;
```
### 使用 hooks
`canvasLayer`, `setCanvasLayer`
```jsx
import React from 'react';
import { useRef, useEffect, useState } from 'react';
import { Map, APILoader, Provider, useMap, useCanvasLayer } from '@uiw/react-baidu-map';
const Example = () => {
const divElm = useRef(null);
const [visiable, setVisiable] = useState(true);
const { setContainer, map } = useMap({
enableScrollWheelZoom: true,
zoom: 12, widget: ['GeolocationControl', 'NavigationControl']
});
useCanvasLayer({ map, visiable,
update: ({ canvas, map }) => {
const ctx = canvas.getContext('2d');
if (!ctx) {
return;
}
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const temp = {};
ctx.fillStyle = 'rgba(50, 50, 255, 0.7)';
ctx.beginPath();
const data = [
new BMap.Point(121.434244,31.247173),
new BMap.Point(121.450916,31.200729),
new BMap.Point(121.519906,31.230376),
];
for (let i = 0, len = data.length; i < len; i++) {
// 绘制时需要对经纬度进行转换
const pixel = map.pointToPixel(data[i]);
ctx.fillRect(pixel.x, pixel.y, 30, 30);
}
}
});
useEffect(() => {
if (divElm.current) {
setContainer(divElm.current);
}
});
return (
<>
)
}
const Demo = () => (
);
export default Demo;
```
### Props
| 参数 | 说明 | 类型 | 默认值 |
| ----- | ----- | ----- | ----- |
| update | 具体的绘制逻辑。通过返回参数获取当前的 canvas 对象 | `Point` | - |
| zIndex | 对应canvas的css z-index属性，当添加了多个CanvasLayer时，可以用于设置层叠顺序。 | `number` | - |
| paneName | CanvasLayer位于的覆盖物层级，例：`paneName: floatPane`。JSAPI把地图覆盖物分为了8个层级，顶层为`floatPane`， 低层为 `vertexPane`。可以通过 `Map` 实例的 `getPanes()` 方法，获取到8个层级的名称。 | `floatPane`, `floatShadow`, `labelPane`, `mapPane`, `markerMouseTarget`, `markerPane`, `markerShadow`, `vertexPane` | - |
| visiable | 覆盖物是否可见。 | `boolean` | - |
---
_Source: https://npm.io/package/@uiw/react-baidu-map-canvas-layer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
