feat(layer): add citybuildinglayer & add line add animate

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<ILayerConfig> = {
   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),
     };
   }
 

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<IAnimateOption> | 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<ILayerConfig | unknown>): void;
+  setAnimateStartTime(): void;
+  getLayerAnimateTime(): number;
 }
 
 /**
@@ -242,6 +244,7 @@ export interface ILayerConfig {
    * 开启光照
    */
   enableLighting: boolean;
+  animateOption: Partial<IAnimateOption>;
   onHover(pickedFeature: IPickedFeature): void;
   onClick(pickedFeature: IPickedFeature): void;
 }

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 {

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() {

packages/core/src/shaders/project.glsl

@@ -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);
+}

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';
+  }
+}

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]];
+        },
+      },
+    });
+  }
+}

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

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

packages/layers/src/core/BaseLayer.ts

@@ -165,6 +165,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
 
   private scaleOptions: IScaleOptions = {};
 
+  private AnimateStartTime: number;
+
   constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
     super();
     this.name = config.name || this.id;
@@ -298,11 +300,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> 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<ChildLayerStyleOptions = {}> extends EventEmitter
     });
     return this;
   }
-  public animate(options: IAnimateOption) {
-    this.animateOptions = options;
+  public animate(options: IAnimateOption | boolean) {
+    let rawAnimate: Partial<IAnimateOption> = {};
+    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<ChildLayerStyleOptions = {}> 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<ChildLayerStyleOptions = {}> extends EventEmitter
       callback: isFunction(valuesOrCallback) ? valuesOrCallback : undefined,
     };
   }
-
-  private layerMapHander(type: string, data: any) {
-    this.emit(type, data);
-  }
 }

packages/layers/src/core/BaseModel.ts

@@ -1,5 +1,6 @@
 import {
   BlendType,
+  IAnimateOption,
   IAttribute,
   IBlendOptions,
   ICameraService,
@@ -86,4 +87,18 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
   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();
+    }
+  }
 }

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,
+};

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],

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,
   };
 }
 

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,

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<ILineLayerStyleOptions> {
   public type: string = 'LineLayer';
 
@@ -25,8 +18,18 @@ export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
       },
     };
   }
-
+  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(),

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(),
       }),
     ];
   }

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(),
       }),
     ];
   }

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<ILineLayerStyleOptions>;
+    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(),
       }),
     ];
   }

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,

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);
 }
 

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);
 }

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);

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);

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);
 }

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);

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);
 }

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', () => <Column />)
   .add('图片标注', () => <PointImage />)
   .add('面3d图层', () => <Polygon3D />)
+  .add('点亮城市', () => <CityBuildingLayerDemo />)
   .add('线图层', () => <LineLayer />)
   .add('虚线', () => <DashLineDemo />)
   .add('3D弧线', () => <ArcLineDemo />)

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;

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;

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();

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 (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

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;

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',