fix(demo): demo

.cache/redirects.json

@@ -0,0 +1,56 @@
+[
+  {
+    "fromPath": "/en/docs/api",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/en/docs/api/L7"
+  },
+  {
+    "fromPath": "/zh/docs/api",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/docs/api/L7"
+  },
+  {
+    "fromPath": "/zh/docs/tutorial",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/docs/api/quickstart"
+  },
+  {
+    "fromPath": "/en/docs/tutorial",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/en/docs/api/quickstart"
+  },
+  {
+    "fromPath": "/zh/examples/raster/",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/examples/raster/basic"
+  },
+  {
+    "fromPath": "/zh/examples/polygon/",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/examples/polygon/3d"
+  },
+  {
+    "fromPath": "/zh/examples/heatmap/",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/examples/heatmap/heatmap"
+  },
+  {
+    "fromPath": "/en/examples",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/en/examples/gallery/basic"
+  },
+  {
+    "fromPath": "/zh/examples",
+    "isPermanent": true,
+    "redirectInBrowser": true,
+    "toPath": "/zh/examples/gallery/basic"
+  }
+]

docs/API/L7.en.md

@@ -4,4 +4,72 @@ order: 0
 redirect_from:
   - /en/docs/api
 ---
-# An open source large-scale geospatial data visualization analysis development framework powered by WebGL
+####  An open source large-scale geospatial data visualization analysis development framework powered by WebGL
+
+L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
+
+<video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
+<source id="mp4" src="https://gw.alipayobjects.com/mdn/antv_site/afts/file/A*viKwSJl2OGIAAAAAAAAAAABkARQnAQ"; type="video/map4">
+      <source id="webm" src="https://gw.alipayobjects.com/os/basement_prod/65d5dbe8-d78d-4c6b-9318-fa06b1456784.webm" type="video/webm">
+      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
+<p>Your user agent does not support the HTML5 Video element.</p>
+</video>
+
+## 核心特性
+
+
+🌏 数据驱动可视化展示
+
+数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
+
+🌏 2D，3D 一体化的海量数据高性能渲染
+
+百万级空间数据实时，动态渲染。
+
+🌏 简单灵活的数据接入
+
+支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
+
+ 🌏 多地图底图支持，支持离线内网部署
+
+高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
+
+## 支持丰富的图表类型
+
+### 点图层
+ 
+ - 气泡图
+ - 散点图
+ - 符号地图
+ - 3D柱状地图
+ - 聚合地图
+ - 复合图表地图
+ - 自定义Marker
+
+### 线图层
+
+- 路径地图
+- 弧线，支持2D弧线、3D弧线以及大圆航线
+- 等值线
+
+### 面图层
+
+- 填充图
+- 3D填充图
+
+### 热力图
+
+- 经典热力图
+- 蜂窝热力图
+- 网格热力图
+
+### 栅格地图
+- 图片
+- Raster
+
+## L7 2.0 Roadmap
+
+![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
+
+
+更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。

docs/API/L7.zh.md

@@ -19,19 +19,19 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 ## 核心特性
 
 
-### 🌏 数据驱动可视化展示
+🌏 数据驱动可视化展示
 
 数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。
 
-### 🌏 2D，3D 一体化的海量数据高性能渲染
+🌏 2D，3D 一体化的海量数据高性能渲染
 
 百万级空间数据实时，动态渲染。
 
-### 🌏 简单灵活的数据接入
+🌏 简单灵活的数据接入
 
 支持CSV，JSON，geojson等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。
 
-### 🌏 多地图底图支持，支持离线内网部署
+ 🌏 多地图底图支持，支持离线内网部署
 
 高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。
 

docs/API/component/control.en.md

@@ -1,5 +1,5 @@
 ---
-title: sControl
+title: Control
 order: 1
 ---
 # control

docs/API/layer/heatmap.en.md

@@ -1,4 +1,205 @@
 ---
 title: HeatmapLayer
 order: 5
----
+---
+
+# heatmapLayer
+
+
+### 简介
+
+热力图图层，包含三种类型的，
+- 方格热力图 
+
+将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
+
+- 六边形热力图 
+
+将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
+
+- 经典热力图 
+
+
+
+⚠️ 网格热力图和蜂窝热力图需要对数据聚合处理，使用之前需要在source方法设置数据聚合方法
+
+### source
+
+热力图只支持点数据作为数据源
+
+布局方法 通过source的 tansforms属性配置
+
+- type  数据聚合类型 grid、hexagon
+- size  网格半径 单位 米
+- field  聚合字段
+- method 聚合方法  count,max,min,sum,mean5个统计维度
+
+```javascript
+ 
+layer.source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'grid',
+        size: 15000,
+        field:'v', 
+        method:'sum'
+      }
+    ],
+    }
+```
+
+### shape
+
+不同类型热力图shape支持
+
+|  | 2D | 3d |
+| --- | --- | --- |
+| 网格格热力图 | circle,triangle,square,heaxgon | cylinder,triangleColumn,hexagonColum,squareColumn |
+| 蜂窝热力图 | circle,triangle,square,heaxgon | circle,triangle,square,heaxgon |
+| 普通热力图 | heatmap | heatmap |
+
+
+热力图布局下只shape方法只支持常量的可视化。
+
+```javascript
+HeatmapLayer.shape('square');
+HeatmapLayer.shape('hexagon');
+// 默认类型可以不设置
+```
+
+### size
+当前版本 shape 为grid，hexagon不需要设置 size 映射
+
+default 类型需要设置size映射 详细参数见[Size](https://www.yuque.com/antv/l7/layer#size)
+
+**size(field,values) **
+
+- field: 热力图权重字段
+- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
+
+```javascript
+HeatmapLayer.size ('field', [0, 1])
+```
+
+
+### color
+default heatMap 类型不需设置 color映射
+
+color 配置项同 [**color**](https://www.yuque.com/antv/l7/layer#color)
+
+
+
+### style
+
+grid hexagon 可以通过style 设置透明度
+
+default热力图需要通过style配置参数热力图参数
+
+- intensity   全局热力权重   推荐权重范围 1-5
+- radius  热力半径，单位像素
+- rampColors 色带参数
+  - colors  颜色数组
+  - positions 数据区间
+
+```javascript
+  HeatmapLayer.style({
+      intensity: 3,
+      radius: 20,
+      rampColors: {
+        colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
+        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+      }
+    })
+```
+
+
+### 完整代码示例
+
+#### 普通热力图
+
+```javascript
+// 测试数据 url  https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json 
+
+   HeatmapLayer({
+      zIndex: 2
+    })
+    .source(data)
+    .size('mag', [ 0, 1 ]) // weight映射通道
+    .style({
+      intensity: 3,
+      radius: 20,
+      rampColors: {
+        colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ],
+        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+      }
+    })
+```
+
+
+
+#### 网格热力图
+
+```javascript
+var layer = scene.HeatmapLayer({
+      zIndex: 2
+    })
+    .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        
+        {
+        type: 'grid',
+        size: 15000,
+        field:'v',
+        method:'sum'
+      }
+      ]
+    })
+    .shape('grid')
+    .style({
+      coverage: 0.8
+    })
+    .color('count', 
+    ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+
+```
+
+
+#### 六边形热力图
+
+```javascript
+ var layer = scene.HeatmapLayer({
+      zIndex: 2
+    }).
+   souce(data,{
+    parser:{
+      type:'csv',
+      x:lng,
+      y:lat,
+    },
+   transforms:[
+     {
+      type:'hexgon',
+      size:1500,
+      field:'count',
+      operation: 'sum',
+     }
+   ] 
+  })
+  .shape('hexgon')
+  .size(1000) 
+  .color('sum')
+  .style({
+    coverage:0.8
+  })
+render()
+```

docs/API/layer/heatmap.zh.md

@@ -47,9 +47,9 @@ layer.source(data, {
         size: 15000,
         field:'v', 
         method:'sum'
-      }
+        }
-    ]
+      ],
-    }
+  }
 ```
 
 ### shape
@@ -186,12 +186,13 @@ var layer = scene.HeatmapLayer({
       y:lat,
     },
    transforms:[
-     type:'hexgon',
+     {
-     size:1500,
+      type:'hexgon',
-     field:'count'
+      size:1500,
-     operation: 'sum'
+      field:'count',
-     }
+      operation: 'sum',
-   ] 
+     },
+   ],
   })
   .shape('hexgon')
   .size(1000) 

docs/API/layer/imagelayer.en.md

@@ -1,4 +1,23 @@
 ---
 title: ImageLayer
 order: 5
----
+---
+# ImageLayer
+
+## 简介
+将图片添加到地图上，需要指定图片的经纬度范围
+
+### 代码示例
+
+```javascript
+const layer = new ImageLayer({});
+layer.source(
+  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+  {
+    parser: {
+      type: 'image',
+      extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
+    }
+  }
+);
+```

docs/API/layer/layer.en.md

@@ -2,3 +2,321 @@
 title: Map Layer
 order: 0
 ---
+# Layer
+
+
+## 简介
+L7 Layer 接口设计遵循图形语法，在可视表达上
+
+语法示例
+
+```javascript
+new Layer(option)
+.source()
+.color()
+.size()
+.shape()
+.style()
+
+```
+
+
+## 构造函数
+
+
+## 配置项
+
+### visable
+图层是否可见   {bool }  default true
+
+### zIndex
+ 图层绘制顺序，数值越小优先绘制，可以控制图层绘制的上下层级  {int}   default 0
+### minZoom
+图层显示最小缩放等级，（0-18）   {number}  default 0
+
+### maxZoom
+ 图层显示最大缩放等级 （0-18）   {number}  default 18
+
+
+## 鼠标事件 
+
+beta版当前不支持，正式版会支持
+
+```javascript
+layer.on('click', (ev)=>{});             // 鼠标左键点击图层事件
+layer.on('dblclick', (ev)=>{});          // 鼠标左键双击图层事件
+layer.on('mousemove', (ev)=>{});        // 鼠标在图层上移动时触发
+layer.on('mouseover', (ev)=>{});         // 鼠标移入图层要素内时触发
+layer.on('mouseout', (ev)=>{});           // 鼠标移出图层要素时触发
+layer.on('mouseup', (ev)=>{});         // 鼠标在图层上单击抬起时触发
+layer.on('mousedown', (ev)=>{});         // 鼠标在图层上单击按下时触发
+layer.on('mouseleave', (ev)=>{});    // 鼠标离开图层要素
+layer.on('rightclick', (ev)=>{});    // 鼠标右键图层要素
+
+```
+
+
+## 方法
+
+### source
+数据源为layer设置数据  source(data,config)
+
+- data {geojson|json|csv}
+
+
+       源数据
+
+- config  可选 数据源配置项
+  - parser 数据解析，默认是解析层geojson
+  - transforms [transform，transform ]  数据处理转换 可设置多个
+
+ parser和 transforms [见source文档](https://www.yuque.com/antv/l7/source)
+
+```javascript
+layer.source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+          type: 'map',
+          callback:function(item){
+            const [x, y] = item.coordinates;
+            item.lat = item.lat*1;
+            item.lng = item.lng*1;
+            item.v = item.v *1;
+            item.coordinates = [x*1,y*1];
+            return item;
+          }
+
+        },
+        {
+          type: 'hexagon',
+          size: 6000,
+          field:'v',
+          method:'sum'
+       }
+      ]
+    })
+```
+
+### 
+
+### scale
+
+
+cscle('field', scaleConfig)
+
+(field: string, scaleConfig: object)
+
+为指定的数据字段进行列定义，返回 layer 实例。
+
+
+
+- `field` 字段名。
+
+- `scaleConfig` 列定义配置，对象类型，可配置的属性如下：
+
+```javascript
+{
+  type: "linear" // 指定数据类型，可声明的类型为：identity、linear、cat、time、timeCat、log、pow,  quantile,quantize
+}
+
+```
+
+### size
+
+将数据值映射到图形的大小上的方法。
+
+**注意：** 
+
+不同图层的 size 的含义有所差别：
+
+- point 图形的 size 影响点的半径大小和高度；
+
+- line, arc, path 中的 size 影响线的粗细,和高度；
+
+- polygon size 影响的是高度
+
+
+
+```javascript
+pointLayer.size(10); // 常量
+pointLayer.size('type'); // 使用字段映射到大小
+pointLayer.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值
+pointLayer.size('type', (type) => { // 回调函数
+  if(type === 'a') {
+    return 10;
+  }
+  return 5;
+});
+```
+
+
+#### size(value）
+
+传入数字常量，如 `pointLayer.size(20)`
+
+#### size(field)
+根据 field 字段的值映射大小，使用默认的`最大值 max:10` 和`最小值 min: 1`。
+
+#### size(field, callback)
+使用回调函数控制图形大小。
+
+- `callback`: function 回调函数。
+
+```javascript
+pointLayer.size('age', (value) => {
+  if(value === 1) {
+    return 5;
+  }
+  return 10;
+});
+```
+
+### color
+
+将数据值映射到图形的颜色上的方法。
+
+```javascript
+layer.color('red'); // 常量颜色
+layer.color('type'); // 对 type 字段进行映射，使用内置的颜色
+layer.color('type', [ 'red', 'blue' ]) // 指定颜色
+layer.color('type', (type) => { // 通过回调函数
+  if (type === 'a') {
+    return 'red';
+  }
+  return 'blue';
+});
+layer.color('type*value', (type, value) => { //多个参数，通过回调函数
+  if (type === 'a' && value > 100) {
+    return 'red';
+  }
+  return 'blue';
+});
+```
+
+
+#### color(value)
+
+
+参数：`value` ：string
+只支持接收一个参数，value 可以是：
+
+- 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 L7 默认提供的颜色。
+
+- 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white','rgba(255,0,0,0.5)' ,rgb(255,0,1) 等。
+
+
+示例
+```javascript
+layer.color('name') // 映射数据字段
+layer.color('white') // 指定颜色
+```
+
+
+#### color(field, colors)
+
+参数：
+
+- `field`: stringfield 为映射至颜色属性的数据源字段名，也支持指定多个参数。
+
+-  `colors`: string | array | function
+
+
+colors 的参数有以下情况： 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序。
+
+```javascript
+layer.color('name'); // 使用默认的颜色
+layer.color('name', [ 'red', 'blue' ]); // 使用传入的指定颜色
+```
+
+- colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：
+
+
+
+```javascript
+layer.color('gender', (value) => {
+  if(value === 1) {
+    return 'red'
+  }
+  return 'blue';
+});
+layer.color('gender*age', (gender, age) => {
+  if(age === 20 && gender ==' 男'  ) {
+    return 'red'
+  }
+  return 'blue';
+});
+```
+
+### shape
+将数据值映射到图形的形状上的方法。
+
+**shape(shape)**
+
+参数`shape` string
+
+只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了不同的 图层 几何图形对象支持的 shape 形状
+
+| layer类型 | shape类型 | 备注 |
+| --- | --- | --- |
+| point | 2d:point,circle, square, triangle,hexagon,image,text 3d:circle,triangle,hexagon,square |  |
+| line | line,arc, arc3d, greatcircle |  |
+| polygon | fill,line, extrude |  |
+
+
+**shape(field, shapes)**
+
+**shape(field, callback)**
+
+
+### style
+
+用于配置几何体显示图像属性目前支持以下属性，其他属性会逐步开放
+
+- fill
+
+- opacity  设置透明度
+
+- stroke  线填充颜色
+
+- strokeWidth 线的宽度
+
+
+```javascript
+layer.style({
+    fill:'red',
+    opacity:0.8,
+    stroke:'white'
+})
+```
+
+
+### show
+图层显示
+
+```javascript
+layer.show();
+```
+
+
+### hide
+
+图层隐藏
+
+```javascript
+layer.hide();
+```
+
+
+### fitBounds
+
+缩放到图层范围
+
+```javascript
+layer.fitBounds()
+
+```

docs/API/layer/linelayer.en.md

@@ -1,4 +1,72 @@
 ---
 title: LineLayer
 order: 2
----
+---
+## 线图层
+
+### shape
+
+线图层支持4种 shape
+
+- line 绘制路径图，
+- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
+- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
+- arc3d  3d弧线地图 3D视角
+
+⚠️ 弧线只需要设置起始点坐标即可
+
+```
+        new LineLayer()
+        .source(data, {
+          parser: {
+            type: 'csv',
+            x: 'lng1',
+            y: 'lat1',
+            x1: 'lng2',
+            y1: 'lat2',
+          },
+        })
+```
+
+如果geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
+```
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [
+            106.5234375,
+            57.51582286553883
+          ],
+          [
+            136.40625,
+            61.77312286453146
+          ]
+        ]
+      }
+    }
+  ]
+}
+
+```
+
+### size
+
+线图层 可以设置高度
+
+- size 类型为number 则表示 line的宽度
+- size 类型为 [number , number] 分别表示宽度和高度
+
+```javascript
+
+lineLayer.size(1); // 线的宽度为 1
+lineLayer.size([1,2]); // 宽度为1，高度2
+
+```
+
+

docs/API/layer/pointlayer.en.md

@@ -1,4 +1,77 @@
 ---
 title: PointLayer
 order: 1
----
+---
+# PointLayer
+
+
+## 简介
+点数据的展示，数据源支持JSON,GeoJSON,CSV 三种数据格式。
+
+shape 支持
+
+**3D类型 柱图**
+
+```
+'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
+
+```
+
+**2D 符号图**
+
+```
+'circle', 'square', 'hexagon', 'triangle'，  'pentagon',  'octogon', 'hexagram','rhombus',  'vesica',
+
+```
+
+**图片标注**
+
+通过 ```Scene.addImage()``` 可以添加图片资源， 
+
+
+### 代码示例
+
+
+#### 基本图形显示示例
+
+```javascript
+import { PointLayer } from "@antv/l7"
+
+const layer = PointLayer({
+      zIndex: 2
+    })
+    .source(data.list, {
+      type: 'array',
+      x: 'j',
+      y: 'w',
+    })
+    .shape('cylinder')
+    .size('t',(level)=> {
+      return [4,4,(level+40)];
+    }) 
+    .color('t', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+
+```
+
+
+#### 符号图
+
+使用图片添加地图标注
+
+```javascript
+
+scene.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
+
+
+const layer = new  PointLayer({
+      zIndex: 4
+    })
+    .source(city)
+    .size(20.0)
+    .shape('local')
+    .color('#0D408C')
+  
+```
+
+
+

docs/API/layer/polygonlayer.en.md

@@ -1,4 +1,26 @@
 ---
 title: PolygonLayer
 order: 3
----
+---
+# 填充图
+
+绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
+
+### shape
+
+填充图支持3种shape
+
+- fill 绘制填充面   不支持数据映射
+- line 绘制填充图描边  不支持数据映射
+- extrude 对填充图3D拉伸 不支持数据映射
+
+``` javascript
+ PolyonLayer.shape('fill');
+ PolyonLayer.shape('line').size(1); // size 表示线宽度
+ PolyonLayer.shape('extrude'); // size 表示高度
+
+```
+
+其他方法，事件，同基类 [Layer](/zh/docs/api/layer/layer)
+
+

docs/API/quickstart.en.md

@@ -4,3 +4,171 @@ order: 0
 redirect_from:
   - /en/docs/tutorial
 ---
+# 使用方法
+
+L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
+
+## 通过 CDN 使用
+
+首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
+```html
+<head>
+  <script src='https://api.l7/v2.0.0-beta/l7.js'></script>
+  <link href='https://api.l7/v2.0.0-beta/l7.css' rel='stylesheet' />
+</head>
+```
+
+如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
+```html
+<head>
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
+  <!-- 上一步引入的 L7 JS 和 CSS -->
+</head>
+```
+⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
+
+然后在 `<body>` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`：
+⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下：
+* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/)
+* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens)
+
+## 通过 Submodule 使用
+
+首先通过 `npm/yarn` 安装 `@l7/scene` 和 `@l7/layers`：
+```bash
+npm install --save @l7/scene @l7/layers
+// or
+yarn add @l7/scene @l7/layers
+```
+
+然后就可以使用其中包含的场景和各类图层：
+```typescript
+import { Scene } from '@l7/scene';
+import { PolygonLayer } from '@l7/layers';
+
+(async function() {
+  // 获取数据
+  const response = await fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+  );
+  const data = await response.json();
+
+  // 创建场景
+  const scene = new Scene({
+    center: [110.19382669582967, 50.258134],
+    id: 'map',
+    pitch: 0,
+    style: 'dark',
+    type: 'amap',
+    zoom: 3,
+    token: 'pg.xxx', // 高德或者 Mapbox 的 token
+  });
+
+  // 创建图层
+  const layer = new PolygonLayer({});
+  layer
+    .source(data)
+    .size('name', [0, 10000, 50000, 30000, 100000])
+    .color('name', [
+      '#2E8AE6',
+      '#69D1AB',
+      '#DAF291',
+      '#FFD591',
+      '#FF7A45',
+      '#CF1D49',
+    ])
+    .shape('fill')
+    .style({
+      opacity: 0.8,
+    });
+
+  // 添加图层到场景中
+  scene.addLayer(layer);
+
+  // 渲染场景
+  scene.render();
+})();
+```
+
+最后在 `<head>` 中引入 L7 CDN 版本的 CSS 文件：
+```html
+<head>
+  <link href='https://api.l7/v2.0.0-beta/l7.css' rel='stylesheet' />
+</head>
+```
+
+L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
+* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
+* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
+
+
+## [WIP] React
+
+React 组件待开发，目前可以暂时以 Submodule 方式使用：
+```tsx
+import { Scene } from '@l7/scene';
+import { PolygonLayer } from '@l7/layers';
+import * as React from 'react';
+
+export default class AMap extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+    );
+    const scene = new Scene({
+      center: [110.19382669582967, 50.258134],
+      id: 'map',
+      pitch: 0,
+      style: 'dark',
+      type: 'amap',
+      zoom: 3,
+      token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    });
+    const layer = new PolygonLayer({});
+
+    layer
+      .source(await response.json())
+      .size('name', [0, 10000, 50000, 30000, 100000])
+      .color('name', [
+        '#2E8AE6',
+        '#69D1AB',
+        '#DAF291',
+        '#FFD591',
+        '#FF7A45',
+        '#CF1D49',
+      ])
+      .shape('fill')
+      .style({
+        opacity: 0.8,
+      });
+    scene.addLayer(layer);
+    scene.render();
+    this.scene = scene;
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}
+```
+
+⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
+

