fix(demo): gatsby

2019-11-14 17:25:16 +08:00 · 2019-11-14 17:25:16 +08:00 · db95e2b94a
parent 7c58ebe505
commit db95e2b94a
41 changed files with 264 additions and 256 deletions
--- a/examples/heatmap/basic/demo/grid.js
+++ b/examples/heatmap/basic/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', [
-        '#002466',
-        '#105CB3',
-        '#2894E0',
-        '#CFF6FF',
-        '#FFF5B8',
-        '#FFAB5C',
-        '#F27049',
-        '#730D1C',
-      ]);
+      .color('count',  ['#0A3663', '#1558AC',
+      '#3771D9', '#4D89E5',
+      '#64A5D3', '#72BED6',
+      '#83CED6', '#A6E1E0',
+      '#B8EFE2', '#D7F9F0']);
    scene.addLayer(layer);
    console.log(layer);

--- a/examples/heatmap/basic/demo/meta.json
+++ b/examples/heatmap/basic/demo/meta.json
--- a/examples/heatmap/basic/demo/world.js
+++ b/examples/heatmap/basic/demo/world.js
--- a/examples/heatmap/basic/index.zh.md
+++ b/examples/heatmap/basic/index.zh.md
--- a/examples/heatmap/heatmap/demo/meta.json
+++ b/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"
    }
  ]
 }
--- a/examples/heatmap/heatmap/index.zh.md
+++ b/examples/heatmap/heatmap/index.zh.md
@ -1,4 +1,6 @@
 ---
 title: 经典热力图
 order: 0
+redirect_from:
+  - /zh/examples/heatmap/
 ---
--- a/examples/heatmap/hexagon/demo/hexagon.ts
+++ b/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);
  });
--- a/examples/line/basic/demo/path.js
+++ b/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);
-
-  });
--- a/examples/line/basic/index.zh.md
+++ b/examples/line/basic/index.zh.md
@ -1,4 +0,0 @@
---
-title: 路径地图
-order: 0
---
--- a/examples/line/dash/demo/line.js
+++ b/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);
-
-  });
--- a/examples/line/dash/demo/meta.json
+++ b/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": "等值线"
-    }
-  ]
-}
--- a/examples/line/dash/demo/path.js
+++ b/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);
-
-  });
--- a/examples/line/dash/index.zh.md
+++ b/examples/line/dash/index.zh.md
@ -1,4 +0,0 @@
---
-title: 虚线
-order: 0
---
--- a/examples/line/basic/demo/line.js
+++ b/examples/line/basic/demo/line.js
--- a/examples/line/basic/demo/line2.js
+++ b/examples/line/basic/demo/line2.js
@ -5,8 +5,8 @@ const scene = new Scene({
  pitch: 0,
  type: 'amap',
  style: 'light',
-  center: [102.602992, 23.107329],
-  zoom: 4,
+  center: [102.602992, 33.107329],
+  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);

--- a/examples/line/path/demo/linedash.js
+++ b/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],
-  zoom: 4,
+  center: [102.602992, 33.107329],
+  zoom: 3.5,
 });

 fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
--- a/examples/line/basic/demo/meta.json
+++ b/examples/line/basic/demo/meta.json
--- a/examples/line/basic/demo/road_dark.js
+++ b/examples/line/basic/demo/road_dark.js
--- a/examples/line/basic/demo/road_light.js
+++ b/examples/line/basic/demo/road_light.js
--- a/examples/line/path/index.zh.md
+++ b/examples/line/path/index.zh.md
@ -0,0 +1,6 @@
+---
+title: 路径地图
+order: 0
+redirect_from:
+  - /zh/examples/line/
+---
--- a/examples/point/3d/demo/point.js
+++ b/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,
        })
--- a/examples/point/basic/demo/color.js
+++ b/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')
-        .size('unit_price', [5, 25])
-        .color('#5B8FF9')
+        }).shape('name',[
+          'circle',
+          '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",

        })

--- a/examples/point/chartmap/demo/chart.js
+++ b/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',
--- a/examples/point/chartmap/demo/marker.js
+++ b/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';
+  }
--- a/examples/point/image/demo/size.js
+++ b/examples/point/image/demo/size.js
@ -9,32 +9,28 @@ const scene = new Scene({
  center: [121.40, 31.258134],
  zoom: 15,
 });
-
-fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
+scene.addImage('00', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ');
+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, {
-        parser: {
-          type: 'json',
-          x: 'longitude',
-          y: 'latitude'
-        }
+      .source(data)
+      .shape('w', function(w) {
+        return w;
      })
-      .shape('name', ['00', '01','02'])
-      .size('unit_price', [5, 15])
+      .size(20)
       scene.addLayer(imageLayer);
  });

--- a/examples/polygon/3d/index.zh.md
+++ b/examples/polygon/3d/index.zh.md
@ -1,4 +1,6 @@
 ---
 title: 3D填充图
 order: 0
+redirect_from:
+  - /zh/examples/polygon/
 ---
--- a/examples/raster/basic/index.zh.md
+++ b/examples/raster/basic/index.zh.md
@ -1,4 +1,6 @@
 ---
 title: 栅格图层
 order: 0
+redirect_from:
+  - /zh/examples/raster/
 ---
--- a/gatsby-browser.js
+++ b/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');
+
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/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;
--- a/packages/core/src/services/layer/IStyleAttributeService.ts
+++ b/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[];
--- a/packages/core/src/services/layer/LayerService.ts
+++ b/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);
+  }
 }
--- a/packages/core/src/utils/clock.ts
+++ b/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;
+  }
+}
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/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 = {
--- a/packages/layers/src/heatmap/shaders/grid_vert.glsl
+++ b/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);
--- a/packages/layers/src/heatmap/shaders/hexagon_3d_vert.glsl
+++ b/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);
 }
--- a/packages/layers/src/line/index.ts
+++ b/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();
+    }
+  }
 }
--- a/packages/layers/src/line/shaders/line_dash_frag.glsl
+++ b/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)));

+
 }
--- a/packages/layers/src/line/shaders/line_dash_vert.glsl
+++ b/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() {

--- a/packages/layers/src/line/shaders/line_frag.glsl
+++ b/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

 }
--- a/packages/layers/src/line/shaders/line_vert.glsl
+++ b/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;
--- a/site/css/demo.css
+++ b/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;
+}