fix: 修复AMap组件-轨迹回放销毁问题

config/proxy.ts

@@ -9,8 +9,8 @@
 export default {
   dev: {
     '/jetlinks': {
-      // target: 'http://192.168.32.8:8844/',
-      // ws: 'ws://192.168.32.8:8844/',
+      // target: 'http://192.168.32.44:8844/',
+      // ws: 'ws://192.168.32.44:8844/',
       target: 'http://120.79.18.123:8844/',
       ws: 'ws://120.79.18.123:8844/',
       // target: 'http://192.168.66.5:8844/',

src/components/AMapComponent/PathSimplifier/PathNavigator.tsx

@@ -86,6 +86,7 @@ export default (props: PathNavigatorProps) => {
     return () => {
       if (PathNavigatorRef.current) {
         removeEvent();
+        PathNavigatorRef.current.destroy();
       }
     };
   }, []);

src/components/AMapComponent/PathSimplifier/index.tsx

@@ -71,12 +71,29 @@ const PathSimplifier = (props: PathSimplifierProps) => {
     });
   };
 
+  const clear = () => {
+    if (pathSimplifierRef.current) {
+      setLoading(false);
+      pathSimplifierRef.current!.clearPathNavigators();
+      pathSimplifierRef.current?.setData([]);
+      props.__map__.remove(pathSimplifierRef.current);
+    }
+  };
+
   useEffect(() => {
-    if (pathSimplifierRef.current && props.pathData) {
-      pathSimplifierRef.current?.setData(
-        props.pathData.map((item) => ({ name: item.name || '路线', path: item.path })),
-      );
-      setLoading(true);
+    if (pathSimplifierRef.current) {
+      if (props.pathData && props.pathData.length) {
+        setLoading(false);
+        setTimeout(() => {
+          pathSimplifierRef.current?.setData(
+            props.pathData!.map((item) => ({ name: item.name || '路线', path: item.path })),
+          );
+          setLoading(true);
+        }, 10);
+      } else {
+        setLoading(false);
+        pathSimplifierRef.current.setData([]);
+      }
     }
   }, [props.pathData]);
 
@@ -86,6 +103,14 @@ const PathSimplifier = (props: PathSimplifierProps) => {
     }
   }, [__map__]);
 
+  useEffect(() => {
+    return () => {
+      if (props.__map__) {
+        clear();
+      }
+    };
+  }, []);
+
   return <>{loading && renderChildren()}</>;
 };
 

src/components/AMapComponent/hooks/Distance.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+const useDistance = () => {
+  const [distance, setDistance] = useState(0);
+
+  const onDistance = (data: number[][]) => {
+    if (window.AMap && data && data.length > 2) {
+      const pointArr = data.map((point) => new window.AMap.LngLat(point[0], point[1]));
+      const distanceOfLine = AMap.GeometryUtil.distanceOfLine(pointArr);
+      setDistance(Math.round(distanceOfLine));
+    }
+  };
+
+  return {
+    distance,
+    onDistance,
+  };
+};
+
+export default useDistance;

src/pages/demo/AMap/index.tsx

@@ -1,39 +1,47 @@
 import { AMap, PathSimplifier } from '@/components';
 import { usePlaceSearch } from '@/components/AMapComponent/hooks';
 import { Marker } from 'react-amap';
-import { useState } from 'react';
-import { Select } from 'antd';
+import { useEffect, useState } from 'react';
+import { Button, Select } from 'antd';
 import { debounce } from 'lodash';
+import useDistance from '@/components/AMapComponent/hooks/Distance';
 
 export default () => {
-  const [speed] = useState(100000);
+  const { distance, onDistance } = useDistance();
+  const [speed, setSpeed] = useState(100000);
   const [markerCenter, setMarkerCenter] = useState<any>({ longitude: 0, latitude: 0 });
   const [map, setMap] = useState(null);
+  const [show, setShow] = useState(false);
 
   const { data, search } = usePlaceSearch(map);
 
+  const paths = [
+    [116.405289, 39.904987],
+    [113.964458, 40.54664],
+    [111.47836, 41.135964],
+    [108.949297, 41.670904],
+    [106.380111, 42.149509],
+    [103.774185, 42.56996],
+    [101.135432, 42.930601],
+    [98.46826, 43.229964],
+    [95.777529, 43.466798],
+    [93.068486, 43.64009],
+    [90.34669, 43.749086],
+    [87.61792, 43.793308],
+  ];
+
   const onSearch = (value: string) => {
     search(value);
   };
-  console.log(data);
+
+  useEffect(() => {
+    setSpeed((distance / 5) * 3.6);
+  }, [distance]);
 
   const [pathData] = useState([
     {
       name: '线路1',
-      path: [
-        [116.405289, 39.904987],
-        [113.964458, 40.54664],
-        [111.47836, 41.135964],
-        [108.949297, 41.670904],
-        [106.380111, 42.149509],
-        [103.774185, 42.56996],
-        [101.135432, 42.930601],
-        [98.46826, 43.229964],
-        [95.777529, 43.466798],
-        [93.068486, 43.64009],
-        [90.34669, 43.749086],
-        [87.61792, 43.793308],
-      ],
+      path: paths,
     },
   ]);
 
@@ -45,7 +53,9 @@ export default () => {
           height: 500,
           width: '100%',
         }}
-        onInstanceCreated={setMap}
+        onInstanceCreated={(_map) => {
+          setMap(_map);
+        }}
         events={{
           click: (e: any) => {
             setMarkerCenter({
@@ -59,19 +69,24 @@ export default () => {
           // @ts-ignore
           <Marker position={markerCenter} />
         ) : null}
-        <PathSimplifier pathData={pathData}>
-          <PathSimplifier.PathNavigator
-            speed={speed}
-            onCreate={(nav) => {
-              setTimeout(() => {
-                nav.pause();
-              }, 5000);
-              setTimeout(() => {
-                nav.resume(); // 恢复
-              }, 7000);
-            }}
-          />
-        </PathSimplifier>
+        {show && (
+          <PathSimplifier pathData={pathData}>
+            <PathSimplifier.PathNavigator
+              isAuto={false}
+              speed={speed}
+              onCreate={(nav) => {
+                onDistance(paths);
+
+                setTimeout(() => {
+                  nav.start();
+                }, 300);
+                // setTimeout(() => {
+                //   nav.resume(); // 恢复
+                // }, 7000);
+              }}
+            />
+          </PathSimplifier>
+        )}
       </AMap>
       <div style={{ position: 'absolute', top: 0 }}>
         <Select
@@ -84,6 +99,20 @@ export default () => {
             console.log(key, node);
           }}
         />
+        <Button
+          onClick={() => {
+            setShow(false);
+          }}
+        >
+          清除
+        </Button>
+        <Button
+          onClick={() => {
+            setShow(true);
+          }}
+        >
+          显示
+        </Button>
       </div>
     </div>
   );

src/pages/system/Platforms/service.ts

@@ -65,7 +65,7 @@ class Service extends BaseService<platformsType> {
    * 获取可授权的接口ID
    */
   apiOperations = () =>
-    request(`/${SystemConst.API_BASE}//api-client/operations`, { method: 'GET' });
+    request(`/${SystemConst.API_BASE}/api-client/operations`, { method: 'GET' });
 }
 
 export default Service;