Skip to content

refactor(maps): migrate gmap & tdtmap adapters to BaseMap #2875

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lzxue wants to merge 4 commits into
base: master
Choose a base branch
from
+84 −26
Open

refactor(maps): migrate gmap & tdtmap adapters to BaseMap #2875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
87c1e44
refactor(maps): migrate gmap & tdtmap adapters to BaseMap
lzxue Jul 14, 2026
a27cc25
fix(ci): pin pnpm to 11.12.0 to avoid 11.13.0 install regression
lzxue Jul 14, 2026
9fccf7b
Update packages/maps/src/tdtmap/map.ts
lzxue Jul 16, 2026
d16a900
Update packages/maps/src/gmap/map.ts
lzxue Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/actions/prepare-install/action.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ runs:
steps:
- uses: pnpm/action-setup@v3
with:
version: 11
version: 11.12.0

- name: Use Node.js ${{ inputs.node-version }}
uses: actions/setup-node@v4
Expand Down
62 changes: 45 additions & 17 deletions packages/maps/src/gmap/map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ import type {
IPoint,
IStatusOptions,
IViewport,
MapStyleConfig,
Point,
} from '@antv/l7-core';
import { MapServiceEvent } from '@antv/l7-core';
import { MercatorCoordinate } from '@antv/l7-map';
import { DOM } from '@antv/l7-utils';
import { mat4, vec3 } from 'gl-matrix';
import BaseMap from '../lib/base-map';
import Viewport from '../lib/web-mercator-viewport';
import BaseMapService from '../utils/BaseMapService';
import { MapTheme } from '../utils/theme';
import './logo.css';
import GMapLoader from './maploader';

Expand All @@ -25,9 +27,8 @@ const EventMap: {
dragging: 'drag',
};

