feat: 新增导出图片组件 (#52)

* feat: 新增导出图片组件 * fix: 修改下载图片名称 --------- Co-authored-by: syb01094648 <syb01094648@antgroup.com>
antvis · Mar 8, 2024 · 62dfa93 · 62dfa93
1 parent 94540c1
commit 62dfa93
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 3 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,7 +3,7 @@
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sortKeys": true,
   "i18n-ally.enabledParsers": ["ts", "json"],
-  "i18n-ally.sourceLanguage": "en-US",
+  "i18n-ally.sourceLanguage": "zh-CN",
   "i18n-ally.displayLanguage": "zh-CN",
   "i18n-ally.enabledFrameworks": ["react"]
 }
diff --git a/docs/docs/index.md b/docs/docs/index.md
@@ -162,6 +162,7 @@ LngLat 文本编辑器，可以通过输入 LngLat 数据实现数据展示(目
 | mapAdministrativeControl    | 查看当前行政区域控件 |
 | logoControl                 | Logo 控件            |
 | textLayerControl            | 文本图层 控件        |
+| exportImageControl          | 导出图片 控件        |
 
 #### toolbar
 

diff --git a/src/components/map-control-group/export-image-control/index.tsx b/src/components/map-control-group/export-image-control/index.tsx
@@ -0,0 +1,48 @@
+import { ExportImageControl } from '@antv/larkmap';
+import { Image, Modal } from 'antd';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { downloadImg } from '.././../../utils';
+import useStyle from './styles';
+
+export const ExportImage = () => {
+  const styles = useStyle();
+  const [imageData, setImageData] = useState('');
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { t } = useTranslation();
+
+  const onExport = (value: string) => {
+    setIsModalOpen(true);
+    setImageData(value);
+  };
+
+  const handle = () => {
+    setIsModalOpen(false);
+    setImageData('');
+  };
+
+  const onOk = () => {
+    setIsModalOpen(false);
+    downloadImg(imageData);
+    setImageData('');
+  };
+  return (
+    <>
+      <ExportImageControl
+        onExport={onExport}
+        className={styles.l7ExportImg}
+        imageType="jpeg"
+        position={'bottomright'}
+      />
+      <Modal
+        title={t('export-img-control_title')}
+        open={isModalOpen}
+        okText={t('btn.download_btn.xiaZai')}
+        onOk={onOk}
+        onCancel={handle}
+      >
+        <Image src={imageData} />
+      </Modal>
+    </>
+  );
+};
diff --git a/src/components/map-control-group/export-image-control/styles.ts b/src/components/map-control-group/export-image-control/styles.ts
@@ -0,0 +1,28 @@
+import { css } from '@emotion/css';
+import { theme } from 'antd';
+
+const useStyle = () => {
+  const { useToken } = theme;
+  const { token } = useToken();
+
+  const { colorBgContainer, colorIcon, colorText } =
+    token;
+  return {
+    l7ExportImg: css`
+      background: ${colorBgContainer};
+      color: ${colorIcon};
+      svg {
+        fill: ${colorIcon} !important;
+      }
+
+      :hover {
+        background: ${colorBgContainer} !important;
+        svg {
+          color: ${colorText} !important;
+          fill: ${colorText} !important;
+        }
+      }
+    `,
+  };
+};
+export default useStyle;
diff --git a/src/components/map-control-group/index.tsx b/src/components/map-control-group/index.tsx
@@ -14,6 +14,7 @@ import { AdministrativeSelect } from './administrative-select-control';
 import { AutoControl } from './auto-control';
 import { ClearControl } from './clear-control';
 import DrawControl from './draw-control';
+import { ExportImage } from './export-image-control';
 import FilterControl from './filter-form-list-control';
 import { L7MapOptionControl } from './l7-option-control';
 import LayerColorControl from './layer-color-control';
@@ -46,6 +47,7 @@ const DefaultMapControl: MapControlProps = {
   mapAdministrativeControl: true,
   logoControl: true,
   textLayerControl: true,
+  exportImageControl: true,
   L7MapOptionControl: true,
 };
 export const MapControlGroup: React.FC<MapControlGroupProps> = ({
@@ -101,6 +103,7 @@ export const MapControlGroup: React.FC<MapControlGroupProps> = ({
       )}
       {layerType.includes(OfficeLayerEnum.GoogleSatellite) && <SamControl />}
       {isControlGroupState.textLayerControl && <TextLayerControl />}
+      {isControlGroupState.exportImageControl && <ExportImage />}
       {isControlGroupState.L7MapOptionControl && <L7MapOptionControl />}
     </>
   );

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -21,8 +21,8 @@ export enum LocalStorageKey {
   firstOpening = 'firstOpening',
   wasmPath = 'wasmPath',
   customTiles = 'customTiles',
-  showDrawDistance = "showDrawDistance",
-  showDrawArea = "showDrawArea"
+  showDrawDistance = 'showDrawDistance',
+  showDrawArea = 'showDrawArea',
 }
 
 export enum LayerId {
@@ -46,10 +46,16 @@ export const FeatureKey = {
 export const MapBoxConfig = {
   token:
     'pk.eyJ1IjoibGl1dmlnb25nenVvc2hpIiwiYSI6ImNsaGs2czBrcTBvczUzbnFzOHU0dzk2ZWQifQ.hVvTgcbg_Ym-VQz36psLRg',
+  WebGLParams: {
+    preserveDrawingBuffer: true,
+  },
 };
 
 export const GaodeConfig = {
   token: '5ae4492ef912cbbc93034fea0e66ff2a',
+  WebGLParams: {
+    preserveDrawingBuffer: true,
+  },
 };
 
 export const LayerZIndex = 100;

diff --git a/src/locales/langs/en-US.ts b/src/locales/langs/en-US.ts
@@ -231,6 +231,7 @@ export default {
   'text-layer-control_wenBenTuCengPeiZhi': 'Text Layer Configuration',
   'text-layer-control_description':
     'Open the text layer configuration, you can display the serial number of all the current data, you can also use the multi-select box to properties fields in the data to select different data for display.',
+  'export-img-control_title': 'Preview Picture',
   'btn.setting_btn.mianJi': 'Show area text when drawing',
   'btn.setting_btn.juLi': 'Whether to display distance text when drawing',
   'l7Options.huoqucanshu': 'Get map status parameters',

diff --git a/src/locales/langs/zh-CN.ts b/src/locales/langs/zh-CN.ts
@@ -198,6 +198,7 @@ export default {
   'text-layer-control_wenBenTuCengPeiZhi': '文本图层配置',
   'text-layer-control_description':
     '开启文本图层配置，可以显示当前所有数据的序号，也可以通过多选框在数据中properties字段去选择不同的数据来进行展示',
+  'export-img-control_title': '预览图片',
   'btn.setting_btn.mianJi': '绘制时是否展示面积文本',
   'btn.setting_btn.juLi': '绘制时是否展示距离文本',
   'l7Options.huoqucanshu': '获取地图状态参数',

diff --git a/src/types/l7editor.ts b/src/types/l7editor.ts
@@ -28,6 +28,7 @@ export interface MapControlProps {
   administrativeSelectControl?: boolean;
   mapAdministrativeControl?: boolean;
   textLayerControl?: boolean;
+  exportImageControl?: boolean;
   L7MapOptionControl?: boolean;
 }
 

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -46,6 +46,13 @@ export const downloadText = (text: string, ext: string | 'json' | 'txt') => {
   aTag.click();
 };
 
+export const downloadImg = (link: string) => {
+  const aTag = document.createElement('a');
+  aTag.href = link;
+  aTag.download = `${dayjs().format('YYYY年MM月DD日HH时mm分ss秒')}.jpeg`;
+  aTag.dispatchEvent(new MouseEvent('click'));
+};
+
 export const getParamsNew = (key: string) => {
   const temData = new URLSearchParams(window.location.search);
   return temData.get(key);