Merge pull request #149 from antvis/docs

docs: add text,cluster animate demos

demos/demo/bike.js

@@ -0,0 +1,110 @@
+/* eslint-disable no-eval */
+import { Scene, LineLayer, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 40,
+    style: 'dark',
+    center: [ 3.438, 40.16797 ],
+    zoom: 0.51329
+  })
+});
+Promise.all(
+  [ fetch('https://gw.alipayobjects.com/os/basement_prod/9acd4831-5655-41a5-b0a0-831603e0092d.json').then(function(d) {
+    return d.text();
+  }).then(JSON.parse), fetch('https://gw.alipayobjects.com/os/basement_prod/dbe4e40b-3fbf-4a20-b36b-7a8bd3b8aef2.csv').then(function(d) {
+    return d.text();
+  }), fetch('https://gw.alipayobjects.com/os/basement_prod/89d20ef7-77df-44ca-a238-6e3679ab3ae4.csv').then(function(d) {
+    return d.text();
+  }) ]).then(function onLoad([ coordinates, trips, stations ]) {
+  const stationArray = parseCSV(stations);
+  const stationObj = {};
+  stationArray.forEach(function(st) {
+    stationObj[st.station_id] = {
+      x: st.longitude * 1,
+      y: st.latitude * 1
+    };
+  });
+  const tripsArray = parseCSV(trips);
+  const triplines = [];
+  tripsArray.forEach(function(trip) {
+    if (stationObj[trip.start_station] && stationObj[trip.end_station]) {
+      const line = {
+        x: stationObj[trip.start_station].x,
+        y: stationObj[trip.start_station].y,
+        x1: stationObj[trip.end_station].x,
+        y1: stationObj[trip.end_station].y,
+        duration: trip.duration
+      };
+      triplines.push(line);
+    }
+  });
+  const roadlayer = new LineLayer().source(coordinates).shape('line')
+    .size(0.6)
+    .color('#eee')
+    .active(true)
+    .style({
+      opacity: 0.9
+    });
+  const stationLayer = new PointLayer().source(stations, {
+    parser: {
+      type: 'csv',
+      x: 'longitude',
+      y: 'latitude'
+    }
+  }).shape('circle')
+    .active(true)
+    .size(40)
+    .color('#fec44f')
+    .animate(true)
+    .style({
+      opacity: 1.0
+    })
+    .render();
+
+  const arclayer = new LineLayer().source(triplines.slice(0, 1000), {
+    parser: {
+      type: 'json',
+      x: 'x',
+      y: 'y',
+      x1: 'x1',
+      y1: 'y1'
+    }
+  })
+    .color('#ff6b34')
+    .shape('arc3d')
+    .size(1)
+    .style({
+      opacity: 1.0
+    })
+    .animate({
+      interval: 0.5,
+      trailLength: 0.5,
+      duration: 1
+    });
+  arclayer.fitBounds();
+  scene.addLayer(roadlayer);
+  scene.addLayer(stationLayer);
+  scene.addLayer(arclayer);
+
+
+});
+
+function parseCSV(data) {
+  const lines = data.split('\n');
+  const header = lines[0];
+  const columns = header.split(',');
+  return lines.slice(1).filter(function(l) {
+    return l;
+  }).map(function(line) {
+    const obj = {};
+    line.split(',').forEach(function(value, i) {
+      const name = columns[i];
+      obj[name] = value;
+    });
+    return obj;
+  });
+}
+

docs/api/changelog.en.md

