docs: add animate demo

docs/api/component/marker.zh.md

@@ -11,10 +11,11 @@ Marker<br />`const Marker = new L7.Marker(option)`
 
 #### option
 
-- color        `string`   ![map-marker.png](https://cdn.nlark.com/yuque/0/2019/png/104251/1566814628445-4f3152c8-71d1-4908-a651-246c17e507b5.png#align=left&display=inline&height=32&name=map-marker.png&originHeight=32&originWidth=32&size=635&status=done&width=32)  设置默认 marker 的颜色
+- color        `string`   ![map-marker.png](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ)  设置默认 marker 的颜色
 - element    `Dom|string`    自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id
 - anchor     `string`  锚点位置   支持 center, top, top-left, top-right, bottom, bottom-left,bottom-                        right,left, right
 - offset    `Array`  偏移量  [ 0, 0 ] 分别表示 X, Y 的偏移量
+- extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息
 
 ## 方法
 
@@ -50,11 +51,19 @@ Marker<br />`const Marker = new L7.Marker(option)`
 
 获取 marker 弹出框
 
+#### getExtData()
+
+获取用户自定义数据
+
+#### setExtData(data)
+
+设置用户自定义数据
+
 ## 示例代码
 
 #### 默认 Marker
 
-\*\*<br />`const marker = new L7.Marker({color:'blue'})`
+`const marker = new L7.Marker({color:'blue'})`
 
 #### 自定义 Marker
 
@@ -84,3 +93,26 @@ new L7.Marker({
   .setPopup(popup)
   .addTo(scene);
 ```
+
+## 事件
+
+### 鼠标事件
+
+- mousemove
+- click
+- mousedown
+- mouseup
+- dblclick
+- contextmenu
+- mouseover
+- mouseout
+
+事件返回数据
+
+- target 事件触发源
+- data extData 用户自定义数据
+- lnglat marker 经纬度
+
+```javascript
+marker.on('click', (e) => {});
+```

docs/api/layer/line_layer/linelayer.zh.md

@@ -68,3 +68,14 @@ order: 0
 lineLayer.size(1); // 线的宽度为 1
 lineLayer.size([1, 2]); // 宽度为1，高度2
 ```
+### style
+
+- lineType  dash | solid  线类型实线和虚线
+- dashArray 虚线配置项 ```[ 5, 5]``` 
+
+```javascript
+  layer .style({
+      lineType: 'dash',
+      dashArray: [ 5, 5 ]
+    })
+```

examples/gallery/basic/demo/animate.js

@@ -0,0 +1,43 @@
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    center: [ 110.19382669582967, 40.258134 ],
+    pitch: 0,
+    zoom: 3,
+    style: 'dark'
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    data.features = data.features.map(function(fe) {
+      if (fe.properties.saldo < 0) {
+        fe.geometry.coordinates = fe.geometry.coordinates.reverse();
+      }
+      return fe;
+    });
+    const layer = new LineLayer({
+      autoFit: true
+    })
+      .source(data)
+      .shape('line')
+      .size('saldo', [ 1, 2 ])
+      .color('saldo', function(v) {
+        return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)';
+      })
+      .animate({
+        enable: true,
+        interval: 0.1,
+        duration: 3,
+        trailLength: 1
+      })
+      .style({
+        opacity: 0.8
+      });
+    scene.addLayer(layer);
+  });

examples/gallery/basic/demo/build.js

@@ -0,0 +1,36 @@
+import { Scene, CityBuildingLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+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
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    const layer = new CityBuildingLayer();
+    layer
+      .source(data)
+      .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(layer);
+  });

examples/gallery/basic/demo/meta.json

@@ -4,6 +4,16 @@
     "en": "Gallery"
   },
   "demos": [
+    {
+      "filename": "animate.js",
+      "title": "轨迹动画",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-x3uRY5G_4sAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "build.js",
+      "title": "点亮城市",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*InPpTbVN-yUAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "column_dark.js",
       "title": "3D柱图深色",

examples/line/path/demo/meta.json

@@ -23,6 +23,11 @@
       "filename": "road_dark.js",
       "title": "路径",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DDjQRLEnwpoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "road_dark_dash.js",
+      "title": "路径虚线",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*cGw3T4LPx7YAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/line/path/demo/road_dark_dash.js

@@ -0,0 +1,31 @@
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    center: [ 116.3956, 39.9392 ],
+    pitch: 0,
+    zoom: 10,
+    rotation: 0,
+    style: 'dark'
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    const layer = new LineLayer({})
+      .source(data)
+      .size(1.5)
+      .shape('line')
+      .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ])
+      .style({
+        lineType: 'dash',
+        dashArray: [ 5, 5 ]
+      })
+      ;
+    scene.addLayer(layer);
+  });

