feat: 新增信息框组件

src/components/Marker/demos/default.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 export default () => (
   <LarkMap mapType="GaodeV1" style={{ height: '300px' }}>
-    <Marker lnglat={{ lng: 120.104735, lat: 30.261121 }} />
-    <Marker lnglat={{ lng: 120.210792, lat: 30.246026 }}>
+    <Marker lngLat={{ lng: 120.104735, lat: 30.261121 }} />
+    <Marker lngLat={{ lng: 120.210792, lat: 30.246026 }}>
       <div style={{ padding: 8, backgroundColor: 'pink' }}>杭州</div>
     </Marker>
   </LarkMap>

src/components/Popup/demos/default.tsx

@@ -0,0 +1,21 @@
+import { LarkMap, Popup } from '@antv/larkmap';
+import React, { useState } from 'react';
+
+export default () => {
+  const [lngLat, setLngLat] = useState({ lng: 120.210792, lat: 30.246026 });
+  const onSceneLoaded = (scene) => {
+    scene.on('mousemove', (e) => {
+      const { lng, lat } = e.lnglat;
+      setLngLat({ lng, lat });
+    });
+  };
+
+  return (
+    <LarkMap mapType="GaodeV1" style={{ height: '300px' }} onSceneLoaded={onSceneLoaded}>
+      <Popup lngLat={lngLat} closeButton={false} closeOnClick={false}>
+        <p>lat: {lngLat.lat}</p>
+        <p>lng: {lngLat.lng}</p>
+      </Popup>
+    </LarkMap>
+  );
+};

src/components/Popup/index.md

@@ -0,0 +1,23 @@
+---
+toc: content
+group:
+  title: 分析组件
+  order: 3
+nav:
+  title: 组件
+  path: /components
+---
+
+# 信息框 - Popup
+
+## 介绍
+
+信息框组件，一般用于展示地图要素的属性信息。
+
+## 代码演示
+
+### 默认示例
+
+<code src="./demos/default.tsx" defaultShowCode></code>
+
+<API></API>

src/components/Popup/index.tsx

@@ -0,0 +1,57 @@
+import { Popup as L7Popup } from '@antv/l7';
+import { useDeepCompareEffect } from 'ahooks';
+import type React from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useScene } from '../LarkMap/hooks';
+import type { PopupProps } from './types';
+
+export const Popup = memo<PopupProps>((props): React.ReactPortal => {
+  const scene = useScene();
+  const domRef = useRef(document.createElement('div'));
+
+  const popup = useMemo(() => {
+    const options = { ...props };
+    const l7Popup = new L7Popup(options);
+    return l7Popup;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const onOpen = () => {
+      props.onOpen?.();
+    };
+    popup.on('open', onOpen);
+    return () => {
+      popup.off('open', onOpen);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.onOpen]);
+
+  useEffect(() => {
+    const onClose = () => {
+      props.onClose?.();
+    };
+    popup.on('close', onClose);
+    return () => {
+      popup.off('close', onClose);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.onClose]);
+
+  useDeepCompareEffect(() => {
+    popup.setLnglat(props.lngLat);
+  }, [props.lngLat]);
+
+  useEffect(() => {
+    popup.setDOMContent(domRef.current);
+    scene.addPopup(popup);
+    return () => {
+      popup.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // @ts-ignore
+  return createPortal(props.children, domRef.current);
+});

src/components/Popup/types.ts

@@ -0,0 +1,38 @@
+import type { anchorType, ILngLat } from '@antv/l7';
+
+/**
+ * 组件类型定义
+ */
+export interface PopupProps {
+  /** 信息框位置的经纬度 */
+  lngLat: ILngLat;
+  /** 锚点相对位置，支持 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'
+   * @default "bottom"
+   */
+  anchor?: anchorType;
+  /** 偏移量 [0, 0] 分别表示 X, Y 的偏移量，单位为像素。
+   * @default [0, 0]
+   */
+  offset?: [number, number];
+  /** 是否显示关闭按钮
+   * @default true
+   */
+  closeButton?: boolean;
+  /** 是否在点击地图的时候关闭信息库
+   * @default true
+   */
+  closeOnClick?: boolean;
+  /** 信息框容器 CSS 类名 */
+  className?: string;
+  /**
+   * 设置信息框容器最大宽度，设置为 'none' 代表没有设置宽度
+   * @default "240px"
+   */
+  maxWidth?: string;
+  /** 打开信息框事件 */
+  onOpen?: () => void;
+  /** 关闭信息框事件 */
+  onClose?: () => void;
+  /** 子组件 */
+  children?: React.ReactNode;
+}

src/index.ts

@@ -28,6 +28,8 @@ export { Template } from './components/Template';
 export { TemplateProps } from './components/Template/types';
 export { Marker } from './components/Marker';
 export { MarkerProps } from './components/Marker/types';
+export { Popup } from './components/Popup';
+export { PopupProps } from './components/Popup/types';
 
 /**
  * 版本号