feat: 添加腾讯和百度底图

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();
     }

src/components/app-header/index.tsx

@@ -294,7 +294,7 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ toolbar }) => {
             <Dropdown
               menu={{
                 items: DropdownMenuItems,
-                onClick: ({ key }) => {
+                onClick: ({ key }: any) => {
                   onDownload(key);
                 },
               }}

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<AppMapProps> = ({ 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]);

src/components/map-content/index.tsx

@@ -67,6 +67,7 @@ export const MapContent: React.FC<MapContentProps> = ({
           options={[
             { label: 'GCJ02', value: 'GCJ02' },
             { label: 'WGS84', value: 'WGS84' },
+            { label: 'BD09', value: 'BD09' },
           ]}
           onChange={setCoordConvert}
         />

src/components/map-control-group/index.tsx

@@ -89,7 +89,8 @@ export const MapControlGroup: React.FC<MapControlGroupProps> = ({
       {baseMap === 'Gaode' && isControlGroupState.officialLayerControl && (
         <OfficialLayerControl />
       )}
-      {isControlGroupState.mapThemeControl && <MapThemeControl />}
+      {isControlGroupState.mapThemeControl &&
+        (baseMap === 'Gaode' || baseMap === 'Mapbox') && <MapThemeControl />}
       {isControlGroupState.geoLocateControl && (
         <GeoLocateControl position="topleft" className={styles.fullScreen} />
       )}

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 =

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',

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': '划入',

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)],
 });

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,14 +162,36 @@ 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));
         });
       } else if (coordConvert === 'GCJ02' && baseMap === 'Mapbox') {
         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;
     },

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;
+};