improvement: 点亮城市支持自定义动画频率&scene支持传入dom动画

docs/api/layer/cityBuilding.en.md

@@ -1,4 +1,73 @@
 ---
-title: CityBuilding
+title: CityBuild
 order: 6
 ---
+
+## 使用
+
+```javascript
+import { CityBuildingLayer } from '@antv/l7';
+```
+
+### source
+
+同 [PolygonLayer](./polygon_layer/extrude)
+
+### size
+
+同 [PolygonLayer](./polygon_layer/extrude)
+
+### color
+
+[PolygonLayer](./polygon_layer/extrude)
+
+### animate
+
+开启动画效果
+
+```javascript
+layer.animate(true);
+```
+
+### style
+
+- baseColor 楼房颜色,
+- windowColor: 窗户颜色,
+- brightColor: 点亮窗户颜色
+
+其他 style 配置项同
+
+[layer#style](./layer#style)
+
+## 自定义动画频率
+
+自定义动画频率需要 关闭默认动画，通过 setLight 方法不断更新时间
+
+```javascript
+layer.animate(false);
+```
+
+### setLight(time)
+
+参数
+time : 时间 毫秒
+
+#### 完整代码
+
+```javascript
+const pointLayer = new CityBuildingLayer();
+pointLayer
+  .source(await response.json())
+  .size('floor', [0, 500])
+  .color('rgba(242,246,250,1.0)')
+  .animate({
+    enable: true,
+  })
+  .style({
+    opacity: 1.0,
+    baseColor: 'rgb(16,16,16)',
+    windowColor: 'rgb(30,60,89)',
+    brightColor: 'rgb(255,176,38)',
+  });
+scene.addLayer(pointLayer);
+```

docs/api/layer/cityBuilding.zh.md

@@ -39,6 +39,19 @@ layer.animate(true);
 
 [layer#style](./layer#style)
 
+## 自定义动画频率
+
+自定义动画频率需要 关闭默认动画，通过 setLight 方法不断更新时间
+
+```javascript
+layer.animate(false);
+```
+
+### setLight(time)
+
+参数
+time : 时间 毫秒
+
 #### 完整代码
 
 ```javascript

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

@@ -4,8 +4,5 @@
 export default {
   properties: {
     // 地图容器 ID
-    id: {
-      type: 'string',
-    },
   },
 };

packages/core/src/services/log/LogService.ts

@@ -1,9 +1,9 @@
 import { injectable } from 'inversify';
 import Probe, { Log } from 'probe.gl';
 import { ILogService } from './ILogService';
-const Logger = new Log({ id: 'L7' }).enable(false);
+const Logger = new Log({ id: 'L7' }).enable(true);
 // // 只输出 debug 级别以上的日志信息
-Logger.priority = 5;
+Logger.priority = 2;
 
 @injectable()
 export default class LogService implements ILogService {
@@ -12,7 +12,7 @@ export default class LogService implements ILogService {
   }
 
   public warn(message: string): void {
-    Logger.warn(message)();
+    Logger.info(1, message)();
   }
 
   public info(message: string): void {

packages/layers/src/citybuliding/building.ts

@@ -8,7 +8,11 @@ export default class CityBuildingLayer extends BaseLayer {
     this.layerModel = new CityBuildModel(this);
     this.models = this.layerModel.buildModels();
   }
-
+  public setLight(t: number) {
+    this.updateLayerConfig({
+      time: t,
+    });
+  }
   protected getConfigSchema() {
     return {
       properties: {

packages/layers/src/citybuliding/models/build.ts

@@ -9,6 +9,7 @@ interface ICityBuildLayerStyleOptions {
   baseColor: string;
   brightColor: string;
   windowColor: string;
+  time: number;
 }
 export default class CityBuildModel extends BaseModel {
   public getUninforms() {
@@ -17,13 +18,14 @@ export default class CityBuildModel extends BaseModel {
       baseColor = 'rgb(16,16,16)',
       brightColor = 'rgb(255,176,38)',
       windowColor = 'rgb(30,60,89)',
+      time = 0,
     } = this.layer.getLayerConfig() as ICityBuildLayerStyleOptions;
     return {
       u_opacity: opacity,
       u_baseColor: rgb2arr(baseColor),
       u_brightColor: rgb2arr(brightColor),
       u_windowColor: rgb2arr(windowColor),
-      u_time: this.layer.getLayerAnimateTime(),
+      u_time: this.layer.getLayerAnimateTime() || time,
     };
   }
 

packages/maps/src/BaseMapWrapper.ts

@@ -21,7 +21,7 @@ export default class BaseMapWrapper<RawMap> implements IMapWrapper {
     this.config = config;
   }
 
-  public setContainer(sceneContainer: Container, id: string) {
+  public setContainer(sceneContainer: Container, id: string | HTMLDivElement) {
     // // 首先使用全局配置服务校验地图参数
     const { valid, errorText } = this.configService.validateMapConfig(
       this.config,

packages/maps/src/mapbox/map.ts

@@ -233,7 +233,7 @@ export default class MapboxService
       this.$mapContainer = this.creatAmapContainer(id);
       // @ts-ignore
       this.map = new mapboxgl.Map({
-        container: id,
+        container: this.$mapContainer,
         style: this.getMapStyle(style),
         attributionControl,
         bearing: rotation,

packages/scene/src/index.ts

@@ -58,7 +58,6 @@ class Scene
 
   public constructor(config: ISceneConfig) {
     const { id, map, logoPosition, logoVisible } = config;
-
     // 创建场景容器
     const sceneContainer = createSceneContainer();
     this.container = sceneContainer;

stories/Layers/components/AnimatePoint.tsx

@@ -13,7 +13,7 @@ export default class AnimatePoint extends React.Component {
 
   public async componentDidMount() {
     const scene = new Scene({
-      id: 'map',
+      id: document.getElementById('map') as HTMLDivElement,
       map: new GaodeMap({
         pitch: 0,
         style: 'dark',

stories/Layers/components/Point.tsx

@@ -18,7 +18,7 @@ export default class Point3D extends React.Component {
     const pointsData = await response.json();
 
     const scene = new Scene({
-      id: 'map',
+      id: document.getElementById('map') as HTMLDivElement,
       map: new Mapbox({
         center: [120.19382669582967, 30.258134],
         pitch: 0,

stories/Layers/components/citybuilding.tsx

@@ -1,7 +1,7 @@
 import { CityBuildingLayer, Scene } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
+import * as dat from 'dat.gui';
 import * as React from 'react';
-
 export default class CityBuildingLayerDemo extends React.Component {
   // @ts-ignore
   private scene: Scene;
@@ -31,7 +31,7 @@ export default class CityBuildingLayerDemo extends React.Component {
       .size('floor', [0, 500])
       .color('rgba(242,246,250,1.0)')
       .animate({
-        enable: true,
+        enable: false,
       })
       .style({
         opacity: 1.0,
@@ -40,8 +40,18 @@ export default class CityBuildingLayerDemo extends React.Component {
         brightColor: 'rgb(255,176,38)',
       });
     scene.addLayer(pointLayer);
-    scene.render();
+
     this.scene = scene;
+
+    const gui = new dat.GUI();
+    const styleOptions = {
+      time: 1,
+    };
+    const pointFolder = gui.addFolder('动画控制');
+    pointFolder.add(styleOptions, 'time', 0, 4000, 1).onChange((t: number) => {
+      pointLayer.setLight(t);
+      scene.render();
+    });
   }
   public render() {
     return (