@@ -0,0 +1,37 @@
+---
+title: ChangeLog
+order: 10
+---
+
+## 2020.01.06 2.0 正式版
+
+[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
+###✨ Features
+• 新增弧线图，路径图动画功能
+• 新增气泡图水波动画功能
+• 新增聚合地图
+• 新增文本标注，支持避让
+• 新增城市建筑图层
+• 新增栅格地图，支持卫星遥感数据可视化
+• 新增图层交互事件
+
+### 🍏 Improvements
+
+• Marker 支持事件和自定义数据
+• 弧线支持虚线样式
+• 面图层支持，文本标注，气泡图效果
+• 重构了文档结构
+• source 支持 map,join,filter 数据处理支持
+• source 支持数据更新
+• 支持 blend 效果配置
+• 支持通过地图实例初始化地图
+• 官网新增所有图表概览页面
+
+### 🐞 Bug Fixes
+
+• 修复容器 resize 不能正常响应
+• 修复 babel 打包问题
+• 修复地图组件加载报错问题
+• 修复样式配置 strokeColor- stroke
+
+## 2019.11.22 2.0beta

docs/api/changelog.zh.md

@@ -0,0 +1,56 @@
+---
+title: 发布日志
+order: 10
+---
+
+## 2020.01.06 2.0 正式版
+
+[Github](https://github.com/antvis/L7) https://github.com/antvis/L7 欢迎 Star
+
+###✨ Features
+
+• 新增弧线图，路径图动画功能
+
+• 新增气泡图水波动画功能
+
+• 新增聚合地图
+
+• 新增文本标注，支持避让
+
+• 新增城市建筑图层
+
+• 新增栅格地图，支持卫星遥感数据可视化
+
+• 新增图层交互事件
+
+### 🍏 Improvements
+
+• Marker 支持事件和自定义数据
+
+• 弧线支持虚线样式
+
+• 面图层支持，文本标注，气泡图效果
+
+• 重构了文档结构
+
+• source 支持 map,join,filter 数据处理支持
+
+• source 支持数据更新
+
+• 支持 blend 效果配置
+
+• 支持通过地图实例初始化地图
+
+• 官网新增所有图表概览页面
+
+### 🐞 Bug Fixes
+
+• 修复容器 resize 不能正常响应
+
+• 修复 babel 打包问题
+
+• 修复地图组件加载报错问题
+
+• 修复样式配置 strokeColor- stroke
+
+## 2019.11.22 2.0beta

docs/api/component/marker.zh.md

@@ -7,7 +7,9 @@ Marker 地图标注 目前只支持 2D dom 标注
 
 ## 构造函数
 
-Marker<br />`const Marker = new L7.Marker(option)`
+Marker
+
+`const Marker = new L7.Marker(option)`
 
 #### option
 

docs/api/l7.en.md

@@ -16,7 +16,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 <p>Your user agent does not support the HTML5 Video element.</p>
 </video>
 
-2.0.beta 版本目前有些功能还未完善，1 月 6 号我们正式版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
+✨ 2020.01.06 2.0 版本正式发布
 
 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
 

docs/api/l7.zh.md

@@ -7,9 +7,7 @@ redirect_from:
 
 # L7 地理空间数据可视分析引擎
 
-2.0.beta 版本目前有些功能还未完善，
-
-⚠️ 1 月 6 号 正式版发版，将支持 1.x 版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
+✨ 2020.01.06 2.0 版本正式发布
 
 ⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
 

docs/api/l7history.en.md

@@ -1,6 +1,6 @@
 ---
-title: 1.x stable
-order: 1
+title: 1.x history
+order: 9
 ---
 
 ## L7 1.x 版本
@@ -17,8 +17,6 @@ order: 1
 
 ### npm 安装使用
 
-会默认安装 1.x 的最新版本，2.0 正式版本发布后才会默认 2.0 版本
-
 ```
 npm install @antv/l7
 
@@ -29,7 +27,3 @@ npm install @antv/l7
 - [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
 
 - [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
-
-L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.
-
-L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.

docs/api/l7history.zh.md

@@ -1,6 +1,6 @@
 ---
-title: 1.x 稳定版
-order: 1
+title: 1.x 历史版本
+order: 9
 ---
 
 ## L7 1.x 版本
@@ -12,7 +12,7 @@ order: 1
 #### CDN 在线使用连接为
 
 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.4/build/L7-min.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.14/build/L7-min.js"></script>
 ```
 
 ### npm 安装使用
@@ -29,5 +29,3 @@ npm install @antv/l7
 - [1.x 官网](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
 
 - [1.x 文档](https://www.yuque.com/antv/l7/vgo25g)
-
-L7 2.0 beta 版本已经发布，一些功能还没有完善，我们将在 1 月 6 号发布 2.0 正式版，会包含 1.x 版的所有功能.

docs/api/layer/heatmap_layer/grid.en.md

@@ -0,0 +1,161 @@
+```
+---
+title: GridHeatMapLayer
+order: 1
+---
+
+将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
+
+## 使用
+
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+
+```
+
+## source
+网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
+
+#### 设置网格聚合参数
+
+布局方法 通过 source 的 tansforms 属性配置
+
+- type  数据聚合类型 grid
+- 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
+
+网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
+
+### 2d
+
+- circle,
+- triangle
+- square
+- hexagon 
+
+```javascript
+
+layer.shape(circle);
+
+```
+
+### 3d
+
+- cylinder
+- triangleColumn
+- hexagonColumn
+- squareColumn,
+
+```javascript
+layer.shape(cylinder);
+
+```
+
+## size
+
+### 2D shape 
+
+ 不需要设置size方法
+
+### 3D 图形 
+
+  size 表示高度, 支持常量和数据映射
+
+```javascript
+layer.size(10);// 常量
+layer.size('value', [10,50]);// 根据value 字段映射大小
+layer.size('value', (value)=>{})  // 回调函数设置高度
+
+```
+### color
+
+同layer [color方法](../layer/#color)
+
+### style
+
+- coverage 网格覆盖度  0 - 1
+- angle 网格旋转角度   0 - 360
+- opacity 透明度  0 - 1.0
+
+```javascript
+  
+    layer.style({
+      coverage: 0.9,
+      angle: 0,
+      opacity: 1.0
+  })
+  
+```
+
+## 完整实例代码
+
+```javascript
+const layer = new HeatmapLayer({})
+      .source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng',
+          y: 'lat'
+        },
+        transforms: [
+          {
+            type: 'grid',
+            size: 20000,
+            field: 'v',
+            method: 'sum'
+          }
+        ]
+      })
+      .shape('square')
+      .style({
+        coverage: 1,
+        angle: 0
+      })
+      .color(
+        'count',
+        [
+          '#0B0030',
+          '#100243',
+          '#100243',
+          '#1B048B',
+          '#051FB7',
+          '#0350C1',
+          '#0350C1',
+          '#0072C4',
+          '#0796D3',
+          '#2BA9DF',
+          '#30C7C4',
+          '#6BD5A0',
+          '#A7ECB2',
+          '#D0F4CA'
+        ].reverse()
+      );
+
+    scene.addLayer(layer);
+```
+
+
+
+

docs/api/layer/heatmap_layer/grid.zh.md

@@ -2,3 +2,153 @@
 title: 网格热力图
 order: 1
 ---
+
+将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
+
+## 使用
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+
+```
+
+## source
+网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
+
+#### 设置网格聚合参数
+
+布局方法 通过 source 的 tansforms 属性配置
+
+- type  数据聚合类型 grid
+- 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
+
+网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
+
+### 2d
+
+- circle,
+- triangle
+- square
+- heaxgon 
+
+```javascript
+layer.shape(circle);
+
+```
+
+### 3d
+
+- cylinder
+- triangleColumn
+- hexagonColumn
+- squareColumn,
+
+```javascript
+layer.shape(cylinder);
+
+```
+
+## size
+
+### 2D shape 
+
+ 不需要设置size方法
+
+### 3D 图形 
+
+  size 表示高度, 支持常量和数据映射
+
+```javascript
+layer.size(10);// 常量
+layer.size('value', [10,50]);// 根据value 字段映射大小
+layer.size('value', (value)=>{})  // 回调函数设置高度
+
+```
+##  color
+
+同layer color方法
+
+## style
+
+- coverage 网格覆盖度  0 - 1
+- angle 网格旋转角度   0 - 360
+- opacity 透明度  0 - 1.0
+
+```javascript
+  
+    layer.style({
+      coverage: 0.9,
+      angle: 0,
+      opacity: 1.0
+  })
+
+```
+## 完整实例代码
+
+```javascript
+const layer = new HeatmapLayer({})
+      .source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng',
+          y: 'lat'
+        },
+        transforms: [
+          {
+            type: 'grid',
+            size: 20000,
+            field: 'v',
+            method: 'sum'
+          }
+        ]
+      })
+      .shape('square')
+      .style({
+        coverage: 1,
+        angle: 0
+      })
+      .color(
+        'count',
+        [
+          '#0B0030',
+          '#100243',
+          '#100243',
+          '#1B048B',
+          '#051FB7',
+          '#0350C1',
+          '#0350C1',
+          '#0072C4',
+          '#0796D3',
+          '#2BA9DF',
+          '#30C7C4',
+          '#6BD5A0',
+          '#A7ECB2',
+          '#D0F4CA'
+        ].reverse()
+      );
+
+    scene.addLayer(layer);
+```
+

docs/api/layer/heatmap_layer/heatmap.en.md

@@ -1,219 +0,0 @@
----
-title: HeatmapLayer
-order: 0
----
-
-# 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_layer/heatmap.zh.md

@@ -1,219 +0,0 @@
----
-title: HeatmapLayer
-order: 0
----
-
-# 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_layer/hexagon.en.md

@@ -0,0 +1,135 @@
+---
+title: Hexagon HeatMap
+order: 1
+---
+将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
+
+## 使用
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+```
+## source
+网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
+
+#### 设置网格聚合参数
+
+布局方法 通过 source 的 tansforms 属性配置
+
+- type  数据聚合类型  hexagon
+- size  网格半径 单位 米
+- field  聚合字段
+- method 聚合方法  count,max,min,sum,mean5 个统计维度
+
+```javascript
+
+layer.source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'hexagon',
+        size: 15000,
+        field:'v',
+        method:'sum'
+        }
+      ],
+  }
+
+```
+## shape
+
+网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
+
+### 2d
+
+- circle,
+- triangle
+- square
+- heaxgon 
+
+```javascript
+layer.shape(circle);
+
+```
+
+### 3d
+
+- cylinder
+- triangleColumn
+- hexagonColumn
+- squareColumn,
+
+```javascript
+layer.shape(cylinder);
+
+```
+
+## size
+
+### 2D shape 
+
+ 不需要设置size方法
+
+### 3D 图形 
+
+  size 表示高度, 支持常量和数据映射
+
+```javascript
+layer.size(10);// 常量
+layer.size('value', [10,50]);// 根据value 字段映射大小
+layer.size('value', (value)=>{})  // 回调函数设置高度
+
+```
+## color
+
+同layer color方法
+
+## style
+
+- coverage 网格覆盖度  0 - 1
+- angle 网格旋转角度   0 - 360
+- opacity 透明度  0 - 1.0
+
+```javascript
+  
+    layer.style({
+      coverage: 0.9,
+      angle: 0,
+      opacity: 1.0
+  })
+  
+```
+
+### 完整代码
+
+```javascript
+const layer = 
+  new HeatmapLayer({
+    zIndex: 2,
+  })
+  .souce(data, {
+    parser: {
+      type: 'csv',
+      x: lng,
+      y: lat,
+    },
+    transforms: [
+      {
+        type: 'hexagon',
+        size: 1500,
+        field: 'count',
+        operation: 'sum',
+      },
+    ],
+  })
+  .shape('hexagon')
+  .color('sum')
+  .style({
+    coverage: 0.8,
+  });
+```
+
+

docs/api/layer/heatmap_layer/hexagon.zh.md

@@ -2,3 +2,138 @@
 title: 蜂窝热力图
 order: 1
 ---
+
+将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
+
+## 使用
+
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+
+```
+
+## source
+
+网格数据只支持点数据作为数据源，数据格式支持csv、json、geojson.
+
+#### 设置网格聚合参数
+
+布局方法 通过 source 的 tansforms 属性配置
+
+- type  数据聚合类型  hexagon
+- size  网格半径 单位 米
+- field  聚合字段
+- method 聚合方法  count,max,min,sum,mean5 个统计维度
+
+```javascript
+
+layer.source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'hexagon',
+        size: 15000,
+        field:'v',
+        method:'sum'
+        }
+      ],
+  }
+
+```
+## shape
+
+网格热力图虽然是以标准四边形网格进行数据聚合，但是展示效果上可以设置为其形状，形状只支持常量
+
+### 2d
+
+- circle,
+- triangle
+- square
+- heaxgon 
+
+```javascript
+layer.shape(circle);
+
+```
+
+### 3d
+
+- cylinder
+- triangleColumn
+- hexagonColumn
+- squareColumn,
+
+```javascript
+layer.shape(cylinder);
+
+```
+
+## size
+
+### 2D shape 
+
+ 不需要设置size方法
+
+### 3D 图形 
+
+  size 表示高度, 支持常量和数据映射
+
+```javascript
+layer.size(10);// 常量
+layer.size('value', [10,50]);// 根据value 字段映射大小
+layer.size('value', (value)=>{})  // 回调函数设置高度
+
+```
+## color
+
+同layer color方法
+
+## style
+
+- coverage 网格覆盖度  0 - 1
+- angle 网格旋转角度   0 - 360
+- opacity 透明度  0 - 1.0
+
+```javascript
+    layer.style({
+      coverage: 0.9,
+      angle: 0,
+      opacity: 1.0
+  })
+  
+```
+
+### 完整代码
+
+```javascript
+const layer = 
+  new HeatmapLayer({
+    zIndex: 2,
+  })
+  .souce(data, {
+    parser: {
+      type: 'csv',
+      x: lng,
+      y: lat,
+    },
+    transforms: [
+      {
+        type: 'hexagon',
+        size: 1500,
+        field: 'count',
+        operation: 'sum',
+      },
+    ],
+  })
+  .shape('hexagon')
+  .color('sum')
+  .style({
+    coverage: 0.8,
+  });
+```
+
+

docs/api/layer/heatmap_layer/normal.en.md

@@ -0,0 +1,69 @@
+---
+title: 经典热力图
+order: 1
+---
+
+## 使用
+
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+
+```
+
+## shape
+ 常量 heatmap
+
+```javascript
+layer.shape('heatmap');
+```
+
+## size
+
+- field: 热力图权重字段
+- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
+
+```javascript
+
+layer.size('weight', [0,1])
+
+```
+## color
+
+  heatmap 需要设置color 方法，样式通过style 设置
+
+## style
+
+- intensity    全局热力权重     推荐权重范围 1-5
+- radius   热力半径，单位像素
+- rampColors 色带参数
+  - colors  颜色数组
+  - positions 数据区间
+
+  :warning: color, position 的长度要相同
+
+## 完整代码
+
+```javascript
+
+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],
+  },
+});
+
+```

