fix: 删除默认icon，添加删除逻辑，修复初始化时销毁无法删除图层，添加ts定义，修改基本用法例子 (#344)

uiwjs · Dec 5, 2023 · 652ecbc · 652ecbc · vercel · Dec 5, 2023
1 parent 7703138
commit 652ecbc
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 26 deletions.
diff --git a/packages/label-marker/README.md b/packages/label-marker/README.md
@@ -31,8 +31,44 @@ const Example = () => {
       </button>
       <div style={{ width: '100%', height: '300px' }}>
         <Map zoom={4}>
-          <LabelMarker visiable={show} name= "标注1" position={[116.466994, 39.984904]} />
-          <LabelMarker visiable={show} name= "标注3" position={new AMap.LngLat(119.306239,26.075302)} />
+          <LabelMarker 
+            visiable={show}
+            name= "标注1"
+            text={{
+              content: '没有有icon',
+              direction: 'top',
+              offset: [0, 0],
+              style: {
+                strokeColor: '#ffffff',
+                fontSize: 14,
+                fillColor: '#60666E',
+                strokeWidth: 4,
+                backgroundColor: 'rgba(0,0,0,0)',
+              },
+            }}
+            position={[116.466994, 39.984904]}
+          />
+          <LabelMarker visiable={show} name= "标注3" position={new AMap.LngLat(119.306239,26.075302)} 
+            text={{
+              content: '有icon',
+              direction: 'top',
+              offset: [0, 0],
+              style: {
+                strokeColor: '#ffffff',
+                fontSize: 14,
+                fillColor: '#60666E',
+                strokeWidth: 4,
+                backgroundColor: 'rgba(0,0,0,0)',
+              },
+            }}
+            icon={{
+              image: 'http://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png',
+              // 图片尺寸
+              size: [19, 32],
+              // 图片相对 position 的锚点，默认为 bottom-center
+              anchor: 'center',
+            }} 
+          />
         </Map>
       </div>
     </>

diff --git a/packages/label-marker/src/useLabelMarker.tsx b/packages/label-marker/src/useLabelMarker.tsx
@@ -35,25 +35,25 @@ export const useLabelMarker = (props: UseLabelMarker = {}) => {
           },
         };
       }
-      let initIcon = icon;
-      if (!initIcon) {
-        initIcon = {
-          // 图标类型，现阶段只支持 image 类型
-          // 图片 url
-          image: 'http://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png',
-          // 图片尺寸
-          size: [19, 32],
-          // 图片相对 position 的锚点，默认为 bottom-center
-          anchor: 'center',
-        };
-      }
+      // let initIcon = icon;
+      // if (!initIcon) {
+      //   initIcon = {
+      //     // 图标类型，现阶段只支持 image 类型
+      //     // 图片 url
+      // image: 'http://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png',
+      // // 图片尺寸
+      // size: [19, 32],
+      // // 图片相对 position 的锚点，默认为 bottom-center
+      // anchor: 'center',
+      //   };
+      // }
 
       // if (props.children) {
       //   other.content = container;
       // }
       const instance: AMap.LabelMarker = new (AMap as any).LabelMarker({
-        style: initIcon,
-        icon: initIcon,
+        style: icon,
+        icon: icon,
         text: initText,
         ...other,
       });
@@ -77,17 +77,19 @@ export const useLabelMarker = (props: UseLabelMarker = {}) => {
       }
 
       map.add(instance);
-    }
-    return () => {
-      if (labelMarker) {
-        //  issue #259  兼容 v1.4.xxx 版本
-        if ((AMap as any)?.v?.indexOf('1.4') === 0) {
-          (map as any)?.labelMarkersLayer?.remove(labelMarker);
+      return () => {
+        if (instance) {
+          //  issue #259  兼容 v1.4.xxx 版本
+          if ((AMap as any)?.v?.indexOf('1.4') === 0) {
+            (map as any)?.labelMarkersLayer?.remove(instance);
+          } else {
+            instance.remove();
+          }
+          setLabelMarker(undefined);
         }
-        setLabelMarker(undefined);
-      }
-    };
-  }, [labelMarker, map]);
+      };
+    }
+  }, [map]);
   useVisiable(labelMarker!, visiable);
   useSettingProperties<AMap.LabelMarker, UseLabelMarker>(labelMarker, props, [
     'Name',

diff --git a/packages/types/src/overlay.d.ts b/packages/types/src/overlay.d.ts
@@ -1394,6 +1394,7 @@ declare namespace AMap {
     setRank(rank: number): void;
     getText(): TextOptions | undefined;
     setText(textOpts: TextOptions): void;
+    remove(): void;
   }
   interface LabelMarkerOptions {
     /** 标注名称，作为标注标识，并非最终在地图上显示的文字内容，显示文字内容请设置 opts.text.content */