refactor: componet style

packages/core/src/services/scene/ISceneService.ts

@@ -1,3 +1,4 @@
+import { ISceneConfig } from '../config/IConfigService';
 import { ILayer } from '../layer/ILayerService';
 import { IMapConfig } from '../map/IMapService';
 import { IRenderConfig } from '../renderer/IRendererService';
@@ -8,6 +9,7 @@ export interface ISceneService {
   removeAllListeners(event?: string): this;
   init(config: IMapConfig & IRenderConfig): void;
   addLayer(layer: ILayer): void;
+  getSceneConfig(): Partial<ISceneConfig>;
   render(): void;
   getSceneContainer(): HTMLDivElement;
   exportPng(): string;

packages/core/src/services/scene/SceneService.ts

@@ -18,8 +18,8 @@ import { IInteractionService } from '../interaction/IInteractionService';
 import { IPickingService } from '../interaction/IPickingService';
 import { ILayer, ILayerService } from '../layer/ILayerService';
 import { ILogService } from '../log/ILogService';
-import { IMapCamera, IMapService } from '../map/IMapService';
-import { IRendererService } from '../renderer/IRendererService';
+import { IMapCamera, IMapConfig, IMapService } from '../map/IMapService';
+import { IRenderConfig, IRendererService } from '../renderer/IRendererService';
 import { IShaderModuleService } from '../shader/IShaderModuleService';
 import { ISceneService } from './ISceneService';
 
@@ -238,6 +238,10 @@ export default class Scene extends EventEmitter implements ISceneService {
     return layersPng;
   }
 
+  public getSceneConfig(): Partial<ISceneConfig> {
+    return this.configService.getSceneConfig(this.id as string);
+  }
+
   public destroy() {
     this.emit('destroy');
     this.inited = false;

packages/react/src/component/AMapScene.tsx

@@ -1,4 +1,4 @@
-import { IMapConfig, Scene } from '@antv/l7';
+import { IMapConfig, ISceneConfig, Scene } from '@antv/l7';
 // @ts-ignore
 // tslint:disable-next-line:no-submodule-imports
 import GaodeMap from '@antv/l7-maps/lib/amap';
@@ -7,16 +7,18 @@ import { SceneContext } from './SceneContext';
 interface IMapSceneConig {
   style?: React.CSSProperties;
   className?: string;
-  map: IMapConfig;
+  map: Partial<IMapConfig>;
+  option?: Partial<ISceneConfig>;
   children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
 }
 const AMapScene = React.memo((props: IMapSceneConig) => {
-  const { style, className, map } = props;
+  const { style, className, map, option } = props;
   const container = createRef();
   const [scene, setScene] = useState<Scene>();
   useEffect(() => {
     const sceneInstance = new Scene({
       id: container.current as HTMLDivElement,
+      ...option,
       map: new GaodeMap(map),
     });
     sceneInstance.on('loaded', () => {

packages/scene/src/index.ts

@@ -57,7 +57,7 @@ class Scene
   private container: Container;
 
   public constructor(config: ISceneConfig) {
-    const { id, map, logoPosition, logoVisible } = config;
+    const { id, map, logoPosition, logoVisible = true } = config;
     // 创建场景容器
     const sceneContainer = createSceneContainer();
     this.container = sceneContainer;
@@ -92,9 +92,8 @@ class Scene
     // 初始化 scene
     this.sceneService.init(config);
     // TODO: 初始化组件
-    if (logoVisible) {
-      this.addControl(new Logo({ position: logoPosition }));
-    }
+
+    this.initControl();
   }
 
   public getMapService(): IMapService<unknown> {
@@ -306,6 +305,13 @@ class Scene
     this.markerService.init(this.container);
     this.popupService.init(this.container);
   }
+
+  private initControl() {
+    const { logoVisible, logoPosition } = this.sceneService.getSceneConfig();
+    if (logoVisible) {
+      this.addControl(new Logo({ position: logoPosition }));
+    }
+  }
   // 资源管理
 }
 

stories/Components/components/Scale.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { Layers, PointLayer, PolygonLayer, Scale, Scene } from '@antv/l7';
+import { Layers, PointLayer, PolygonLayer, Scale, Scene, Zoom } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -21,6 +21,7 @@ export default class ScaleComponent extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
+      logoVisible: false,
       map: new Mapbox({
         style: 'dark',
         center: [110.19382669582967, 30.258134],
@@ -79,10 +80,15 @@ export default class ScaleComponent extends React.Component {
     };
     const layerControl = new Layers({
       overlayers: layers,
+      position: 'bottomright',
     });
 
     scene.addControl(scaleControl);
     scene.addControl(layerControl);
+    const zoomControl = new Zoom({
+      position: 'bottomright',
+    });
+    scene.addControl(zoomControl);
   }
 
   public render() {