fix(demo): gatsby

examples/heatmap/grid/demo/grid.js

@@ -24,7 +24,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-941
         transforms: [
           {
             type: 'grid',
-            size: 50,
+            size: 20,
             field: 'count',
             method: 'sum',
           },
@@ -33,22 +33,17 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-941
       .size('sum', (value) => {
         return value;
       })
-      .shape('square')
+      .shape('circle')
       .style({
-        coverage: 1.0,
+        coverage: 0.8,
         angle: 0,
         opacity: 1.0,
       })
-      .color('count', [
+      .color('count',  ['#0A3663', '#1558AC',
-        '#002466',
+      '#3771D9', '#4D89E5',
-        '#105CB3',
+      '#64A5D3', '#72BED6',
-        '#2894E0',
+      '#83CED6', '#A6E1E0',
-        '#CFF6FF',
+      '#B8EFE2', '#D7F9F0']);
-        '#FFF5B8',
-        '#FFAB5C',
-        '#F27049',
-        '#730D1C',
-      ]);
     scene.addLayer(layer);
     console.log(layer);
 

examples/heatmap/heatmap/demo/meta.json

@@ -1,16 +1,16 @@
 {
   "title": {
-    "zh": "网格热力图",
+    "zh": "经典热力图",
     "en": "heatmap"
   },
   "demos": [
     {
       "filename": "world3d.js",
-      "title": "网格热力图"
+      "title": "经典热力图3D"
     },
     {
       "filename": "world.js",
-      "title": "世界电厂热力图"
+      "title": "经典热力图2D"
     }
   ]
 }

examples/heatmap/heatmap/index.zh.md

@@ -1,4 +1,6 @@
 ---
 title: 经典热力图
 order: 0
+redirect_from:
+  - /zh/examples/heatmap/
 ---

examples/heatmap/hexagon/demo/hexagon.ts

@@ -26,9 +26,6 @@ fetch(
         ],
       })
       .size('sum', [0, 600])
-      .scale('sum', {
-        type: 'quantize',
-      })
       .shape('hexagon')
       .style({
         coverage: 0.8,
@@ -50,5 +47,4 @@ fetch(
         ].reverse(),
       );
     scene.addLayer(layer);
-    console.log(layer);
   });

examples/line/basic/demo/path.js

@@ -1,28 +0,0 @@
-import { Scene } from '@l7/scene';
-import { LineLayer } from '@l7/layers'
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [120.2336, 30.2002],
-  zoom: 15,
-});
-
-fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727da84e9908.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new LineLayer({
-      })
-        .source(data)
-        .size(1.5)
-        .shape('line')
-        .color(
-          'name',
-          ['#5B8FF9','#5CCEA1','#7B320A' ]
-        )
-    scene.addLayer(layer);
-    console.log(layer);
-
-  });

examples/line/basic/index.zh.md

@@ -1,4 +0,0 @@
----
-title: 路径地图
-order: 0
----

examples/line/dash/demo/line.js

@@ -1,44 +0,0 @@
-import { Scene } from '@l7/scene';
-import { DashLineLayer } from '@l7/layers'
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [102.602992, 23.107329],
-  zoom: 14,
-});
-
-fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new DashLineLayer({
-      })
-        .source(data)
-        .size('ELEV', (h) => {
-          return h % 50 === 0 ? 1.0 : 0.5;
-        })
-        .shape('line')
-        .scale('ELEV', {
-          type: 'quantize'
-        })
-        .color(
-          'ELEV',
-          [ '#E4682F',
-            '#FF8752',
-            '#FFA783',
-            '#FFBEA8',
-            '#FFDCD6',
-            '#EEF3FF',
-            '#C8D7F5',
-            '#A5C1FC',
-            '#7FA7F9',
-            '#5F8AE5' ].reverse()
-        ).style({
-          dashArray:[10, 1],
-        })
-    scene.addLayer(layer);
-    console.log(layer);
-
-  });

examples/line/dash/demo/meta.json

@@ -1,20 +0,0 @@
-{
-  "title": {
-    "zh": "线图层",
-    "en": "line"
-  },
-  "demos": [
-    {
-      "filename": "path.js",
-      "title": "路径"
-    },
-    {
-      "filename": "line.js",
-      "title": "等高线"
-    },
-    {
-      "filename": "line2.js",
-      "title": "等值线"
-    }
-  ]
-}

examples/line/dash/demo/path.js

