fix: 底图 customTiles 属性透出和文档补充

docs/docs/index.md

@@ -42,6 +42,7 @@ title: API
 | wasmPath | sam 组件的 wasm 路径 | `string` | `\` |
 | showDrawDistance | 绘制时是否展示距离文本 | `boolean` | `false` |
 | showDrawArea | 绘制时是否展示面积文本 | `boolean` | `false` |
+| customTiles | 自定义瓦片底图图层 | [customTilesProps](#customtilesprops) | `[]` |
 
 #### `tabItems`
 
@@ -98,25 +99,30 @@ LngLat 文本编辑器，可以通过输入 LngLat 数据实现数据展示(目
 }
 ```
 
-#### `officialLayers`¸
-
-底图数据选择
-
-`['googleSatellite'] | ['amapSatellite','amapRoadNet','AmapBuildings', 'amapTraffic']`
+#### `customTilesProps`
 
 ```js
 {
-  officialLayers: ['amapSatellite', 'amapRoadNet'];
+  customTiles: [
+    {
+      id: 'GaodeSatellite',
+      image:
+        'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*zi2jSqqZ2-8AAAAAAAAAAAAADjWqAQ/original',
+      title: '高德卫星底图',
+      layers: [
+        'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+      ],
+    },
+  ];
 }
 ```
 
