diff --git a/packages/core/src/services/config/ConfigService.ts b/packages/core/src/services/config/ConfigService.ts index f083fc244d..c0454c1ac9 100644 --- a/packages/core/src/services/config/ConfigService.ts +++ b/packages/core/src/services/config/ConfigService.ts @@ -17,6 +17,9 @@ const defaultSceneConfig: Partial = { logoVisible: true, antialias: true, preserveDrawingBuffer: false, + fitBoundsOptions: { + animate: false, + }, }; /** diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index 9c0bee3a73..107451ecbd 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -11,6 +11,15 @@ export interface IPoint { y: number; } +export interface IStatusOptions { + showIndoorMap: boolean; + resizeEnable: boolean; + dragEnable: boolean; + keyboardEnable: boolean; + doubleClickZoom: boolean; + zoomEnable: boolean; + rotateEnable: boolean; +} export type MapStyle = string | { [key: string]: any }; export interface IMapWrapper { setContainer(container: Container, id: string | HTMLDivElement): void; @@ -56,6 +65,7 @@ export interface IMapService { setPitch(pitch: number): void; setZoom(zoom: number): void; setMapStyle(style: any): void; + setStatus(option: Partial): void; // coordinates methods pixelToLngLat(pixel: Point): ILngLat; diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index 25dab7cb57..d28ff9bc3b 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -11,6 +11,7 @@ import { IMapConfig, IMapService, IPoint, + IStatusOptions, IViewport, MapServiceEvent, MapStyle, @@ -201,6 +202,10 @@ export default class AMapService public setMapStyle(style: string): void { this.map.setMapStyle(this.getMapStyle(style)); } + + public setStatus(option: Partial) { + this.map.setStatus(option); + } public pixelToLngLat(pixel: [number, number]): ILngLat { const lngLat = this.map.pixelToLngLat(new AMap.Pixel(pixel[0], pixel[1])); return { lng: lngLat.getLng(), lat: lngLat.getLat() }; diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts index f6cf1b842b..7a313e6e8b 100644 --- a/packages/maps/src/mapbox/map.ts +++ b/packages/maps/src/mapbox/map.ts @@ -11,6 +11,7 @@ import { IMapConfig, IMapService, IPoint, + IStatusOptions, IViewport, MapServiceEvent, MapStyle, @@ -168,6 +169,38 @@ export default class MapboxService public setMinZoom(min: number): void { this.map.setMinZoom(min); } + public setStatus(option: Partial) { + if (option.doubleClickZoom === true) { + this.map.doubleClickZoom.enable(); + } + if (option.doubleClickZoom === false) { + this.map.doubleClickZoom.disable(); + } + if (option.dragEnable === false) { + this.map.dragPan.disable(); + } + if (option.dragEnable === true) { + this.map.dragPan.enable(); + } + if (option.rotateEnable === false) { + this.map.dragRotate.disable(); + } + if (option.dragEnable === true) { + this.map.dragRotate.enable(); + } + if (option.keyboardEnable === false) { + this.map.keyboard.disable(); + } + if (option.keyboardEnable === true) { + this.map.keyboard.enable(); + } + if (option.zoomEnable === false) { + this.map.scrollZoom.disable(); + } + if (option.zoomEnable === true) { + this.map.scrollZoom.enable(); + } + } public setZoomAndCenter(zoom: number, center: [number, number]): void { this.map.flyTo({ diff --git a/packages/scene/src/IMapController.ts b/packages/scene/src/IMapController.ts index e470dc5da8..b38f9de3ed 100644 --- a/packages/scene/src/IMapController.ts +++ b/packages/scene/src/IMapController.ts @@ -1,4 +1,4 @@ -import { Bounds, ILngLat, IPoint, Point } from '@antv/l7-core'; +import { Bounds, ILngLat, IPoint, IStatusOptions, Point } from '@antv/l7-core'; export default interface IMapController { /** @@ -51,17 +51,28 @@ export default interface IMapController { */ fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void; + getContainer(): HTMLElement | null; + getSize(): [number, number]; + // get map status method + getMinZoom(): number; + getMaxZoom(): number; + // get map params + getType(): string; + getMapContainer(): HTMLElement | null; + + // control with raw map setRotation(rotation: number): void; - setZoomAndCenter(zoom: number, center: Point): void; + setCenter(center: [number, number]): void; + setPitch(pitch: number): void; + setZoom(zoom: number): void; + setMapStyle(style: any): void; + setStatus(option: Partial): void; - setMapStyle(style: string): void; - + // coordinates methods pixelToLngLat(pixel: Point): ILngLat; - lngLatToPixel(lnglat: Point): IPoint; - containerToLngLat(pixel: Point): ILngLat; - lngLatToContainer(lnglat: Point): IPoint; + exportMap(type: 'jpg' | 'png'): string; } diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 20ab32e1d6..b26c9cb8b6 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -24,6 +24,7 @@ import { IRendererService, ISceneConfig, ISceneService, + IStatusOptions, Point, SceneEventList, TYPES, @@ -58,20 +59,10 @@ class Scene private popupService: IPopupService; private fontService: IFontService; private interactionService: IInteractionService; - private animate: boolean; - private fitBoundsOptions: unknown; private container: Container; public constructor(config: ISceneConfig) { - const { - id, - map, - logoPosition, - logoVisible = true, - animate = true, - fitBoundsOptions = {}, - } = config; - this.fitBoundsOptions = fitBoundsOptions; + const { id, map } = config; // 创建场景容器 const sceneContainer = createSceneContainer(); this.container = sceneContainer; @@ -112,6 +103,21 @@ class Scene this.initControl(); } + public getSize(): [number, number] { + return this.mapService.getSize(); + } + public getMinZoom(): number { + return this.mapService.getMinZoom(); + } + public getMaxZoom(): number { + return this.mapService.getMaxZoom(); + } + public getType(): string { + return this.mapService.getType(); + } + public getMapContainer(): HTMLElement | null { + return this.mapService.getMapContainer(); + } public getMapService(): IMapService { return this.mapService; @@ -279,13 +285,14 @@ class Scene public setZoom(zoom: number): void { this.mapService.setZoom(zoom); } - public fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void { + public fitBounds(bound: Bounds, options?: unknown): void { + const { fitBoundsOptions, animate } = this.sceneService.getSceneConfig(); this.mapService.fitBounds( bound, // 选项优先级：用户传入，覆盖animate直接配置，覆盖Scene配置项传入 - fitBoundsOptions || { - ...(this.fitBoundsOptions as object), - animate: this.animate, + options || { + ...(fitBoundsOptions as object), + animate, }, ); } @@ -298,6 +305,10 @@ class Scene this.mapService.setMapStyle(style); } + public setStatus(options: IStatusOptions) { + this.mapService.setStatus(options); + } + // conversion Method public pixelToLngLat(pixel: Point): ILngLat { return this.mapService.pixelToLngLat(pixel); diff --git a/stories/React/components/world_ncov_fill.tsx b/stories/React/components/world_ncov_fill.tsx index f2aae6e55c..b027d48274 100644 --- a/stories/React/components/world_ncov_fill.tsx +++ b/stories/React/components/world_ncov_fill.tsx @@ -85,7 +85,7 @@ export default React.memo(function Map() { center: [110.19382669582967, 50.258134], pitch: 0, style: 'blank', - zoom: 1, + zoom: 10, }} style={{ position: 'absolute',