Merge pull request #270 from antvis/feat/fitBoundsOptions

feat: mapbox添加fitBoundsOptions

packages/core/src/services/config/ConfigService.ts

@@ -17,6 +17,9 @@ const defaultSceneConfig: Partial<ISceneConfig & IRenderConfig> = {
   logoVisible: true,
   antialias: true,
   preserveDrawingBuffer: false,
+  fitBoundsOptions: {
+    animate: false,
+  },
 };
 
 /**

packages/core/src/services/config/IConfigService.ts

@@ -8,6 +8,8 @@ export interface ISceneConfig extends IRenderConfig {
   map: IMapWrapper;
   logoPosition?: PositionName;
   logoVisible?: boolean;
+  animate?: boolean;
+  fitBoundsOptions?: unknown;
 }
 
 // interface IValidateResult {

packages/core/src/services/layer/ILayerService.ts

@@ -155,7 +155,7 @@ export interface ILayer {
   destroy(): void;
   source(data: any, option?: ISourceCFG): ILayer;
   setData(data: any, option?: ISourceCFG): ILayer;
-  fitBounds(): ILayer;
+  fitBounds(fitBoundsOptions?: unknown): ILayer;
   /**
    * 向当前图层注册插件
    * @param plugin 插件实例
@@ -222,6 +222,7 @@ export interface ILayerConfig {
   visible: boolean;
   zIndex: number;
   autoFit: boolean;
+  fitBoundsOptions?: unknown;
   name: string; //
   blend: keyof typeof BlendType;
   pickedFeatureID: number;

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;
@@ -50,12 +59,13 @@ export interface IMapService<RawMap = {}> {
   zoomOut(): void;
   panTo(p: Point): void;
   panBy(pixel: Point): void;
-  fitBounds(bound: Bounds): void;
+  fitBounds(bound: Bounds, fitBoundsOptions?: unknown): 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<IStatusOptions>): void;
 
   // coordinates methods
   pixelToLngLat(pixel: Point): ILngLat;

packages/layers/src/core/BaseLayer.ts

@@ -654,7 +654,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
   /**
    * zoom to layer Bounds
    */
