feat: Marker 新增 overflowHIde 属性，支持控制超出屏幕时是否触发隐藏 (#2592)

* feat: 新增 Popup overflowHIde 属性，用于控制 Marker 超出屏幕时是否触发隐藏 * chore: add changeset * chore: format code style * chore(CI): update snapshots (#2593) Co-authored-by: lvisei <[email protected]> --------- Co-authored-by: lvisei <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: lvisei <[email protected]>
antvis · Aug 15, 2024 · c21ea5b · c21ea5b
1 parent 7e35485
commit c21ea5b
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 5 deletions.
diff --git a/.changeset/gentle-teachers-smile.md b/.changeset/gentle-teachers-smile.md
@@ -0,0 +1,5 @@
+---
+'@antv/l7-component': patch
+---
+
+feat: Marker 新增 overflowHIde 属性，支持控制超出屏幕时是否触发隐藏
diff --git a/__tests__/integration/snapshots/gallery_fujian.png b/__tests__/integration/snapshots/gallery_fujian.png
diff --git a/__tests__/integration/snapshots/point_text.png b/__tests__/integration/snapshots/point_text.png
diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts
@@ -39,6 +39,7 @@ export default class Marker extends EventEmitter {
       offsets: [0, 0],
       color: '#5B8FF9',
       draggable: false,
+      overflowHide: true,
     };
   }
 
@@ -348,9 +349,11 @@ export default class Marker extends EventEmitter {
           pos.x = newPos.x;
         }
       }
-      // 不在当前可视区域内隐藏点
-      if (pos.x > containerWidth || pos.x < 0 || pos.y > containerHeight || pos.y < 0) {
-        element.style.display = 'none';
+      if (this.markerOption.overflowHide) {
+        // 不在当前可视区域内隐藏点
+        if (pos.x > containerWidth || pos.x < 0 || pos.y > containerHeight || pos.y < 0) {
+          element.style.display = 'none';
+        }
       }
 
       element.style.left = pos.x + offsets[0] + 'px';

diff --git a/packages/core/src/services/component/IMarkerService.ts b/packages/core/src/services/component/IMarkerService.ts
@@ -16,6 +16,7 @@ export interface IMarkerOption {
   color: string;
   offsets: number[];
   draggable: boolean;
+  overflowHide?: boolean;
   extData?: any;
   style?: CSSStyleDeclaration;
 }

diff --git a/packages/maps/src/index.ts b/packages/maps/src/index.ts
@@ -32,9 +32,9 @@ export {
   GaodeMapV2,
   GoogleMap,
   Map,
+  Mapbox,
   MapLibre,
   MapType,
-  Mapbox,
-  TMap,
   TencentMap,
+  TMap,
 };
diff --git a/site/docs/api/component/marker.zh.md b/site/docs/api/component/marker.zh.md
@@ -20,6 +20,7 @@ Marker
 - element    `DOM|string`    自定义 marker DOM 节点，可以是 dom 实例，也可以是 dom id
 - anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right
 - offsets    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
+- overflowHide   `boolean`  超出屏幕时是否隐藏 Marker，默认为 true
 - draggable `boolean` 是否支持拖拽调整 Marker 位置
 - extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息