fix: fix LabelMarker/polyline/polygon bugs (#282)

* feat:修复 LabelMarker，以便兼容高德地图JS API v1.4.xxx。 * fix:修复细节 * feat:添加Polyline-Editor Poly-Editor组件项目，修改PolyLine、Polygon、PolygonEditor组件内容 * feat:添加MouseTool组件项目,以便支持 MouseTool 插件功能。 * fix:修复一些问题，如 polyline、polygon 的受控 path 属性，还有些 api 的兼容处理 * fix:修复自测过程中遇到的一些问题，readme 中的示例或是一些控制细节
uiwjs · Jan 5, 2023 · aec8380 · aec8380 · vercel · Jan 5, 2023
1 parent b998aa9
commit aec8380
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 28 deletions.
diff --git a/packages/bezier-curve/src/useBezierCurve.tsx b/packages/bezier-curve/src/useBezierCurve.tsx
@@ -15,7 +15,9 @@ export const useBezierCurve = (props = {} as UseBezierCurve) => {
       setBezierCurve(instance);
       return () => {
         if (instance) {
-          map && map.removeLayer(instance);
+          // 暂不使用这个 API，这个不兼容 v1.4.xx，改用 map.remove API
+          // map && map.removeLayer(instance);
+          map && map.remove(instance);
           setBezierCurve(undefined);
         }
       };

diff --git a/packages/circle-marker/src/useCircleMarker.tsx b/packages/circle-marker/src/useCircleMarker.tsx
@@ -16,7 +16,9 @@ export const useCircleMarker = (props = {} as UseCircleMarker) => {
       setCircleMarker(instance);
       return () => {
         if (instance) {
-          map && map.removeLayer(instance);
+          // 暂不使用这个 API，这个不兼容 v1.4.xx，改用 map.remove API
+          // map && map.removeLayer(instance);
+          map && map.remove(instance);
           setCircleMarker(undefined);
         }
       };

diff --git a/packages/context-menu/src/useContextMenu.tsx b/packages/context-menu/src/useContextMenu.tsx
@@ -17,8 +17,8 @@ export const useContextMenu = (props = {} as UseContextMenu) => {
       map.on('rightclick', rightclick);
       return () => {
         if (instance) {
+          instance.close();
           map.off('rightclick', rightclick);
-          map && map.removeLayer(instance);
           setContextMenu(undefined);
         }
       };

diff --git a/packages/ellipse/src/useEllipse.tsx b/packages/ellipse/src/useEllipse.tsx
@@ -16,7 +16,9 @@ export const useEllipse = (props = {} as UseEllipse) => {
       setEllipse(instance);
       return () => {
         if (instance) {
-          map && map.removeLayer(instance);
+          // 暂不使用这个 API，这个不兼容 v1.4.xx，改用 map.remove API
+          // map && map.removeLayer(instance);
+          map && map.remove(instance);
           setEllipse(undefined);
         }
       };

diff --git a/packages/hawk-eye-control/src/useHawkEyeControl.tsx b/packages/hawk-eye-control/src/useHawkEyeControl.tsx
@@ -20,7 +20,7 @@ export function useHawkEyeControl(props = {} as UseHawkEyeControl) {
 
       return () => {
         if (instance && map) {
-          map.removeLayer(instance);
+          map && map.removeControl(instance);
           setHawkEyeControl(undefined);
         }
       };

diff --git a/packages/poly-editor/README.md b/packages/poly-editor/README.md
@@ -37,6 +37,7 @@ const Example = () => {
     [116.402292, 39.892353],
     [116.389846, 39.891365],
   ];
+    const [polygonPath,setPolygonPath]=useState(path);
   return (
     <>
       <button onClick={() => setShow(!show)}>
@@ -49,7 +50,7 @@ const Example = () => {
         <Map zoom={14} center={[116.400274, 39.905812]}>
           <Polygon
             visiable={show}
-            path={path}
+            path={polygonPath}
             strokeColor="#FF33FF"
             strokeWeight={6}
             strokeOpacity={0.2}
@@ -60,7 +61,8 @@ const Example = () => {
             <PolyEditor
               active={active}
               onEnd={(e) => {
-                console.log('onEnd:>>',e)
+                console.log('onEnd:>>',e.target.getPath());
+                setPolygonPath(e.target.getPath())
               }}
               onAdjust={() => {
                 console.log('onAdjust:>>')
@@ -106,6 +108,7 @@ const Example = () => {
     [116.402292, 39.892353],
     [116.389846, 39.891365],
   ];
+  const [polylinePath,setPolylinePath]=useState(path);
   return (
     <>
       <button onClick={() => setShow(!show)}>
@@ -118,7 +121,7 @@ const Example = () => {
         <Map zoom={14} center={[116.400274, 39.905812]}>
           <Polyline
             visiable={show}
-            path={path}
+            path={polylinePath}
             strokeColor="#FF33FF"
             strokeWeight={6}
             strokeOpacity={0.2}
@@ -128,8 +131,9 @@ const Example = () => {
           >
             <PolyEditor
               active={active}
-              onEnd={(e) => {
-                console.log('onEnd:>>',e)
+               onEnd={(e) => {
+                console.log('onEnd:>>',e.target.getPath());
+                setPolylinePath(e.target.getPath())
               }}
               onAdjust={() => {
                 console.log('onAdjust:>>')

diff --git a/packages/poly-editor/src/index.tsx b/packages/poly-editor/src/index.tsx
@@ -29,10 +29,12 @@ export const PolyEditor = forwardRef<PolyEditorProps, PolyEditorProps>((props, r
     }
     if (visiable && !active) {
       polyEditor.close();
+      props.onEnd && props.onEnd({ type: 'end', target: props.polyElement as any });
     } else if (visiable && active) {
       polyEditor.open();
     } else if (!visiable && active) {
       polyEditor.close();
+      props.onEnd && props.onEnd({ type: 'end', target: props.polyElement as any });
     }
   }, [active, visiable]);
 

diff --git a/packages/polygon-editor/README.md b/packages/polygon-editor/README.md
@@ -34,6 +34,8 @@ const Example = () => {
     [116.402292, 39.892353],
     [116.389846, 39.891365],
   ];
+  const [polygonPath,setPolygonPath]=useState(path);
+
   return (
     <>
       <button onClick={() => setShow(!show)}>
@@ -46,7 +48,7 @@ const Example = () => {
         <Map zoom={14} center={[116.400274, 39.905812]}>
           <Polygon
             visiable={show}
-            path={path}
+            path={polygonPath}
             strokeColor="#FF33FF"
             strokeWeight={6}
             strokeOpacity={0.2}
@@ -56,8 +58,9 @@ const Example = () => {
           >
             <PolygonEditor
               active={active}
-              onEnd={() => {
-                console.log('onEnd:>>')
+              onEnd={(e) => {
+                console.log('onEnd:>>',e.target.getPath());
+                setPolygonPath(e.target.getPath())
               }}
               onAdjust={() => {
                 console.log('onAdjust:>>')

diff --git a/packages/polygon-editor/src/index.tsx b/packages/polygon-editor/src/index.tsx
@@ -29,10 +29,13 @@ export const PolygonEditor = forwardRef<PolygonEditorProps, PolygonEditorProps>(
     }
     if (visiable && !active) {
       polyEditor.close();
+      props.onEnd && props.onEnd({ target: props.polygon as any });
     } else if (visiable && active) {
       polyEditor.open();
+      props.onAdd && props.onAdd({ target: props.polygon as any });
     } else if (!visiable && active) {
       polyEditor.close();
+      props.onEnd && props.onEnd({ target: props.polygon as any });
     }
   }, [active, visiable]);
 

diff --git a/packages/polygon/src/index.tsx b/packages/polygon/src/index.tsx
@@ -11,7 +11,7 @@ export interface PolygonProps extends OverlayProps, AMap.PolygonEvents, AMap.Pol
 export const Polygon = forwardRef<PolygonProps, PolygonProps>((props, ref) => {
   const { children } = props;
   const { polygon } = usePolygon(props);
-  useImperativeHandle(ref, () => ({ ...props, polygon }));
+  useImperativeHandle(ref, () => ({ ...props, polygon }), [polygon]);
   if (children && isValidElement(children) && polygon) {
     const oProps = { polygon, polyElement: polygon };
     return cloneElement(children, { ...props, ...oProps });

diff --git a/packages/polygon/src/usePolygon.tsx b/packages/polygon/src/usePolygon.tsx
@@ -14,11 +14,19 @@ export const usePolygon = (props = {} as UsePolygon) => {
       let instance: AMap.Polygon = new AMap.Polygon({ ...other });
       map.add(instance);
       setPolygon(instance);
+      return () => {
+        if (instance) {
+          // 暂不使用这个 API，这个不兼容 v1.4.xx，改用 map.remove API
+          // map && map.removeLayer(instance);
+          map && map.remove(instance);
+          setPolygon(undefined);
+        }
+      };
     }
   }, [map]);
 
   useVisiable(polygon!, visiable);
-  useSettingProperties<AMap.Polygon, UsePolygon>(polygon!, props, ['ExtData', 'ExtData']);
+  useSettingProperties<AMap.Polygon, UsePolygon>(polygon!, props, ['Path', 'Options', 'Map', 'ExtData']);
   useEventProperties<AMap.Polygon, UsePolygon>(polygon!, props, [
     'onClick',
     'onDblClick',

diff --git a/packages/polyline-editor/README.md b/packages/polyline-editor/README.md
@@ -25,15 +25,17 @@ import React, { useState, useRef } from 'react';
 import { Map, APILoader, Polyline, PolylineEditor } from '@uiw/react-amap';
 
 const Example = () => {
-  const [show, setShow] = useState(true);
-  const [active, setActive] = useState(false);
   // 多边形轮廓线的节点坐标数组
   const path = [
     [116.403322, 39.920255],
     [116.410703, 39.897555],
     [116.402292, 39.892353],
     [116.389846, 39.891365],
   ];
+  const [show, setShow] = useState(true);
+  const [active, setActive] = useState(false);
+  const [polylinePath,setPolylinePath]=useState(path);
+
   return (
     <>
       <button onClick={() => setShow(!show)}>
@@ -46,7 +48,7 @@ const Example = () => {
         <Map zoom={14} center={[116.400274, 39.905812]}>
           <Polyline
             visiable={show}
-            path={path}
+            path={polylinePath}
             strokeColor="#FF33FF"
             strokeWeight={6}
             strokeOpacity={0.2}
@@ -56,8 +58,9 @@ const Example = () => {
           >
             <PolylineEditor
               active={active}
-              onEnd={() => {
-                console.log('onEnd:>>')
+              onEnd={(e) => {
+                console.log('onEnd:>>',e.target.getPath());
+                setPolylinePath(e.target.getPath())
               }}
               onAdjust={() => {
                 console.log('onAdjust:>>')

diff --git a/packages/polyline-editor/src/index.tsx b/packages/polyline-editor/src/index.tsx
@@ -29,12 +29,15 @@ export const PolylineEditor = forwardRef<PolylineEditorProps, PolylineEditorProp
     }
     if (visiable && !active) {
       polyEditor.close();
+      props.onEnd && props.onEnd({ target: props.polyline as any });
     } else if (visiable && active) {
       polyEditor.open();
+      props.onAdd && props.onAdd({ target: props.polyline as any });
     } else if (!visiable && active) {
       polyEditor.close();
+      props.onEnd && props.onEnd({ target: props.polyline as any });
     }
-  }, [active, visiable]);
+  }, [active, visiable, polyEditor]);
 
   useEventProperties<AMap.PolylineEditor, AMap.PolylineEditorEvents>(polyEditor!, props, [
     'onEnd',

diff --git a/packages/polyline/src/usePolyline.tsx b/packages/polyline/src/usePolyline.tsx
@@ -16,15 +16,17 @@ export function usePolyline(props = {} as UsePolyline) {
       setPolyline(instance);
       return () => {
         if (instance) {
-          map && map.removeLayer(instance);
+          // 暂不使用这个 API，这个不兼容 v1.4.xx，改用 map.remove API
+          // map && map.removeLayer(instance);
+          map && map.remove(instance);
           setPolyline(undefined);
         }
       };
     }
   }, [map]);
 
   useVisiable(polyline!, visiable);
-  useSettingProperties<AMap.Polyline, UsePolyline>(polyline!, props, ['Options', 'Map', 'ExtData']);
+  useSettingProperties<AMap.Polyline, UsePolyline>(polyline!, props, ['Path', 'Options', 'Map', 'ExtData']);
   useEventProperties<AMap.Polyline, UsePolyline>(polyline!, props, [
     'onHide',
     'onShow',

diff --git a/packages/rectangle/src/useRectangle.tsx b/packages/rectangle/src/useRectangle.tsx
@@ -16,7 +16,9 @@ export const useRectangle = (props = {} as UseRectangle) => {
       setRectangle(instance);
       return () => {
         if (instance) {
-          map && map.removeLayer(instance);
+          // 暂不使用这个 API，这个不兼容 v1.4.xx，改用 map.remove API
+          // map && map.removeLayer(instance);
+          map && map.remove(instance);
           setRectangle(undefined);
         }
       };

diff --git a/packages/tile-layer/src/useTileLayer.tsx b/packages/tile-layer/src/useTileLayer.tsx
@@ -38,9 +38,8 @@ export function useTileLayer(props = {} as UseTileLayer) {
       return () => {
         if (instance) {
           // 暂不使用这个 API，这个不兼容 v1.4.xx
-          // map.removeLayer(instance);
-
-          map.remove(instance);
+          // map && map.removeLayer(instance);
+          map && map.remove(instance);
           setTileLayer(null as any);
           props.onRemoved && props.onRemoved();
         }

diff --git a/packages/types/src/overlay.d.ts b/packages/types/src/overlay.d.ts
@@ -364,7 +364,12 @@ declare namespace AMap {
     contains(point: LngLatLike): boolean;
 
   }
-  interface PolylineEvents extends EventsCommonProps { }
+  interface PolylineEvents extends EventsCommonProps { 
+    onDragStart?(event:MapsEvent):void;
+    onDragEnd?(event:MapsEvent):void;
+    onDragging?(event:MapsEvent):void;
+  }
+
   interface PolylineOptions {
     /**
      * polyline 路径，支持 lineString 和 MultiLineString
@@ -894,6 +899,9 @@ declare namespace AMap {
     strokeDasharray?: Array<number>;
   }
   interface PolygonEvents extends EventsCommonProps {
+    onDragStart?(event:MapsEvent):void;
+    onDragEnd?(event:MapsEvent):void;
+    onDragging?(event:MapsEvent):void;
     /** 属性发生变化时 */
     onChange?(): void;
   }