diff --git a/docs/api/layer/cityBuilding.en.md b/docs/api/layer/cityBuilding.en.md index 11a2d961dc..c8568aecc9 100644 --- a/docs/api/layer/cityBuilding.en.md +++ b/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); +``` diff --git a/docs/api/layer/cityBuilding.zh.md b/docs/api/layer/cityBuilding.zh.md index 043651acc5..c67495dfac 100644 --- a/docs/api/layer/cityBuilding.zh.md +++ b/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 diff --git a/packages/core/src/services/config/__tests__/schema.spec.ts b/packages/core/src/services/config/__tests__/schema.spec.ts index 4e44415c10..165b759093 100644 --- a/packages/core/src/services/config/__tests__/schema.spec.ts +++ b/packages/core/src/services/config/__tests__/schema.spec.ts @@ -23,11 +23,11 @@ describe('ConfigService', () => { }); it("should validate scene's options according to JSON schema", () => { - const { valid, errorText } = configService.validateSceneConfig({ - id: 0, - }); - expect(valid).toBeFalsy(); - expect(errorText).toMatch('id should be string'); + // const { valid, errorText } = configService.validateSceneConfig({ + // id: 0, + // }); + // expect(valid).toBeFalsy(); + // expect(errorText).toMatch('id should be string'); expect( configService.validateSceneConfig({ diff --git a/packages/core/src/services/config/sceneConfigSchema.ts b/packages/core/src/services/config/sceneConfigSchema.ts index c8b75ce824..daac2339c8 100644 --- a/packages/core/src/services/config/sceneConfigSchema.ts +++ b/packages/core/src/services/config/sceneConfigSchema.ts @@ -4,8 +4,5 @@ export default { properties: { // 地图容器 ID - id: { - type: 'string', - }, }, }; diff --git a/packages/core/src/services/log/LogService.ts b/packages/core/src/services/log/LogService.ts index 4d0e4e84e3..07ce6ed403 100644 --- a/packages/core/src/services/log/LogService.ts +++ b/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 { diff --git a/packages/layers/src/citybuliding/building.ts b/packages/layers/src/citybuliding/building.ts index 02fb7ae7eb..790ccfcede 100644 --- a/packages/layers/src/citybuliding/building.ts +++ b/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: { diff --git a/packages/layers/src/citybuliding/models/build.ts b/packages/layers/src/citybuliding/models/build.ts index 6be8e04152..8bf3d709c3 100644 --- a/packages/layers/src/citybuliding/models/build.ts +++ b/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, }; } diff --git a/packages/maps/src/BaseMapWrapper.ts b/packages/maps/src/BaseMapWrapper.ts index 8dcb324465..4f1ad1a237 100644 --- a/packages/maps/src/BaseMapWrapper.ts +++ b/packages/maps/src/BaseMapWrapper.ts @@ -21,7 +21,7 @@ export default class BaseMapWrapper 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, diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts index b8659c1716..6b8798b420 100644 --- a/packages/maps/src/mapbox/map.ts +++ b/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, diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 44935e279e..adc4f29933 100644 --- a/packages/scene/src/index.ts +++ b/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; diff --git a/stories/Layers/components/AnimatePoint.tsx b/stories/Layers/components/AnimatePoint.tsx index b8fed03b64..b68a68d83d 100644 --- a/stories/Layers/components/AnimatePoint.tsx +++ b/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', diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx index 75d2949200..e4628ee7b9 100644 --- a/stories/Layers/components/Point.tsx +++ b/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, diff --git a/stories/Layers/components/citybuilding.tsx b/stories/Layers/components/citybuilding.tsx index 1b70dd6fc6..6e6d90b7ac 100644 --- a/stories/Layers/components/citybuilding.tsx +++ b/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 (