docs/api/layer/heatmap_layer/normal.zh.md

@@ -2,3 +2,68 @@
 title: 经典热力图
 order: 1
 ---
+
+## 使用
+
+```javascript
+import { HeatMapLayer] } from '@antv/l7';
+
+```
+
+## shape
+ 常量 heatmap
+
+```javascript
+layer.shape('heatmap');
+```
+
+## size
+
+- field: 热力图权重字段
+- values: 数据映射区间 热力图显示 [0, 1] 效果最佳
+
+```javascript
+
+layer.size('weight', [0,1])
+
+```
+## color
+
+  heatmap 需要设置color 方法，样式通过style 设置
+
+## style
+
+- intensity    全局热力权重     推荐权重范围 1-5
+- radius   热力半径，单位像素
+- rampColors 色带参数
+  - colors  颜色数组
+  - positions 数据区间
+
+  :warning: color, position 的长度要相同
+
+## 完整代码
+
+```javascript
+
+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],
+  },
+});
+
+```

docs/api/layer/imagelayer.en.md

@@ -3,12 +3,16 @@ title: ImageLayer
 order: 5
 ---
 
-# ImageLayer
-
 ## 简介
 
 将图片添加到地图上，需要指定图片的经纬度范围
 
+## 使用
+
+```javascript
+import { ImageLayer } from '@antv/l7';
+```
+
 ### 代码示例
 
 ```javascript

docs/api/layer/imagelayer.zh.md

@@ -1,14 +1,18 @@
 ---
-title: ImageLayer
+title: 图片图层
 order: 5
 ---
 
-# ImageLayer
-
 ## 简介
 
 将图片添加到地图上，需要指定图片的经纬度范围
 
+## 使用
+
+```javascript
+import { ImageLayer } from '@antv/l7';
+```
+
 ### 代码示例
 
 ```javascript

docs/api/layer/layer.en.md

@@ -12,12 +12,14 @@ L7 Layer 接口设计遵循图形语法，在可视表达上
 语法示例
 
 ```javascript
-new Layer(option)
+const layer = new Layer(option)
   .source()
   .color()
   .size()
   .shape()
   .style();
+
+scene.addLayer(layer);
 ```
 
 ## 构造函数

docs/api/layer/layer.zh.md

@@ -12,12 +12,14 @@ L7 Layer 接口设计遵循图形语法，在可视表达上
 语法示例
 
 ```javascript
-new Layer(option)
+const layer = new Layer(option)
   .source()
   .color()
   .size()
   .shape()
   .style();
+
+scene.addLayer(layer);
 ```
 
 ## 构造函数

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

@@ -0,0 +1,76 @@
+---
+title: 弧线图
+order: 1
+---
+将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
+
+## 使用
+
+### 数据
+绘制弧线只需提供起始点坐标即可
+
+```javascript
+ source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2'
+        }
+      })
+```
+
+### shape
+
+弧线支持两种弧线算法
+
+- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
+- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
+- arc3d 3d 弧线地图 3D 视角
+
+
+
+### 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
+  
+})
+```
+### 示例代码
+
+```javascript
+const layer = new LineLayer({})
+      .source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2'
+        }
+      })
+      .size(1)
+      .shape('arc')
+      .color('#8C1EB2')
+      .style({
+        opacity: 0.8,
+      });
+```

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

@@ -29,27 +29,6 @@ order: 1
 - greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
 - arc3d 3d 弧线地图 3D 视角
 
-
-### 示例代码
-
-```javascript
-const layer = new LineLayer({})
-      .source(data, {
-        parser: {
-          type: 'csv',
-          x: 'lng1',
-          y: 'lat1',
-          x1: 'lng2',
-          y1: 'lat2'
-        }
-      })
-      .size(1)
-      .shape('arc')
-      .color('#8C1EB2')
-      .style({
-        opacity: 0.8,
-      });
-```
 ### animate
 
 #### 开启关闭动画
@@ -73,3 +52,25 @@ layer.animate({
   
 })
 ```
+
+
+### 示例代码
+
+```javascript
+const layer = new LineLayer({})
+      .source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2'
+        }
+      })
+      .size(1)
+      .shape('arc')
+      .color('#8C1EB2')
+      .style({
+        opacity: 0.8,
+      });
+```

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

@@ -0,0 +1,49 @@
+---
+title: Path
+order: 1
+---
+用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
+
+## 使用
+
+### shape
+shape 设置成line即可绘制路线图
+- line 
+
+### size
+路径图线的size支持两个维度
+
+- width 宽度
+- height 高度
+
+```javascript
+ layer.size([2,10]) // 绘制宽度为2，高度为10的路径
+ 
+ layer.size('height',[])
+```
+### 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

@@ -19,8 +19,31 @@ shape 设置成line即可绘制路线图
 ```javascript
  layer.size([2,10]) // 绘制宽度为2，高度为10的路径
  
- layer.size('',[])
+ layer.size('height',[])
 ```
 ### 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/point_layer/bubble.en.md

@@ -1,4 +1,62 @@
 ---
-title: bubble
+title: 气泡图
 order: 1
 ---
+气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
+
+## 使用
+
+气泡图通过PointLayer对象实例化，
+
+```javascript
+import { PointLayer } from '@antv/l7';
+
+```
+### shape 
+ 
+ 通常气泡图shape 设置为 **circle**
+
+### size
+
+气泡图大小，需要指定数据映射字段
+
+```javascript
+
+const bubble = 
+new PointLayer()
+    .source(data)
+    .shape(circle)
+    .size('mag',[0, 25])
+    .color('red')
+    .style({
+      opacity: 0.3,
+      strokeWidth: 1
+    })
+```
+
+### animate
+
+气泡图支持水波动画效果
+
+#### 开启关闭动画
+
+```javascript
+layer.animate(true)
+layer.animate(false)
+```
+#### 水波配置项
+
+- speed 水波速度
+- rings 水波环数
+
+
+
+## tips
+
+目前style的配置项只支持全局设置，不支持数据映射。
+
+如果 opacity 设置为 0.3 则所有的气泡都是 0.3
+
+style方法如果没有设置 stroke, 默认于气泡的填充色相同
+
+

docs/api/layer/point_layer/cluster.en.md

@@ -2,8 +2,72 @@
 title: 聚合图
 order: 5
 ---
