Skip to content

Commit

Permalink
wip: bmap
Browse files Browse the repository at this point in the history
  • Loading branch information
@lvisei
lvisei committed May 26, 2024
1 parent 0530be9 commit 74900b0
Show file tree
Hide file tree
Showing 9 changed files with 159 additions and 129 deletions.
1 change: 1 addition & 0 deletions packages/core/src/services/map/IMapService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export interface IMapWrapper {

export interface IMapService<RawMap = {}> {
map: RawMap;
type: string;
bgColor: string;
setBgColor(color: string): void;
init(): void;
Expand Down
10 changes: 5 additions & 5 deletions packages/extension-maps/src/amap/map.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,23 @@ import type {
import { BaseMapService, MapServiceEvent, WebMercatorViewport } from '@antv/l7-core';
import { DOM, amap2Project, lodashUtil } from '@antv/l7-utils';
import { mat4, vec3 } from 'gl-matrix';
import { toPaddingOptions } from '../utils/utils';
import { toPaddingOptions } from '../utils';
import './logo.css';
import { MapTheme } from './theme';

const AMAP_VERSION = '2.0';
const AMAP_API_KEY = 'f59bcf249433f8b05caaee19f349b3d7';
const ZOOM_OFFSET = 1;

const AMapEventV2: Record<string, string> = {
const AMapEvent: Record<string, string> = {
contextmenu: 'rightclick',
camerachange: 'viewchange',
};

export default class AMapService extends BaseMapService<AMap.Map> {
protected viewport = new WebMercatorViewport();

public type = 'GAODE';
public type = 'AMap';

public async init() {
const {
Expand Down Expand Up @@ -171,15 +171,15 @@ export default class AMapService extends BaseMapService<AMap.Map> {
if (MapServiceEvent.indexOf(type) !== -1) {
this.eventEmitter.on(type, handler);
} else {
this.map.on(AMapEventV2[type] || type, handler);
this.map.on(AMapEvent[type] || type, handler);
}
}

public off(type: string, handler: (...args: any[]) => void): void {
if (MapServiceEvent.indexOf(type) !== -1) {
this.eventEmitter.off(type, handler);
} else {
this.map.off(AMapEventV2[type] || type, handler);
this.map.off(AMapEvent[type] || type, handler);
}
}

Expand Down
150 changes: 79 additions & 71 deletions packages/extension-maps/src/bmap/map.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,17 @@ import type {
IMercator,
IPoint,
IStatusOptions,
IViewport,
MapStyleConfig,
Point,
} from '@antv/l7-core';
import { MapServiceEvent, WebMercatorViewport } from '@antv/l7-core';
import { BaseMapService, MapServiceEvent, WebMercatorViewport } from '@antv/l7-core';
import { DOM } from '@antv/l7-utils';
import { mat4, vec3 } from 'gl-matrix';
import BaseMapService from '../utils/BaseMapService';
import { toPaddingOptions } from '../utils/utils';
import { toPaddingOptions } from '../utils';
import BMapGLLoader from './bmapglloader';
import './logo.css';

const EventMap: {
[key: string]: any;
} = {
const MapEvent: Record<string, string> = {
mapmove: 'moving',
contextmenu: 'rightclick',
camerachange: 'update',
Expand All @@ -29,55 +25,14 @@ const EventMap: {

const BMAP_API_KEY: string = 'zLhopYPPERGtpGOgimcdKcCimGRyyIsh';
const BMAP_VERSION: string = '1.0';
const ZOOM_OFFSET = 1.75;

// TODO: 基于抽象类 BaseMap 实现，补全缺失方法，解决类型问题
export default class BMapService extends BaseMapService<BMapGL.Map> {
protected viewport: IViewport;
protected styleConfig: Record<string, any> = {
normal: [],
};
protected currentStyle: any = 'normal';
// 事件回调代理
protected evtCbProxyMap: Map<string, Map<(...args: any) => any, (...args: any) => any>> =
new Map();

public getMap() {
return this.map as any as BMapGL.Map & {
destroy: () => void;
getTilt: () => number;
enableRotate: () => void;
enableRotateGestures: () => void;
disableRotate: () => void;
disableRotateGestures: () => void;
lnglatToMercator: (lng: number, lat: number) => [number, number];
_webglPainter: {
_canvas: HTMLCanvasElement;
};
getHeading: () => number;
setDisplayOptions: (options: { indoor?: boolean }) => void;
};
}
public type: string = 'BMap';

public handleCameraChanged = () => {
this.emit('mapchange');
const map = this.getMap();
const { lng, lat } = map.getCenter();
const option = {
center: [lng, lat],
viewportHeight: map.getContainer().clientHeight,
viewportWidth: map.getContainer().clientWidth,
bearing: 360 - map.getHeading(),
pitch: map.getTilt(),
zoom: map.getZoom() - 1.75,
};
this.viewport.syncWithMapCamera(option as any);
this.updateCoordinateSystemService();
this.cameraChangedCallback(this.viewport);
};
public version: string;

public setBgColor(color: string): void {
this.bgColor = color;
}
public viewport = new WebMercatorViewport();

public async init() {
const {
Expand All @@ -87,14 +42,11 @@ export default class BMapService extends BaseMapService<BMapGL.Map> {
token = BMAP_API_KEY,
mapInstance,
version = BMAP_VERSION,
mapSize = 10000,
minZoom = 0,
maxZoom = 21,
...rest
} = this.config;
this.viewport = new WebMercatorViewport();
this.version = version;
this.simpleMapCoord.setSize(mapSize);

if (!(window.BMapGL || mapInstance)) {
await BMapGLLoader.load({
Expand All @@ -104,16 +56,16 @@ export default class BMapService extends BaseMapService<BMapGL.Map> {
}

if (mapInstance) {
// @ts-ignore
this.map = mapInstance;
this.$mapContainer = this.map.getContainer();
this.mapContainer = this.map.getContainer();
const point = new BMapGL.Point(center[0], center[1]);
// false，表示用户未执行centerAndZoom进行地图初始渲染
// @ts-ignore
if (!this.map.isLoaded()) {
this.map.centerAndZoom(point, zoom);
}
this.initMapByConfig(this.config);
// @ts-ignore
this.map.on('update', this.handleCameraChanged);
} else {
const mapConstructorOptions = {
Expand Down Expand Up @@ -141,10 +93,10 @@ export default class BMapService extends BaseMapService<BMapGL.Map> {
let mapChildNodes = [...mapContainer.childNodes];
// @ts-ignore
const map = new BMapGL.Map(mapContainer, mapConstructorOptions);
this.$mapContainer = map.getContainer();
this.mapContainer = map.getContainer();

mapChildNodes.forEach((child) => {
this.$mapContainer!.appendChild(child);
this.mapContainer!.appendChild(child);
});
// @ts-ignore
mapChildNodes = null;
Expand All @@ -160,12 +112,56 @@ export default class BMapService extends BaseMapService<BMapGL.Map> {
}
}

public destroy(): void {
this.getMap().destroy();
public handleCameraChanged = () => {
const map = this.getMap();
const { lng, lat } = map.getCenter();
const center: [number, number] = [lng, lat];
const option = {
center,
viewportHeight: map.getContainer().clientHeight,
viewportWidth: map.getContainer().clientWidth,
bearing: 360 - map.getHeading(),
pitch: map.getTilt(),
zoom: map.getZoom() - ZOOM_OFFSET,
};
this.updateView(option);
};

protected styleConfig: Record<string, any> = {
normal: [],
};

protected currentStyle: any = 'normal';

// 事件回调代理
protected evtCbProxyMap: Map<string, Map<(...args: any) => any, (...args: any) => any>> =
new Map();

public getMap() {
return this.map as any as BMapGL.Map & {
destroy: () => void;
getTilt: () => number;
enableRotate: () => void;
enableRotateGestures: () => void;
disableRotate: () => void;
disableRotateGestures: () => void;
lnglatToMercator: (lng: number, lat: number) => [number, number];
_webglPainter: {
_canvas: HTMLCanvasElement;
};
getHeading: () => number;
setDisplayOptions: (options: { indoor?: boolean }) => void;
};
}

public onCameraChanged(callback: (viewport: IViewport) => void): void {
this.cameraChangedCallback = callback;
public setBgColor(color: string): void {
this.bgColor = color;
}

public destroy(): void {
super.destroy();
this.mapContainer?.parentNode?.removeChild(this.mapContainer);
this.getMap().destroy();
}

// tslint:disable-next-line:no-empty
Expand Down Expand Up @@ -205,7 +201,8 @@ export default class BMapService extends BaseMapService<BMapGL.Map> {
};

cbProxyMap.set(handle, handleProxy);
this.map.on(EventMap[type] || type, handleProxy);
// @ts-ignore
this.map.on(MapEvent[type] || type, handleProxy);
}

public off(type: string, handle: (...args: any[]) => void): void {
Expand All @@ -219,7 +216,8 @@ export default class BMapService extends BaseMapService<BMapGL.Map> {
return;
}
this.evtCbProxyMap.get(type)?.delete(handle);
this.map.off(EventMap[type] || type, handleProxy);
// @ts-ignore
this.map.off(MapEvent[type] || type, handleProxy);
}

public once(type: string, handler: (...args: any[]) => void): void {
Expand All @@ -234,19 +232,17 @@ export default class BMapService extends BaseMapService<BMapGL.Map> {
const size = this.getMap().getSize();
return [size.width, size.height];
}

// 百度地图缩放等级
public getMinZoom(): number {
// @ts-ignore
return this.map.getMinZoom();
}
public getMaxZoom(): number {
// @ts-ignore
return this.map.getMaxZoom();
}

// get map params
public getType() {
return 'bmap';
}

public getZoom(): number {
return this.getMap().getZoom();
}
Expand Down Expand Up @@ -302,6 +298,10 @@ export default class BMapService extends BaseMapService<BMapGL.Map> {
return this.styleConfig[name];
}

public getMapStyle(): string {
return this.currentStyle;
}

public setMapStyle(style: any): void {
if (this.currentStyle === style) {
return;
Expand Down Expand Up @@ -354,7 +354,7 @@ export default class BMapService extends BaseMapService<BMapGL.Map> {
}

public setZoomAndCenter(zoom: number, [lng, lat]: Point): void {
this.getMap().centerAndZoom(new BMapGL.Point(lng, lat), zoom + 1.75);
this.getMap().centerAndZoom(new BMapGL.Point(lng, lat), zoom + ZOOM_OFFSET);
}

public setCenter([lng, lat]: [number, number], options?: ICameraOptions): void {
Expand All @@ -376,6 +376,14 @@ export default class BMapService extends BaseMapService<BMapGL.Map> {
this.getMap().setZoom(zoom);
}

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

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

public setMapStatus(option: Partial<IStatusOptions>): void {
const map = this.getMap();
(Object.keys(option) as Array<keyof IStatusOptions>).map((status) => {
Expand Down
14 changes: 12 additions & 2 deletions packages/extension-maps/src/mapbox/map.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const MapEvent: Record<string, string> = {
* MapboxService
*/
export default class MapboxService extends BaseMapService<Map> {
public type: string = 'MAPBOX';
public type: string = 'Mapbox';

public viewport = new WebMercatorViewport();

Expand Down Expand Up @@ -198,7 +198,17 @@ export default class MapboxService extends BaseMapService<Map> {
}

public getMapStyle(): string {
return '';
try {
// @ts-ignore
const styleUrl = this.map.getStyle().sprite ?? '';
// 将 Mapbox 返回的样式字符串转成传入 style 保持一致
if (/^mapbox:\/\/sprites\/zcxduo\/\w+\/\w+$/.test(styleUrl)) {
return styleUrl?.replace(/\/\w+$/, '').replace(/sprites/, 'styles');
}
return styleUrl;
} catch (e) {
return '';
}
}

public setMapStyle(style: any): void {
Expand Down
14 changes: 12 additions & 2 deletions packages/extension-maps/src/maplibre/map.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const MapEvent: Record<string, string> = {
};

export default class MaplibreService extends BaseMapService<Map> {
public type: string = 'MAPLIBRE';
public type: string = 'Maplibre';

public viewport = new WebMercatorViewport();

Expand Down Expand Up @@ -160,7 +160,17 @@ export default class MaplibreService extends BaseMapService<Map> {
}

public getMapStyle(): string {
return '';
try {
// @ts-ignore
const styleUrl = (this.map.getStyle().sprite as string) ?? '';
// 将 Mapbox 返回的样式字符串转成传入 style 保持一致
if (/^mapbox:\/\/sprites\/zcxduo\/\w+\/\w+$/.test(styleUrl)) {
return styleUrl?.replace(/\/\w+$/, '').replace(/sprites/, 'styles');
}
return styleUrl;
} catch (e) {
return '';
}
}

public setMapStyle(style: any): void {
Expand Down
Loading

0 comments on commit 74900b0

Please sign in to comment.