diff --git a/.changeset/gentle-teachers-smile.md b/.changeset/gentle-teachers-smile.md new file mode 100644 index 0000000000..8ff8e6a2f8 --- /dev/null +++ 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 index 4d7251ee77..556656283d 100644 Binary files a/__tests__/integration/snapshots/gallery_fujian.png and b/__tests__/integration/snapshots/gallery_fujian.png differ diff --git a/__tests__/integration/snapshots/point_text.png b/__tests__/integration/snapshots/point_text.png index db769603af..28b23180ad 100644 Binary files a/__tests__/integration/snapshots/point_text.png and b/__tests__/integration/snapshots/point_text.png differ diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts index 33e37363e7..52ad738691 100644 --- 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 index a071bfe138..f50280e4d0 100644 --- 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 index c30deff0a3..6b3fcd85cd 100644 --- 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 index 7e4ea99aa8..448176e0d4 100644 --- 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 属性信息