feat: 替换了高德 jsapi 的类型声明库

不再使用官方的类型声明库

ts 环境下使用 amapPolygonPath2GeoJSONCoords 时，输入输出类型变更

README.md

@@ -62,20 +62,17 @@ https://cdn.jsdelivr.net/npm/amap-react-components@0.0.1/dist/amap-react-compone
 
 ### Typescript
 
-安装官方的 jsapi 的 ts 声明
+安装 jsapi 的 ts 声明
 
 ```shell
-npm install @amap/amap-jsapi-types
+npm install amap-jsapi-v2-types -D
 ```
 
-由于官方 ts 声明存在声明错误、缺漏，以及缺少 AMapUI 相关接口声明等问题，
-本项目在官方声明上对接口声明做了改动。
+由于官方 ts 声明存在声明错误、缺漏，以及缺少 AMapUI 相关接口声明，甚至官方文档存在错误等问题
 
-因此，需要将此[声明文件](./src/@types/AMap.d.ts) 复制进您的项目。
-当使用了本项目暂时不支持的组件，您需要自定义组件时，可以在您的项目自行维护。
+自定义组件时，可以参考[此文件](https://github.com/xyy94813/amap-react-components/blob/main/src/%40types/AMap.d.ts) 对其类型扩展
 
-> 如过，有人知道如何将这部分声明文件在构建时一同打包进最终的输出中，麻烦告知我。
-> 如果能看到您的 PR 那就更好了。
+并及时给 `amap-jsapi-v2-types` 提 PR。
 
 ### Polyfill
 

package.json

@@ -39,7 +39,6 @@
     "react-dom": ">16.8"
   },
   "devDependencies": {
-    "@amap/amap-jsapi-types": "0.0.13",
     "@babel/core": "^7.23.0",
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
@@ -56,6 +55,7 @@
     "@types/geojson": "^7946.0.7",
     "@types/jest": "^26.0.3",
     "@types/react-dom": "^16.9.8",
+    "amap-jsapi-v2-types": "^1.0.0",
     "babel-loader": "^8.1.0",
     "dotenv-load": "^2.0.0",
     "eslint": "^7.32.0",

src/@types/AMap.d.ts

@@ -1,122 +1,11 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable max-classes-per-file */
-import '@amap/amap-jsapi-types';
-// 对 amap type 做扩展
-declare global {
-  namespace AMap {
-    export interface ControlBarConfig extends AMap.ControlConfig {
-      showControlButton?: boolean;
-    }
-    export class ControlBar extends AMap.Control {
-      constructor(conf?: ControlBarConfig);
-
-      _config: ControlBarConfig;
-
-      _pitchUp: HTMLDivElement;
-
-      _pitchDown: HTMLDivElement;
-
-      _rotateLeft: HTMLDivElement;
-
-      _rotateRight: HTMLDivElement;
-
-      _compass: HTMLDivElement;
-
-      _luopan: HTMLDivElement;
-    }
-
-    export interface ToolBarConfig extends AMap.ControlConfig {}
-
-    export class ToolBar extends AMap.Control {
-      constructor(conf?: ToolBarConfig);
-    }
-
-    export interface ScaleConfig extends AMap.ControlConfig {}
-
-    export class Scale extends AMap.Control {
-      constructor(conf?: ScaleConfig);
-    }
-
-    export interface HawkEyeOptions {
-      autoMove?: boolean; // 是否随主图视口变化移动
-      showRectangle?: boolean; // 是否显示视口矩形
-      showButton?: boolean; // 是否显示打开关闭的按钮
-      isOpen?: boolean; // 默认是否展开
-      mapStyle?: string; // 缩略图要显示的地图自定义样式，如'amap://styles/dark'
-      // layers: array; // 缩略图要显示的图层类型，默认为普通矢量地图
-      width?: string; // 缩略图的宽度，同CSS，如'200px'
-      height?: string; // 缩略图的高度，同CSS，如'200px'
-      offset?: [number, number]; // 缩略图距离地图右下角的像素距离，如 [2,2]
-      borderStyle?: string; // 缩略图的边框样式，同CSS，如"double solid solid double"
-      borderColor?: string; // 缩略图的高度，同CSS，如'silver'
-      borderRadius?: string; // 缩略图的高度，同CSS，如'5px'
-      borderWidth?: string; // 缩略图的高度，同CSS，如'2px'
-      buttonSize?: string; // 箭头按钮的像素尺寸，同CSS，如'12px'
-    }
-
-    export class HawkEye extends AMap.Control {
-      constructor(options?: HawkEyeOptions);
-      open(): void;
-      close(): void;
-    }
-
-    export interface GeoJSONGetOverlayCallBack {
-      (
-        geojson?: GeoJSON.GeoJSON,
-        lnglat?: GeoJSON.Position[] | GeoJSON.Position[][] | GeoJSON.Position[][][]
-      ): any;
-    }
-
-    export interface GeoJSONOptions {
-      geoJSON?: GeoJSON.GeoJSON | null;
-      getMarker?: GeoJSONGetOverlayCallBack;
-      getPolyline?: GeoJSONGetOverlayCallBack;
-      getPolygon?: GeoJSONGetOverlayCallBack;
-    }
-
-    export class GeoJSON extends OverlayGroup {
-      constructor(options: GeoJSONOptions);
-
-      importData: (data: GeoJSON.GeoJSON) => {};
-
-      toGeoJSON: () => GeoJSON.GeoJSON;
-    }
-
-    export type MapTypeLayerInfo = {
-      id: string;
-      enable: string;
-      name: string;
-      type: 'base' | 'overlay';
-      // layer: AMap.Layer;
-      layer: any; // AMap.Layer 未暴露出来;
-      show: boolean;
-    };
-
-    export type MapTypeOptions = {
-      defaultType?: number;
-      showTraffic?: boolean;
-      showRoad?: boolean;
-    };
-
-    export class MapType {
-      constructor(options?: MapTypeOptions);
-
-      addLayer: (layerInfo: MapTypeLayerInfo) => void;
-
-      removeLayer: (id: string) => void;
-
-      addTo: (map: AMap.Map) => void;
-
-      show: () => void;
-
-      hide: () => void;
-
-      remove: () => void;
-    }
-
-    // export class PolylineEditor2 extends _PolylineEditor {}
-  }
+// import '@amap/amap-jsapi-types';
+import 'amap-jsapi-v2-types';
 
+declare global {
+  namespace AMap {}
+  // 对 amap type 做扩展
   namespace AMapUI {
     export type SimpleMarkerOptions = Omit<AMap.MarkerOptions, 'content'> & {
       iconTheme?: string;

src/components/AMapGeoJSON/interface.ts

@@ -11,5 +11,5 @@ export type AMapGeoJSONProps = AMap.GeoJSONOptions & {
   getPolygon?: AMapGeoJSONGetOverlayCallback;
   getPolyline?: AMapGeoJSONGetOverlayCallback;
   visible?: boolean;
-  options?: AMap.PolygonSharedOptions;
+  options?: Parameters<AMap.OverlayGroup['setOptions']>[0];
 };

src/components/AMapMap/AMapMap.tsx

@@ -19,7 +19,7 @@ const CONTAINER_STYLE = { width: '100%', height: '100%' };
 
 const defaultProps = {
   // eslint-disable-next-line react/default-props-match-prop-types
-  viewMode: '2D',
+  viewMode: '2D' as AMap.MapOptions['viewMode'],
   // eslint-disable-next-line react/default-props-match-prop-types
   features: ['bg', 'point', 'road', 'building'],
 };
@@ -58,7 +58,7 @@ const AMapMap = forwardRef<any, PropsWithChildren<AMapMapProps>>(
             if (p === 'add') {
               const newAddFunc: typeof target.add = (overlays) => {
                 const result = target.add(overlays);
-                newInstance.emit('overlaysAdded' as AMap.EventType, overlays);
+                newInstance.emit('overlaysAdded', overlays);
                 return result;
               };
               return newAddFunc;
@@ -67,7 +67,7 @@ const AMapMap = forwardRef<any, PropsWithChildren<AMapMapProps>>(
             if (p === 'remove') {
               const newRemoveFunc: typeof target.remove = (overlays) => {
                 const result = target.remove(overlays);
-                newInstance.emit('overlaysRemoved' as AMap.EventType, overlays);
+                newInstance.emit('overlaysRemoved', overlays);
                 return result;
               };
               return newRemoveFunc;
@@ -105,7 +105,7 @@ const AMapMap = forwardRef<any, PropsWithChildren<AMapMapProps>>(
     // set city
     useEffect(() => {
       if (cityName) {
-        curMap?.setCity(cityName, () => {});
+        curMap?.setCity(cityName);
       }
     }, [cityName, curMap]);
 

src/components/AMapMap/__tests__/AMapMap.test.tsx

@@ -69,7 +69,7 @@ describe('AMapMap', () => {
 
   test('set city name', () => {
     render(<AMapMap cityName="深圳" />);
-    expect(mockMapInstance.setCity).toBeCalledWith('深圳', expect.any(Function));
+    expect(mockMapInstance.setCity).toBeCalledWith('深圳');
   });
 
   test('set zoom', () => {

src/components/AMapMarker/__tests__/AMapMarker.test.tsx

@@ -75,7 +75,7 @@ describe('AMapMarker Component', () => {
       offset: [0, 10],
       direction: 'center',
     };
-    render(<AMapMarker position={mockPosition} label={label} />);
+    render(<AMapMarker position={mockPosition} label={label as AMap.MarkerOptions['label']} />);
 
     expect(mockInstance.setLabel).toHaveBeenCalledWith(label);
   });

src/components/AMapMarker/interface.ts

@@ -1,27 +1,36 @@
 export type AMapMarkerProps = AMap.MarkerOptions & {
-  position: AMap.Vector2;
-  anchor?: 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+  position: AMap.LngLatLike;
+  anchor?:
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'middle-left'
+  | 'center'
+  | 'middle-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
   //
   visible?: boolean;
   // isTop?: boolean;
   //
   onHide?: (event?: any) => void;
   onShow?: (event?: any) => void;
-  onClick?: (event?: any) => void
-  onDBLClick?: (event?: any) => void
-  onRightClick?: (event?: any) => void
-  onMousemove?: (event?: any) => void
-  onMousedown?: (event?: any) => void
-  onMouseup?: (event?: any) => void
-  onMouseover?: (event?: any) => void
-  onMouseout?: (event?: any) => void
-  onTouchstart?: (event?: any) => void
-  onTouchmove?: (event?: any) => void
-  onTouchend?: (event?: any) => void
-  onDragstart?: (event?: any) => void
-  onDragging?: (event?: any) => void
-  onDragend?: (event?: any) => void
-  onMoving?: (event?: any) => void
-  onMoveEnd?: (event?: any) => void
-  onMoveAlong?: (event?: any) => void
+  onClick?: (event?: any) => void;
+  onDBLClick?: (event?: any) => void;
+  onRightClick?: (event?: any) => void;
+  onMousemove?: (event?: any) => void;
+  onMousedown?: (event?: any) => void;
+  onMouseup?: (event?: any) => void;
+  onMouseover?: (event?: any) => void;
+  onMouseout?: (event?: any) => void;
+  onTouchstart?: (event?: any) => void;
+  onTouchmove?: (event?: any) => void;
+  onTouchend?: (event?: any) => void;
+  onDragstart?: (event?: any) => void;
+  onDragging?: (event?: any) => void;
+  onDragend?: (event?: any) => void;
+  onMoving?: (event?: any) => void;
+  onMoveEnd?: (event?: any) => void;
+  onMoveAlong?: (event?: any) => void;
 };

src/components/AMapOverlayGroup/interface.ts

@@ -1,5 +1,5 @@
 export type AMapOverlayGroupProps = {
-  options?: AMap.PolygonSharedOptions;
+  options?: Parameters<AMap.OverlayGroup['setOptions']>[0];
   visible?: Boolean;
   onShow?: (event?: any) => void;
   onHide?: (event?: any) => void;