-  public fitBounds(): ILayer {
+  public fitBounds(fitBoundsOptions?: unknown): ILayer {
     if (!this.inited) {
       this.updateLayerConfig({
         autoFit: true,
@@ -663,10 +663,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     }
     const source = this.getSource();
     const extent = source.extent;
-    this.mapService.fitBounds([
-      [extent[0], extent[1]],
-      [extent[2], extent[3]],
-    ]);
+    this.mapService.fitBounds(
+      [
+        [extent[0], extent[1]],
+        [extent[2], extent[3]],
+      ],
+      fitBoundsOptions,
+    );
     return this;
   }
 
@@ -876,9 +879,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
 
   private sourceEvent = () => {
     this.dataState.dataSourceNeedUpdate = true;
-    const { autoFit } = this.getLayerConfig();
+    const { autoFit, fitBoundsOptions } = this.getLayerConfig();
     if (autoFit) {
-      this.fitBounds();
+      this.fitBounds(fitBoundsOptions);
     }
 
     this.emit('dataUpdate');

packages/layers/src/plugins/LayerStylePlugin.ts

@@ -11,10 +11,10 @@ export default class LayerStylePlugin implements ILayerPlugin {
     layer.hooks.afterInit.tap('LayerStylePlugin', () => {
       // 更新图层默认状态
       layer.updateLayerConfig({});
-      const { autoFit } = layer.getLayerConfig();
+      const { autoFit, fitBoundsOptions } = layer.getLayerConfig();
       if (autoFit) {
         setTimeout(() => {
-          layer.fitBounds();
+          layer.fitBounds(fitBoundsOptions);
         }, 100);
       }
     });

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<IStatusOptions>) {
+    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() };

packages/maps/src/mapbox/map.ts

@@ -11,6 +11,7 @@ import {
   IMapConfig,
   IMapService,
   IPoint,
+  IStatusOptions,
   IViewport,
   MapServiceEvent,
   MapStyle,
@@ -157,8 +158,8 @@ export default class MapboxService
     this.panTo(pixel);
   }
 
-  public fitBounds(bound: Bounds): void {
-    this.map.fitBounds(bound);
+  public fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void {
+    this.map.fitBounds(bound, fitBoundsOptions as mapboxgl.FitBoundsOptions);
   }
 
   public setMaxZoom(max: number): void {
@@ -168,6 +169,38 @@ export default class MapboxService
   public setMinZoom(min: number): void {
     this.map.setMinZoom(min);
   }
+  public setStatus(option: Partial<IStatusOptions>) {
+    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({

packages/react/src/component/LayerAttribute/Layer.tsx

@@ -113,12 +113,6 @@ export default function BaseLayer(type: string, props: ILayerProps) {
     }
   }, [options?.blend]);
 
-  // useEffect(() => {
-  //   if (layer && layer.inited && options && options.autoFit === true) {
-  //     layer.fitBounds();
-  //   }
-  // }, [options?.autoFit]);
-
   return layer !== null && layer !== undefined ? (
     <LayerContext.Provider value={layer}>
       <Source layer={layer} source={source} />

packages/react/src/component/LayerAttribute/Source.tsx

@@ -18,7 +18,7 @@ export default React.memo(function Chart(props: ISourceProps) {
       layer.setData(data, sourceOption);
     }
     if (sourceOption.autoFit) {
-      layer.fitBounds();
+      layer.fitBounds(sourceOption && sourceOption.fitBoundsOptions);
     }
   }, [data, JSON.stringify(sourceOption)]);
   return null;

packages/react/src/component/LayerAttribute/index.ts

@@ -60,6 +60,8 @@ export interface ISourceOptions extends ISourceCFG {
   data: any;
   // 每次更新数据之后是否自适应缩放
   autoFit?: boolean;
+  // Mapbox 自适应的参数
+  fitBoundsOptions?: any;
 }
 
 export interface IActiveOptions {

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 {
   /**
@@ -49,19 +49,30 @@ export default interface IMapController {
   /**
    * 调整地图适合指定区域
    */
-  fitBounds(bound: Bounds): void;
+  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<IStatusOptions>): 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;
 }

packages/scene/src/index.ts

@@ -24,6 +24,7 @@ import {
   IRendererService,
   ISceneConfig,
   ISceneService,
+  IStatusOptions,
   Point,
   SceneEventList,
   TYPES,
@@ -58,11 +59,10 @@ class Scene
   private popupService: IPopupService;
   private fontService: IFontService;
   private interactionService: IInteractionService;
-
   private container: Container;
 
   public constructor(config: ISceneConfig) {
-    const { id, map, logoPosition, logoVisible = true } = config;
+    const { id, map } = config;
     // 创建场景容器
     const sceneContainer = createSceneContainer();
     this.container = sceneContainer;
@@ -103,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<unknown> {
     return this.mapService;
@@ -270,8 +285,16 @@ class Scene
   public setZoom(zoom: number): void {
     this.mapService.setZoom(zoom);
   }
-  public fitBounds(bound: Bounds): void {
-    this.mapService.fitBounds(bound);
+  public fitBounds(bound: Bounds, options?: unknown): void {
+    const { fitBoundsOptions, animate } = this.sceneService.getSceneConfig();
+    this.mapService.fitBounds(
+      bound,
+      // 选项优先级：用户传入，覆盖animate直接配置，覆盖Scene配置项传入
+      options || {
+        ...(fitBoundsOptions as object),
+        animate,
+      },
+    );
   }
 
   public setZoomAndCenter(zoom: number, center: Point): void {
@@ -282,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);

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',
@@ -100,6 +100,10 @@ export default React.memo(function Map() {
             key={'1'}
             options={{
               autoFit: true,
+              fitBoundsOptions: {
+                duration: 0,
+                animate: false,
+              },
             }}
             source={{
               data,