+## 使用
+
+目前只有点数据支持聚类方法
+
+数据聚合主要从数据层数据，因此需要在Source方法配置 cluster 参数
+
+### Source  
+[source 文档](../../source/source)
+
+### 配置项
+  - cluster **boolean** 是否聚合
+  - clusterOption 聚合配置项
+    - radius 聚合半径 **number** default 40
+    - minZoom: 最小聚合缩放等级 **number** default 0
+    - maxZoom: 最大聚合缩放等级 **number** default 16
+
+数据聚合之后，源数据会增加 point_count属性，在可视化渲染时可以根据 point_count 进行数据映射。
+
+#### 方法
+
+  **getClusters(zoom: number)**
+  
+  获取指定缩放等级的聚合数据
+   
+   - zoom 缩放等级
+  
+  **getClustersLeaves(id: string)**
+  
+    根据id获取聚合节点的数据
+
+  - id 聚合数据id
+
+  
 
 
-##使用
+```javascript
 
-目前只有点图层支持聚类方法
+layer.source(pointsData, {
+          cluster: true,
+        });
+        
+// 设置配置项
+layer.source(pointsData, {
+          cluster: true,
+          clusterOption:{
+            radius:40,
+          }
+        });
+```
+
+
+### 完整示例
+
+```javascript
+const pointLayer = new PointLayer({})
+        .source(pointsData, {
+          cluster: true,
+        })
+        .shape('circle')
+        .scale('point_count', {
+          type: 'quantile',
+        })
+        .size('point_count', [5, 10, 15, 20, 25])
+        .color('red')
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1,
+        });
+```

docs/api/layer/point_layer/dot.en.md

@@ -7,8 +7,11 @@ order: 3
 ## 使用
 
 ### shape
+
  - dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
+
 ### color 
+
   - 无权重
    如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
   - 有权重
@@ -16,6 +19,7 @@ order: 3
 
 
 ```javascript
+
 const pointLayer = new PointLayer()
       .source(data)
       .size(2)

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

@@ -8,7 +8,9 @@ order: 3
 
 ### shape
  - dot 如果需要使用亮度图可以将shape设置为dot,或者不设置shape
+
 ### color 
+
   - 无权重
    如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色约亮
   - 有权重
@@ -16,6 +18,7 @@ order: 3
 
 
 ```javascript
+
 const pointLayer = new PointLayer()
       .source(data)
       .size(2)

docs/api/layer/point_layer/scatter.en.md

@@ -0,0 +1,43 @@
+---
+title: 散点图
+order: 2
+---
+在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
+
+## 使用
+散点图通过PointLayer对象实例化
+
+### shape
+
+- circle
+- square
+- hexagon
+- triangle
+- pentagon
+- octogon
+- hexagram
+- rhombus
+- vesica
+
+散点图shape 一般设置成常量
+
+### color
+
+color 可以根据数据的差异设置成不同颜色，表示数据的不同分类。
+
+### size
+散点图一般等大小的图形,size 一般设置成常量
+
+```javascript
+
+const scatter = 
+new PointLayer()
+    .source(data)
+    .shape(circle)
+    .size(5)
+    .color('red')
+    .style({
+      opacity: 0.3,
+      strokeWidth: 1
+    })
+```

docs/api/layer/polygon_layer/polygonlayer.en.md

@@ -2,12 +2,16 @@
 title: PolygonLayer
 order: 0
 ---
-
-# 填充图
-
 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
 
-### shape
+## 使用
+
+```javascript
+import { PolygonLayer } from '@antv/l7';
+
+```
+
+## shape
 
 填充图支持 3 种 shape
 

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

@@ -2,12 +2,15 @@
 title: PolygonLayer
 order: 0
 ---
-
-# 填充图
-
 绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
 
-### shape
+## 使用
+
+```javascript
+import { PolygonLayer } from '@antv/l7';
+```
+
+## shape
 
 填充图支持 3 种 shape
 

docs/api/layer/raster_layer.en.md

@@ -0,0 +1,44 @@
+---
+title: Raster
+order: 5
+---
+
+Raster 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
+
+L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为 Source 传入。
+
+## 使用
+
+```javascript
+import { RasterLayer } from '@antv/l7';
+```
+
+## source
+
+见 [raster source](../source/raster)
+
+## shape
+
+`raster`
+
+## size
+
+无
+
+## color
+
+无
+
+## style
+
+- clampLow Boolean 默认 false, 设置为 true，低于 domain 的数据将不显示
+- clampHigh Boolean 默认 false, 设置为 true，高于 domain 的数据将不显示
+- opacity: 0.8 Number 透明度
+- domain: [ 0, 8000 ] 数据映射区间
+- noDataValue Number noDataValue 不会显示
+- rampColors: {
+  colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
+  positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+  } // 色带
+
+  :warning: color, position 的长度要相同

docs/api/layer/raster_layer.zh.md

@@ -0,0 +1,44 @@
+---
+title: 栅格图层
+order: 5
+---
+
+Raster 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
+
+L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为 Source 传入。
+
+## 使用
+
+```javascript
+import { RasterLayer } from '@antv/l7';
+```
+
+## source
+
+见 [raster source](../source/raster)
+
+## shape
+
+`raster`
+
+## size
+
+无
+
+## color
+
+无
+
+## style
+
+- clampLow Boolean 默认 false, 设置为 true，低于 domain 的数据将不显示
+- clampHigh Boolean 默认 false, 设置为 true，高于 domain 的数据将不显示
+- opacity: 0.8 Number 透明度
+- domain: [ 0, 8000 ] 数据映射区间
+- noDataValue Number noDataValue 不会显示
+- rampColors: {
+  colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
+  positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+  } // 色带
+
+  :warning: color, position 的长度要相同

docs/api/source/raster.en.md

@@ -0,0 +1,27 @@
+---
+title: Raster
+order: 5
+---
+
+Raster 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
+
+## parser
+
+- type: raster
+- extent: 栅格的经纬度范围 [minlng, minlat,maxLng, maxLat]
+- width 数据宽度
+- height 数据高度
+
+根据图片的经纬度范围，将图片添加到地图上。
+
+```javascript
+layer.source(
+  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+  {
+    parser: {
+      type: 'raster',
+      extent: [121.168, 30.2828, 121.384, 30.4219],
+    },
+  },
+);
+```

docs/api/source/raster.zh.md

@@ -0,0 +1,27 @@
+---
+title: 栅格
+order: 5
+---
+
+Raster 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
+
+## parser
+
+- type: raster
+- extent: 栅格的经纬度范围 [minlng, minlat,maxLng, maxLat]
+- width 数据宽度
+- height 数据高度
+
+根据图片的经纬度范围，将图片添加到地图上。
+
+```javascript
+layer.source(
+  'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+  {
+    parser: {
+      type: 'raster',
+      extent: [121.168, 30.2828, 121.384, 30.4219],
+    },
+  },
+);
+```

docs/api/source/source.zh.md

@@ -30,7 +30,7 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 
 ## API
 
-### cluster 可选 可以只设置 cluster
+### cluster ``boolean` 可选 可以只设置
 
 ### clusterOption 可选
 
@@ -53,6 +53,17 @@ source 地理数据处理模块，主要包含数据解析（parser)，和数据
 layer.source(data);
 ```
 
+### Source 更新
+
+如果数据发生改变，可以需要更新数据
+可以通过调用 layer 的 setData 方法实现数据的更新
+
+具体见 [Layer](../layer/layer/#setdata)
+
+```javascript
+layer.setData(data);
+```
+
 #### JSON
 
 [JSON 数据格式解析](./json)
@@ -69,6 +80,23 @@ layer.source(data);
 
 ### transforms
 
+tranforms 处理的是的标准化之后的数据
+标准化之后的数据结构包括 coordinates 地理坐标字段，以及其他属性字段。
+
+处理完之后返回的也是标准数据
+
+```javascript
+ [{
+   coordinates: [[]] // 地理坐标字段
+   _id:'',// 标准化之后新增字段
+   name:''
+   value:''
+  // ....
+ }]
+
+
+```
+
 目前支持两种热力图使用的数据处理方法 grid，hexagon transform 配置项
 
 - type 数据处理类型

docs/tutorial/quickstart.zh.md

@@ -7,7 +7,7 @@ redirect_from:
 
 # L7 
 
-Current version:  ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7/beta)
+Current version:  ![L7 2.0版本号](https://badgen.net/npm/v/@antv/l7)
 
 ## 使用方法
 
@@ -37,7 +37,7 @@ Install the npm package.
 ```bash
 
 // L7 依赖
-npm install --save @antv/l7@beta
+npm install --save @antv/l7
 
 // 第三方底图依赖
 npm install --save @antv/l7-maps;
@@ -156,7 +156,21 @@ export default class AMapExample extends React.Component {
 
 更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories) 
 