@@ -1,96 +0,0 @@
-import { Scene } from '@l7/scene';
-import { DashLineLayer } from '@l7/layers'
-const scene = new Scene({
-  id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [120.2336, 30.2002],
-  zoom: 3,
-});
-const lineData ={
-  "type": "FeatureCollection",
-  "features": [
-    {
-      "type": "Feature",
-      "properties": {},
-      "geometry": {
-        "type": "LineString",
-        "coordinates": [
-          [
-            102.98583984374999,
-            37.666429212090605
-          ],
-          [
-            111.33544921874999,
-            37.23032838760387
-          ],
-          [
-            111.24755859375,
-            34.92197103616377
-          ],
-          [
-            98.15185546874999,
-            35.44277092585766
-          ],
-          [
-            98.701171875,
-            41.09591205639546
-          ],
-          [
-            100.5908203125,
-            41.0130657870063
-          ],
-          [
-            101.09619140625,
-            41.0130657870063
-          ],
-          [
-            101.689453125,
-            41.0130657870063
-          ],
-          [
-            102.26074218749999,
-            41.0130657870063
-          ],
-          [
-            102.26074218749999,
-            40.58058466412761
-          ],
-          [
-            102.23876953125,
-            40.329795743702064
-          ],
-          [
-            102.23876953125,
-            39.977120098439634
-          ],
-          [
-            102.26074218749999,
-            40.212440718286466
-          ],
-          [
-            102.48046875,
-            39.87601941962116
-          ]
-        ]
-      }
-    }
-  ]
-};
-fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727da84e9908.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new DashLineLayer({
-      })
-        .source(lineData)
-        .size(1.5)
-        .shape('line')
-        .color(
-          '#5B8FF9'
-        )
-    scene.addLayer(layer);
-    console.log(layer);
-
-  });

examples/line/dash/index.zh.md

@@ -1,4 +0,0 @@
----
-title: 虚线
-order: 0
----

examples/line/path/demo/line.js

@@ -5,8 +5,8 @@ const scene = new Scene({
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [102.602992, 23.107329],
+  center: [102.602992, 33.107329],
-  zoom: 4,
+  zoom: 3.5,
 });
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
@@ -22,6 +22,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-227
         .size('value', [0.5, 1, 1.5, 2])
         .shape('line')
         .color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A'])
+        .animate({enable:true})
     scene.addLayer(layer);
     console.log(layer);
 

examples/line/path/demo/linedash.js

@@ -5,8 +5,8 @@ const scene = new Scene({
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [102.602992, 23.107329],
+  center: [102.602992, 33.107329],
-  zoom: 4,
+  zoom: 3.5,
 });
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')

examples/line/path/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 路径地图
+order: 0
+redirect_from:
+  - /zh/examples/line/
+---

examples/point/3d/demo/point.js

@@ -22,11 +22,11 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
             x: 'longitude',
             y: 'latitude'
           }
-        }).shape('name',['cylinder', 'triangleColumn', 'hexagonColumn'])
+        }).shape('name',['cylinder', 'triangleColumn', 'hexagonColumn','squareColumn'])
         .size('unit_price', (h)=>{
-          return [ 5,5, h / 1000 ]
+          return [ 15,15, h / 1000 ]
         })
-        .color('name',['#49B5AD', "#5B8FF9"])
+        .color('name',['#49B5AD', "#5B8FF9",'#E4504A','#E99431'])
         .style({
           opacity: 1.0,
         })

examples/point/basic/demo/color.js

@@ -22,13 +22,22 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
             x: 'longitude',
             y: 'latitude'
           }
-        }).shape('circle')
+        }).shape('name',[
-        .size('unit_price', [5, 25])
+          'circle',
-        .color('#5B8FF9')
+          'triangle',
+          'square',
+          'pentagon',
+          'hexagon',
+          'octogon',
+          'hexagram',
+          'rhombus',
+          'vesica',
+        ])
+        .size('unit_price', [10, 25])
+        .color('name',['#E4504A',"#E99431", "#EBCC53","#43A5DA","#6CC175"])
         .style({
-          opacity: 0.3,
+          opacity:1.0,
           strokeWidth: 1,
-          strokeColor: "#5B8FF9",
 
         })
 

examples/point/chartmap/demo/chart.js

@@ -1,6 +1,6 @@
 import { Scene } from '@l7/scene';
 import { Marker } from '@l7/component'
