From 6cf398d07822315a87748c657149a0f97462504b Mon Sep 17 00:00:00 2001 From: suyubin <84109842+websybin@users.noreply.github.com> Date: Fri, 8 Mar 2024 10:06:45 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=8F=82=E6=95=B0=E7=BB=84=E4=BB=B6=20(#53)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 初步完成获取地图参数组件 * feat: 初步完成获取地图参数组件 --------- Co-authored-by: syb01094648 --- src/components/map-control-group/index.tsx | 3 + .../l7-option-control/index.tsx | 82 +++++++++++++++++++ src/constants/iconfont.js | 2 +- src/locales/langs/en-US.ts | 2 + src/locales/langs/zh-CN.ts | 2 + src/types/l7editor.ts | 1 + 6 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 src/components/map-control-group/l7-option-control/index.tsx diff --git a/src/components/map-control-group/index.tsx b/src/components/map-control-group/index.tsx index 6d36da8..acfc3de 100644 --- a/src/components/map-control-group/index.tsx +++ b/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 = ({ mapControl, @@ -99,6 +101,7 @@ export const MapControlGroup: React.FC = ({ )} {layerType.includes(OfficeLayerEnum.GoogleSatellite) && } {isControlGroupState.textLayerControl && } + {isControlGroupState.L7MapOptionControl && } ); }; diff --git a/src/components/map-control-group/l7-option-control/index.tsx b/src/components/map-control-group/l7-option-control/index.tsx new file mode 100644 index 0000000..98df1f0 --- /dev/null +++ b/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 ( + + + + + + + + + } + > +