-
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.
- Loading branch information
Showing
17 changed files
with
200 additions
and
76 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
73 changes: 73 additions & 0 deletions
73
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,73 @@ | ||
| import { CustomControl } from '@antv/larkmap'; | ||
| import { Form, Popover, Select, Switch, Tooltip } from 'antd'; | ||
| import React, { useState } from 'react'; | ||
| import { useFeature, useGlobal } from '../../../recoil'; | ||
| import { IconFont } from '../../iconfont'; | ||
| import useStyles from '../styles'; | ||
|
|
||
| export type TextLayerControlProps = {}; | ||
|
|
||
| export const TextLayerControl: React.FC = () => { | ||
| const styles = useStyles(); | ||
| const { | ||
| showTextLayer, | ||
| setShowTextLayer, | ||
| textLayerFields, | ||
| setTextLayerFields, | ||
| } = useGlobal(); | ||
| const { features } = useFeature(); | ||
| const [fields, setFields] = useState<string[]>([]); | ||
|
|
||
| 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="文本标注图层配置" | ||
| overlayStyle={{ width: 300 }} | ||
| content={ | ||
| <Form size="small"> | ||
| <Form.Item label="是否展示图层"> | ||
| <Switch value={showTextLayer} onChange={setShowTextLayer} /> | ||
| </Form.Item> | ||
|
|
||
| <Form.Item label="展示字段"> | ||
| <Select | ||
| value={textLayerFields} | ||
| onChange={setTextLayerFields} | ||
| placeholder="不选则默认展示元素序号" | ||
| 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="文本图层配置"> | ||
| <button className={styles.L7EditorControl} id="text-layer-control"> | ||
| <IconFont type="icon-wenbenkuang" /> | ||
| </button> | ||
| </Tooltip> | ||
| </Popover> | ||
| </CustomControl> | ||
| ); | ||
| }; |
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.
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
Oops, something went wrong.