docs: add animate docs

babel.config.js

@@ -64,6 +64,7 @@ module.exports = api => {
       '@babel/preset-typescript'
     ],
     plugins: [
+      isCDNBundle ? {} : '@babel/plugin-transform-runtime',
       '@babel/plugin-proposal-object-rest-spread',
       '@babel/plugin-proposal-optional-chaining',
       '@babel/plugin-proposal-nullish-coalescing-operator',
@@ -113,8 +114,6 @@ module.exports = api => {
       // isCDNBundle ? 'inline-webgl-constants' : {},
     ],
     ignore: [
-      /[\/\\]core-js/,
-      /@babel[\/\\]runtime/,
       'node_modules',
       ...!isTest ? [
         '**/*.test.tsx',

docs/api/layer/cityBuilding.en.md

@@ -0,0 +1,4 @@
+---
+title: CityBuilding
+order: 6
+---

docs/api/layer/cityBuilding.zh.md

@@ -0,0 +1,56 @@
+---
+title: 城市建筑
+order: 6
+---
+## 使用
+
+```javascript
+import { CityBuildingLayer } from '@antv/l7';
+
+```
+### source 
+
+同 [PolygonLayer](./polygon_layer/extrude)
+
+### size
+
+ 同 [PolygonLayer](./polygon_layer/extrude)
+
+### color 
+
+[PolygonLayer](./polygon_layer/extrude)
+
+### animate
+开启动画效果
+```javascript
+layer.animate(true)
+```
+### style 
+  - baseColor 楼房颜色,
+  - windowColor: 窗户颜色,
+  - brightColor: 点亮窗户颜色
+
+其他style配置项同
+
+[layer#style](./layer#style)
+
+#### 完整代码
+
+``` javascript
+
+ 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);
+```

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

@@ -50,3 +50,26 @@ const layer = new LineLayer({})
         opacity: 0.8,
       });
 ```
+### animate
+
+#### 开启关闭动画
+
+```javascript
+layer.animate(true)
+layer.animate(false)
+```
+
+#### 设置动画参数
+
+- duration 动画时间 单位(s)秒
+- interval 轨迹间隔, 取值区间 0 - 1
+- trailLength 轨迹长度 取值区间 0 - 1
+
+```javascript
+layer.animate({
+  duration: 4,
+  interval: 0.2,
+  trailLength: 0.1
+  
+})
+```

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

@@ -21,4 +21,6 @@ shape 设置成line即可绘制路线图
  
  layer.size('',[])
 ```
+### animate
+
 

docs/api/layer/point_layer/bubble.zh.md

@@ -8,6 +8,10 @@ order: 1
 
 气泡图通过PointLayer对象实例化，
 
+```javascript
+import { PointLayer } from '@antv/l7';
+
+```
 ### shape 
  
  通常气泡图shape 设置为 **circle**
@@ -29,6 +33,24 @@ new PointLayer()
       strokeWidth: 1
     })
 ```
+
+### animate
+
+气泡图支持水波动画效果
+
+#### 开启关闭动画
+
+```javascript
+layer.animate(true)
+layer.animate(false)
+```
+#### 水波配置项
+
+- speed 水波速度
+- rings 水波环数
+
+
+
 ## tips
 
 目前style的配置项只支持全局设置，不支持数据映射。

docs/api/layer/polygon_layer/extrude.zh.md

@@ -2,3 +2,32 @@
 title: 3D填充图
 order: 1
 ---
+## 使用
+```javascript
+import { PolygonLayer } from '@antv/l7'
+const layer = new PolygonLayer();
+```
+### shape
+3D Polygon 将多边形沿Z轴向上拉伸
+- extrude 常量不支持数据映射
+
+```javascript
+layer.shape('extrude');
+```
+
+### size
+size代表拉伸的高度，支持数据映射
+
+```javascript
+layer.size(10);// 高度设置成常量
+layer.size('floor', [0,2000]); // 根据floor字段进行数据映射默认为线
+layer.size('floor', (floor) => { // 通过回调函数设置size
+  return floor * 2
+})
+```
+### color
+同 [layer#color](../layer/#color)
+
+### style
+同 [layer#style](../layer/#style)
+

docs/api/layer/polygon_layer/fill.zh.md

@@ -2,3 +2,23 @@
 title: 填充图
 order: 1
 ---
+## 使用
+```javascript
+import { PolygonLayer } from '@antv/l7'
+const layer = new PolygonLayer();
+```
+### shape
+绘制填充图，shape为```fill``` 常量不支持数据映射
+
+```javascript
+layer.shape('fill');
+```
+
+### size
+填充图无size不需要设置size
+### color
+同 [layer#color](../layer/#color)
+
+### style
+同 [layer#style](../layer/#style)
+

docs/api/map.zh.md

@@ -75,6 +75,8 @@ const scene = new Scene({
   }),
 });
 ```
