Skip to content

Commit

Permalink
fix: 解决冲突
Browse files Browse the repository at this point in the history
  • Loading branch information
syb01094648 committed Mar 8, 2024
2 parents 759b78a + 94540c1 commit be92d5c
Show file tree
Hide file tree
Showing 14 changed files with 178 additions and 63 deletions.
32 changes: 19 additions & 13 deletions docs/docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ title: API
| wasmPath | sam 组件的 wasm 路径 | `string` | `\` |
| showDrawDistance | 绘制时是否展示距离文本 | `boolean` | `false` |
| showDrawArea | 绘制时是否展示面积文本 | `boolean` | `false` |
| customTiles | 自定义瓦片底图图层 | [CustomTilesProps](#customtilesprops) | `[]` |

#### `tabItems`

Expand Down Expand Up @@ -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

Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@antv/l7-editor",
"version": "1.1.9",
"version": "1.1.11",
"description": "Geographic data editing tool based on L7",
"files": [
"lib",
Expand Down Expand Up @@ -36,6 +36,7 @@
"@antv/larkmap": "^1.4.4",
"@antv/sam": "^0.1.0",
"@emotion/css": "^11.11.2",
"@mapbox/geojsonhint": "^3.3.0",
"@mapbox/togeojson": "^0.16.0",
"@turf/turf": "^6.5.0",
"ahooks": "^3.7.0",
Expand Down
1 change: 0 additions & 1 deletion src/components/app-header/btn/import-btn/file-upload.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ const FileUpload = forwardRef<any>(function FileUpload({}, ref) {
const { file, onSuccess, onError } = uploadRequestOption;
parserFileToSource(file, t)
.then((dataSource) => {
console.log(dataSource);
if (!dataSource?.columns) {
if (dataSource.data?.features?.length) {
const newData = uploadData;
Expand Down
3 changes: 3 additions & 0 deletions src/components/map-control-group/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { ClearControl } from './clear-control';
import DrawControl from './draw-control';
import { ExportImage } from './export-image-control';
import FilterControl from './filter-form-list-control';
import { L7MapOptionControl } from './l7-option-control';
import LayerColorControl from './layer-color-control';
import LocationSearchControl from './location-search-control';
import { MapAdministrativeControl } from './map-administrative-control';
Expand Down Expand Up @@ -47,6 +48,7 @@ const DefaultMapControl: MapControlProps = {
logoControl: true,
textLayerControl: true,
exportImageControl: true,
L7MapOptionControl: true,
};
export const MapControlGroup: React.FC<MapControlGroupProps> = ({
mapControl,
Expand Down Expand Up @@ -102,6 +104,7 @@ export const MapControlGroup: React.FC<MapControlGroupProps> = ({
{layerType.includes(OfficeLayerEnum.GoogleSatellite) && <SamControl />}
{isControlGroupState.textLayerControl && <TextLayerControl />}
{isControlGroupState.exportImageControl && <ExportImage />}
{isControlGroupState.L7MapOptionControl && <L7MapOptionControl />}
</>
);
};
82 changes: 82 additions & 0 deletions src/components/map-control-group/l7-option-control/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { CustomControl, useScene } from '@antv/larkmap';
import { Button, Input, Modal, Tooltip, message } from 'antd';
import Clipboard from 'clipboard';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IconFont } from '../../../components/iconfont';
import useStyles from '../styles';

const { TextArea } = Input;

export const L7MapOptionControl = () => {
const scene = useScene();
const styles = useStyles();
const { t } = useTranslation();
const [isModalOpen, setIsModalOpen] = useState(false);
const [textValue, setTextValue] = useState('');

const showModal = () => {
setIsModalOpen(true);
const optionJson = {
center: [scene.getCenter().lng, scene.getCenter().lat],
zoom: scene.getZoom(),
pitch: Number(scene.getPitch().toFixed(6)),
rotation: scene.getRotation(),
};
setTextValue(JSON.stringify(optionJson, null, 2));
};

const handleOk = () => {
const clipboard = new Clipboard(`#l7-option-copy_btn`, {
text: () => textValue,
});

clipboard.on('success', () => {
setIsModalOpen(false);
message.success(t('layer_contextmenu_popup.fuZhiChengGong'));
clipboard.destroy();
});
};