-### Vue 欢迎补充
-[1.x Vue 使用](https://codesandbox.io/s/l7-vue1xdemo-wknsz)
-### Html
-[2.0版本 HTML 使用模板](https://codesandbox.io/s/l7htmltemplate-vp2lp)
+## 不同项目使用模板
+
+不同项目模板在CodeSandbox你可以预览，也可以下载到本地
+
+### React
+
+[地址](https://codesandbox.io/s/l720react-jfwyz)
+
+### Vue
+
+[地址](https://codesandbox.io/s/l720vue-uef1x)
+
+### Angular
+
+[地址](https://codesandbox.io/s/angulartest-chpff)
+
+### HTML CDN
+[地址](https://codesandbox.io/s/l7cdndemo-gfg9m)

examples/gallery/animate/demo/animate_line.js

@@ -0,0 +1,35 @@
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    center: [ -74.006, 40.7128 ],
+    zoom: 14,
+    style: 'dark'
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/5592c737-1c70-4d6b-82c1-e74e5a019b04.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    const lineLayer = new LineLayer()
+      .source(data, {
+        parser: {
+          type: 'json',
+          coordinates: 'path'
+        }
+      })
+      .size(1.5)
+      .shape('line')
+      .color('color', v => {
+        return `rgb(${v[0]})`;
+      })
+      .animate({
+        interval: 0.6,
+        trailLength: 1.5,
+        duration: 6
+      });
+    scene.addLayer(lineLayer);
+  });

examples/gallery/animate/demo/animate_path.js

@@ -0,0 +1,30 @@
+import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [ 120.19382669582967, 30.258134 ],
+    pitch: 0,
+    zoom: 16,
+    style: 'dark'
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    const layer = new LineLayer()
+      .source(data)
+      .size(1.5)
+      .shape('line')
+      .color('#25d8b7')
+      .animate({
+        interval: 1, // 间隔
+        duration: 1, // 持续时间，延时
+        trailLength: 2 // 流线长度
+      });
+    scene.addLayer(layer);
+  });

examples/gallery/animate/demo/build.js

@@ -0,0 +1,62 @@
+import { Scene, CityBuildingLayer, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'amap://styles/a49ef8d081db7b85adb2e90ba7941f1e?isPublic=true',
+    center: [ 120.173104, 30.244072 ],
+    pitch: 70.41138037735848,
+    zoom: 17.18,
+    rotation: 2.24, // 358.7459759480504
+    minZoom: 14
+  })
+});
+
+scene.on('loaded', () => {
+  fetch(
+    'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json'
+  )
+    .then(res => res.json())
+    .then(data => {
+      const layer = new CityBuildingLayer(
+        {
+          zIndex: 0
+        }
+      );
+      layer
+        .source(data)
+        .size('floor', [ 100, 3000 ])
+        .color('rgba(242,246,250,0.5)')
+        .animate({
+          enable: true
+        })
+        .style({
+          opacity: 1.0,
+          baseColor: 'rgba(36,16,63,0.3)',
+          windowColor: '#0e0220',
+          brightColor: '#08faee'
+        });
+      scene.addLayer(layer);
+    });
+  fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
+  )
+    .then(res => res.json())
+    .then(data => {
+      const layer = new LineLayer({
+        zIndex: 0
+      })
+        .source(data)
+        .size(1)
+        .shape('line')
+        .color('#ff893a')
+        .animate({
+          interval: 1, // 间隔
+          duration: 2, // 持续时间，延时
+          trailLength: 2 // 流线长度
+        });
+      scene.addLayer(layer);
+    });
+
+});

examples/gallery/animate/demo/meta.json

@@ -0,0 +1,33 @@
+{
+  "title": {
+    "zh": "图库",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "animate_path.js",
+      "title": "路径动画",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VJX5Qo7ufaAAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "world.js",
+      "title": "流向图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Sbx4S4w7nL8AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "world2.js",
+      "title": "流向图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*u5BsQbn30pkAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "build.js",
+      "title": "点亮城市",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7XkWTYQMfPMAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "animate_line.js",
+      "title": "轨迹动画",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jLo0RY0sDG4AAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/gallery/animate/demo/world.js

@@ -0,0 +1,93 @@
+/* eslint-disable no-eval */
+import { Scene, LineLayer, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 40,
+    style: {
+      version: 8,
+      sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
+      glyphs:
+        'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
+      sources: {},
+      layers: [
+        {
+          id: 'background',
+          type: 'background',
+          paint: {
+            'background-color': '#2b2b3a'
+          }
+        }
+      ]
+    },
+    center: [ 3.438, 40.16797 ],
+    zoom: 0.51329
+  })
+});
+Promise.all([
+  fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
+]).then(function onLoad([ world, dot, flyline ]) {
+  const dotData = eval(dot);
+  const flydata = eval(flyline).map(item => {
+    const latlng1 = item.from.split(',').map(e => { return e * 1; });
+    const latlng2 = item.to.split(',').map(e => { return e * 1; });
+    return { coord: [ latlng1, latlng2 ] };
+  });
+  // const worldFill = new PolygonLayer()
+  //   .source(world)
+  //   .color('#98E3FA')
+  //   .shape('fill')
+  //   .style({
+  //     opacity: 1
+  //   });
+
+  const worldLine = new LineLayer()
+    .source(world)
+    .color('#41fc9d')
+    .size(0.5)
+    .style({
+      opacity: 0.4
+    });
+  const dotPoint = new PointLayer()
+    .source(dotData, {
+      parser: {
+        type: 'json',
+        x: 'lng',
+        y: 'lat'
+      }
+    })
+    .shape('circle')
+    .color('#ffed11')
+    .animate(true)
+    .size(40)
+    .style({
+      opacity: 1.0
+    });
+  const flyLine = new LineLayer()
+    .source(flydata, {
+      parser: {
+        type: 'json',
+        coordinates: 'coord'
+      }
+    })
+    .color('#ff6b34')
+    .shape('arc3d')
+    .size(2)
+    .animate({
+      interval: 2,
+      trailLength: 2,
+      duration: 1
+    })
+    .style({
+      opacity: 1
+    });
+  // scene.addLayer(worldFill);
+  scene.addLayer(worldLine);
+  scene.addLayer(dotPoint);
+  scene.addLayer(flyLine);
+});
+

examples/gallery/animate/demo/world2.js

@@ -0,0 +1,96 @@
+/* eslint-disable no-eval */
+import { Scene, LineLayer, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 40,
+    style: {
+      version: 8,
+      sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
+      glyphs:
+        'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
+      sources: {},
+      layers: [
+        {
+          id: 'background',
+          type: 'background',
+          paint: {
+            'background-color': '#2b2b3a'
+          }
+        }
+      ]
+    },
+    center: [ 3.438, 40.16797 ],
+    zoom: 0.51329
+  })
+});
+Promise.all([
+  fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
+]).then(function onLoad([ world, dot, flyline ]) {
+  const dotData = eval(dot);
+  const flydata = eval(flyline).map(item => {
+    const latlng1 = item.from.split(',').map(e => { return e * 1; });
+    const latlng2 = item.to.split(',').map(e => { return e * 1; });
+    return { coord: [ latlng1, latlng2 ] };
+  });
+  // const worldFill = new PolygonLayer()
+  //   .source(world)
+  //   .color('#98E3FA')
+  //   .shape('fill')
+  //   .style({
+  //     opacity: 1
+  //   });
+
+  const worldLine = new LineLayer()
+    .source(world)
+    .color('#495e96')
+    .size(0.6)
+    .style({
+      opacity: 0.2
+    });
+  const dotPoint = new PointLayer()
+    .source(dotData, {
+      parser: {
+        type: 'json',
+        x: 'lng',
+        y: 'lat'
+      }
+    })
+    .shape('circle')
+    .color('#abc7e9')
+    .animate({
+      speed: 0.8
+    }
+    )
+    .size(30)
+    .style({
+      opacity: 1.0
+    });
+  const flyLine = new LineLayer()
+    .source(flydata, {
+      parser: {
+        type: 'json',
+        coordinates: 'coord'
+      }
+    })
+    .color('#b97feb')
+    .shape('arc3d')
+    .size(2)
+    .animate({
+      interval: 2,
+      trailLength: 2,
+      duration: 1
+    })
+    .style({
+      opacity: 1
+    });
+  // scene.addLayer(worldFill);
+  scene.addLayer(worldLine);
+  scene.addLayer(dotPoint);
+  scene.addLayer(flyLine);
+});
+

examples/gallery/animate/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Animate
+order: 0
+---

examples/gallery/animate/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 动画
+order: 0
+---

examples/gallery/basic/demo/animate.js