+[示例地址](/zh/examples/tutorial/map#amapInstance)
+[代码地址](https://github.com/antvis/L7/blob/master/examples/tutorial/map/demo/amapInstance.js)
 
 #### 传入 Mapbox 地图实例
 

gatsby-config.js

@@ -117,6 +117,14 @@ module.exports = {
         },
         order: 4
       },
+      {
+        slug: 'api/layer/cityBuilding',
+        title: {
+          zh: '城市建筑',
+          en: 'CityBuilding'
+        },
+        order: 6
+      },
       {
         slug: 'api/source',
         title: {

package.json

@@ -31,7 +31,7 @@
     "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/gl": "^4.1.0",
     "@types/jest": "^24.0.18",
-    "@types/node": "^12.7.3",
+    "@types/node": "^12.12.22",
     "@types/storybook__react": "^4.0.2",
     "@types/supercluster": "^5.0.1",
     "awesome-typescript-loader": "^5.2.1",

packages/component/package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "@antv/l7-core": "^2.0.0-alpha.27",
     "@antv/l7-utils": "^2.0.0-alpha.27",
-    "core-js": "3",
+    "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",
     "load-styles": "^2.0.0"

packages/core/package.json

@@ -23,9 +23,9 @@
   "license": "ISC",
   "dependencies": {
     "@antv/l7-utils": "^2.0.0-alpha.27",
+    "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",
-    "core-js": "3",
     "element-resize-event": "^3.0.3",
     "eventemitter3": "^4.0.0",
     "gl-matrix": "^3.1.0",
@@ -36,7 +36,6 @@
     "merge-json-schemas": "^1.0.0",
     "probe.gl": "^3.1.1",
     "reflect-metadata": "^0.1.13",
-    "regenerator-runtime": "^0.13.3",
     "tapable": "^2.0.0-beta.8",
     "viewport-mercator-project": "^6.2.1"
   },

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

@@ -76,6 +76,8 @@ export interface IAnimateOption {
   duration?: number;
   trailLength?: number;
   repeat?: number;
+  speed?: number;
+  rings?: number;
 }
 
 export interface IEncodeFeature {

packages/l7/package.json

@@ -28,7 +28,8 @@
     "@antv/l7-core": "^2.0.0-alpha.27",
     "@antv/l7-layers": "^2.0.0-alpha.27",
     "@antv/l7-maps": "^2.0.0-alpha.27",
-    "@antv/l7-scene": "^2.0.0-alpha.27"
+    "@antv/l7-scene": "^2.0.0-alpha.27",
+    "@babel/runtime": "^7.7.7"
   },
   "gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
   "publishConfig": {

packages/layers/package.json

@@ -25,10 +25,10 @@
     "@antv/l7-core": "^2.0.0-alpha.27",
     "@antv/l7-source": "^2.0.0-alpha.27",
     "@antv/l7-utils": "^2.0.0-alpha.27",
+    "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.1.0",
     "@turf/meta": "^6.0.2",
     "@types/d3-color": "^1.2.2",
-    "core-js": "3",
     "d3-array": "^2.3.1",
     "d3-color": "^1.4.0",
     "d3-scale": "^3.1.0",
@@ -40,7 +40,6 @@
     "lodash": "^4.17.15",
     "merge-json-schemas": "1.0.0",
     "reflect-metadata": "^0.1.13",
-    "regenerator-runtime": "^0.13.3",
     "tapable": "^2.0.0-beta.8"
   },
   "devDependencies": {

packages/layers/src/point/models/fill.ts

@@ -62,7 +62,9 @@ export default class FillModel extends BaseModel {
       }),
     ];
   }
-
+  protected animateOption2Array(option: IAnimateOption): number[] {
+    return [option.enable ? 0 : 1.0, option.speed || 1, option.rings || 3];
+  }
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
       name: 'extrude',

packages/layers/src/point/shaders/fill_frag.glsl

@@ -75,7 +75,7 @@ void main() {
 
   if(u_aimate.x == Animate) {
     float d = length(v_data.xy);
-    float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * N_RINGS - FREQ * u_time)), 0.0, 1.0);
+    float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * u_aimate.z - u_aimate.y * u_time)), 0.0, 1.0);
     gl_FragColor = vec4(gl_FragColor.xyz * intensity, intensity);
   }
 