export default class GMapService extends BaseMapService<any> {
// @ts-ignore
protected viewport: IViewport = null;
export default class GMapService extends BaseMap<any> {
protected viewport: IViewport = new Viewport();

// Google Map 和 L7 内置 Map 均使用 Web Mercator，zoom level 定义一致，无需偏移
protected zoomOffset: number = 0;
Expand Down Expand Up @@ -120,7 +121,7 @@ export default class GMapService extends BaseMapService<any> {
if (this.viewport) {
this.viewport.syncWithMapCamera(option as any);
this.updateCoordinateSystemService();
this.cameraChangedCallback(this.viewport);
this.cameraChangedCallback?.(this.viewport);
}
}

Expand Down Expand Up @@ -166,7 +167,7 @@ export default class GMapService extends BaseMapService<any> {

if (mapInstance) {
this.map = mapInstance as any;
this.$mapContainer = this.map.getDiv();
this.mapContainer = this.map.getDiv();
if (logoVisible === false) {
this.hideLogo();
}
Expand All @@ -187,7 +188,7 @@ export default class GMapService extends BaseMapService<any> {
});

this.map = map;
this.$mapContainer = map.getDiv();
this.mapContainer = map.getDiv();
if (logoVisible === false) {
this.hideLogo();
}
Expand Down Expand Up @@ -238,7 +239,7 @@ export default class GMapService extends BaseMapService<any> {
private styleObserver: MutationObserver | null = null;

public addMarkerContainer(): void {
const container = this.$mapContainer!;
const container = this.mapContainer!;
this.markerContainer = DOM.create('div', 'l7-marker-container', container);
this.markerContainer.setAttribute('tabindex', '-1');
this.markerContainer.style.zIndex = '2';
Expand All @@ -250,31 +251,31 @@ export default class GMapService extends BaseMapService<any> {
}

public getCanvasOverlays(): HTMLElement {
return this.$mapContainer as HTMLElement;
return this.mapContainer as HTMLElement;
}

public getMapContainer(): HTMLElement {
// 首次调用时设置 MutationObserver，
// 防止 Hammer.js 在此元素上设置 touch-action: none 阻止 Google Map 原生手势
if (!this.styleObserver && this.$mapContainer) {
if (!this.styleObserver && this.mapContainer) {
this.styleObserver = new MutationObserver(() => {
if (this.$mapContainer!.style.touchAction === 'none') {
this.$mapContainer!.style.touchAction = 'auto';
if (this.mapContainer!.style.touchAction === 'none') {
this.mapContainer!.style.touchAction = 'auto';
}
if (this.$mapContainer!.style.userSelect === 'none') {
this.$mapContainer!.style.userSelect = '';
if (this.mapContainer!.style.userSelect === 'none') {
this.mapContainer!.style.userSelect = '';
}
});
this.styleObserver.observe(this.$mapContainer, {
this.styleObserver.observe(this.mapContainer, {
attributes: true,
attributeFilter: ['style'],
});
}
return this.$mapContainer as HTMLElement;
return this.mapContainer as HTMLElement;
}

public getMapCanvasContainer(): HTMLElement {
return this.$mapContainer as HTMLElement;
return this.mapContainer as HTMLElement;
}

// MapEvent — Google Maps 使用 google.maps.event.addListener/removeListener
Expand Down Expand Up @@ -360,6 +361,33 @@ export default class GMapService extends BaseMapService<any> {
}

// get dom
// 以下方法原先继承自 BaseMapService（mapbox 通用实现），迁移到 BaseMap 后显式补全，
// 方法体与原继承实现保持一致，行为不变。
public getMapStyle(): string {
try {
// @ts-ignore
const styleUrl = this.map.getStyle().sprite ?? '';
if (/^mapbox:\/\/sprites\/zcxduo\/\w+\/\w+$/.test(styleUrl)) {
return styleUrl?.replace(/\/\w+$/, '').replace(/sprites/, 'styles');
}
return styleUrl;
} catch {
return '';
}
}
Comment on lines +366 to +377

@gemini-code-assist gemini-code-assist Bot Jul 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The getMapStyle method was copied verbatim from the Mapbox-centric BaseMapService. However, Google Maps (google.maps.Map) does not have a getStyle() method. This Mapbox-specific code is dead code and will always throw an error, falling back to returning ''.

We should simplify this to return the configured style from this.config.style or an empty string.

  public getMapStyle(): string {
    return this.config.style ?? '';
  }


public getMapStyleConfig(): MapStyleConfig {
return MapTheme;
}

public setMaxZoom(max: number): void {
this.map.setMaxZoom(max);
}

public setMinZoom(min: number): void {
this.map.setMinZoom(min);
}

public getContainer(): HTMLElement | null {
return this.map.getDiv();
}
Expand Down
46 changes: 38 additions & 8 deletions packages/maps/src/tdtmap/map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import BaseMapService from '../utils/BaseMapService';
import BaseMap from '../lib/base-map';
import { MapTheme } from '../utils/theme';

import type {
Bounds,
Expand All @@ -7,6 +8,8 @@ import type {
IPoint,
IStatusOptions,
IViewport,
MapStyleConfig,
MapStyleName,
Point,
} from '@antv/l7-core';
import { MapServiceEvent } from '@antv/l7-core';
Expand All @@ -22,9 +25,8 @@ const EventMap: {
zoomchange: ['Ge'],
};

// TODO: 基于抽象类 BaseMap 实现，补全缺失方法，解决类型问题
export default class TdtMapService extends BaseMapService<any> {
protected viewport: IViewport | null = null;
export default class TdtMapService extends BaseMap<any> {
protected viewport: IViewport = new Viewport();
protected evtCbProxyMap: Map<string, Map<(...args: any) => any, (...args: any) => any>> =
new Map();
// @ts-ignore
Expand Down Expand Up @@ -146,7 +148,7 @@ export default class TdtMapService extends BaseMapService<any> {
if (this.viewport) {
this.viewport.syncWithMapCamera(option as any);
this.updateCoordinateSystemService();
this.cameraChangedCallback(this.viewport);
this.cameraChangedCallback?.(this.viewport);
}
};

Expand All @@ -172,7 +174,7 @@ export default class TdtMapService extends BaseMapService<any> {
this.map = mapInstance;
// @ts-ignore
this.map.centerAndZoom(new window.T.LngLat(center[0], center[1]), zoom);
this.$mapContainer = this.map.getContainer();
this.mapContainer = this.map.getContainer();

// @ts-ignore
const point = new window.T.LngLat(center[0], center[1]);
Expand All @@ -184,9 +186,9 @@ export default class TdtMapService extends BaseMapService<any> {
throw Error('No container id specified');
}

this.$mapContainer = this.creatMapContainer(id as string | HTMLDivElement);
this.mapContainer = this.creatMapContainer(id as string | HTMLDivElement);
// @ts-ignore
const map = new T.Map(this.$mapContainer, {
const map = new T.Map(this.mapContainer, {
// @ts-ignore
center: window.T.LngLat(center[0], center[1]),
minZoom,
Expand Down Expand Up @@ -503,6 +505,34 @@ export default class TdtMapService extends BaseMapService<any> {
throw new Error('Method not implemented.');
}

// 以下方法原先继承自 BaseMapService（mapbox 通用实现），迁移到 BaseMap 后显式补全，
// 方法体与原继承实现保持一致，行为不变。
public getContainer(): HTMLElement | null {
return this.map.getContainer();
}

public getMinZoom(): number {
return this.map.getMinZoom();
}

public getMaxZoom(): number {
return this.map.getMaxZoom();
}

public getMapStyle(): string {
return this.config.style ?? '';
}

public getMapStyleConfig(): MapStyleConfig {
return MapTheme;
}

public setMapStyle(style: MapStyleName): void {
if (this.map && typeof this.map.setStyle === 'function') {
this.map.setStyle(this.getMapStyleValue(style));
}
}
Comment thread
lzxue marked this conversation as resolved.

protected creatMapContainer(id: string | HTMLDivElement) {
let $wrapper = id as HTMLDivElement;
if (typeof id === 'string') {
Expand Down
Loading