Skip to content

Commit

Permalink
feat: 替换遥感卫星底图 (#62)
Browse files Browse the repository at this point in the history 
* feat: 新增若干卫星遥感底图

* fix: 去除无用代码

* fix: 1.更改国际化 2.修复自定义官方图层编辑问题 (#60)

* fix: 1.更改国际化 2.修复自定义官方图层编辑问题

* style: 更改

---------

Co-authored-by: zhaoqianci <94272784+zhaoqianci@users.noreply.github.com>
  • Loading branch information
@heiyexing @zhaoqianci
heiyexing and zhaoqianci authored Apr 23, 2024
1 parent 342f337 commit 7b211c2
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 78 deletions.
152 changes: 76 additions & 76 deletions src/components/map-control-group/official-layer-control/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { cloneDeep } from 'lodash-es';
import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
CN_GOOGLE_TILE_MAP_URL,
GAODE_TILE_MAP_URL,
GOOGLE_TILE_MAP_ROUTER_URL,
GOOGLE_TILE_MAP_URL,
OfficeLayerEnum,
Expand Down Expand Up @@ -44,7 +46,9 @@ export function OfficialLayerControl() {
const [isModalOpen, setIsModalOpen] = useState(false);
const [isEdit, setIsEdit] = useState(false);
const [editIndex, setEditIndex] = useState(-1);
const [base64, setBase64] = useState<any>(null);
const [base64, setBase64] = useState<any>(
'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*UwHYTrindekAAAAAAAAAAAAADjWqAQ/original',
);
const [fileList, setFileList] = useState<UploadFile[]>([]);
const [hideOfficeLayer, setHideOfficeLayer] = useLocalStorageState<boolean>(
'hideOfficeLayer',
Expand All @@ -65,13 +69,27 @@ export function OfficialLayerControl() {
'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qdFDSbvIalgAAAAAAAAAAAAADmJ7AQ/original',
layers: [],
},
// {
// id: OfficeLayerEnum.GoogleSatellite,
// title: t('official_layer_control.index.guGeWeiXingTu'),
// image:
// 'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*zi2jSqqZ2-8AAAAAAAAAAAAADjWqAQ/original',
// layers: [GOOGLE_TILE_MAP_URL, GOOGLE_TILE_MAP_ROUTER_URL],
// },
{
id: OfficeLayerEnum.GoogleSatellite,
title: t('official_layer_control.index.guGeWeiXingTu'),
image:
'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*vfeZTbq2KWgAAAAAAAAAAAAADjWqAQ/original',
layers: [CN_GOOGLE_TILE_MAP_URL],
},
{
id: OfficeLayerEnum.Google,
title: t('official_layer_control.index.guGeWeiXingTuFanQiang'),
image:
'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*M64rSbdhYJ0AAAAAAAAAAAAADjWqAQ/original',
layers: [GOOGLE_TILE_MAP_URL, GOOGLE_TILE_MAP_ROUTER_URL],
},
{
id: OfficeLayerEnum.Gaode,
title: t('official_layer_control.index.gaoDeWeiXingTu'),
image:
'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*zi2jSqqZ2-8AAAAAAAAAAAAADjWqAQ/original',
layers: [GAODE_TILE_MAP_URL, GOOGLE_TILE_MAP_ROUTER_URL],
},
];

const officeLayerGroup = useMemo(() => {
Expand Down Expand Up @@ -103,7 +121,7 @@ export function OfficialLayerControl() {
if (isEdit) {
const cloneCustomTiles = cloneDeep(customTiles);
const newImgUrl = Array.isArray(e.img) ? e.img[0].url : `${base64}`;
cloneCustomTiles[editIndex - 2] = {
cloneCustomTiles[editIndex - BASE_LAYER_GROUP.length] = {
id: e.name,
image: newImgUrl,
title: e.name,
Expand Down Expand Up @@ -173,23 +191,6 @@ export function OfficialLayerControl() {
return Promise.resolve();
};

const uploadValidateSpace = (_: any, value: any) => {
const reject = Promise.reject(t('official_layer_control.index.shangchuan'));
if (value.fileList) {
if (!value.fileList.length) {
return reject;
} else {
return Promise.resolve();
}
} else {
if (!value.length) {
return reject;
} else {
return Promise.resolve();
}
}
};

const handleChange: UploadProps['onChange'] = (info) => {
let newFileList = [...info.fileList];
newFileList = newFileList.slice(-2);
Expand All @@ -214,7 +215,7 @@ export function OfficialLayerControl() {
zIndex={1}
id={
findItem.id === OfficeLayerEnum.GoogleSatellite &&
item === GOOGLE_TILE_MAP_URL
item === CN_GOOGLE_TILE_MAP_URL
? 'googleTileMap'
: undefined
}
Expand All @@ -241,9 +242,9 @@ export function OfficialLayerControl() {
}}
>
<CaretRightOutlined
style={{
transform: hideOfficeLayer ? 'rotate(-180deg)' : undefined,
}}
style={
hideOfficeLayer ? { transform: 'rotate(-180deg)' } : undefined
}
/>
</div>
{hideOfficeLayer && (
Expand All @@ -263,58 +264,58 @@ export function OfficialLayerControl() {
onItemClick(item);
}}
>
{index > 1 && (
<Popconfirm
title={t('official_layer_control.index.shanChuDiTu')}
onConfirm={(e) => onConfirm(e, item)}
onCancel={(
e: React.MouseEvent<HTMLElement> | undefined,
) => {
e?.stopPropagation();
}}
>
{index >= BASE_LAYER_GROUP.length && (
<>
<Popconfirm
title={t('official_layer_control.index.shanChuDiTu')}
onConfirm={(e) => onConfirm(e, item)}
onCancel={(
e: React.MouseEvent<HTMLElement> | undefined,
) => {
e?.stopPropagation();
}}
>
<div
className={'item-clear'}
onClick={(e) => {
e.stopPropagation();
}}
>
<DeleteOutlined />
</div>
</Popconfirm>
<div
className={'item-clear'}
className={'item-edit'}
onClick={(e) => {
setEditIndex(index);
e.stopPropagation();
}}
>
<DeleteOutlined />
</div>
</Popconfirm>
)}
{index > 1 && (
<div
className={'item-edit'}
onClick={(e) => {
setEditIndex(index);
e.stopPropagation();
setIsEdit(true);
setIsModalOpen(true);
setFileList([
{
uid: '-1',
name: `${item.title}`,
status: 'done',
url: item.image,
},
]);
form.setFieldsValue({
name: item.title,
urls: item.layers,
img: [
setIsEdit(true);
setIsModalOpen(true);
setFileList([
{
uid: '-1',
name: `${item.title}`,
status: 'done',
url: item.image,
},
],
});
}}
>
<FormOutlined />
</div>
]);
form.setFieldsValue({
name: item.title,
urls: item.layers,
img: [
{
uid: '-1',
name: `${item.title}`,
status: 'done',
url: item.image,
},
],
});
}}
>
<FormOutlined />
</div>
</>
)}
<img
src={item.image}
Expand Down Expand Up @@ -372,7 +373,6 @@ export function OfficialLayerControl() {
{...(locale === 'zh-CN' ? layout : enLayout)}
name="img"
label={t('official_layer_control.index.shiLiTuPian')}
rules={[{ required: true, validator: uploadValidateSpace }]}
>
<Upload
beforeUpload={handleBeforeUpload}
Expand Down Expand Up @@ -426,7 +426,7 @@ export function OfficialLayerControl() {
}}
>
<Input
placeholder={GOOGLE_TILE_MAP_URL}
placeholder={CN_GOOGLE_TILE_MAP_URL}
style={{
width: 390,
}}
Expand Down Expand Up @@ -458,7 +458,7 @@ export function OfficialLayerControl() {
</Form>
</Modal>
</CustomControl>
<div>{rasterLayer}</div>
<>{rasterLayer}</>
</>
);
}
12 changes: 10 additions & 2 deletions src/constants/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,21 @@ export const GaodeConfig = {

export const LayerZIndex = 100;

export const CN_GOOGLE_TILE_MAP_URL =
'https://gwxc.shipxy.com/tile.g?z={z}&x={x}&y={y}';

export const GOOGLE_TILE_MAP_URL =
'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&gl=CN&x={x}&y={y}&z={z}';
'http://mt0.google.com/vt/lyrs=s&gl=CN&x={x}&y={y}&z={z}';

export const GOOGLE_TILE_MAP_ROUTER_URL =
'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=h&gl=CN&x={x}&y={y}&z={z}';
'http://mt0.google.com/vt/lyrs=h&gl=CN&x={x}&y={y}&z={z}';

export const GAODE_TILE_MAP_URL =
'http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}';

export enum OfficeLayerEnum {
GoogleSatellite = 'googleSatellite',
Google = 'Google',
VectorMap = 'vectorMap',
Gaode = 'Gaode',
}
2 changes: 2 additions & 0 deletions src/locales/langs/en-US.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,8 @@ export default {
'location_search_control.location_search.qingShuRuYaoSou':
'Please enter a place name to search',
'official_layer_control.index.guGeWeiXingTu': 'Google Remote Sensing Maps',
'official_layer_control.index.guGeWeiXingTuFanQiang': 'Google satellite map (need to climb over the wall)',
'official_layer_control.index.gaoDeWeiXingTu': 'Gaud satellite map',
'official_layer_control.index.shiLiangDiTu': 'Vector Map',
'save_map_options_control.index.baoCunDiTuZhuang': 'Save Map Status',
'save_map_options_control.index.diTuZhuangTaiBao':
Expand Down
2 changes: 2 additions & 0 deletions src/locales/langs/zh-CN.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,8 @@ export default {
'location_search_control.index.tianJiaZhiShuJu': '添加至数据',
'location_search_control.location_search.qingShuRuYaoSou': '请输入要搜索地名',
'official_layer_control.index.guGeWeiXingTu': '谷歌卫星地图',
'official_layer_control.index.guGeWeiXingTuFanQiang': '谷歌卫星地图（需翻墙）',
'official_layer_control.index.gaoDeWeiXingTu': '高德卫星地图',
'official_layer_control.index.shiLiangDiTu': '矢量地图',
'save_map_options_control.index.baoCunDiTuZhuang': '保存地图状态',
'save_map_options_control.index.diTuZhuangTaiBao': '地图状态保存成功 ',
Expand Down

0 comments on commit 7b211c2

Please sign in to comment.