All files / canvas-layer/src useCanvasLayer.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
1x
 
1x
 
 
 
 
 
import { useState, useMemo } from 'react';
import { useMapContext } from '@uiw/react-baidu-map-map';
import { useVisiable } from '@uiw/react-baidu-map-utils';
import { CanvasLayerProps } from '.';
 
export interface UseCanvasLayer extends CanvasLayerProps {}
 
export interface CanvasLayerResult {
  canvas: React.HTMLAttributes<HTMLCanvasElement>;
  ba: React.HTMLAttributes<HTMLCanvasElement>;
  options: BMap.CanvasLayerOptions;
  zIndex: number;
  map: UseCanvasLayer['map'];
  BMap: UseCanvasLayer['BMap'];
}
 
export function useCanvasLayer(props = {} as UseCanvasLayer) {
  const { zIndex, paneName } = props;
  const { map } = useMapContext();
  const [canvasLayer, setCanvasLayer] = useState<BMap.CanvasLayer>();
  useMemo(() => {
    Iif (map && BMap && !canvasLayer) {
      const update = function (this: CanvasLayerResult) {
        const self = this;
        props.update && props.update({ ...self, BMap, map });
      };
      const instance = new BMap.CanvasLayer({ zIndex, paneName, update });
      map.addOverlay(instance);
      setCanvasLayer(instance);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [map, canvasLayer]);
 
  useVisiable(canvasLayer!, props);
 
  return {
    canvasLayer,
    setCanvasLayer,
  };
}