-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix: 修复 tabs icon 间距问题 * feat: 新增文本图层配置控件 * fix: 调整国际化文案，各类文档补充 (#38) Co-authored-by: syb01094648 <[email protected]> * feat: 新增文本图层配置控件 * fix: 调整国际化文案，各类文档补充 (#38) Co-authored-by: syb01094648 <[email protected]> --------- Co-authored-by: suyubin <[email protected]> Co-authored-by: syb01094648 <[email protected]>
- Loading branch information
3 people
authored
Dec 15, 2023
1 parent
e6d7e92
commit 2ce3be7
Showing
22 changed files
with
243 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
src/components/map-control-group/text-layer-control/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| 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, | ||
| textLayerFields, | ||
| setTextLayerFields, | ||
| } = useGlobal(); | ||
| const { features } = useFeature(); | ||
| const [fields, setFields] = useState<string[]>([]); | ||
| const { t } = useTranslation(); | ||
|
|
||
| const refreshFields = () => { | ||
| const newFieldSet = new Set<string>(); | ||
| features.forEach((feature) => { | ||
| const properties = feature.properties; | ||
| if (properties) { | ||
| Object.keys(properties).forEach((key) => { | ||
| newFieldSet.add(key); | ||
| }); | ||
| } | ||
| }); | ||
| setFields(Array.from(newFieldSet)); | ||
| }; | ||
|
|
||
| return ( | ||
| <CustomControl position="bottomleft"> | ||
| <Popover | ||
| title={t('text-layer-control_wenBenBiaoZhu')} | ||
| overlayStyle={{ width: 300 }} | ||
| content={ | ||
| <Form size="small" className={style.textLayerForm}> | ||
| <Form.Item label={t('text-layer-control_shiFouZhanShiTuCeng')}> | ||
| <Switch value={showTextLayer} onChange={setShowTextLayer} /> | ||
| </Form.Item> | ||
|
|
||
| <Form.Item label={t('text-layer-control_zhanShiZiDuan')}> | ||
| <Select | ||
| value={textLayerFields} | ||
| onChange={setTextLayerFields} | ||
| placeholder={t('text-layer-control_buXuan')} | ||
| mode="multiple" | ||
| options={fields.map((item) => { | ||
| return { label: item, value: item }; | ||
| })} | ||
| /> | ||
| </Form.Item> | ||
| </Form> | ||
| } | ||
| trigger="click" | ||
| onOpenChange={(visible) => { | ||
| if (visible) { | ||
| refreshFields(); | ||
| } | ||
| }} | ||
| > | ||
| <Tooltip | ||
| placement="left" | ||
| overlay={t('text-layer-control_wenBenTuCengPeiZhi')} | ||
| > | ||
| <button className={styles.L7EditorControl} id="text-layer-control"> | ||
| <IconFont type="icon-wenbenkuang" /> | ||
| </button> | ||
| </Tooltip> | ||
| </Popover> | ||
| </CustomControl> | ||
| ); | ||
| }; |
12 changes: 12 additions & 0 deletions
12
src/components/map-control-group/text-layer-control/style.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { css } from '@emotion/css'; | ||
|
|
||
| const useStyle = () => { | ||
| return { | ||
| textLayerForm: css` | ||
| .ant-form-item { | ||
| margin-bottom: 12px !important; | ||
| } | ||
| `, | ||
| }; | ||
| }; | ||
| export default useStyle; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,92 @@ | ||
| import type { TextLayerProps } from '@antv/larkmap'; | ||
| import { TextLayer } from '@antv/larkmap'; | ||
| import type { Feature, LineString } from '@turf/turf'; | ||
| import { center } from '@turf/turf'; | ||
| import { cloneDeep } from 'lodash-es'; | ||
| import React, { useMemo } from 'react'; | ||
| import { FeatureKey } from '../../constants'; | ||
| import { useFilterFeatures } from '../../hooks'; | ||
| import { useFeature, useGlobal } from '../../recoil'; | ||
| import { centerOfLine } from '../../utils'; | ||
|
|
||
| export const EditorTextLayer = () => { | ||
| const { transformCoord } = useFeature(); | ||
| const { features: newFeatures } = useFilterFeatures(); | ||
| const { layerColor } = useGlobal(); | ||
| const { layerColor, textLayerFields } = useGlobal(); | ||
|
|
||
| const layerOptions: Omit<TextLayerProps, 'source'> = useMemo(() => { | ||
| const textOptions: Omit<TextLayerProps, 'source'> = useMemo(() => { | ||
| return { | ||
| zIndex: 101, | ||
| field: 'name', | ||
| field: 'text', | ||
| style: { | ||
| fill: `${layerColor}`, | ||
| opacity: 1, | ||
| fontSize: 18, | ||
| fontSize: 16, | ||
| stroke: '#fff', | ||
| strokeWidth: 2, | ||
| textAllowOverlap: true, | ||
| padding: [10, 10] as [number, number], | ||
| textOffset: [0, -18], | ||
| }, | ||
| }; | ||
| }, [layerColor]); | ||
|
|
||
| const pointTextOptions: Omit<TextLayerProps, 'source'> = useMemo(() => { | ||
| const newLayerOptions = cloneDeep(textOptions); | ||
| newLayerOptions.style!.textOffset = [0, -20]; | ||
| return newLayerOptions; | ||
| }, [textOptions]); | ||
|
|
||
| const sourceData = useMemo(() => { | ||
| const transformData = transformCoord(newFeatures).map((item) => { | ||
| return { | ||
| data: center(item), | ||
| //@ts-ignore | ||
| featureIndex: item.properties?.[FeatureKey.Index], | ||
| }; | ||
| }); | ||
| const data = transformData.map((item) => { | ||
| const data = transformCoord(newFeatures).map((item) => { | ||
| // @ts-ignore | ||
| const featureIndex = item.properties?.[FeatureKey.Index]; | ||
| const [x, y] = (() => { | ||
| if (item.geometry.type === 'LineString') { | ||
| return centerOfLine(item as Feature<LineString>).geometry.coordinates; | ||
| } | ||
| if (item.geometry.type === 'Point') { | ||
| return item.geometry.coordinates; | ||
| } else { | ||
| return center(item).geometry.coordinates; | ||
| } | ||
| })(); | ||
|
|
||
| let text = `${featureIndex + 1}`; | ||
|
|
||
| if (textLayerFields?.length) { | ||
| text = textLayerFields | ||
| .map((field) => { | ||
| return String(item.properties?.[field] ?? ''); | ||
| }) | ||
| .join(' '); | ||
| } | ||
|
|
||
| return { | ||
| //@ts-ignore | ||
| x: item.data.geometry.coordinates[0], | ||
| //@ts-ignore | ||
| y: item.data.geometry.coordinates[1], | ||
| name: `${item.featureIndex + 1}`, | ||
| x, | ||
| y, | ||
| text, | ||
| type: item.geometry.type, | ||
| }; | ||
| }); | ||
| return data; | ||
| }, [transformCoord, newFeatures]); | ||
| }, [transformCoord, newFeatures, textLayerFields]); | ||
|
|
||
| return ( | ||
| <TextLayer | ||
| {...layerOptions} | ||
| source={{ | ||
| data: sourceData, | ||
| parser: { type: 'json', x: 'x', y: 'y' }, | ||
| }} | ||
| /> | ||
| <> | ||
| <TextLayer | ||
| {...textOptions} | ||
| source={{ | ||
| data: sourceData.filter((item) => item.type !== 'Point'), | ||
| parser: { type: 'json', x: 'x', y: 'y' }, | ||
| }} | ||
| /> | ||
| <TextLayer | ||
| {...pointTextOptions} | ||
| source={{ | ||
| data: sourceData.filter((item) => item.type === 'Point'), | ||
| parser: { type: 'json', x: 'x', y: 'y' }, | ||
| }} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.