diff --git a/src/components/app-header/base-map/index.tsx b/src/components/app-header/base-map/index.tsx index 1a3fa41..4f7a098 100644 --- a/src/components/app-header/base-map/index.tsx +++ b/src/components/app-header/base-map/index.tsx @@ -27,15 +27,25 @@ export const BaseMap = () => { label: 'Mapbox', value: 'Mapbox', }, + { + img: 'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*YKJtR5vfbtIAAAAAAAAAAAAADjWqAQ/original', + label: t('btn.setting_btn.tencent'), + value: 'Tencent', + }, + { + img: 'https://mdn.alipayobjects.com/huamei_k6sfo0/afts/img/A*kRvdTLte60cAAAAAAAAAAAAADjWqAQ/original', + label: t('btn.setting_btn.baidu'), + value: 'Baidu', + }, ]; - const handleChange = (e: 'Gaode' | 'Mapbox') => { + const handleChange = (e: 'Gaode' | 'Mapbox' | 'Baidu' | 'Tencent') => { setBaseMap(e); setMapOptions({ ...mapOptions, style: theme === 'dark' ? 'dark' : 'normal', }); - setCoordConvert(e === 'Gaode' ? 'GCJ02' : 'WGS84'); + setCoordConvert(e === 'Gaode' ? 'GCJ02' : e === 'Baidu' ? 'BD09' : 'WGS84'); if (e !== baseMap) { location.reload(); } diff --git a/src/components/app-header/index.tsx b/src/components/app-header/index.tsx index b113abf..7f516e6 100644 --- a/src/components/app-header/index.tsx +++ b/src/components/app-header/index.tsx @@ -294,7 +294,7 @@ export const AppHeader: React.FC = ({ toolbar }) => { { + onClick: ({ key }: any) => { onDownload(key); }, }} diff --git a/src/components/app-map/index.tsx b/src/components/app-map/index.tsx index e900490..0c9b007 100644 --- a/src/components/app-map/index.tsx +++ b/src/components/app-map/index.tsx @@ -4,7 +4,7 @@ import { message } from 'antd'; import type { ReactNode } from 'react'; import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { GaodeConfig, MapBoxConfig } from '../../constants'; +import { BaiduConfig, GaodeConfig, MapBoxConfig } from '../../constants'; import { useFeature, useGlobal } from '../../recoil'; import { getParamsNew, getUrlFeatureCollection } from '../../utils'; import { prettierText } from '../../utils/prettier-text'; @@ -35,14 +35,16 @@ export const AppMap: React.FC = ({ children }) => { }); const mapOptions = useMemo(() => { - if (baseMap === 'Mapbox') { - return { - ...MapBoxConfig, - ...baseMapOptions, - }; - } + const mapConfigMapping = { + Mapbox: MapBoxConfig, + Baidu: BaiduConfig, + Tencent: {}, + } as any; + + const config = mapConfigMapping[baseMap] || GaodeConfig; + return { - ...GaodeConfig, + ...config, ...baseMapOptions, }; }, [baseMap, baseMapOptions]); diff --git a/src/components/map-content/index.tsx b/src/components/map-content/index.tsx index 5f2d0f4..d22c280 100644 --- a/src/components/map-content/index.tsx +++ b/src/components/map-content/index.tsx @@ -67,6 +67,7 @@ export const MapContent: React.FC = ({ options={[ { label: 'GCJ02', value: 'GCJ02' }, { label: 'WGS84', value: 'WGS84' }, + { label: 'BD09', value: 'BD09' }, ]} onChange={setCoordConvert} /> diff --git a/src/components/map-control-group/index.tsx b/src/components/map-control-group/index.tsx index 02ccf7b..be8e6ff 100644 --- a/src/components/map-control-group/index.tsx +++ b/src/components/map-control-group/index.tsx @@ -89,7 +89,8 @@ export const MapControlGroup: React.FC = ({ {baseMap === 'Gaode' && isControlGroupState.officialLayerControl && ( )} - {isControlGroupState.mapThemeControl && } + {isControlGroupState.mapThemeControl && + (baseMap === 'Gaode' || baseMap === 'Mapbox') && } {isControlGroupState.geoLocateControl && ( )} diff --git a/src/constants/index.ts b/src/constants/index.ts index fb1f2f8..e6d05ba 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -58,6 +58,11 @@ export const GaodeConfig = { }, }; +export const BaiduConfig = { + token: '2TVUvWQGt8J3HwJpkZ4qVLYBVpxzudTa', +}; + + export const LayerZIndex = 100; export const GOOGLE_TILE_MAP_URL = diff --git a/src/locales/langs/en-US.ts b/src/locales/langs/en-US.ts index 2e2eb74..b28653f 100644 --- a/src/locales/langs/en-US.ts +++ b/src/locales/langs/en-US.ts @@ -6,6 +6,8 @@ export default { 'btn.setting_btn.kaiQi': 'Open', 'btn.setting_btn.shiFouZhanShiYuan': 'Display serial number on layer', 'btn.setting_btn.gaoDe': 'Gaode', + 'btn.setting_btn.tencent': 'Tencent', + 'btn.setting_btn.baidu': 'Baidu', 'btn.setting_btn.diTuDiTuQie': 'Switch base map', 'btn.setting_btn.ziDongSuoFangZhi': 'Auto zoom to all elements visible', 'btn.setting_btn.huaRu': 'Mouse on', diff --git a/src/locales/langs/zh-CN.ts b/src/locales/langs/zh-CN.ts index 7d1eee4..9ec9ff2 100644 --- a/src/locales/langs/zh-CN.ts +++ b/src/locales/langs/zh-CN.ts @@ -6,6 +6,8 @@ export default { 'btn.setting_btn.kaiQi': '开启', 'btn.setting_btn.shiFouZhanShiYuan': '是否展示元素序号', 'btn.setting_btn.gaoDe': '高德', + 'btn.setting_btn.tencent': '腾讯', + 'btn.setting_btn.baidu': '百度', 'btn.setting_btn.diTuDiTuQie': '地图底图切换', 'btn.setting_btn.ziDongSuoFangZhi': '自动缩放至所有元素可见', 'btn.setting_btn.huaRu': '划入', diff --git a/src/recoil/atomState.ts b/src/recoil/atomState.ts index c97b040..14ea81b 100644 --- a/src/recoil/atomState.ts +++ b/src/recoil/atomState.ts @@ -126,7 +126,7 @@ const popupTriggerState = atom<'click' | 'hover'>({ effects: [localStorageEffect(LocalStorageKey.PopupTrigger)], }); -const baseMapState = atom<'Gaode' | 'Mapbox'>({ +const baseMapState = atom<'Gaode' | 'Mapbox' | 'Baidu' | 'Tencent'>({ key: 'baseMap', effects: [localStorageEffect(LocalStorageKey.BaseMap)], }); diff --git a/src/recoil/feature.ts b/src/recoil/feature.ts index 19db9d7..a418350 100644 --- a/src/recoil/feature.ts +++ b/src/recoil/feature.ts @@ -9,7 +9,15 @@ import { useTranslation } from 'react-i18next'; import { useRecoilState } from 'recoil'; import { FeatureKey } from '../constants'; import type { FilterField, IFeatures } from '../types'; -import { gcj02towgs84, transformFeatures, wgs84togcj02 } from '../utils'; +import { + bd09togcj02, + bd09towgs84, + gcj02tobd09, + gcj02towgs84, + transformFeatures, + wgs84tobd09, + wgs84togcj02, +} from '../utils'; import { prettierText } from '../utils/prettier-text'; import { editorTextState, @@ -154,7 +162,10 @@ export default function useFeature() { const revertCoord = useCallback( (newFeatures: Feature[]) => { let data = [...newFeatures]; - if (coordConvert === 'WGS84' && baseMap === 'Gaode') { + if ( + coordConvert === 'WGS84' && + (baseMap === 'Gaode' || baseMap === 'Tencent') + ) { data = data.map((item) => { return gcj02towgs84(cloneDeep(item)); }); @@ -162,6 +173,25 @@ export default function useFeature() { data = data.map((item) => { return wgs84togcj02(cloneDeep(item)); }); + } else if (coordConvert === 'GCJ02' && baseMap === 'Baidu') { + data = data.map((item) => { + return bd09togcj02(cloneDeep(item)); + }); + } else if (coordConvert === 'WGS84' && baseMap === 'Baidu') { + data = data.map((item) => { + return bd09towgs84(cloneDeep(item)); + }); + } else if ( + coordConvert === 'BD09' && + (baseMap === 'Gaode' || baseMap === 'Tencent') + ) { + data = data.map((item) => { + return gcj02tobd09(cloneDeep(item)); + }); + } else if (coordConvert === 'BD09' && baseMap === 'Mapbox') { + data = data.map((item) => { + return wgs84tobd09(cloneDeep(item)); + }); } return data; }, diff --git a/src/utils/gcoord.ts b/src/utils/gcoord.ts index e369824..7cd03db 100644 --- a/src/utils/gcoord.ts +++ b/src/utils/gcoord.ts @@ -16,3 +16,35 @@ export const gcj02towgs84 = (feature: Feature) => { // @ts-ignore return gcoord.transform(feature, gcoord.GCJ02, gcoord.WGS84) as Feature; }; + +export const gcj02tobd09 = (feature: Feature) => { + if (feature.geometry.type.match(/polygon/i)) { + feature.geometry = JSON.parse(JSON.stringify(feature.geometry)); + } + // @ts-ignore + return gcoord.transform(feature, gcoord.GCJ02, gcoord.BD09) as Feature; +}; + +export const bd09togcj02 = (feature: Feature) => { + if (feature.geometry.type.match(/polygon/i)) { + feature.geometry = JSON.parse(JSON.stringify(feature.geometry)); + } + // @ts-ignore + return gcoord.transform(feature, gcoord.BD09, gcoord.GCJ02) as Feature; +}; + +export const wgs84tobd09 = (feature: Feature) => { + if (feature.geometry.type.match(/polygon/i)) { + feature.geometry = JSON.parse(JSON.stringify(feature.geometry)); + } + // @ts-ignore + return gcoord.transform(feature, gcoord.WGS84, gcoord.BD09) as Feature; +}; + +export const bd09towgs84 = (feature: Feature) => { + if (feature.geometry.type.match(/polygon/i)) { + feature.geometry = JSON.parse(JSON.stringify(feature.geometry)); + } + // @ts-ignore + return gcoord.transform(feature, gcoord.BD09, gcoord.WGS84) as Feature; +};