@@ -1,43 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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,16 +4,6 @@
     "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/gallery/basic/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Featured
-order: 0
+order: 1
 ---

examples/gallery/basic/index.zh.md

@@ -1,4 +1,4 @@
 ---
-title: 官方精品库
-order: 0
+title: 基础可视化
+order: 1
 ---

examples/heatmap/grid/demo/china.js

@@ -32,9 +32,6 @@ fetch(
           }
         ]
       })
-      .size('count', value => {
-        return value * 0;
-      })
       .shape('square')
       .style({
         coverage: 1,

examples/heatmap/grid/demo/grid1.js

@@ -32,9 +32,6 @@ fetch(
           }
         ]
       })
-      .size('count', value => {
-        return value * 0;
-      })
       .shape('square')
       .style({
         coverage: 1,

examples/heatmap/grid/demo/heatmap3.js

@@ -32,9 +32,6 @@ fetch(
           }
         ]
       })
-      .size('count', value => {
-        return value * 0;
-      })
       .shape('circle')
       .style({
         coverage: 0.9,

examples/heatmap/grid/demo/world.js

@@ -32,9 +32,6 @@ fetch(
           }
         ]
       })
-      .size('count', value => {
-        return value * 0;
-      })
       .shape('square')
       .style({
         coverage: 1,

examples/heatmap/hexagon/demo/world.js

@@ -27,9 +27,6 @@ fetch(
           }
         ]
       })
-      .size('sum', value => {
-        return value * 50;
-      })
       .shape('hexagon')
       .style({
         coverage: 0.9,

examples/line/path/demo/bus_light.js

@@ -1,6 +1,6 @@
 // Data Source https://busrouter.sg/visualization/
 
-import { Scene, LineLayer } from '@antv/l7';
+import { Scene, LineLayer, Popup } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 
 const scene = new Scene({
@@ -30,6 +30,7 @@ fetch(
         return [ 0.8, level * 1 ];
       })
       .shape('line')
+      .active(true)
       .color(
         'level',
         [
@@ -47,5 +48,14 @@ fetch(
           .reverse()
           .slice(0, 8)
       );
+    layer.on('mousemove', e => {
+      const popup = new Popup({
+        offsets: [ 0, 0 ],
+        closeButton: false
+      })
+        .setLnglat(e.lngLat)
+        .setHTML(`<span>车次: ${e.feature.number}</span>`);
+      scene.addPopup(popup);
+    });
     scene.addLayer(layer);
   });

examples/point/bubble/demo/color.js

@@ -36,6 +36,7 @@ fetch(
         'vesica'
       ])
       .size('unit_price', [ 10, 25 ])
+      .active(true)
       .color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
       .style({
         opacity: 0.3,

examples/point/bubble/demo/point.js

@@ -25,6 +25,7 @@ fetch(
       .color('mag', mag => {
         return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
       })
+      .active(true)
       .style({
         opacity: 0.3,
         strokeWidth: 1

examples/point/bubble/demo/scatter.js

@@ -27,8 +27,8 @@ fetch(
       .shape('circle')
       .active(true)
       .animate(true)
-      .size(40)
-      .color('#ffa842')
+      .size(56)
+      .color('#4cfd47')
       .style({
         opacity: 1
       });

examples/point/bubble/demo/world.js

@@ -31,6 +31,7 @@ fetch(
         '#A1EDB8',
         '#CEF8D6'
       ])
+      .active(true)
       .style({
         opacity: 0.5,
         strokeWidth: 0

examples/point/cluster/demo/cluster.js

@@ -0,0 +1,34 @@
+import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [ 120.19382669582967, 30.258134 ],
+    pitch: 0,
+    style: 'dark',
+    zoom: 3
+  })
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
+  .then(res => res.json())
+  .then(data => {
+    const pointLayer = new PointLayer({})
+      .source(data, {
+        cluster: true
+      })
+      .shape('circle')
+      .scale('point_count', {
+        type: 'quantile'
+      })
+      .size('point_count', [ 5, 10, 15, 20, 25 ])
+      .active(true)
+      .color('yellow')
+      .style({
+        opacity: 0.5,
+        strokeWidth: 1
+      });
+
+    scene.addLayer(pointLayer);
+  });

examples/point/cluster/demo/meta.json

@@ -0,0 +1,14 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "cluster.js",
+      "title": "聚合图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ"
+    }
+
+  ]
+}

examples/point/cluster/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Cluster Map
+order: 1
+---

examples/point/cluster/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: "聚合图"
+order: 1
+---

examples/point/column/demo/clumn_shape.js

@@ -25,6 +25,7 @@ fetch(
           y: 'latitude'
         }
       })
+      .active(true)
       .shape('name', [
         'cylinder',
         'triangleColumn',

examples/point/column/demo/clumn_shape_light.js

@@ -31,6 +31,7 @@ fetch(
         'hexagonColumn',
         'squareColumn'
       ])
+      .active(true)
       .size('unit_price', h => {
         return [ 6, 6, h / 500 ];
       })

examples/point/column/demo/column_dark.js

@@ -26,6 +26,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
       .size('t', function(level) {
         return [ 1, 2, level * 2 + 20 ];
       })
+      .active(true)
       .color('t', [
         '#094D4A',
         '#146968',

examples/point/column/demo/column_light.js

@@ -1,4 +1,4 @@
-import { Scene, PointLayer } from '@antv/l7';
+import { Scene, PointLayer, Popup } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
@@ -27,9 +27,19 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
       .size('t', function(level) {
         return [ 1, 2, level * 2 + 20 ];
       })
+      .active(true)
       .color('#006CFF')
       .style({
         opacity: 1.0
       });
+    pointLayer.on('mousemove', e => {
+      const popup = new Popup({
+        offsets: [ 0, 0 ],
+        closeButton: false
+      })
+        .setLnglat(e.lngLat)
+        .setHTML(`<span>${e.feature.s}: ${e.feature.t}℃</span>`);
+      scene.addPopup(popup);
+    });
     scene.addLayer(pointLayer);
   });

examples/point/dot/index.zh.md

@@ -1,4 +1,4 @@
 ---
-title: "亮度图"
+title: 亮度图
 order: 1
 ---

examples/point/scatter/demo/scatter.js

@@ -26,6 +26,7 @@ fetch(
       })
       .shape('circle')
       .size(4)
+      .active(true)
       .color('Magnitude', [
         '#0A3663',
         '#1558AC',

examples/point/text/demo/meta.json

@@ -0,0 +1,19 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "point_text.js",
+      "title": "点数据标注",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7blvQ4v7Q1UAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "polygon_text.js",
+      "title": "面数据标注",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ"
+    }
+
+  ]
+}

examples/point/text/demo/point_text.js

@@ -0,0 +1,39 @@
+import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [ 120.19382669582967, 30.258134 ],
+    pitch: 0,
+    style: 'light',
+    zoom: 3
+  })
+});
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
+  .then(res => res.json())
+  .then(data => {
+    const pointLayer = new PointLayer({})
+      .source(data.list, {
+        parser: {
+          type: 'json',
+          x: 'j',
+          y: 'w'
+        }
+      })
+      .shape('m', 'text')
+      .size(12)
+      .color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
+      .style({
+        textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+        textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
+        spacing: 2, // 字符间距
+        padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+        stroke: '#ffffff', // 描边颜色
+        strokeWidth: 0.3, // 描边宽度
+        strokeOpacity: 1.0
+      });
+
+    scene.addLayer(pointLayer);
+  });

examples/point/text/demo/polygon_text.js

@@ -0,0 +1,34 @@
+import { Scene, PolygonLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 0,
+    style: 'light',
+    center: [ -96, 37.8 ],
+    zoom: 3
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    const layer = new PolygonLayer({})
+      .source(data)
+      .color('blue')
+      .shape('name', 'text')
+      .size(18)
+      .style({
+        textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+        textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
+        spacing: 2, // 字符间距
+        padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+        stroke: '#ffffff', // 描边颜色
+        strokeWidth: 0.3, // 描边宽度
+        strokeOpacity: 1.0
+      });
+    scene.addLayer(layer);
+  });

examples/point/text/index.en.md

@@ -0,0 +1,32 @@
+---
+title: label
+order: 1
+---
+文本标注图层
+
+## 使用
+
+## shape
+- text
+文本渲染需要将指定字段的shape设置成 text
+
+```javascript
+layer.shape('name','text')
+```
+## color 
+
+ 同layer color
+
+## size 
+
+ 同layer size
+
+## style
+
+- textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+- textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
+- spacing: 2, // 字符间距
+- padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+- stroke: '#ffffff', // 描边颜色
+- strokeWidth: 0.3, // 描边宽度
+- strokeOpacity: 1.0

