feat: 完成获取地图参数组件 (#53)

* feat: 初步完成获取地图参数组件

* feat: 初步完成获取地图参数组件

---------

Co-authored-by: syb01094648 <[email protected]>

src/components/map-control-group/index.tsx

@@ -15,6 +15,7 @@ import { AutoControl } from './auto-control';
 import { ClearControl } from './clear-control';
 import DrawControl from './draw-control';
 import FilterControl from './filter-form-list-control';
+import { L7MapOptionControl } from './l7-option-control';
 import LayerColorControl from './layer-color-control';
 import LocationSearchControl from './location-search-control';
 import { MapAdministrativeControl } from './map-administrative-control';
@@ -45,6 +46,7 @@ const DefaultMapControl: MapControlProps = {
   mapAdministrativeControl: true,
   logoControl: true,
   textLayerControl: true,
+  L7MapOptionControl: true,
 };
 export const MapControlGroup: React.FC<MapControlGroupProps> = ({
   mapControl,
@@ -99,6 +101,7 @@ export const MapControlGroup: React.FC<MapControlGroupProps> = ({
       )}
       {layerType.includes(OfficeLayerEnum.GoogleSatellite) && <SamControl />}
       {isControlGroupState.textLayerControl && <TextLayerControl />}
+      {isControlGroupState.L7MapOptionControl && <L7MapOptionControl />}
     </>
   );
 };

src/components/map-control-group/l7-option-control/index.tsx

@@ -0,0 +1,82 @@
+import { CustomControl, useScene } from '@antv/larkmap';
+import { Button, Input, Modal, Tooltip, message } from 'antd';
+import Clipboard from 'clipboard';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconFont } from '../../../components/iconfont';
+import useStyles from '../styles';
+
+const { TextArea } = Input;
+
+export const L7MapOptionControl = () => {
+  const scene = useScene();
+  const styles = useStyles();
+  const { t } = useTranslation();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [textValue, setTextValue] = useState('');
+
+  const showModal = () => {
+    setIsModalOpen(true);
+    const optionJson = {
+      center: [scene.getCenter().lng, scene.getCenter().lat],
+      zoom: scene.getZoom(),
+      pitch: Number(scene.getPitch().toFixed(6)),
+      rotation: scene.getRotation(),
+    };
+    setTextValue(JSON.stringify(optionJson, null, 2));
+  };
+
+  const handleOk = () => {
+    const clipboard = new Clipboard(`#l7-option-copy_btn`, {
+      text: () => textValue,
+    });
+
+    clipboard.on('success', () => {
+      setIsModalOpen(false);
+      message.success(t('layer_contextmenu_popup.fuZhiChengGong'));
+      clipboard.destroy();
+    });
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+  return (
+    <CustomControl position="bottomleft">
+      <Tooltip placement="left" overlay={t('l7Options.huoqucanshu')}>
+        <button
+          className={styles.L7EditorControl}
+          id="text-layer-control"
+          onClick={showModal}
+        >
+          <IconFont type="icon-xitongzhuangtai" />
+        </button>
+      </Tooltip>
+      <Modal
+        title={t('l7Options.dangqiancanshu')}
+        open={isModalOpen}
+        onCancel={handleCancel}
+        width={800}
+        destroyOnClose
+        footer={
+          <>
+            <Button onClick={handleCancel}>
+              {t('btn.setting_btn.guanBi')}
+            </Button>
+            <Button type="primary" id="l7-option-copy_btn" onClick={handleOk}>
+              {t('layer_contextmenu_popup.fuZhi')}
+            </Button>
+          </>
+        }
+      >
+        <TextArea
+          rows={10}
+          value={textValue}
+          onChange={(e) => {
+            setTextValue(e.target.value);
+          }}
+        />
+      </Modal>
+    </CustomControl>
+  );
+};