-| 属性            | 描述       |
-| --------------- | ---------- |
-| googleSatellite | 谷歌卫星图 |
-| amapSatellite   | 高德卫星图 |
-| amapRoadNet     | 高德路网图 |
-| amapBuildings   | 高德楼块图 |
-| amapTraffic     | 高德路况图 |
+| 属性   | 描述         | 类型       |
+| ------ | ------------ | ---------- |
+| id     | 唯一标识     | `string`   |
+| image  | 图片         | `string`   |
+| title  | 图层名称     | `string`   |
+| layers | 瓦片图层链接 | `string[]` |
 
 #### coordConvert
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-editor",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "Geographic data editing tool based on L7",
   "files": [
     "lib",

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

@@ -20,6 +20,7 @@ import {
   OfficeLayerEnum,
 } from '../../../constants';
 import { useGlobal } from '../../../recoil';
+import type { CustomTiles } from '../../../types/l7editor';
 import useStyle from './styles';
 
 const layout = {
@@ -58,14 +59,14 @@ export function OfficialLayerControl() {
 
   const BASE_LAYER_GROUP = [
     {
-      type: OfficeLayerEnum.VectorMap,
+      id: OfficeLayerEnum.VectorMap,
       title: t('official_layer_control.index.shiLiangDiTu'),
       image:
         'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qdFDSbvIalgAAAAAAAAAAAAADmJ7AQ/original',
       layers: [],
     },
     {
-      type: OfficeLayerEnum.GoogleSatellite,
+      id: OfficeLayerEnum.GoogleSatellite,
       title: t('official_layer_control.index.guGeWeiXingTu'),
       image:
         'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*zi2jSqqZ2-8AAAAAAAAAAAAADjWqAQ/original',
@@ -91,15 +92,10 @@ export function OfficialLayerControl() {
     return false; // 阻止antd组件自动上传
   };
 
-  const onItemClick = (item: {
-    type: any;
-    image: string;
-    title: string;
-    layers: string[];
-  }) => {
-    setRadioValue(item.type);
+  const onItemClick = (item: CustomTiles) => {
+    setRadioValue(item.id);
     setLayerType(
-      item.type === OfficeLayerEnum.VectorMap ? [] : ([item.type] as string[]),
+      item.id === OfficeLayerEnum.VectorMap ? [] : ([item.id] as string[]),
     );
   };
 
@@ -108,7 +104,7 @@ export function OfficialLayerControl() {
       const cloneCustomTiles = cloneDeep(customTiles);
       const newImgUrl = Array.isArray(e.img) ? e.img[0].url : `${base64}`;
       cloneCustomTiles[editIndex - 2] = {
-        type: e.name,
+        id: e.name,
         image: newImgUrl,
         title: e.name,
         layers: e.urls,
@@ -120,7 +116,7 @@ export function OfficialLayerControl() {
       setCustomTiles((prevState) => [
         ...prevState,
         {
-          type: e.name,
+          id: e.name,
           image: `${base64}`,
           title: e.name,
           layers: e.urls,
@@ -142,18 +138,13 @@ export function OfficialLayerControl() {
 
   const onConfirm = (
     e: React.MouseEvent<HTMLElement> | undefined,
-    item: {
-      type: string;
-      image?: string;
-      title?: string;
-      layers?: string[];
-    },
+    item: CustomTiles,
   ) => {
     e?.stopPropagation();
     const newCustomTiles = customTiles.filter((val) => {
-      return val.type !== item.type;
+      return val.id !== item.id;
     });
-    if (item.type === radioValue) {
+    if (item.id === radioValue) {
       setRadioValue(OfficeLayerEnum.VectorMap);
       setLayerType([]);
     }
@@ -214,15 +205,15 @@ export function OfficialLayerControl() {
   const rasterLayer = useMemo(() => {
     if (layerType.length) {
       const findItem = officeLayerGroup.find(
-        (item) => item.type === layerType[0],
+        (item) => item.id === layerType[0],
       );
       return findItem?.layers.map((item) => {
         return (
           // eslint-disable-next-line react/jsx-key
           <RasterLayer
             zIndex={1}
             id={
-              findItem.type === OfficeLayerEnum.GoogleSatellite &&
+              findItem.id === OfficeLayerEnum.GoogleSatellite &&
               item === GOOGLE_TILE_MAP_URL
                 ? 'googleTileMap'
                 : undefined
@@ -260,10 +251,10 @@ export function OfficialLayerControl() {
               {officeLayerGroup.map((item, index) => {
                 return (
                   <div
-                    key={item.type}
+                    key={item.id}
                     className={classNames([
                       styles.amapInfoItem,
-                      item.type === radioValue
+                      item.id === radioValue
                         ? styles.itemBorderActive
                         : styles.itemBorder,
                       index === officeLayerGroup.length - 1 ? 'item-hover' : '',

src/locales/langs/zh-CN.ts

@@ -142,7 +142,7 @@ export default {
   'layer_color_control.index.tuCengYanSeXuan': '图层颜色选择器',
   'location_search_control.index.tianJiaZhiShuJu': '添加至数据',
   'location_search_control.location_search.qingShuRuYaoSou': '请输入要搜索地名',
-  'official_layer_control.index.guGeWeiXingTu': '谷歌遥感地图',
+  'official_layer_control.index.guGeWeiXingTu': '谷歌卫星地图',
   'official_layer_control.index.shiLiangDiTu': '矢量地图',
   'save_map_options_control.index.baoCunDiTuZhuang': '保存地图状态',
   'save_map_options_control.index.diTuZhuangTaiBao': '地图状态保存成功 ',

src/pages/index.tsx

@@ -11,6 +11,7 @@ import {
   autoFitBoundsState,
   baseMapState,
   convertState,
+  customTilesState,
   hideEditorState,
   layerColorState,
   localeState,
@@ -55,6 +56,7 @@ export const L7Editor = (props: L7EditorProps) => {
       set(textLayerFieldsState, props?.textLayerFields ?? undefined);
       set(showDrawDistanceState, props.showDrawDistance ?? false);
       set(showDrawAreaState, props.showDrawArea ?? false);
+      set(customTilesState, props.customTiles ?? []);
     };
   }, [props]);
 

src/recoil/atomState.ts

@@ -5,6 +5,7 @@ import { atom, DefaultValue } from 'recoil';
 import { LocalStorageKey } from '../constants';
 import type { IFeatures, LngLatImportType } from '../types';
 import type { FilterNode } from '../types/filter';
+import type { CustomTiles } from '../types/l7editor';
 
 const localStorageEffect =
   (key: string) =>
@@ -172,15 +173,7 @@ const textLayerFieldsState = atom<string[] | undefined>({
   effects: [localStorageEffect(LocalStorageKey.textLayerFields)],
 });
 
-const customTilesState = atom<
-  {
-    [x: string]: any;
-    type: string;
-    image: string;
-    title: string;
-    layers: string[];
-  }[]
->({
+const customTilesState = atom<CustomTiles[]>({
   key: 'customTiles',
   default: [],
   effects: [localStorageEffect(LocalStorageKey.customTiles)],
@@ -199,13 +192,11 @@ const wasmPathState = atom<string>({
 
 export {
   activeTabState,
-  showDrawAreaState,
   autoFitBoundsState,
   baseMapState,
   cityHistoryState,
   convertState,
   customTilesState,
-  showDrawDistanceState,
   editorTextState,
   featureState,
   filterState,
@@ -221,6 +212,8 @@ export {
   rightWidthState,
   savedTextState,
   sceneState,
+  showDrawAreaState,
+  showDrawDistanceState,
   showTextLayerState,
   textLayerFieldsState,
   themeState,

src/types/l7editor.ts

@@ -2,6 +2,14 @@ import type { LarkMapProps } from '@antv/larkmap';
 import type { Feature } from '@turf/turf';
 import type { TabsProps } from 'antd';
 
+export type CustomTiles = {
+  [key: string]: any;
+  id: string;
+  image: string;
+  title: string;
+  layers: string[];
+};
+
 export interface MapControlProps {
   logoControl?: boolean;
   drawControl?: boolean;
@@ -146,4 +154,9 @@ export interface L7EditorProps {
    * 绘制时是否显示面积
    */
   showDrawArea?: boolean;
+
+  /**
+   * 自定义瓦片底图图层
+   */
+  customTiles?: CustomTiles[];
 }