packages/maps/package.json

@@ -25,11 +25,10 @@
   "dependencies": {
     "@antv/l7-core": "^2.0.0-alpha.27",
     "@antv/l7-utils": "^2.0.0-alpha.27",
-    "core-js": "3",
+    "@babel/runtime": "^7.7.7",
     "gl-matrix": "^3.1.0",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",
-    "regenerator-runtime": "^0.13.3",
     "viewport-mercator-project": "^6.2.1"
   },
   "devDependencies": {

packages/renderer/package.json

@@ -26,11 +26,10 @@
   },
   "dependencies": {
     "@antv/l7-core": "^2.0.0-alpha.27",
-    "core-js": "3",
+    "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "lodash": "^4.17.15",
     "reflect-metadata": "^0.1.13",
-    "regenerator-runtime": "^0.13.3",
     "regl": "^1.3.11"
   },
   "gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",

packages/scene/package.json

@@ -27,7 +27,7 @@
     "@antv/l7-maps": "^2.0.0-alpha.27",
     "@antv/l7-renderer": "^2.0.0-alpha.27",
     "@antv/l7-utils": "^2.0.0-alpha.27",
-    "core-js": "3",
+    "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",
     "reflect-metadata": "^0.1.13"

packages/source/package.json

@@ -26,11 +26,11 @@
   "dependencies": {
     "@antv/l7-core": "^2.0.0-alpha.27",
     "@antv/l7-utils": "^2.0.0-alpha.27",
+    "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",
     "@turf/invariant": "^6.1.2",
     "@turf/meta": "^6.0.2",
-    "core-js": "3",
     "d3-dsv": "^1.1.1",
     "d3-hexbin": "^0.2.2",
     "eventemitter3": "^4.0.0",

packages/utils/package.json

@@ -22,8 +22,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@turf/helpers": "^6.1.4",
+    "@babel/runtime": "^7.7.7",
-    "core-js": "3"
+    "@turf/helpers": "^6.1.4"
   },
   "gitHead": "00d23ef70d9ec76eec26833fc50ac18fe584cf26",
   "publishConfig": {

tsconfig.json

@@ -7,7 +7,7 @@
     "jsx": "react",
     "target": "es5",
     "lib": ["es6", "dom"],
-    "types": ["reflect-metadata", "jest"],
+    "types": ["reflect-metadata", "jest" ],
     "module": "esnext",
     "moduleResolution": "node",
     "esModuleInterop": true,