From 8fc57ceeafc39f2de4ed879279d08c046f40b3ce Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Wed, 25 Dec 2019 00:01:14 +0800 Subject: [PATCH] feat(layer): add citybuildinglayer & add line add animate --- .../core/src/services/config/ConfigService.ts | 11 +- .../core/src/services/layer/ILayerService.ts | 5 +- .../services/layer/IStyleAttributeService.ts | 1 + .../core/src/services/layer/LayerService.ts | 4 +- packages/core/src/shaders/project.glsl | 8 +- packages/layers/src/citybuliding/building.ts | 37 ++++++ .../layers/src/citybuliding/models/build.ts | 115 ++++++++++++++++++ .../src/citybuliding/shaders/build_frag.glsl | 104 ++++++++++++++++ .../src/citybuliding/shaders/build_vert.glsl | 33 +++++ packages/layers/src/core/BaseLayer.ts | 42 +++++-- packages/layers/src/core/BaseModel.ts | 15 +++ packages/layers/src/core/interface.ts | 16 +++ packages/layers/src/core/shape/extrude.ts | 18 ++- packages/layers/src/core/triangulation.ts | 4 +- packages/layers/src/index.ts | 4 +- packages/layers/src/line/index.ts | 23 ++-- packages/layers/src/line/models/arc.ts | 35 +++--- packages/layers/src/line/models/arc_3d.ts | 36 +++--- .../layers/src/line/models/great_circle.ts | 37 +++--- packages/layers/src/line/models/line.ts | 82 ++++++++++--- .../src/line/shaders/line_arc2d_vert.glsl | 21 +++- .../src/line/shaders/line_arc_frag.glsl | 26 +++- .../src/line/shaders/line_arc_vert.glsl | 19 +++ .../src/line/shaders/line_bezier_vert.glsl | 18 ++- .../src/line/shaders/line_dash_vert.glsl | 2 +- .../layers/src/line/shaders/line_frag.glsl | 33 +++-- .../layers/src/line/shaders/line_vert.glsl | 23 +++- .../layers/src/point/shaders/fill_vert.glsl | 2 +- stories/Layers/Layers.stories.tsx | 2 + stories/Layers/components/Arc2DLine.tsx | 25 ++-- stories/Layers/components/Arcline.tsx | 20 ++- stories/Layers/components/Line.tsx | 20 +-- stories/Layers/components/citybuilding.tsx | 60 +++++++++ stories/Layers/components/dash.tsx | 9 +- stories/Layers/components/light.tsx | 4 +- 35 files changed, 769 insertions(+), 145 deletions(-) create mode 100644 packages/layers/src/citybuliding/building.ts create mode 100644 packages/layers/src/citybuliding/models/build.ts create mode 100644 packages/layers/src/citybuliding/shaders/build_frag.glsl create mode 100644 packages/layers/src/citybuliding/shaders/build_vert.glsl create mode 100644 packages/layers/src/core/interface.ts create mode 100644 stories/Layers/components/citybuilding.tsx diff --git a/packages/core/src/services/config/ConfigService.ts b/packages/core/src/services/config/ConfigService.ts index 55c3c43a62..b0660c99a9 100644 --- a/packages/core/src/services/config/ConfigService.ts +++ b/packages/core/src/services/config/ConfigService.ts @@ -1,5 +1,6 @@ import Ajv from 'ajv'; import { injectable, postConstruct } from 'inversify'; +import { merge } from 'lodash'; import { ILayerConfig } from '../layer/ILayerService'; import { IGlobalConfigService, ISceneConfig } from './IConfigService'; import mapConfigSchema from './mapConfigSchema'; @@ -63,6 +64,12 @@ const defaultLayerConfig: Partial = { enableTAA: false, jitterScale: 1, enableLighting: false, + animateOption: { + enable: false, + interval: 0.2, + duration: 4, + trailLength: 0.15, + }, }; // @see https://github.com/epoberezkin/ajv#options @@ -141,9 +148,7 @@ export default class GlobalConfigService implements IGlobalConfigService { ) { // @ts-ignore this.layerConfigCache[layerId] = { - ...this.sceneConfigCache[sceneId], - ...defaultLayerConfig, - ...config, + ...merge({}, this.sceneConfigCache[sceneId], defaultLayerConfig, config), }; } diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index e0e6eaf9f7..3cad0f053c 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -116,7 +116,7 @@ export interface ILayer { color(field: StyleAttrField, value?: StyleAttributeOption): ILayer; shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer; label(field: StyleAttrField, value?: StyleAttributeOption): ILayer; - animate(option: IAnimateOption): ILayer; + animate(option: Partial | boolean): ILayer; // pattern(field: string, value: StyleAttributeOption): ILayer; filter(field: string, value: StyleAttributeOption): ILayer; active(option: IActiveOption | boolean): ILayer; @@ -172,6 +172,8 @@ export interface ILayer { pick(query: { x: number; y: number }): void; updateLayerConfig(configToUpdate: Partial): void; + setAnimateStartTime(): void; + getLayerAnimateTime(): number; } /** @@ -242,6 +244,7 @@ export interface ILayerConfig { * 开启光照 */ enableLighting: boolean; + animateOption: Partial; onHover(pickedFeature: IPickedFeature): void; onClick(pickedFeature: IPickedFeature): void; } diff --git a/packages/core/src/services/layer/IStyleAttributeService.ts b/packages/core/src/services/layer/IStyleAttributeService.ts index 0ca277cd61..9396ef0b9c 100644 --- a/packages/core/src/services/layer/IStyleAttributeService.ts +++ b/packages/core/src/services/layer/IStyleAttributeService.ts @@ -75,6 +75,7 @@ export interface IAnimateOption { interval?: number; duration?: number; trailLength?: number; + repeat?: number; } export interface IEncodeFeature { diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index fa9125e758..02d15bb6eb 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -81,6 +81,7 @@ export default class LayerService implements ILayerService { public startAnimate() { if (this.animateInstanceCount++ === 0) { + this.clock.start(); this.runRender(); } } @@ -88,6 +89,7 @@ export default class LayerService implements ILayerService { public stopAnimate() { if (--this.animateInstanceCount === 0) { this.stopRender(); + this.clock.stop(); } } @@ -102,7 +104,7 @@ export default class LayerService implements ILayerService { private runRender() { this.renderLayers(); - this.layerRenderID = requestAnimationFrame(this.renderLayers.bind(this)); + this.layerRenderID = requestAnimationFrame(this.runRender.bind(this)); } private stopRender() { diff --git a/packages/core/src/shaders/project.glsl b/packages/core/src/shaders/project.glsl index df6ee0bc43..4da968f5f8 100644 --- a/packages/core/src/shaders/project.glsl +++ b/packages/core/src/shaders/project.glsl @@ -8,7 +8,7 @@ vec2 ProjectFlat(vec2 lnglat){ float x=lnglat.x*d; float y=lat*d; y=log(tan((PI/4.)+(y/2.))); - + float a=.5/PI, b=.5, c=-.5/PI; @@ -32,3 +32,9 @@ vec2 unProjectFlat(vec2 px){ float lng=x/d; return vec2(lng,lat); } + +float pixelDistance(vec2 from, vec2 to) { + vec2 a1 = ProjectFlat(from); + vec2 b1 = ProjectFlat(to); + return distance(a1, b1); +} diff --git a/packages/layers/src/citybuliding/building.ts b/packages/layers/src/citybuliding/building.ts new file mode 100644 index 0000000000..ce415f1f96 --- /dev/null +++ b/packages/layers/src/citybuliding/building.ts @@ -0,0 +1,37 @@ +import { IEncodeFeature } from '@antv/l7-core'; +import BaseLayer from '../core/BaseLayer'; +import CityBuildModel from './models/build'; + +export default class CityBuildingLayer extends BaseLayer { + public type: string = 'PolygonLayer'; + + protected getConfigSchema() { + return { + properties: { + opacity: { + type: 'number', + minimum: 0, + maximum: 1, + }, + }, + }; + } + + protected renderModels() { + this.models.forEach((model) => + model.draw({ + uniforms: this.layerModel.getUninforms(), + }), + ); + return this; + } + + protected buildModels() { + this.layerModel = new CityBuildModel(this); + this.models = this.layerModel.buildModels(); + } + + protected getModelType(): string { + return 'citybuilding'; + } +} diff --git a/packages/layers/src/citybuliding/models/build.ts b/packages/layers/src/citybuliding/models/build.ts new file mode 100644 index 0000000000..6be8e04152 --- /dev/null +++ b/packages/layers/src/citybuliding/models/build.ts @@ -0,0 +1,115 @@ +import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core'; +import { rgb2arr } from '@antv/l7-utils'; +import BaseModel from '../../core/BaseModel'; +import { PolygonExtrudeTriangulation } from '../../core/triangulation'; +import buildFrag from '../shaders/build_frag.glsl'; +import buildVert from '../shaders/build_vert.glsl'; +interface ICityBuildLayerStyleOptions { + opacity: number; + baseColor: string; + brightColor: string; + windowColor: string; +} +export default class CityBuildModel extends BaseModel { + public getUninforms() { + const { + opacity = 1, + baseColor = 'rgb(16,16,16)', + brightColor = 'rgb(255,176,38)', + windowColor = 'rgb(30,60,89)', + } = 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(), + }; + } + + public buildModels(): IModel[] { + this.startModelAnimate(); + return [ + this.layer.buildLayerModel({ + moduleName: 'cityBuilding', + vertexShader: buildVert, + fragmentShader: buildFrag, + triangulation: PolygonExtrudeTriangulation, + }), + ]; + } + + protected registerBuiltinAttributes() { + // point layer size; + this.styleAttributeService.registerStyleAttribute({ + name: 'normal', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Normal', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.STATIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 3, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + normal: number[], + ) => { + return normal; + }, + }, + }); + + this.styleAttributeService.registerStyleAttribute({ + name: 'size', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Size', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + ) => { + const { size } = feature; + return Array.isArray(size) ? [size[0]] : [size as number]; + }, + }, + }); + this.styleAttributeService.registerStyleAttribute({ + name: 'uv', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Uv', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 2, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + ) => { + const { size } = feature; + return [vertex[3], vertex[4]]; + }, + }, + }); + } +} diff --git a/packages/layers/src/citybuliding/shaders/build_frag.glsl b/packages/layers/src/citybuliding/shaders/build_frag.glsl new file mode 100644 index 0000000000..0bfd15324d --- /dev/null +++ b/packages/layers/src/citybuliding/shaders/build_frag.glsl @@ -0,0 +1,104 @@ +uniform float u_opacity: 1.0; +uniform vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ]; +uniform vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ]; +uniform vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ]; +uniform float u_near : 0; +uniform float u_far : 1; +varying vec4 v_Color; +varying vec2 v_texCoord; +uniform float u_Zoom : 1; +uniform float u_time; + +#pragma include "picking" + +vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) { + float s = step(hot, n); + vec3 color = mix(brightColor,vec3(0.9,0.9,1.0),n); + + return mix(darkColor, color, s); +} +float random (vec2 st) { + return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); +} + +float LinearizeDepth() +{ + float z = gl_FragCoord.z * 2.0 - 1.0; + return (2.0 * u_near * u_far) / (u_far + u_near - z * (u_far - u_near)); +} + +vec3 fog(vec3 color, vec3 fogColor, float depth){ + float fogFactor=clamp(depth,0.0,1.0); + vec3 output_color=mix(fogColor,color,fogFactor); + return output_color; +} + +float sdRect(vec2 p, vec2 sz) { + vec2 d = abs(p) - sz; + float outside = length(max(d, 0.)); + float inside = min(max(d.x, d.y), 0.); + return outside + inside; +} + +void main() { + gl_FragColor = v_Color; + gl_FragColor.a *= u_opacity; + + vec3 baseColor = u_baseColor.xyz; + vec3 brightColor = u_brightColor.xyz; + vec3 windowColor = u_windowColor.xyz; + float targetColId = 5.; + float depth = 1.0 - LinearizeDepth() / u_far * u_Zoom; + vec3 fogColor = vec3(23.0/255.0,31.0/255.0,51.0/255.0); + if(v_texCoord.x < 0.) { //顶部颜色 + vec3 foggedColor = fog(baseColor.xyz + vec3(0.12*0.9,0.2*0.9,0.3*0.9),fogColor,depth); + gl_FragColor = vec4( foggedColor, v_Color.w); + }else { // 侧面颜色 + vec2 st = v_texCoord; + vec2 UvScale = v_texCoord; + float tStep = min(0.08,max(0.05* (18.0-u_Zoom),0.02)); + float tStart = 0.25 * tStep; + float tEnd = 0.75 * tStep; + float u = mod(UvScale.x, tStep); + float v = mod(UvScale.y, tStep); + float ux = floor(UvScale.x/tStep); + float uy = floor(UvScale.y/tStep); + float n = random(vec2(ux,uy)); + float lightP = u_time; + float head = 1.0- step(0.005,st.y); + /*step3*/ + // 将窗户颜色和墙面颜色区别开来 + float sU = step(tStart, u) - step(tEnd, u); + float sV = step(tStart, v) - step(tEnd, v); + vec2 windowSize = vec2(abs(tEnd-tStart),abs(tEnd-tStart)); + float dist = sdRect(vec2(u,v), windowSize); + float s = sU * sV; + + float curColId = floor(UvScale.x / tStep); + float sCol = step(targetColId - 0.2, curColId) - step(targetColId + 0.2, curColId); + + float mLightP = mod(lightP, 2.); + float sRow = step(mLightP - 0.2, st.y) - step(mLightP, st.y); + if(ux == targetColId){ + n =0.; + } + float timeP = min(0.75, abs ( sin(u_time/6.0) ) ); + float hot = smoothstep(1.0,0.0,timeP); + vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), s); + //vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), 1.0); + float sFinal = s * sCol * sRow; + color += mix(baseColor, brightColor, sFinal*n); + if (st.y<0.01){ + color = baseColor; + } + if(head ==1.0) { // 顶部亮线 + color = brightColor; + } + color = color * v_Color.rgb; + + vec3 foggedColor = fog(color,fogColor,depth); + + gl_FragColor = vec4(foggedColor,1.0); + } + gl_FragColor = filterColor(gl_FragColor); +} diff --git a/packages/layers/src/citybuliding/shaders/build_vert.glsl b/packages/layers/src/citybuliding/shaders/build_vert.glsl new file mode 100644 index 0000000000..70f30e045d --- /dev/null +++ b/packages/layers/src/citybuliding/shaders/build_vert.glsl @@ -0,0 +1,33 @@ +precision highp float; + +#define ambientRatio 0.5 +#define diffuseRatio 0.3 +#define specularRatio 0.2 + +attribute vec4 a_Color; +attribute vec3 a_Position; +attribute vec3 a_Normal; +attribute float a_Size; +uniform mat4 u_ModelMatrix; + +attribute vec2 a_Uv; +varying vec2 v_texCoord; + +varying vec4 v_Color; + +#pragma include "projection" +#pragma include "light" +#pragma include "picking" + +void main() { + vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0); + vec4 project_pos = project_position(pos); + v_texCoord = a_Uv; + gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0)); + + float lightWeight = calc_lighting(pos); + // v_Color = a_Color; + v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w); + + setPickingColor(a_PickingColor); +} diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 4a8f213200..596f80a9f5 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -165,6 +165,8 @@ export default class BaseLayer extends EventEmitter private scaleOptions: IScaleOptions = {}; + private AnimateStartTime: number; + constructor(config: Partial = {}) { super(); this.name = config.name || this.id; @@ -298,11 +300,16 @@ export default class BaseLayer extends EventEmitter this.inited = true; this.hooks.afterInit.call(); - // 更新 module 样式 + // 更新 model 样式 this.updateLayerConfig({ - ...this.rawConfig, ...(this.getDefaultConfig() as object), + ...this.rawConfig, }); + // 启动动画 + const { animateOption } = this.getLayerConfig(); + if (animateOption?.enable) { + this.layerService.startAnimate(); + } this.buildModels(); // 触发初始化完成事件; this.emit('inited'); @@ -381,8 +388,21 @@ export default class BaseLayer extends EventEmitter }); return this; } - public animate(options: IAnimateOption) { - this.animateOptions = options; + public animate(options: IAnimateOption | boolean) { + let rawAnimate: Partial = {}; + if (isObject(options)) { + rawAnimate.enable = true; + rawAnimate = { + ...rawAnimate, + ...options, + }; + } else { + rawAnimate.enable = options; + } + this.updateLayerConfig({ + animateOption: rawAnimate, + }); + // this.animateOptions = options; return this; } @@ -706,6 +726,16 @@ export default class BaseLayer extends EventEmitter }); } + public getTime() { + return this.layerService.clock.getDelta(); + } + public setAnimateStartTime() { + this.AnimateStartTime = this.layerService.clock.getElapsedTime(); + } + public getLayerAnimateTime(): number { + return this.layerService.clock.getElapsedTime() - this.AnimateStartTime; + } + protected getConfigSchema() { throw new Error('Method not implemented.'); } @@ -735,8 +765,4 @@ export default class BaseLayer extends EventEmitter callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined, }; } - - private layerMapHander(type: string, data: any) { - this.emit(type, data); - } } diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index e90c8f0d7e..fdacc33722 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/packages/layers/src/core/BaseModel.ts @@ -1,5 +1,6 @@ import { BlendType, + IAnimateOption, IAttribute, IBlendOptions, ICameraService, @@ -86,4 +87,18 @@ export default class BaseModel protected registerBuiltinAttributes() { throw new Error('Method not implemented.'); } + protected animateOption2Array(option: IAnimateOption): number[] { + return [ + option.enable ? 0 : 1.0, + option.duration || 4.0, + option.interval || 0.2, + option.trailLength || 0.1, + ]; + } + protected startModelAnimate() { + const { animateOption } = this.layer.getLayerConfig() as ILayerConfig; + if (animateOption.enable) { + this.layer.setAnimateStartTime(); + } + } } diff --git a/packages/layers/src/core/interface.ts b/packages/layers/src/core/interface.ts new file mode 100644 index 0000000000..49e83cdd49 --- /dev/null +++ b/packages/layers/src/core/interface.ts @@ -0,0 +1,16 @@ +export const enum lineStyleType { + 'solid' = 0.0, + 'dash' = 1.0, +} + +export interface ILineLayerStyleOptions { + opacity: number; + lineType?: keyof typeof lineStyleType; + dashArray?: [number, number]; + segmentNumber: number; +} + +export const lineStyleObj: { [key: string]: number } = { + solid: 0.0, + dash: 1.0, +}; diff --git a/packages/layers/src/core/shape/extrude.ts b/packages/layers/src/core/shape/extrude.ts index 6de03661a5..841bf408b2 100644 --- a/packages/layers/src/core/shape/extrude.ts +++ b/packages/layers/src/core/shape/extrude.ts @@ -87,7 +87,7 @@ export function fillPolygon(points: IPath[]) { export function extrude_PolygonNormal( path: IPath[], - needFlat = false, + needFlat = false, // 是否需要转成平面坐标 ): IExtrudeGeomety { const p1 = path[0][0]; const p2 = path[0][path[0].length - 1]; @@ -100,12 +100,12 @@ export function extrude_PolygonNormal( const positions = []; const indexArray = []; const normals = []; - // 设置顶部z值 + // 设置顶部z值 position uv for (let j = 0; j < vertices.length / dimensions; j++) { if (dimensions === 2) { - positions.push(vertices[j * 2], vertices[j * 2 + 1], 1); + positions.push(vertices[j * 2], vertices[j * 2 + 1], 1, -1, -1); } else { - positions.push(vertices[j * 3], vertices[j * 3 + 1], 1); + positions.push(vertices[j * 3], vertices[j * 3 + 1], 1, -1, -1); } normals.push(0, 0, 1); } @@ -127,20 +127,28 @@ export function extrude_PolygonNormal( if (nextPoint.length === 0) { nextPoint = flattengeo.vertices.slice(0, dimensions); } - const indexOffset = positions.length / 3; + const indexOffset = positions.length / 5; positions.push( prePoint[0], prePoint[1], 1, + 0, + 0, nextPoint[0], nextPoint[1], 1, + 0.1, + 0, prePoint[0], prePoint[1], 0, + 0, + 0.8, nextPoint[0], nextPoint[1], 0, + 0.1, + 0.8, ); const normal = computeVertexNormals( [nextPoint[0], nextPoint[1], 1], diff --git a/packages/layers/src/core/triangulation.ts b/packages/layers/src/core/triangulation.ts index c554840310..3fa658088c 100644 --- a/packages/layers/src/core/triangulation.ts +++ b/packages/layers/src/core/triangulation.ts @@ -103,10 +103,10 @@ export function PolygonExtrudeTriangulation(feature: IEncodeFeature) { ); return { - vertices: positions, // [ x, y, z ] + vertices: positions, // [ x, y, z, uv.x,uv.y ] indices: index, normals, - size: 3, + size: 5, }; } diff --git a/packages/layers/src/index.ts b/packages/layers/src/index.ts index 408d77b348..2a47c1029f 100644 --- a/packages/layers/src/index.ts +++ b/packages/layers/src/index.ts @@ -1,8 +1,8 @@ import { container, ILayerPlugin, TYPES } from '@antv/l7-core'; +import CityBuildingLayer from './citybuliding/building'; import BaseLayer from './core/BaseLayer'; import './glsl.d'; import HeatmapLayer from './heatmap'; -import DashLineLayer from './line/dash'; import LineLayer from './line/index'; import PointLayer from './point'; import PolygonLayer from './polygon'; @@ -107,7 +107,7 @@ export { PointLayer, PolygonLayer, LineLayer, - DashLineLayer, + CityBuildingLayer, ImageLayer, RasterLayer, HeatmapLayer, diff --git a/packages/layers/src/line/index.ts b/packages/layers/src/line/index.ts index 2daa0fbce6..d076a1f956 100644 --- a/packages/layers/src/line/index.ts +++ b/packages/layers/src/line/index.ts @@ -1,14 +1,7 @@ import BaseLayer from '../core/BaseLayer'; +import { ILineLayerStyleOptions } from '../core/interface'; import LineModels, { LineModelType } from './models'; -export enum LineType { - 'solid' = 'solid', - 'dash' = 'dash', -} -interface ILineLayerStyleOptions { - opacity: number; - lineType?: keyof typeof LineType; - dashArray?: [number, number]; -} + export default class LineLayer extends BaseLayer { public type: string = 'LineLayer'; @@ -25,8 +18,18 @@ export default class LineLayer extends BaseLayer { }, }; } - + protected getDefaultConfig() { + const type = this.getModelType(); + const defaultConfig = { + line: {}, + arc3d: { blend: 'additive' }, + arc: { blend: 'additive' }, + greatcircle: { blend: 'additive' }, + }; + return defaultConfig[type]; + } protected renderModels() { + // console.log(this.layerModel.getUninforms()); this.models.forEach((model) => model.draw({ uniforms: this.layerModel.getUninforms(), diff --git a/packages/layers/src/line/models/arc.ts b/packages/layers/src/line/models/arc.ts index 3283ddb680..75ecff1138 100644 --- a/packages/layers/src/line/models/arc.ts +++ b/packages/layers/src/line/models/arc.ts @@ -1,35 +1,42 @@ import { AttributeType, gl, + IAnimateOption, IEncodeFeature, + ILayerConfig, IModel, IModelUniform, } from '@antv/l7-core'; import BaseModel from '../../core/BaseModel'; +import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; import line_arc_frag from '../shaders/line_arc_frag.glsl'; import line_arc2d_vert from '../shaders/line_bezier_vert.glsl'; - -interface IArcLayerStyleOptions { - opacity: number; - segmentNumber: number; - blur: number; -} +const lineStyleObj: { [key: string]: number } = { + solid: 0.0, + dash: 1.0, +}; export default class ArcModel extends BaseModel { public getUninforms(): IModelUniform { const { opacity, - blur = 0.99, - } = this.layer.getLayerConfig() as IArcLayerStyleOptions; + lineType = 'solid', + dashArray = [10, 5], + } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { animateOption } = this.layer.getLayerConfig() as ILayerConfig; return { u_opacity: opacity || 1, segmentNumber: 30, - u_blur: blur, + u_line_type: lineStyleObj[lineType || 'solid'], + u_dash_array: dashArray, + u_aimate: this.animateOption2Array(animateOption as IAnimateOption), + u_time: this.layer.getLayerAnimateTime(), }; } public buildModels(): IModel[] { + this.startModelAnimate(); return [ this.layer.buildLayerModel({ moduleName: 'arc2dline', @@ -37,15 +44,7 @@ export default class ArcModel extends BaseModel { fragmentShader: line_arc_frag, triangulation: LineArcTriangulation, depth: { enable: false }, - blend: { - enable: true, - func: { - srcRGB: gl.ONE, - srcAlpha: 1, - dstRGB: gl.ONE, - dstAlpha: 1, - }, - }, + blend: this.getBlend(), }), ]; } diff --git a/packages/layers/src/line/models/arc_3d.ts b/packages/layers/src/line/models/arc_3d.ts index 70f14b8b97..12c4c258d4 100644 --- a/packages/layers/src/line/models/arc_3d.ts +++ b/packages/layers/src/line/models/arc_3d.ts @@ -1,44 +1,48 @@ import { AttributeType, gl, + IAnimateOption, IEncodeFeature, + ILayerConfig, IModel, IModelUniform, } from '@antv/l7-core'; import BaseModel from '../../core/BaseModel'; +import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; import line_arc_frag from '../shaders/line_arc_frag.glsl'; import line_arc_vert from '../shaders/line_arc_vert.glsl'; - -interface IArcLayerStyleOptions { - opacity: number; - segmentNumber: number; -} +const lineStyleObj: { [key: string]: number } = { + solid: 0.0, + dash: 1.0, +}; export default class Arc3DModel extends BaseModel { public getUninforms(): IModelUniform { - const { opacity } = this.layer.getLayerConfig() as IArcLayerStyleOptions; + const { + opacity, + lineType = 'solid', + dashArray = [10, 5], + } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { animateOption } = this.layer.getLayerConfig() as ILayerConfig; return { u_opacity: opacity || 1, segmentNumber: 30, + u_line_type: lineStyleObj[lineType as string] || 0.0, + u_dash_array: dashArray, + u_aimate: this.animateOption2Array(animateOption as IAnimateOption), + u_time: this.layer.getLayerAnimateTime(), }; } public buildModels(): IModel[] { + this.startModelAnimate(); return [ this.layer.buildLayerModel({ - moduleName: 'arcline', + moduleName: 'arc3Dline', vertexShader: line_arc_vert, fragmentShader: line_arc_frag, triangulation: LineArcTriangulation, - blend: { - enable: true, - func: { - srcRGB: gl.ONE, - srcAlpha: 1, - dstRGB: gl.ONE, - dstAlpha: 1, - }, - }, + blend: this.getBlend(), }), ]; } diff --git a/packages/layers/src/line/models/great_circle.ts b/packages/layers/src/line/models/great_circle.ts index d43326842c..35d28ce1f4 100644 --- a/packages/layers/src/line/models/great_circle.ts +++ b/packages/layers/src/line/models/great_circle.ts @@ -1,35 +1,46 @@ import { AttributeType, gl, + IAnimateOption, IEncodeFeature, + ILayerConfig, IModel, IModelUniform, } from '@antv/l7-core'; import BaseModel from '../../core/BaseModel'; +import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; import line_arc2d_vert from '../shaders/line_arc2d_vert.glsl'; import line_arc_frag from '../shaders/line_arc_frag.glsl'; +const lineStyleObj: { [key: string]: number } = { + solid: 0.0, + dash: 1.0, +}; -interface IArcLayerStyleOptions { - opacity: number; - segmentNumber: number; - blur: number; -} export default class GreatCircleModel extends BaseModel { public getUninforms(): IModelUniform { const { opacity, - blur = 0.99, - } = this.layer.getLayerConfig() as IArcLayerStyleOptions; + lineType = 'solid', + dashArray = [10, 5], + } = this.layer.getLayerConfig() as Partial; + const { animateOption } = this.layer.getLayerConfig() as ILayerConfig; return { u_opacity: opacity || 1, segmentNumber: 30, - u_blur: blur, + u_line_type: lineStyleObj[lineType as string] || 0.0, + u_dash_array: dashArray, + u_aimate: this.animateOption2Array(animateOption as IAnimateOption), + u_time: this.layer.getLayerAnimateTime(), }; } public buildModels(): IModel[] { + const { animateOption } = this.layer.getLayerConfig() as ILayerConfig; + if (animateOption.enable) { + this.layer.setAnimateStartTime(); + } return [ this.layer.buildLayerModel({ moduleName: 'arc2dline', @@ -37,15 +48,7 @@ export default class GreatCircleModel extends BaseModel { fragmentShader: line_arc_frag, triangulation: LineArcTriangulation, depth: { enable: false }, - blend: { - enable: true, - func: { - srcRGB: gl.ONE, - srcAlpha: 1, - dstRGB: gl.ONE, - dstAlpha: 1, - }, - }, + blend: this.getBlend(), }), ]; } diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts index 9cc28bfc00..6e11d53950 100644 --- a/packages/layers/src/line/models/line.ts +++ b/packages/layers/src/line/models/line.ts @@ -1,49 +1,103 @@ import { AttributeType, gl, + IAnimateOption, IEncodeFeature, + ILayerConfig, IModel, IModelUniform, } from '@antv/l7-core'; import BaseModel from '../../core/BaseModel'; +import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineTriangulation } from '../../core/triangulation'; import line_frag from '../shaders/line_frag.glsl'; import line_vert from '../shaders/line_vert.glsl'; - -interface ILineLayerStyleOptions { - opacity: number; -} +const lineStyleObj: { [key: string]: number } = { + solid: 0.0, + dash: 1.0, +}; export default class LineModel extends BaseModel { public getUninforms(): IModelUniform { - const { opacity } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { + opacity, + lineType = lineStyleType.solid, + dashArray = [10, 5], + } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + const { animateOption } = this.layer.getLayerConfig() as ILayerConfig; return { u_opacity: opacity || 1.0, + u_line_type: lineStyleObj[lineType], + u_dash_array: dashArray, + u_aimate: this.animateOption2Array(animateOption as IAnimateOption), + u_time: this.layer.getLayerAnimateTime(), }; } public buildModels(): IModel[] { + this.startModelAnimate(); return [ this.layer.buildLayerModel({ moduleName: 'line', vertexShader: line_vert, fragmentShader: line_frag, triangulation: LineTriangulation, - blend: { - enable: true, - func: { - srcRGB: gl.SRC_ALPHA, - srcAlpha: 1, - dstRGB: gl.ONE_MINUS_SRC_ALPHA, - dstAlpha: 1, - }, - }, + blend: this.getBlend(), }), ]; } protected registerBuiltinAttributes() { // const lineType = this // point layer size; + const { + lineType = 'solid', + } = this.layer.getLayerConfig() as ILineLayerStyleOptions; + // if (lineType === 'dash') { + this.styleAttributeService.registerStyleAttribute({ + name: 'distance', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Distance', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + ) => { + return [vertex[3]]; + }, + }, + }); + this.styleAttributeService.registerStyleAttribute({ + name: 'total_distance', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Total_Distance', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + ) => { + return [vertex[5]]; + }, + }, + }); + // } this.styleAttributeService.registerStyleAttribute({ name: 'size', type: AttributeType.Attribute, diff --git a/packages/layers/src/line/shaders/line_arc2d_vert.glsl b/packages/layers/src/line/shaders/line_arc2d_vert.glsl index 93b7bc9534..e9cfafb0d0 100644 --- a/packages/layers/src/line/shaders/line_arc2d_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc2d_vert.glsl @@ -1,13 +1,23 @@ +#define LineTypeSolid 0.0 +#define LineTypeDash 1.0 +#define Animate 0.0 attribute vec4 a_Color; attribute vec3 a_Position; attribute vec4 a_Instance; attribute float a_Size; uniform mat4 u_ModelMatrix; uniform float segmentNumber; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; varying vec4 v_color; varying vec2 v_normal; +varying float v_distance_ratio; +uniform float u_line_type: 0.0; +uniform vec2 u_dash_array: [10.0, 5.]; +varying vec2 v_dash_array; + #pragma include "projection" +#pragma include "project" #pragma include "picking" float maps (float value, float start1, float stop1, float start2, float stop2) { @@ -83,13 +93,22 @@ void main() { float segmentIndex = a_Position.x; float segmentRatio = getSegmentRatio(segmentIndex); float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); + if(u_line_type == LineTypeDash) { + v_distance_ratio = segmentIndex / segmentNumber; + float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba); + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); + } + if(u_aimate.x == Animate) { + v_distance_ratio = segmentIndex / segmentNumber; + } float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); + v_distance_ratio = segmentIndex / segmentNumber; vec4 curr = project_position(vec4(degrees(interpolate(source, target, angularDist, segmentRatio)), 0.0, 1.0)); vec4 next = project_position(vec4(degrees(interpolate(source, target, angularDist, nextSegmentRatio)), 0.0, 1.0)); v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y)); // vec4 project_pos = project_position(vec4(curr.xy, 0, 1.0)); - gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); + gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, curr.z, 1.0)); setPickingColor(a_PickingColor); } diff --git a/packages/layers/src/line/shaders/line_arc_frag.glsl b/packages/layers/src/line/shaders/line_arc_frag.glsl index a371c17cb7..4c1757aaf6 100644 --- a/packages/layers/src/line/shaders/line_arc_frag.glsl +++ b/packages/layers/src/line/shaders/line_arc_frag.glsl @@ -1,7 +1,17 @@ +#define LineTypeSolid 0.0 +#define LineTypeDash 1.0 +#define Animate 0.0 + uniform float u_opacity; -varying vec4 v_color; -uniform float u_blur : 0.90; +uniform float u_blur : 0.9; +uniform float u_line_type: 0.0; varying vec2 v_normal; +varying vec2 v_dash_array; +varying float v_distance_ratio; +varying vec4 v_color; + +uniform float u_time; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; #pragma include "picking" @@ -9,5 +19,17 @@ void main() { gl_FragColor = v_color; float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)); gl_FragColor.a *= (blur * u_opacity); + if(u_line_type == LineTypeDash) { + gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y))); + // gl_FragColor.a = + } + + if(u_aimate.x == Animate) { + float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y); + alpha = (alpha + u_aimate.w -1.0) / u_aimate.w; + alpha = smoothstep(0., 1., alpha); + gl_FragColor.a *= alpha; + // gl_FragColor.a = fract(u_time); + } gl_FragColor = filterColor(gl_FragColor); } diff --git a/packages/layers/src/line/shaders/line_arc_vert.glsl b/packages/layers/src/line/shaders/line_arc_vert.glsl index 7ac5b71df4..d0ce46b315 100644 --- a/packages/layers/src/line/shaders/line_arc_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_vert.glsl @@ -1,3 +1,6 @@ +#define LineTypeSolid 0.0 +#define LineTypeDash 1.0 +#define Animate 0.0 attribute vec3 a_Position; attribute vec4 a_Instance; attribute vec4 a_Color; @@ -5,10 +8,17 @@ attribute float a_Size; uniform mat4 u_ModelMatrix; uniform float segmentNumber; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; varying vec4 v_color; varying vec2 v_normal; +varying float v_distance_ratio; +uniform float u_line_type: 0.0; +uniform vec2 u_dash_array: [10.0, 5.]; + +varying vec2 v_dash_array; #pragma include "projection" +#pragma include "project" #pragma include "picking" float maps (float value, float start1, float stop1, float start2, float stop2) { @@ -61,6 +71,15 @@ void main() { float segmentRatio = getSegmentRatio(segmentIndex); float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); + if(u_line_type == LineTypeDash) { + v_distance_ratio = segmentIndex / segmentNumber; + float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); + } + if(u_aimate.x == Animate) { + v_distance_ratio = segmentIndex / segmentNumber; + } + float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); vec3 curr = getPos(source, target, segmentRatio); vec3 next = getPos(source, target, nextSegmentRatio); diff --git a/packages/layers/src/line/shaders/line_bezier_vert.glsl b/packages/layers/src/line/shaders/line_bezier_vert.glsl index 4856661047..50a8b340ae 100644 --- a/packages/layers/src/line/shaders/line_bezier_vert.glsl +++ b/packages/layers/src/line/shaders/line_bezier_vert.glsl @@ -1,13 +1,22 @@ +#define LineTypeSolid 0.0 +#define LineTypeDash 1.0 +#define Animate 0.0 attribute vec4 a_Color; attribute vec3 a_Position; attribute vec4 a_Instance; attribute float a_Size; uniform mat4 u_ModelMatrix; uniform float segmentNumber; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; varying vec4 v_color; varying vec2 v_normal; +varying float v_distance_ratio; +uniform float u_line_type: 0.0; +uniform vec2 u_dash_array: [10.0, 5.]; +varying vec2 v_dash_array; #pragma include "projection" +#pragma include "project" #pragma include "picking" float bezier3(vec3 arr, float t) { @@ -58,7 +67,14 @@ void main() { float segmentRatio = getSegmentRatio(segmentIndex); float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); - + if(u_line_type == LineTypeDash) { + v_distance_ratio = segmentIndex / segmentNumber; + float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); + } + if(u_aimate.x == Animate) { + v_distance_ratio = segmentIndex / segmentNumber; + } vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio), 0.0, 1.0)); vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio), 0.0, 1.0)); v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); diff --git a/packages/layers/src/line/shaders/line_dash_vert.glsl b/packages/layers/src/line/shaders/line_dash_vert.glsl index ec7c3590d6..e918c3b10e 100644 --- a/packages/layers/src/line/shaders/line_dash_vert.glsl +++ b/packages/layers/src/line/shaders/line_dash_vert.glsl @@ -22,7 +22,7 @@ varying float v_distance_ratio; #pragma include "projection" void main() { - + v_distance_ratio = a_Distance / a_Total_Distance; v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance; diff --git a/packages/layers/src/line/shaders/line_frag.glsl b/packages/layers/src/line/shaders/line_frag.glsl index 041b2fba47..60d1cd60e5 100644 --- a/packages/layers/src/line/shaders/line_frag.glsl +++ b/packages/layers/src/line/shaders/line_frag.glsl @@ -1,29 +1,42 @@ +#define LineTypeSolid 0.0 +#define LineTypeDash 1.0 +#define Animate 0.0 uniform float u_blur : 0.9; +uniform float u_line_type: 0.0; uniform float u_opacity : 1.0; -uniform float u_dash_offset : 0.0; -uniform float u_dash_ratio : 0.0; varying vec4 v_color; varying vec2 v_normal; + +// dash +uniform float u_dash_offset : 0.0; +uniform float u_dash_ratio : 0.1; +varying float v_distance_ratio; +varying vec2 v_dash_array; + + #pragma include "picking" uniform float u_time; uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; // [animate, duration, interval, trailLength], -varying float v_distance_ratio; -varying float v_dash_array; void main() { gl_FragColor = v_color; // anti-alias float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)) * u_opacity; // gl_FragColor.a *= blur; - #ifdef ANIMATE - float alpha =1.0 - fract( mod(1.0- v_distance_ratio,u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y); - alpha = (alpha + u_aimate.w -1.0) / u_aimate.w; - alpha = smoothstep(0., 1., alpha); - gl_FragColor.a *= alpha * blur; - #endif + if(u_aimate.x == Animate) { + float alpha =1.0 - fract( mod(1.0- v_distance_ratio, u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y); + alpha = (alpha + u_aimate.w -1.0) / u_aimate.w; + alpha = smoothstep(0., 1., alpha); + gl_FragColor.a *= alpha * blur; + // gl_FragColor.a = fract(u_time); + } + // dash line + if(u_line_type == LineTypeDash) { + gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y))); + } gl_FragColor = filterColor(gl_FragColor); } diff --git a/packages/layers/src/line/shaders/line_vert.glsl b/packages/layers/src/line/shaders/line_vert.glsl index d29d006822..138db7c8b1 100644 --- a/packages/layers/src/line/shaders/line_vert.glsl +++ b/packages/layers/src/line/shaders/line_vert.glsl @@ -1,19 +1,40 @@ +#define LineTypeSolid 0.0 +#define LineTypeDash 1.0 +#define Animate 0.0 attribute float a_Miter; attribute vec4 a_Color; attribute vec2 a_Size; attribute vec3 a_Normal; attribute vec3 a_Position; + +// dash line +attribute float a_Total_Distance; +attribute float a_Distance; + uniform mat4 u_ModelMatrix; +uniform float u_line_type: 0.0; +uniform vec2 u_dash_array: [10.0, 5.]; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; #pragma include "projection" #pragma include "picking" varying vec4 v_color; -varying float v_dash_array; +varying vec2 v_dash_array; varying vec2 v_normal; +varying float v_distance_ratio; + void main() { + + if(u_line_type == LineTypeDash) { + v_distance_ratio = a_Distance / a_Total_Distance; + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / a_Total_Distance; + } + if(u_aimate.x == Animate) { + v_distance_ratio = a_Distance / a_Total_Distance; + } v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter)); v_color = a_Color; vec3 size = a_Miter * a_Size.x * reverse_offset_normal(a_Normal); //v_normal * vec3(1., -1., 1.0); diff --git a/packages/layers/src/point/shaders/fill_vert.glsl b/packages/layers/src/point/shaders/fill_vert.glsl index af5cb17eb2..6c02c62349 100644 --- a/packages/layers/src/point/shaders/fill_vert.glsl +++ b/packages/layers/src/point/shaders/fill_vert.glsl @@ -34,7 +34,7 @@ void main() { float antialiasblur = 1.0 / (a_Size + u_stroke_width); // construct point coords - v_data = vec4(extrude, antialiasblur, shape_type); + v_data = vec4(extrude, antialiasblur, ); setPickingColor(a_PickingColor); } diff --git a/stories/Layers/Layers.stories.tsx b/stories/Layers/Layers.stories.tsx index 4fd56d0c2f..2e0ee5fda8 100644 --- a/stories/Layers/Layers.stories.tsx +++ b/stories/Layers/Layers.stories.tsx @@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import Arc2DLineDemo from './components/Arc2DLine'; import ArcLineDemo from './components/Arcline'; +import CityBuildingLayerDemo from './components/citybuilding'; import Column from './components/column'; import DashLineDemo from './components/dash'; import DataUpdate from './components/data_update'; @@ -24,6 +25,7 @@ storiesOf('图层', module) .add('Column', () => ) .add('图片标注', () => ) .add('面3d图层', () => ) + .add('点亮城市', () => ) .add('线图层', () => ) .add('虚线', () => ) .add('3D弧线', () => ) diff --git a/stories/Layers/components/Arc2DLine.tsx b/stories/Layers/components/Arc2DLine.tsx index ee39fda8ce..8253bf9228 100644 --- a/stories/Layers/components/Arc2DLine.tsx +++ b/stories/Layers/components/Arc2DLine.tsx @@ -1,5 +1,5 @@ import { LineLayer, Scene } from '@antv/l7'; -import { Mapbox } from '@antv/l7-maps'; +import { Mapbox, GaodeMap } from '@antv/l7-maps'; import * as React from 'react'; export default class Arc2DLineDemo extends React.Component { @@ -16,17 +16,14 @@ export default class Arc2DLineDemo extends React.Component { ); const scene = new Scene({ id: 'map', - map: new Mapbox({ + map: new GaodeMap({ center: [116.2825, 39.9], pitch: 0, - style: 'mapbox://styles/mapbox/dark-v9', + style: 'dark', zoom: 2, }), }); - const lineLayer = new LineLayer({ - enablePicking: true, - enableHighlight: true, - }) + const lineLayer = new LineLayer() .source(await response.text(), { parser: { type: 'csv', @@ -36,9 +33,17 @@ export default class Arc2DLineDemo extends React.Component { y1: 'lat2', }, }) - .size(0.5) - .shape('arc') - .color('rgb(13,64,140)'); + .size(1.2) + .shape('greatcircle') + .color('rgb(13,64,140)') + .animate({ + interval: 0.5, + duration: 2, + trailLength: 0.4, + }) + .style({ + opacity: 0.6, + }); scene.addLayer(lineLayer); scene.render(); this.scene = scene; diff --git a/stories/Layers/components/Arcline.tsx b/stories/Layers/components/Arcline.tsx index a746fbcc8c..9994416150 100644 --- a/stories/Layers/components/Arcline.tsx +++ b/stories/Layers/components/Arcline.tsx @@ -19,14 +19,13 @@ export default class ArcLineDemo extends React.Component { map: new Mapbox({ center: [116.2825, 39.9], pitch: 0, - style: 'mapbox://styles/mapbox/dark-v9', + style: 'dark', zoom: 2, }), }); this.scene = scene; const lineLayer = new LineLayer({ - enablePicking: true, - enableHighlight: true, + blend: 'normal', }) .source(await response.text(), { parser: { @@ -37,9 +36,18 @@ export default class ArcLineDemo extends React.Component { y1: 'lat2', }, }) - .size(0.5) - .shape('arc') - .color('rgb(13,64,140)'); + .size(1) + .shape('arc3d') + .active(true) + .color('rgb(13,64,140)') + .animate({ + interval: 0.1, + duration: 2, + trailLength: 1.0, + }) + .style({ + lineType: 'dash', + }); scene.addLayer(lineLayer); scene.render(); this.scene = scene; diff --git a/stories/Layers/components/Line.tsx b/stories/Layers/components/Line.tsx index ec09d0b702..f414e011c5 100644 --- a/stories/Layers/components/Line.tsx +++ b/stories/Layers/components/Line.tsx @@ -23,15 +23,7 @@ export default class LineDemo extends React.Component { zoom: 13, }), }); - const lineLayer = new LineLayer({ - enableMultiPassRenderer: true, - enablePicking: true, - enableHighlight: true, - // onHover: (pickedFeature: any) => { - // // tslint:disable-next-line:no-console - // console.log('Scene4', pickedFeature); - // }, - }) + const lineLayer = new LineLayer() .source(await response.json()) .size(1) .shape('line') @@ -49,7 +41,15 @@ export default class LineDemo extends React.Component { '#0D408C', '#002466', ].reverse(), - ); + ) + .animate({ + interval: 0.1, + trailLength: 0.05, + duration: 2, + }) + .style({ + lineType: 'solid', + }); scene.addLayer(lineLayer); scene.render(); diff --git a/stories/Layers/components/citybuilding.tsx b/stories/Layers/components/citybuilding.tsx new file mode 100644 index 0000000000..1b70dd6fc6 --- /dev/null +++ b/stories/Layers/components/citybuilding.tsx @@ -0,0 +1,60 @@ +import { CityBuildingLayer, Scene } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class CityBuildingLayerDemo extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const response = await fetch( + 'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json', + ); + const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'dark', + center: [121.507674, 31.223043], + pitch: 65.59312320916906, + zoom: 15.4, + minZoom: 15, + maxZoom: 18, + }), + }); + 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); + scene.render(); + this.scene = scene; + } + public render() { + return ( +
+ ); + } +} diff --git a/stories/Layers/components/dash.tsx b/stories/Layers/components/dash.tsx index f06b9d94de..efa7055b94 100644 --- a/stories/Layers/components/dash.tsx +++ b/stories/Layers/components/dash.tsx @@ -1,4 +1,4 @@ -import { DashLineLayer, Scene } from '@antv/l7'; +import { LineLayer, Scene } from '@antv/l7'; import { Mapbox } from '@antv/l7-maps'; import * as React from 'react'; @@ -23,7 +23,7 @@ export default class DashLineDemo extends React.Component { zoom: 14, }), }); - const lineLayer = new DashLineLayer() + const lineLayer = new LineLayer() .source(await response.json()) .size(1) .shape('line') @@ -41,7 +41,10 @@ export default class DashLineDemo extends React.Component { '#0D408C', '#002466', ].reverse(), - ); + ) + .style({ + lineType: 'dash', + }); scene.addLayer(lineLayer); this.scene = scene; diff --git a/stories/Layers/components/light.tsx b/stories/Layers/components/light.tsx index 045eb87dc9..0a987f72d8 100644 --- a/stories/Layers/components/light.tsx +++ b/stories/Layers/components/light.tsx @@ -27,7 +27,9 @@ export default class Light extends React.Component { }); this.scene = scene; scene.on('loaded', async () => { - const pointLayer = new PointLayer() + const pointLayer = new PointLayer({ + blend: 'normal', + }) .source(pointsData, { parser: { type: 'csv',