^{使用 我的应用 也是一种 支持 我的方式：}

CanvasLayer 自定义Canvas

[!WARNING] ⚠️ BMap.CanvasLayer API 不知道为何没有了，不再发布此包

用于在地图上绘制自定义的canvas2D或WebGL图形，百度 CanvasLayer 文档。

import { CanvasLayer, useCanvasLayer } from '@uiw/react-baidu-map';
// 或者单独安装使用
import CanvasLayer, { useCanvasLayer } from '@uiw/react-baidu-map-canvas-layer';

基本用法

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 (
    <>
      <button onClick={() => setVisiable(!visiable)}>{visiable ? '隐藏' : '显示'}</button>
      <Map zoom={12} widget={['NavigationControl']} style={{ height: 350 }}>
        <CanvasLayer
          ref={canvasLayerRef}
          visiable={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);
            }
          }}
        />
      </Map>
    </>
  );
}

const Demo = () => (
  <div style={{ width: '100%' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG" version="2.0">
      <Example />
    </APILoader>
  </div>
);
export default Demo;

使用 hooks

canvasLayer, setCanvasLayer

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 (
    <>
      <button onClick={() => setVisiable(!visiable)}>{visiable ? '隐藏' : '显示'}</button>
      <div ref={divElm} style={{ height: 350 }} />
    </>
  )
}

const Demo = () => (
  <div style={{ width: '100%' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG" version="2.0">
      <Provider>
        <Example />
      </Provider>
    </APILoader>
  </div>
);
export default Demo;

Props