examples/point/text/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 文本标注
+order: 1
+---

examples/polygon/fill/demo/fill.js

@@ -34,6 +34,7 @@ fetch(
         ].reverse()
       )
       .shape('fill')
+      .active(true)
       .style({
         opacity: 1
       });
@@ -42,7 +43,7 @@ fetch(
     })
       .source(data)
       .color('#fff')
-      .size(0.3)
+      .size(0.8)
       .style({
         opacity: 1
       });

examples/polygon/fill/demo/meta.json

@@ -9,6 +9,11 @@
       "title": "全国地图行政区划",
       "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*IhtZRKYmPuMAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "usa.js",
+      "title": "地图交互",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HfZ7SKrS9fcAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "fill.js",
       "title": "连续填充图",

examples/polygon/fill/demo/polygon.js

@@ -28,6 +28,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
       .source(data)
       .color('name', colors)
       .shape('fill')
+      .active(true)
       .style({
         opacity: 0.9
       });

examples/polygon/fill/demo/population.js

@@ -47,6 +47,7 @@ Promise.all([
     })
     .color('female', colors)
     .shape('fill')
+    .active(true)
     .style({
       opacity: 0.9
     });
@@ -56,11 +57,10 @@ Promise.all([
   })
     .source(world)
     .color('#fff')
-    .size(0.3)
+    .size(0.8)
     .style({
       opacity: 1
     });
-
   scene.addLayer(layer);
   scene.addLayer(layer2);
 });

examples/polygon/fill/demo/usa.js

@@ -0,0 +1,63 @@
+import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 0,
+    style: 'light',
+    center: [ -96, 37.8 ],
+    zoom: 3
+  })
+});
+
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
+)
+  .then(res => res.json())
+  .then(data => {
+    const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
+    const layer = new PolygonLayer({})
+      .source(data)
+      .color(
+        'density', d => {
+          return d > 1000 ? color[7] :
+            d > 500 ? color[6] :
+              d > 200 ? color[5] :
+                d > 100 ? color[4] :
+                  d > 50 ? color[3] :
+                    d > 20 ? color[2] :
+                      d > 10 ? color[1] :
+                        color[0];
+        }
+      )
+      .shape('fill')
+      .active(true)
+      .style({
+        opacity: 1.0
+      });
+    const layer2 = new LineLayer({
+      zIndex: 2
+    })
+      .source(data)
+      .color('#fff')
+      .active(true)
+      .size(1)
+      .style({
+        lineType: 'dash',
+        dashArray: [ 2, 2 ],
+        opacity: 1
+      });
+    scene.addLayer(layer);
+    scene.addLayer(layer2);
+
+    layer.on('mousemove', e => {
+      const popup = new Popup({
+        offsets: [ 0, 0 ],
+        closeButton: false
+      })
+        .setLnglat(e.lngLat)
+        .setHTML(`<span>${e.feature.properties.name}: ${e.feature.properties.density}</span>`);
+      scene.addPopup(popup);
+    });
+  });

examples/raster/basic/demo/light.js

