antvis · heiyexing · Dec 15, 2023 · Dec 15, 2023
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -19,6 +19,7 @@ export interface MapControlProps {
   fullscreenControl?: boolean;
   administrativeSelectControl?: boolean;
   mapAdministrativeControl?: boolean;
+  textLayerControl?: boolean;
 }
 
 export interface ToolbarProps {