-import  * as G2Plot from '@antv/g2plot'
+import  G2Plot from '@antv/g2plot';
 const scene = new Scene({
   id: 'map',
   type: 'amap',

examples/point/chartmap/demo/marker.js

@@ -0,0 +1,37 @@
+import { Scene } from '@l7/scene';
+import { Marker } from '@l7/component'
+const scene = new Scene({
+  id: 'map',
+  type: 'amap',
+  style: 'light',
+  center: [122.80009283836715, 37.05881309947238],
+  pitch: 0,
+  zoom: 3
+});
+
+scene.on('loaded',()=>{
+  addMarkers();
+})
+
+function addMarkers() {
+  fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json')
+  .then((res) => res.json())
+  .then((nodes) => {
+    for (var i = 0; i < nodes.length; i++) {
+      if (nodes[i].g !== '1') continue;
+      var el = document.createElement('label');
+      el.className = 'lableclass';
+      el.textContent = nodes[i].v;
+      el.style.background = getColor(nodes[i].v);
+      const marker = new Marker({
+        element: el
+      }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }).addTo(scene);;
+
+    }
+  })
+}
+
+
+  function getColor(v) {
+    return v > 50 ? '#800026' : v > 40 ? '#BD0026' : v > 30 ? '#E31A1C' : v > 20 ? '#FC4E2A' : v > 10 ? '#FD8D3C' : v > 5 ? '#FEB24C' : v > 0 ? '#FED976' : '#FFEDA0';
+  }

examples/point/image/demo/size.js

@@ -9,32 +9,28 @@ const scene = new Scene({
   center: [121.40, 31.258134],
   zoom: 15,
 });
-
+scene.addImage('00', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ');
-fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+scene.addImage('01', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ');
+scene.addImage('02', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ');
+scene.addImage('04', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ');
+scene.addImage('11', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ');
+scene.addImage('15', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ');
+scene.addImage('07', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ');
+scene.addImage('16', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ');
+scene.addImage('06', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ');
+scene.addImage('08', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ');
+scene.addImage('17', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ');
+scene.addImage('05', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ');
+fetch('https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json')
   .then((res) => res.json())
   .then((data) => {
-  scene.addImage(
+
-    '00',
-    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ',
-  );
-  scene.addImage(
-    '01',
-    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0D0SQ6AgkRMAAAAAAAAAAABkARQnAQ',
-  );
-  scene.addImage(
-    '02',
-    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*o16fSIvcKdUAAAAAAAAAAABkARQnAQ',
-  );
    const imageLayer = new PointImageLayer()
-      .source(data, {
+      .source(data)
-        parser: {
+      .shape('w', function(w) {
-          type: 'json',
+        return w;
-          x: 'longitude',
-          y: 'latitude'
-        }
       })
-      .shape('name', ['00', '01','02'])
+      .size(20)
-      .size('unit_price', [5, 15])
        scene.addLayer(imageLayer);
   });
 

examples/polygon/3d/index.zh.md

@@ -1,4 +1,6 @@
 ---
 title: 3D填充图
 order: 0
+redirect_from:
+  - /zh/examples/polygon/
 ---

examples/raster/basic/index.zh.md

@@ -1,4 +1,6 @@
 ---
 title: 栅格图层
 order: 0
+redirect_from:
+  - /zh/examples/raster/
 ---

gatsby-browser.js

@@ -1,6 +1,8 @@
 import './packages/component/src/css/l7.css';
+import './site/css/demo.css'
 // window.GeoTIFF = require('geotiff/dist/geotiff.bundle.js')
 window.scene = require('@l7/scene');
 window.layers= require('@l7/layers');
 window.component= require('@l7/component');
-window.G2Plot = require('@antv/g2plot');
+window.G2PO = require('@antv/g2plot');
+

packages/core/src/services/layer/ILayerService.ts

@@ -1,9 +1,11 @@
 import { SyncBailHook, SyncHook } from 'tapable';
+import Clock from '../../utils/clock';
 import { IGlobalConfigService } from '../config/IConfigService';
 import { IModel } from '../renderer/IModel';
 import { IMultiPassRenderer } from '../renderer/IMultiPassRenderer';
 import { ISource, ISourceCFG } from '../source/ISourceService';
 import {
+  IAnimateOption,
   IEncodeFeature,
   IScale,
   IScaleOptions,
@@ -62,6 +64,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;
   // pattern(field: string, value: StyleAttributeOption): ILayer;
   // filter(field: string, value: StyleAttributeOption): ILayer;
   // active(option: ActiveOption): ILayer;
@@ -146,8 +149,11 @@ export interface ILayerInitializationOptions {
  * 提供 Layer 管理服务
  */
 export interface ILayerService {
+  clock: Clock;
   add(layer: ILayer): void;
   initLayers(): void;
+  startAnimate(): void;
+  stopAnimate(): void;
   getLayers(): ILayer[];
   getLayer(name: string): ILayer | undefined;
   remove(layer: ILayer): void;

packages/core/src/services/layer/IStyleAttributeService.ts

@@ -61,6 +61,13 @@ export enum AttributeType {
   Uniform,
 }
 
+export interface IAnimateOption {
+  enable: boolean;
+  interval?: number;
+  duration?: number;
+  trailLength?: number;
+}
+
 export interface IEncodeFeature {
   color?: Color;
   size?: number | number[];

packages/core/src/services/layer/LayerService.ts

@@ -1,14 +1,21 @@
 import { inject, injectable } from 'inversify';
 import { container, ILayer } from '../..';
 import { TYPES } from '../../types';
+import Clock from '../../utils/clock';
 import { IGlobalConfigService } from '../config/IConfigService';
 import { IRendererService } from '../renderer/IRendererService';
 import { ILayerService } from './ILayerService';
 
 @injectable()
 export default class LayerService implements ILayerService {
+  public clock = new Clock();
+
   private layers: ILayer[] = [];
 
+  private layerRenderID: number;
+
+  private animateInstanceCount: number = 0;
+
   @inject(TYPES.IRendererService)
   private readonly renderService: IRendererService;
 
@@ -75,11 +82,25 @@ export default class LayerService implements ILayerService {
     this.layers.forEach((layer) => layer.destroy());
     this.layers = [];
   }
+
+  public startAnimate() {
+    if (this.animateInstanceCount++ === 0) {
+      this.runRender();
+    }
+  }
+
+  public stopAnimate() {
+    if (--this.animateInstanceCount === 0) {
+      this.stopRender();
+    }
+  }
+
   private initPlugin(layer: ILayer) {
     for (const plugin of layer.plugins) {
       plugin.apply(layer);
     }
   }
+
   private clear() {
     this.renderService.clear({
       color: [0, 0, 0, 0],
@@ -87,4 +108,13 @@ export default class LayerService implements ILayerService {
       framebuffer: null,
     });
   }
+
+  private runRender() {
+    this.renderLayers();
+    this.layerRenderID = requestAnimationFrame(this.renderLayers.bind(this));
+  }
+
+  private stopRender() {
+    cancelAnimationFrame(this.layerRenderID);
+  }
 }

packages/core/src/utils/clock.ts

@@ -0,0 +1,50 @@
+// https://github.com/mrdoob/three.js/blob/master/src/core/Clock.js
+export default class Clock {
+  private autoStart: boolean;
+  private startTime: number = 0;
+  private oldTime: number = 0;
+  private running: boolean = false;
+  private elapsedTime: number = 0;
+  constructor(autoStart = true) {
+    this.autoStart = autoStart;
+  }
+  public start() {
+    this.startTime = (typeof performance === 'undefined'
+      ? Date
+      : performance
+    ).now();
+
+    this.oldTime = this.startTime;
+    this.elapsedTime = 0;
+    this.running = true;
+  }
+  public stop() {
+    this.getElapsedTime();
+    this.running = false;
+    this.autoStart = false;
+  }
+
+  public getElapsedTime() {
+    this.getDelta();
+    return this.elapsedTime;
+  }
+  public getDelta() {
+    let diff = 0;
+
+    if (this.autoStart && !this.running) {
+      this.start();
+      return 0;
+    }
+
+    if (this.running) {
+      const newTime = (typeof performance === 'undefined'
+        ? Date
+        : performance
+      ).now();
+      diff = (newTime - this.oldTime) / 1000;
+      this.oldTime = newTime;
+      this.elapsedTime += diff;
+    }
+    return diff;
+  }
+}

packages/layers/src/core/BaseLayer.ts

@@ -1,5 +1,6 @@
 import {
   gl,
+  IAnimateOption,
   ICameraService,
   IEncodeFeature,
   IFontService,
@@ -137,6 +138,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     };
   } = {};
 
+  protected animateOptions: IAnimateOption = { enable: false };
+
   private encodedData: IEncodeFeature[];
 
   private configSchema: object;
@@ -282,6 +285,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     );
     return this;
   }
+  public animate(options: IAnimateOption) {
+    this.animateOptions = options;
+    return this;
+  }
 
   public source(data: any, options?: ISourceCFG): ILayer {
     this.sourceOption = {

packages/layers/src/heatmap/shaders/grid_vert.glsl

@@ -17,7 +17,7 @@ void main() {
     v_color = a_Color;
 
     mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
-    vec2 offset = a_Position.xy * u_radius * rotationMatrix ;
+    vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;
     // vec2 lnglat = unProjectFlat(a_Pos.xy);
     vec4 project_pos = project_position(vec4(a_Pos.xy + offset, 0, 1.0));
     gl_Position = project_common_position_to_clipspace(project_pos);

packages/layers/src/heatmap/shaders/hexagon_3d_vert.glsl

@@ -17,13 +17,13 @@ varying vec4 v_color;
 #pragma include "project"
 #pragma include "light"
 void main() {
- 
+
     mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
     vec2 offset =(vec2(a_Position.xy * u_radius * rotationMatrix * u_coverage));
     vec2 lnglat = unProjectFlat(a_Pos.xy + offset);
     vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0));
     float lightWeight = calc_lighting(project_pos);
-    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w); 
+    v_color =vec4(a_Color.rgb*lightWeight, a_Color.w);
 
     gl_Position = project_common_position_to_clipspace(project_pos);
 }

packages/layers/src/line/index.ts

@@ -9,6 +9,8 @@ interface IPointLayerStyleOptions {
 export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
   public name: string = 'LineLayer';
 
+  private animateStartTime: number = 0;
+
   protected getConfigSchema() {
     return {
       properties: {
@@ -22,11 +24,21 @@ export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
   }
 
   protected renderModels() {
+    const {
+      enable,
+      interval = 0.2,
+      trailLength = 0.2,
+      duration = 2,
+    } = this.animateOptions;
+    const animate = enable ? 1 : 0;
     const { opacity } = this.getStyleOptions();
     this.models.forEach((model) =>
       model.draw({
         uniforms: {
           u_opacity: opacity || 1.0,
+          u_time:
+            this.layerService.clock.getElapsedTime() - this.animateStartTime,
+          u_animate: [animate, duration, interval, trailLength],
         },
       }),
     );
@@ -52,6 +64,7 @@ export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
         },
       }),
     ];
+    // this.initAnimate();
   }
 
   private registerBuiltinAttributes(layer: ILayer) {
@@ -128,4 +141,12 @@ export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
       },
     });
   }
+  // 拆分的动画插件
+  private initAnimate() {
+    const { enable } = this.animateOptions;
+    if (enable) {
+      this.layerService.startAnimate();
+      this.animateStartTime = this.layerService.clock.getElapsedTime();
+    }
+  }
 }

packages/layers/src/line/shaders/line_dash_frag.glsl

@@ -5,6 +5,9 @@ uniform float u_dash_ratio : 0.1;
 varying vec4 v_color;
 varying vec2 v_normal;
 
+uniform float u_time;
+uniform vec3 u_aimate: [ 0, 2., 1.0, 0.2 ];
+
 varying float v_distance_ratio;
 varying vec2 v_dash_array;
 void main() {
@@ -15,4 +18,5 @@ void main() {
   // gl_FragColor.a *= blur  * ceil(mod(v_distance_ratio, v_dash_array.x) - v_dash_array.y);
   gl_FragColor.a *= blur  * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
 
+
 }

packages/layers/src/line/shaders/line_dash_vert.glsl

@@ -16,6 +16,8 @@ varying vec2 v_normal;
 
 varying float v_distance_ratio;
 
+
+
 #pragma include "projection"
 void main() {
 

packages/layers/src/line/shaders/line_frag.glsl

@@ -5,12 +5,23 @@ uniform float u_dash_ratio : 0.0;
 varying vec4 v_color;
 varying vec2 v_normal;
 
+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;
+  // 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
 
 }

packages/layers/src/line/shaders/line_vert.glsl

@@ -5,10 +5,12 @@ attribute vec2 a_Size;
 attribute vec3 a_Normal;
 attribute vec3 a_Position;
 uniform mat4 u_ModelMatrix;
+
 #pragma include "projection"
 varying vec4 v_color;
 varying float v_dash_array;
 varying vec2 v_normal;
+
 void main() {
   v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter));
   v_color = a_Color;

site/css/demo.css

@@ -0,0 +1,16 @@
+.lableclass {
+  position: absolute;
+  display: inline;
+  cursor: pointer;
+  background: rgb(255, 228, 120);
+  border: none; padding: 4px;
+  white-space: nowrap;
+  font: bold 12px/18px arial, sans-serif;
+  color: rgb(51, 51, 51);
+  box-shadow: rgb(153, 153, 153) 1px 1px 2px;
+  border-radius: 4px;
+  width: 22px;
+  height: 24px;
+  text-align: center;
+  user-select: none;
+}