examples/heatmap/heatmap/index.zh.md

@@ -1,5 +1,7 @@
 ---
 title: 经典热力图
 order: 0
+redirect_from:
+  - /zh/examples/heatmap/
 ---
 区域范围内数据具有的一定热度分级分布情况的聚合面状现象，常用于描述人群分布、密度和变化趋势等。

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

@@ -1,5 +1,7 @@
 ---
 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/
 ---

packages/layers/src/line/index.ts

@@ -42,4 +42,12 @@ export default class LineLayer extends BaseLayer<IPointLayerStyleOptions> {
     const shape = shapeAttribute?.scale?.field as LineModelType;
     return shape || 'line';
   }
+  // 拆分的动画插件
+  private initAnimate() {
+    const { enable } = this.animateOptions;
+    if (enable) {
+      this.layerService.startAnimate();
+      this.animateStartTime = this.layerService.clock.getElapsedTime();
+    }
+  }
 }

packages/layers/src/plugins/RegisterStyleAttributePlugin.ts

@@ -60,8 +60,8 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
         },
         size: 4,
         update: (feature: IEncodeFeature, featureIdx: number) => {
-          const { color = [1.0, 1.0, 1.0, 1.0] } = feature;
+          const { color } = feature;
-          return color;
+          return !color || !color.length ? [0, 0, 0, 0] : color;
         },
       },
     });

packages/layers/src/polygon/__tests__/polygonTriangulation.spec.ts

@@ -1,5 +1,5 @@
 import { IEncodeFeature } from '@l7/core';
-import { polygonTriangulation } from '..';
+import { polygonTriangulation } from '../../core/triangulation';
 
 describe('PolygonTriangulation', () => {
   it('should do triangulation with a polygon correctly', () => {

site/pages/index.zh.tsx

@@ -58,7 +58,7 @@ const IndexPage = () => {
     {
       logo:'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gjBmT56SDgsAAAAAAAAAAABkARQnAQ',
       title: t('浅色色板'),
-      description: t('将复杂的地理数据，通过简单易用的API，转化成一个个真实的可视化案例，达到开箱即用的效果。'),
+      description: t('一个个真实的地理数据可视化案例，将复杂的地理数据,通过简单，易用的API接口,让用户达到开箱即用的效果。'),
       link: `/${i18n.language}/examples/gallery/basic`,
       image:
         'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RPxeQZ8Uk7EAAAAAAAAAAABkARQnAQ',