const handleCancel = () => {
setIsModalOpen(false);
};
return (
<CustomControl position="bottomleft">
<Tooltip placement="left" overlay={t('l7Options.huoqucanshu')}>
<button
className={styles.L7EditorControl}
id="text-layer-control"
onClick={showModal}
>
<IconFont type="icon-xitongzhuangtai" />
</button>
</Tooltip>
<Modal
title={t('l7Options.dangqiancanshu')}
open={isModalOpen}
onCancel={handleCancel}
width={800}
destroyOnClose
footer={
<>
<Button onClick={handleCancel}>
{t('btn.setting_btn.guanBi')}
</Button>
<Button type="primary" id="l7-option-copy_btn" onClick={handleOk}>
{t('layer_contextmenu_popup.fuZhi')}
</Button>
</>
}
>
<TextArea
rows={10}
value={textValue}
onChange={(e) => {
setTextValue(e.target.value);
}}
/>
</Modal>
</CustomControl>
);
};
39 changes: 15 additions & 24 deletions src/components/map-control-group/official-layer-control/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
OfficeLayerEnum,
} from '../../../constants';
import { useGlobal } from '../../../recoil';
import type { CustomTiles } from '../../../types/l7editor';
import useStyle from './styles';

const layout = {
Expand Down Expand Up @@ -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',
Expand All @@ -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[]),
);
};

Expand All @@ -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,
Expand All @@ -120,7 +116,7 @@ export function OfficialLayerControl() {
setCustomTiles((prevState) => [
...prevState,
{
type: e.name,
id: e.name,
image: `${base64}`,
title: e.name,
layers: e.urls,
Expand All @@ -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([]);
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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' : '',
Expand Down
2 changes: 1 addition & 1 deletion src/constants/iconfont.js

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/locales/langs/en-US.ts
Original file line number Diff line number Diff line change
Expand Up @@ -234,4 +234,6 @@ export default {
'export-img-control_title': 'Preview Picture',
'btn.setting_btn.mianJi': 'Show area text when drawing',
'btn.setting_btn.juLi': 'Whether to display distance text when drawing',
'l7Options.huoqucanshu': 'Get map status parameters',
'l7Options.dangqiancanshu': 'Current map parameters',
};
4 changes: 3 additions & 1 deletion src/locales/langs/zh-CN.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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': '地图状态保存成功 ',
Expand Down Expand Up @@ -201,4 +201,6 @@ export default {
'export-img-control_title': '预览图片',
'btn.setting_btn.mianJi': '绘制时是否展示面积文本',
'btn.setting_btn.juLi': '绘制时是否展示距离文本',
'l7Options.huoqucanshu': '获取地图状态参数',
'l7Options.dangqiancanshu': '当前地图参数',
};
15 changes: 13 additions & 2 deletions src/pages/components/editor.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
//@ts-ignore
import { hint } from '@mapbox/geojsonhint';
import { useAsyncEffect, useUpdateEffect } from 'ahooks';
import { ConfigProvider, theme as antdTheme, message } from 'antd';
import classNames from 'classnames';
Expand Down Expand Up @@ -55,8 +57,17 @@ export const Editor: React.FC<EditorProps> = (props) => {
)) as string | null;
if (newEditorText && scene && !props.features) {
try {
const newFeatures = JSON.parse(newEditorText).features;
bboxAutoFit(newFeatures);
const errors = hint(JSON.parse(newEditorText)).filter(
(item: { message: string }) =>
item.message !==
'Polygons and MultiPolygons should follow the right-hand rule',
);
if (errors.length > 0) {
message.error(t('import_btn.file_upload.qingJianChaShuJu'));
} else {
const newFeatures = JSON.parse(newEditorText).features;
bboxAutoFit(newFeatures);
}
} catch (error) {
message.error(t('import_btn.file_upload.qingJianChaShuJu'));
}
Expand Down
2 changes: 2 additions & 0 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
autoFitBoundsState,
baseMapState,
convertState,
customTilesState,
hideEditorState,
layerColorState,
localeState,
Expand Down Expand Up @@ -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]);

Expand Down
Loading

0 comments on commit be92d5c

Please sign in to comment.