From a69b93d251a8906409f5ac4e158e5b1b572452bb Mon Sep 17 00:00:00 2001
From: syb01094648 <syb01094648@antgroup.com>
Date: Fri, 15 Dec 2023 15:35:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96=E6=96=87=E6=A1=88=EF=BC=8C=E5=90=84=E7=B1=BB=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/docs/index.md                            |  1 +
 src/components/app-header/index.tsx           |  5 +++++
 src/components/map-control-group/index.tsx    |  3 ++-
 .../official-layer-control/index.tsx          |  2 +-
 .../text-layer-control/index.tsx              | 19 +++++++++++++------
 .../text-layer-control/style.ts               | 12 ++++++++++++
 src/locales/langs/en-US.ts                    |  9 ++++++++-
 src/locales/langs/zh-CN.ts                    |  8 +++++++-
 src/types/l7editor.ts                         |  1 +
 9 files changed, 50 insertions(+), 10 deletions(-)
 create mode 100644 src/components/map-control-group/text-layer-control/style.ts

diff --git a/docs/docs/index.md b/docs/docs/index.md
index 7c1da0c..1868031 100644
--- a/docs/docs/index.md
+++ b/docs/docs/index.md
@@ -153,6 +153,7 @@ LngLat 文本编辑器，可以通过输入 LngLat 数据实现数据展示(目
 | administrativeSelectControl | 行政区域选择控件     |
 | mapAdministrativeControl    | 查看当前行政区域控件 |
 | logoControl                 | Logo 控件            |
+| textLayerControl            | 文本图层 控件        |
 
 #### toolbar
 
diff --git a/src/components/app-header/index.tsx b/src/components/app-header/index.tsx
index 2b705a8..638e5f8 100644
--- a/src/components/app-header/index.tsx
+++ b/src/components/app-header/index.tsx
@@ -209,6 +209,11 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ toolbar }) => {
       description: t('app_header.constants.keXuanZeBuTong'),
       target: () => document.getElementById('l7-editor-aMap')!,
     },