@@ -14,7 +14,7 @@ const scene = new Scene({
 addLayer();
 async function getTiffData() {
   const response = await fetch(
-    'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF141999.tiff'
+    'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff'
   );
   const arrayBuffer = await response.arrayBuffer();
   const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
@@ -44,13 +44,13 @@ async function addLayer() {
     })
     .style({
       opacity: 1.0,
-      clampLow: true,
-      clampHigh: true,
+      clampLow: false,
+      clampHigh: false,
       domain: [ 0, 90 ],
       nodataValue: 0,
       rampColors: {
-        colors: [ 'rgba(166,97,26,0)', '#c3aa00', '#fadb14', '#fef346', '#ffff96' ],
-        positions: [ 0, 0.1, 0.25, 0.5, 1.0 ]
+        colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#fabd08', '#f1e93f', '#f1ff8f', '#fcfff7' ],
+        positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ]
       }
     });
 

examples/raster/basic/demo/meta.json

@@ -4,11 +4,7 @@
     "en": "Gallery"
   },
   "demos": [
-    {
-      "filename": "image.js",
-      "title": "图片",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
-    },
+
     {
       "filename": "radar.js",
       "title": "雷达图",
@@ -22,12 +18,17 @@
     {
       "filename": "light.js",
       "title": "夜光图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*nvP2R6ZbSSgAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bUYqRb5esH4AAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "ndvi.js",
       "title": "NDVI",
       "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6BQSTI51T_UAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "image.js",
+      "title": "图片",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/raster/basic/demo/ndvi.js

@@ -12,9 +12,19 @@ const scene = new Scene({
   })
 });
 addLayer();
-async function getTiffData() {
+
+// async function getAllYearData() {
+//   const allData = [];
+//   for (let i = 1; i < 13; i++) {
+//     const month = i < 10 ? '0' + i : i;
+//     const res = await getTiffData(month);
+//     allData.push(res);
+//   }
+//   return allData;
+// }
+async function getTiffData(month) {
   const response = await fetch(
-    'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff'
+    'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_2019' + month + '.tiff'
   );
   const arrayBuffer = await response.arrayBuffer();
   const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
@@ -25,16 +35,13 @@ async function getTiffData() {
   return {
     data: values[0],
     width,
-    height,
-    min: 0,
-    max: 8000
+    height
   };
 }
 
 async function addLayer() {
-  const tiffdata = await getTiffData();
-
-  const layer = new RasterLayer({});
+  const layer = new RasterLayer();
+  const tiffdata = await getTiffData('06');
   layer
     .source(tiffdata.data, {
       parser: {
@@ -48,7 +55,7 @@ async function addLayer() {
       opacity: 0.8,
       clampLow: false,
       clampHigh: false,
-      domain: [ -3000, 9000 ],
+      domain: [ -3000, 10000 ],
       rampColors: {
         colors: [ 'rgb(166,97,26)', 'rgb(223,194,125)', 'rgb(245,245,245)', 'rgb(128,205,193)', 'rgb(1,133,113)' ],
         positions: [ 0, 0.25, 0.5, 0.75, 1.0 ]

examples/tutorial/data/demo/data_update.js

@@ -1,46 +0,0 @@
-import { Scene, PointLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-const scene = new Scene({
-  id: 'map',
-  map: new GaodeMap({
-    style: 'light',
-    pitch: 0,
-    center: [ 120.19382669582967, 30.258134 ],
-    zoom: 5
-  })
-});
-
-const radius = 0.1;
-
-function pointOnCircle(angle) {
-  return {
-    type: 'FeatureCollection',
-    features: [{
-      type: 'Feature',
-      properties: {},
-      geometry: {
-        type: 'Point',
-        coordinates: [ 120.19382669582967 + Math.cos(angle) * radius, 30.258134 + Math.sin(angle) * radius ]
-      }
-    }]
-  };
-}
-
-scene.on('loaded', () => {
-  // animateMarker(0);
-});
-const layer = new PointLayer()
-  .source(pointOnCircle(0))
-  .shape('circle')
-  .size(15) // default 1
-  .color('#2F54EB')
-  .style({
-    stroke: 'rgb(255,255,255)',
-    strokeWidth: 2,
-    opacity: 1
-  });
-scene.addLayer(layer);
-// function animateMarker(timestamp) {
-//   layer.setData(pointOnCircle(timestamp / 1000));
-//   requestAnimationFrame(animateMarker);
-// }

examples/tutorial/data/demo/line.js

@@ -1,11 +0,0 @@
-import { Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-new Scene({
-  id: 'map',
-  map: new GaodeMap({
-    style: 'light',
-    pitch: 0,
-    center: [ 107.054293, 35.246265 ],
-    zoom: 4.056
-  })
-});

examples/tutorial/data/demo/meta.json

@@ -1,16 +0,0 @@
-{
-  "title": {
-    "zh": "图库",
-    "en": "Gallery"
-  },
-  "demos": [
-    {
-      "filename": "line.js",
-      "title": "json数据"
-    },
-    {
-      "filename": "data_update.js",
-      "title": "数据更新"
-    }
-  ]
-}

examples/tutorial/data/index.en.md

@@ -1,6 +0,0 @@
----
-title: Data
-order: 1
----
-
-coming soon ……

examples/tutorial/data/index.zh.md

@@ -1,5 +0,0 @@
----
-title: 数据
-order: 1
----
-在路上 ……

gatsby-config.js

@@ -117,13 +117,29 @@ module.exports = {
         },
         order: 4
       },
+      {
+        slug: 'api/layer/image_layer',
+        title: {
+          zh: '图片图层',
+          en: 'IMageLayer'
+        },
+        order: 5
+      },
+      {
+        slug: 'api/layer/raster_layer',
+        title: {
+          zh: '栅格图',
+          en: 'RasterLayer'
+        },
+        order: 6
+      },
       {
         slug: 'api/layer/cityBuilding',
         title: {
           zh: '城市建筑',
           en: 'CityBuilding'
         },
-        order: 6
+        order: 8
       },
       {
         slug: 'api/source',

packages/l7/README.md

@@ -11,7 +11,7 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
 ### Installation
 
 ```
- npm install @antv/l7@beta
+ npm install @antv/l7
 
 ```
 

packages/layers/src/heatmap/models/grid.ts

@@ -42,32 +42,6 @@ export default class GridModel extends BaseModel {
     ];
   }
   protected registerBuiltinAttributes() {
-    // point layer size;
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'size',
-      type: AttributeType.Attribute,
-      descriptor: {
-        name: 'a_Size',
-        buffer: {
-          // give the WebGL driver a hint that this buffer may change
-          usage: gl.DYNAMIC_DRAW,
-          data: [],
-          type: gl.FLOAT,
-        },
-        size: 1,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-        ) => {
-          const { size } = feature;
-          return Array.isArray(size) ? [size[0]] : [size as number];
-        },
-      },
-    });
-
-    // point layer size;
     this.styleAttributeService.registerStyleAttribute({
       name: 'pos', // 顶点经纬度位置
       type: AttributeType.Attribute,

packages/layers/src/heatmap/models/hexagon.ts

@@ -44,32 +44,6 @@ export default class HexagonModel extends BaseModel {
     ];
   }
   protected registerBuiltinAttributes() {
-    // point layer size;
-    // this.styleAttributeService.registerStyleAttribute({
-    //   name: 'size',
-    //   type: AttributeType.Attribute,
-    //   descriptor: {
-    //     name: 'a_Size',
-    //     buffer: {
-    //       // give the WebGL driver a hint that this buffer may change
-    //       usage: gl.DYNAMIC_DRAW,
-    //       data: [],
-    //       type: gl.FLOAT,
-    //     },
-    //     size: 1,
-    //     update: (
-    //       feature: IEncodeFeature,
-    //       featureIdx: number,
-    //       vertex: number[],
-    //       attributeIdx: number,
-    //     ) => {
-    //       const { size } = feature;
-    //       return Array.isArray(size) ? [size[0]] : [size as number];
-    //     },
-    //   },
-    // });
-
-    // point layer size;
     this.styleAttributeService.registerStyleAttribute({
       name: 'pos', // 顶点经纬度位置
       type: AttributeType.Attribute,

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

@@ -21,7 +21,6 @@ void main() {
   gl_FragColor.a *= (blur * u_opacity);
   if(u_line_type == LineTypeDash) {
     gl_FragColor.a *= blur  * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y)));
-    // gl_FragColor.a =
   }
 
   if(u_aimate.x == Animate) {
@@ -29,7 +28,6 @@ void main() {
       alpha = (alpha + u_aimate.w -1.0) / u_aimate.w;
       alpha = smoothstep(0., 1., alpha);
       gl_FragColor.a *= alpha;
-      // gl_FragColor.a = fract(u_time);
   }
   gl_FragColor = filterColor(gl_FragColor);
 }

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

@@ -30,10 +30,7 @@ void main() {
   if(u_aimate.x == 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);
-      // float alpha2 = exp(-abs(v_side));
       gl_FragColor.a *= alpha * blur;
-      // gl_FragColor.a = fract(u_time);
   }
  // dash line
   if(u_line_type == LineTypeDash) {

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

@@ -88,7 +88,7 @@ export default class TextModel extends BaseModel {
   public getUninforms(): IModelUniform {
     const {
       fontWeight = 800,
-      fontFamily,
+      fontFamily = 'sans-serif',
       stroke = '#fff',
       strokeWidth = 0,
     } = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;

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

@@ -69,8 +69,8 @@ void main() {
   float N_RINGS = 3.0;
   float FREQ = 1.0;
 
-
-
+  // gl_FragColor = v_color * color_t;
+  // gl_FragColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
   gl_FragColor = opacity_t * mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
 
   if(u_aimate.x == Animate) {

packages/layers/src/raster/models/raster.ts

@@ -38,7 +38,7 @@ export default class RasterModel extends BaseModel {
       noDataValue = -9999999,
       domain = [0, 1],
     } = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
-
+    this.updateColorTexure();
     return {
       u_opacity: opacity || 1,
       u_texture: this.texture,
@@ -110,4 +110,18 @@ export default class RasterModel extends BaseModel {
       },
     });
   }
+
+  private updateColorTexure() {
+    const { createTexture2D } = this.rendererService;
+    const {
+      rampColors,
+    } = this.layer.getLayerConfig() as IRasterLayerStyleOptions;
+    const imageData = generateColorRamp(rampColors as IColorRamp);
+    this.colorTexture = createTexture2D({
+      data: imageData.data,
+      width: imageData.width,
+      height: imageData.height,
+      flipY: true,
+    });
+  }
 }

site/locale.json

@@ -15,5 +15,6 @@
   "浅版精彩案例": "Light Theme",
   "深版精彩案例": "Dark Theme",
   "感谢信赖":"WE ARE TRUSTED BY",
+  "新版发布" : "New Version",
   "一个个真实的地理数据可视化案例，将复杂的地理数据,通过简单，易用的API接口,让用户达到开箱即用的效果。" : "We have summarized a series of story design templates from lots of real  geospatial data visualization cases, so that users can use them directly."
 }

site/pages/index.zh.tsx

@@ -78,7 +78,7 @@ const IndexPage = () => {
   const bannerButtons = [
     {
       text: t('图表示例'),
-      link: `/${i18n.language}/examples/gallery/basic`,
+      link: `/${i18n.language}/examples/gallery`,
       type: 'primary',
     },
     {
@@ -89,10 +89,16 @@ const IndexPage = () => {
 
   const notifications = [
     {
-      type: t('测试'),
-      title: t('L7  2.0 beta'),
-      date: '2019.12.04',
-      link: '#',
+      type: t('新版发布'),
+      title: t('L7 2.0 正式版'),
+      date: '2020.01.06',
+      link: 'https://www.yuque.com/antv/blog/haygzb',
+    },
+    {
+      type: t('推荐'),
+      title: t('欢迎进入 2020 可视化智能研发时代'),
+      date: '2020.01.08',
+      link: 'https://www.yuque.com/antv/blog/ygdubv',
     },
   ];
 
@@ -137,7 +143,7 @@ const IndexPage = () => {
           '蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。',
         )}
         buttons={bannerButtons}
-        // notifications={notifications}
+        notifications={notifications}
         className="banner"
         githubStarLink="https://github.com/antvis/L7/stargazers"
       />

stories/Components/components/Scale.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore
-import { PolygonLayer, Scale, Scene } from '@antv/l7';
+import { PolygonLayer, Scale, Scene, PointLayer } from '@antv/l7';
 import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
@@ -14,11 +14,15 @@ export default class ScaleComponent extends React.Component {
     const response = await fetch(
       'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
     );
+    const response2 = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+    );
+    const pointsData = await response2.json();
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
       map: new Mapbox({
-        style: 'mapbox://styles/mapbox/streets-v9',
+        style: 'dark',
         center: [110.19382669582967, 30.258134],
         pitch: 0,
         zoom: 3,
@@ -40,10 +44,28 @@ export default class ScaleComponent extends React.Component {
       ])
       .shape('fill')
       .style({
-        opacity: 0.3,
+        opacity: 1.0,
       });
     scene.addLayer(layer);
 
+    const pointLayer = new PointLayer()
+      .source(pointsData, {
+        cluster: true,
+      })
+      .shape('circle')
+      .scale('point_count', {
+        type: 'quantile',
+      })
+      .size('point_count', [5, 10, 15, 20, 25])
+      .animate(false)
+      .active(true)
+      .color('yellow')
+      .style({
+        opacity: 0.5,
+        strokeWidth: 1,
+      });
+    scene.addLayer(pointLayer);
+
     const scaleControl = new Scale();
     scene.addControl(scaleControl);
   }