feat: 升级react-amap并修改对应代码

.gitignore

@@ -38,3 +38,4 @@ screenshot
 .eslintcache
 
 build
+*.less.d.ts

config/config.ts

@@ -37,6 +37,7 @@ export default defineConfig({
   theme: {
     'primary-color': defaultSettings.primaryColor,
   },
+  cssModulesTypescriptLoader: {},
   ignoreMomentLocale: true,
   // proxy: proxy[REACT_APP_ENV || 'dev'],
 })

package.json

@@ -20,26 +20,26 @@
   },
   "dependencies": {
     "@alitajs/antd-plus": "^2.5.0",
-    "@ant-design/icons": "^4.5.0",
-    "@ant-design/pro-card": "^1.10.6",
-    "@ant-design/pro-layout": "^6.15.0",
-    "@ant-design/pro-table": "^2.30.4",
-    "@formily/antd": "^1.3.12",
-    "@formily/antd-components": "^1.3.12",
+    "@ant-design/icons": "^4.6.2",
+    "@ant-design/pro-card": "^1.11.6",
+    "@ant-design/pro-layout": "^6.16.0",
+    "@ant-design/pro-table": "^2.32.1",
+    "@formily/antd": "^1.3.13",
+    "@formily/antd-components": "^1.3.13",
     "@pansy/hooks": "^2.3.0",
     "@pansy/policy": "^0.5.0",
-    "@pansy/react-amap": "1.0.0-beta.2",
+    "@pansy/react-amap": "1.0.5",
     "@pansy/react-charts": "^1.0.0",
     "@pansy/react-watermark": "^2.1.0",
-    "antd": "^4.13.1",
+    "antd": "^4.15.0",
     "classnames": "^2.2.6",
     "moment": "^2.29.1",
     "numeral": "^2.0.6",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-helmet-async": "^1.0.9",
-    "styled-components": "^5.2.1",
-    "umi": "^3.4.0",
+    "styled-components": "^5.2.2",
+    "umi": "^3.4.7",
     "umi-request": "^1.3.5",
     "use-merge-value": "^1.0.2"
   },
@@ -50,7 +50,7 @@
     "@types/classnames": "^2.2.11",
     "@types/numeral": "^2.0.1",
     "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
+    "@types/react-dom": "^17.0.3",
     "@types/styled-components": "^5.1.7",
     "@walrus/cli": "^1.3.4",
     "@walrus/plugin-release": "^1.12.1",

src/pages/libraries/amap/components/cluster/index.less

@@ -0,0 +1,13 @@
+.markers {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  border: solid 4px #fff;
+  cursor: pointer;
+  background: #217ad9;
+}

src/pages/libraries/amap/components/cluster/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ClusterComponentProps } from '@pansy/react-amap/es/markers';
+import styles from './index.less';
+
+export const Cluster: React.FC<ClusterComponentProps> = ({ count }) => {
+  return (
+    <div className={styles.markers}>
+      {count}
+    </div>
+  );
+};

src/pages/libraries/amap/components/index.tsx

@@ -1 +1,2 @@
-export { default as Marker } from './marker';
+export { Marker } from './marker';
+export { Cluster } from './cluster';

src/pages/libraries/amap/components/marker/index.tsx

@@ -4,12 +4,10 @@ import ShopOutlined from '@ant-design/icons/ShopOutlined';
 import styles from './index.less';
 
 // 聚合标记点
-const Marker: React.FC = () => {
+export const Marker: React.FC = () => {
   return (
     <div className={styles.marker}>
       <ShopOutlined />
     </div>
   );
 };
-
-export default Marker;

src/pages/libraries/amap/index.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Map, Markers, ToolBar } from '@pansy/react-amap';
-import { Marker } from './components';
+import { Map, Markers, ControlBar } from '@pansy/react-amap';
+import { MarkersProps } from '@pansy/react-amap/es/markers';
+import { Marker, Cluster } from './components';
 import './styles.less';
 
 const randomMarker = (len: number) => (
@@ -14,18 +15,18 @@ const randomMarker = (len: number) => (
 );
 
 const MapComponent: React.FC = () => {
-  const [markers] = useState(randomMarker(100));
+  const [markers] = useState<MarkersProps['markers']>(randomMarker(100));
 
   return (
     <PageContainer>
       <div style={{ width: '100%', height: 800 }}>
         <Map zoom={5}>
-          <ToolBar liteStyle offset={[10, 95]} />
+          <ControlBar position={{ right: '10px', bottom: '10px' }} />
           <Markers
             markers={markers}
             useCluster={{
-              renderClusterMarker: ({ count, marker }) => {
-                return marker.setContent(`<div class="map-markers">${count}</div>`);
+              render: () => {
+                return <Cluster />
               }
             }}
             render={() => <Marker />}