+    {
+      title: t('text-layer-control_wenBenTuCengPeiZhi'),
+      description: t('text-layer-control_description'),
+      target: () => document.getElementById('text-layer-control')!,
+    },
     {
       title: t('app_header.constants.gEOJS'),
       description: t('app_header.constants.keYiTongGuoBian'),
diff --git a/src/components/map-control-group/index.tsx b/src/components/map-control-group/index.tsx
index b54659d..6d36da8 100644
--- a/src/components/map-control-group/index.tsx
+++ b/src/components/map-control-group/index.tsx
@@ -44,6 +44,7 @@ const DefaultMapControl: MapControlProps = {
   administrativeSelectControl: true,
   mapAdministrativeControl: true,
   logoControl: true,
+  textLayerControl: true,
 };
 export const MapControlGroup: React.FC<MapControlGroupProps> = ({
   mapControl,
@@ -97,7 +98,7 @@ export const MapControlGroup: React.FC<MapControlGroupProps> = ({
         />
       )}
       {layerType.includes(OfficeLayerEnum.GoogleSatellite) && <SamControl />}
-      <TextLayerControl />
+      {isControlGroupState.textLayerControl && <TextLayerControl />}
     </>
   );
 };
diff --git a/src/components/map-control-group/official-layer-control/index.tsx b/src/components/map-control-group/official-layer-control/index.tsx
index 04afa7a..a2db7ad 100644
--- a/src/components/map-control-group/official-layer-control/index.tsx
+++ b/src/components/map-control-group/official-layer-control/index.tsx
@@ -242,7 +242,7 @@ export function OfficialLayerControl() {
   return (
     <>
       <CustomControl position="bottomleft">
-        <div className={styles.mapTab}>
+        <div className={styles.mapTab} id="l7-editor-aMap">
           <div
             className={styles.hideOfficeLayerBtn}
             onClick={() => {
diff --git a/src/components/map-control-group/text-layer-control/index.tsx b/src/components/map-control-group/text-layer-control/index.tsx
index 80afc55..590fca1 100644
--- a/src/components/map-control-group/text-layer-control/index.tsx
+++ b/src/components/map-control-group/text-layer-control/index.tsx
@@ -1,14 +1,17 @@
 import { CustomControl } from '@antv/larkmap';
 import { Form, Popover, Select, Switch, Tooltip } from 'antd';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useFeature, useGlobal } from '../../../recoil';
 import { IconFont } from '../../iconfont';
 import useStyles from '../styles';
+import useStyle from './style';
 
 export type TextLayerControlProps = {};
 
 export const TextLayerControl: React.FC = () => {
   const styles = useStyles();
+  const style = useStyle();
   const {
     showTextLayer,
     setShowTextLayer,
@@ -17,6 +20,7 @@ export const TextLayerControl: React.FC = () => {
   } = useGlobal();
   const { features } = useFeature();
   const [fields, setFields] = useState<string[]>([]);
+  const { t } = useTranslation();
 
   const refreshFields = () => {
     const newFieldSet = new Set<string>();
@@ -34,19 +38,19 @@ export const TextLayerControl: React.FC = () => {
   return (
     <CustomControl position="bottomleft">
       <Popover
-        title="文本标注图层配置"
+        title={t('text-layer-control_wenBenBiaoZhu')}
         overlayStyle={{ width: 300 }}
         content={
-          <Form size="small">
-            <Form.Item label="是否展示图层">
+          <Form size="small" className={style.textLayerForm}>
+            <Form.Item label={t('text-layer-control_shiFouZhanShiTuCeng')}>
               <Switch value={showTextLayer} onChange={setShowTextLayer} />
             </Form.Item>
 
-            <Form.Item label="展示字段">
+            <Form.Item label={t('text-layer-control_zhanShiZiDuan')}>
               <Select
                 value={textLayerFields}
                 onChange={setTextLayerFields}
-                placeholder="不选则默认展示元素序号"
+                placeholder={t('text-layer-control_buXuan')}
                 mode="multiple"
                 options={fields.map((item) => {
                   return { label: item, value: item };
@@ -62,7 +66,10 @@ export const TextLayerControl: React.FC = () => {
           }
         }}
       >
-        <Tooltip placement="left" overlay="文本图层配置">
+        <Tooltip
+          placement="left"
+          overlay={t('text-layer-control_wenBenTuCengPeiZhi')}
+        >
           <button className={styles.L7EditorControl} id="text-layer-control">
             <IconFont type="icon-wenbenkuang" />
           </button>
diff --git a/src/components/map-control-group/text-layer-control/style.ts b/src/components/map-control-group/text-layer-control/style.ts
new file mode 100644
index 0000000..5c21cb4
--- /dev/null
+++ b/src/components/map-control-group/text-layer-control/style.ts
@@ -0,0 +1,12 @@
+import { css } from '@emotion/css';
+
+const useStyle = () => {
+  return {
+    textLayerForm: css`
+      .ant-form-item {
+        margin-bottom: 12px !important;
+      }
+    `,
+  };
+};
+export default useStyle;
diff --git a/src/locales/langs/en-US.ts b/src/locales/langs/en-US.ts
index 9f2aeb9..848dcb6 100644
--- a/src/locales/langs/en-US.ts
+++ b/src/locales/langs/en-US.ts
@@ -223,5 +223,12 @@ export default {
   'official_layer_control.index.tinJiaWaPian': 'Add Tile Layer Address',
   'official_layer_control.index.kongGe': 'Input cannot be a space!',
   'official_layer_control.index.shangchuan': 'Please upload pictures',
-
+  'text-layer-control_wenBenBiaoZhu': 'Text callout layer configuration',
+  'text-layer-control_shiFouZhanShiTuCeng': 'Show layer',
+  'text-layer-control_zhanShiZiDuan': 'Show Fields',
+  'text-layer-control_buXuan':
+    'If not selected, the element serial number will be displayed by 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.',
 };
diff --git a/src/locales/langs/zh-CN.ts b/src/locales/langs/zh-CN.ts
index be8f79b..ef8a774 100644
--- a/src/locales/langs/zh-CN.ts
+++ b/src/locales/langs/zh-CN.ts
@@ -173,7 +173,7 @@ export default {
   'map_control_group.sam.zhiNengXuanZe': '地块智能识别',
   'map_control_group.sam.ziDongShiBie': '地块识别区域边界',
   'map_control_group.sam.zhiNengShiBieGuanBi': '地块智能识别功能已关闭',
-  'map_control_group.sam.diKuaiShiBieShiBei':'地块智能识别模型加载失败',
+  'map_control_group.sam.diKuaiShiBieShiBei': '地块智能识别模型加载失败',
   'map_contorl_group.draw.draw': '单击开始绘制',
   'map_contorl_group.draw.drawContinue': '单击继续绘制',
   'map_contorl_group.draw.drawFinish': '单击继续绘制，双击结束绘制',
@@ -191,4 +191,10 @@ export default {
   'official_layer_control.index.tinJiaWaPian': '添加瓦片图层地址',
   'official_layer_control.index.kongGe': '输入不能为空格！',
   'official_layer_control.index.shangchuan': '请上传图片',
+  'text-layer-control_wenBenBiaoZhu': '文本标注图层配置',
+  'text-layer-control_shiFouZhanShiTuCeng': '是否展示图层',
+  'text-layer-control_zhanShiZiDuan': '展示字段',
+  'text-layer-control_buXuan': '不选则默认展示元素序号',
+  'text-layer-control_wenBenTuCengPeiZhi':'文本图层配置',
+  'text-layer-control_description':'开启文本图层配置，可以显示当前所有数据的序号，也可以通过多选框在数据中properties字段去选择不同的数据来进行展示'
 };
diff --git a/src/types/l7editor.ts b/src/types/l7editor.ts
index 9c4ab1c..dc24ed9 100644
--- a/src/types/l7editor.ts
+++ b/src/types/l7editor.ts
@@ -19,6 +19,7 @@ export interface MapControlProps {
   fullscreenControl?: boolean;
   administrativeSelectControl?: boolean;
   mapAdministrativeControl?: boolean;
+  textLayerControl?: boolean;
 }
 
 export interface ToolbarProps {