diff --git a/docs/docs/index.md b/docs/docs/index.md index 5303aed..80095b3 100644 --- a/docs/docs/index.md +++ b/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 diff --git a/package.json b/package.json index 0c0149c..cffb5f5 100644 --- a/package.json +++ b/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", 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 a2db7ad..c858a34 100644 --- a/src/components/map-control-group/official-layer-control/index.tsx +++ b/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 | 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,7 +205,7 @@ 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 ( @@ -222,7 +213,7 @@ export function OfficialLayerControl() { { return (
{ set(textLayerFieldsState, props?.textLayerFields ?? undefined); set(showDrawDistanceState, props.showDrawDistance ?? false); set(showDrawAreaState, props.showDrawArea ?? false); + set(customTilesState, props.customTiles ?? []); }; }, [props]); diff --git a/src/recoil/atomState.ts b/src/recoil/atomState.ts index c8d3cf1..c97b040 100644 --- a/src/recoil/atomState.ts +++ b/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({ effects: [localStorageEffect(LocalStorageKey.textLayerFields)], }); -const customTilesState = atom< - { - [x: string]: any; - type: string; - image: string; - title: string; - layers: string[]; - }[] ->({ +const customTilesState = atom({ key: 'customTiles', default: [], effects: [localStorageEffect(LocalStorageKey.customTiles)], @@ -199,13 +192,11 @@ const wasmPathState = atom({ 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, diff --git a/src/types/l7editor.ts b/src/types/l7editor.ts index 64c0d9b..6fcefce 100644 --- a/src/types/l7editor.ts +++ b/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[]; }