feat(layer): 简单封装

src/index.ts

@@ -1,4 +1,5 @@
 export * from './map';
 export * from './marker';
 export * from './source';
+export * from './layer';
 export * from './hooks/useMap';

src/layer/index.ts

@@ -0,0 +1,2 @@
+export { Layer } from './layer';
+export type { LayerProps } from './types';

src/layer/layer.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+import { useMap } from '@/hooks/useMap';
+
+import type { FC } from 'react';
+import type { AnyLayer } from 'mapbox-gl';
+import type { LayerProps } from './types';
+
+export const Layer: FC<LayerProps> = (props) => {
+  const { before, ...rest } = props;
+  const map = useMap();
+  const [layer, setLayer] = useState<AnyLayer>();
+
+  useEffect(() => {
+    if (map) {
+      map.addLayer(rest as AnyLayer, before);
+
+      setLayer(map.getLayer(props.id));
+    }
+  }, [map]);
+
+  return null;
+};

src/layer/types.ts

@@ -0,0 +1,85 @@
+import type {
+  Layer,
+  BackgroundLayout,
+  BackgroundPaint,
+  CircleLayout,
+  CirclePaint,
+  FillLayout,
+  FillPaint,
+  FillExtrusionLayout,
+  FillExtrusionPaint,
+  HeatmapLayout,
+  HeatmapPaint,
+  LineLayout,
+  LinePaint,
+  RasterLayout,
+  RasterPaint,
+  SkyLayout,
+  SkyPaint,
+  SymbolLayout,
+  SymbolPaint,
+  HillshadeLayout,
+  HillshadePaint,
+} from 'mapbox-gl';
+
+export type LayerType =
+  | 'background'
+  | 'circle'
+  | 'fill-extrusion'
+  | 'fill'
+  | 'heatmap'
+  | 'hillshade'
+  | 'line'
+  | 'raster'
+  | 'symbol'
+  | 'sky';
+
+export interface LayoutPaint {
+  background: {
+    layout: BackgroundLayout;
+    paint: BackgroundPaint;
+  };
+  circle: {
+    layout: CircleLayout;
+    paint: CirclePaint;
+  };
+  'fill-extrusion': {
+    layout: FillExtrusionLayout;
+    paint: FillExtrusionPaint;
+  };
+  fill: {
+    layout: FillLayout;
+    paint: FillPaint;
+  };
+  heatmap: {
+    layout: HeatmapLayout;
+    paint: HeatmapPaint;
+  };
+  hillshade: {
+    layout: HillshadeLayout;
+    paint: HillshadePaint;
+  };
+  line: {
+    layout: LineLayout;
+    paint: LinePaint;
+  };
+  raster: {
+    layout: RasterLayout;
+    paint: RasterPaint;
+  };
+  symbol: {
+    layout: SymbolLayout;
+    paint: SymbolPaint;
+  };
+  sky: {
+    layout: SkyLayout;
+    paint: SkyPaint;
+  };
+}
+
+export interface LayerProps<T extends LayerType> extends Omit<Layer, 'layout' | 'paint'> {
+  type: T;
+  before?: string;
+  layout?: LayoutPaint[T];
+  paint?: LayoutPaint[T];
+}

src/map/types.ts

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react';
 import type { MapboxOptions, MapEventType } from 'mapbox-gl';
 
 export interface MapOptions extends MapboxOptions {}
@@ -72,5 +71,5 @@ export type PropKey = KeysOfUnion<MapboxOptions>;
 
 export interface MapProps extends Omit<MapOptions, 'container'>, Partial<MapEvents> {
   className?: string;
-  children?: ReactElement;
+  children?: any;
 }