examples/raster/basic/demo/light.js

@@ -44,13 +44,13 @@ async function addLayer() {
     })
     .style({
       opacity: 1.0,
-      clampLow: false,
+      clampLow: true,
-      clampHigh: false,
+      clampHigh: true,
       domain: [ 0, 90 ],
       nodataValue: 0,
       rampColors: {
-        colors: [ 'rgb(166,97,26)', 'rgb(223,194,125)', 'rgb(245,245,245)', 'rgb(128,205,193)', 'rgb(1,133,113)' ],
+        colors: [ 'rgba(166,97,26,0)', '#c3aa00', '#fadb14', '#fef346', '#ffff96' ],
-        positions: [ 0, 0.25, 0.5, 0.75, 1.0 ]
+        positions: [ 0, 0.1, 0.25, 0.5, 1.0 ]
       }
     });
 

examples/raster/basic/demo/meta.json

@@ -17,11 +17,12 @@
     {
       "filename": "dem.js",
       "title": "地形图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZiMnSZlmblIAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oinmTJIlmbMAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "light.js",
-      "title": "夜光图"
+      "title": "夜光图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*nvP2R6ZbSSgAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "ndvi.js",

packages/component/src/marker.ts

@@ -133,6 +133,14 @@ export default class Marker extends EventEmitter {
     return this.markerOption.draggable;
   }
 
+  public getExtData() {
+    return this.markerOption.extData;
+  }
+
+  public setExtData(data: any) {
+    this.markerOption.extData = data;
+  }
+
   private update() {
     if (!this.mapsService) {
       return;

packages/core/src/services/scene/ISceneService.ts

@@ -10,6 +10,7 @@ export interface ISceneService {
   addLayer(layer: ILayer): void;
   render(): void;
   getSceneContainer(): HTMLDivElement;
+  ExportMap2Png(): string;
   destroy(): void;
 }
 // scene 事件

packages/core/src/services/scene/SceneService.ts

@@ -218,6 +218,13 @@ export default class Scene extends EventEmitter implements ISceneService {
     return this.$container as HTMLDivElement;
   }
 
+  public ExportMap2Png(): string {
+    const renderCanvas = this.$container?.getElementsByTagName('canvas')[0];
+    this.render();
+    const layersPng = renderCanvas?.toDataURL() as string;
+    return layersPng;
+  }
+
   public destroy() {
     this.emit('destroy');
     this.inited = false;

packages/layers/src/citybuliding/shaders/build_frag.glsl

@@ -82,7 +82,7 @@ void main() {
         if(ux == targetColId){
             n =0.;
         }
-        float timeP = min(0.75, abs ( sin(u_time/6.0) ) );
+        float timeP = min(0.75, abs ( sin(u_time/3.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);

packages/layers/src/core/BaseLayer.ts

@@ -300,13 +300,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     // 触发 init 生命周期插件
     this.hooks.init.call();
     this.inited = true;
-
-    this.hooks.afterInit.call();
     // 更新 model 样式
     this.updateLayerConfig({
       ...(this.getDefaultConfig() as object),
       ...this.rawConfig,
     });
+    this.hooks.afterInit.call();
     // 启动动画
     const { animateOption } = this.getLayerConfig();
     if (animateOption?.enable) {

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

@@ -31,8 +31,8 @@ void main() {
       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);
-      float alpha2 = exp(-abs(v_side));
+      // float alpha2 = exp(-abs(v_side));
-      gl_FragColor.a *= alpha * blur * alpha2;
+      gl_FragColor.a *= alpha * blur;
       // gl_FragColor.a = fract(u_time);
   }
  // dash line

packages/scene/src/index.ts

@@ -99,6 +99,9 @@ class Scene
   public getMapService(): IMapService<unknown> {
     return this.mapService;
   }
+  public ExportMap2Png(): string {
+    return this.sceneService.ExportMap2Png();
+  }
 
   public get map() {
     return this.mapService.map;