docs: 完善官网文档

2022-01-06 14:30:29 +08:00 · 2022-01-06 14:30:29 +08:00 · ee9a52f267
parent f539d416ef
commit ee9a52f267
25 changed files with 96 additions and 311 deletions
--- a/docs/api/cityBuilding/cityBuilding.zh.md
+++ b/docs/api/cityBuilding/cityBuilding.zh.md
@ -15,7 +15,7 @@ order: 6
 import { CityBuildingLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*LoxeSZHuqXwAAAAAAAAAAAAAARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_e7e1c6/afts/img/A*LoxeSZHuqXwAAAAAAAAAAAAAARQnAQ'>

 ### animate

@ -75,7 +75,7 @@ buildingLayer.animate(false);

 let i = 0;
 function step() {
-  pointLayer.setLight(i++);
+  buildingLayer.setLight(i++);
  scene.render();
  requestAnimationFrame(step);
 }
--- a/docs/api/earth/earth.zh.md
+++ b/docs/api/earth/earth.zh.md
@ -171,7 +171,7 @@ const earthlayer = new EarthLayer()
  });
 ```

-<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i_TBRZRLSuYAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层" width="300" height="300">
+<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i_TBRZRLSuYAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层" width="450px">

 ### 地球内发光/大气图层 atomLayer

@ -187,7 +187,7 @@ const atomLayer = new EarthLayer()
  });
 ```

-<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1MU_RZQyFTkAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层大气效果" width="300" height="300" >
+<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1MU_RZQyFTkAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层大气效果" width="450px" >

 ### 地球内外发光/辉光图层 bloomLayer

@ -202,4 +202,4 @@ const bloomLayer = new EarthLayer()
  });
 ```

-<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FTniTZOZkNUAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层辉光效果" width="300" height="300" >
+<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FTniTZOZkNUAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层辉光效果" width="450px" >
--- a/docs/api/earth/flyline.zh.md
+++ b/docs/api/earth/flyline.zh.md
@ -9,7 +9,7 @@ order: 3

 用户在地球模式下使用飞线图层无需做额外的操作，L7 会自动识别地球模式并相关的转化

-<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4ZCnQaH_nLIAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7地球飞线图层" width="300" height="300">
+<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4ZCnQaH_nLIAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7地球飞线图层" width="60%">

 ## 使用

--- a/docs/api/earth/point.zh.md
+++ b/docs/api/earth/point.zh.md
@ -11,7 +11,7 @@ order: 3

 ## 示例图片

-<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ck1XSZ4Vw0QAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球点图层" width="300" height="300" >
+<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ck1XSZ4Vw0QAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球点图层" width="60%" >

 ## 使用

--- a/docs/api/heatmap_layer/grid.en.md
+++ b/docs/api/heatmap_layer/grid.en.md
@ -1,151 +1,6 @@
 ---
 title: GridHeatMapLayer
-order: 1
+order: 3
 ---

-`markdown:docs/common/style.md`
-
-将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
-
-## 使用
-
-```javascript
-import { HeatmapLayer } from '@antv/l7';
-```
-
-## source
-
-网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
-
-#### 设置网格聚合参数
-
-布局方法 通过 source 的 tansforms 属性配置
-
- type  数据聚合类型 grid
- size  网格半径 单位 米
- field  聚合字段
- method 聚合方法  count,max,min,sum,mean 5 个统计维度
-
-```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',
-  ]);
-
-scene.addLayer(layer);
-```
-
-`markdown:docs/common/layer/base.md`
+`markdown:docs/api/heatmap_layer/grid.zh.md`
--- a/docs/api/heatmap_layer/grid.zh.md
+++ b/docs/api/heatmap_layer/grid.zh.md
@ -1,6 +1,6 @@
 ---
 title: 网格热力图
-order: 1
+order: 3
 ---

 `markdown:docs/common/style.md`
@ -13,7 +13,7 @@ order: 1
 import { HeatmapLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*XPBuSIPPgsgAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*XPBuSIPPgsgAAAAAAAAAAABkARQnAQ'>

 ## source

--- a/docs/api/heatmap_layer/heatmap.en.md
+++ b/docs/api/heatmap_layer/heatmap.en.md
@ -0,0 +1,6 @@
+---
+title: Heatmap
+order: 0
+---
+
+`markdown:docs/api/heatmap_layer/heatmap.zh.md`
--- a/docs/api/heatmap_layer/heatmap.zh.md
+++ b/docs/api/heatmap_layer/heatmap.zh.md
@ -0,0 +1,53 @@
+---
+title: Heatmap
+order: 0
+---
+
+`markdown:docs/common/style.md`
+
+## 简介
+
+热力图是常见的可视化图表，L7 提供了多种表现形式的热力图
+
+- 经典平面热力图
+- 3D 热力图
+- 网格热力图
+- 蜂窝热力图
+
+通过切换 shape 参数，用户可以得到不同的热力图
+
+### 基本用法
+
+```javascript
+import { HeatmapLayer } from '@antv/l7';
+
+ const layer = new HeatmapLayer({})
+    .source(data)
+    .shape('heatmap')
+    .size('mag', [ 0, 1.0 ]) // weight映射通道
+    .style({
+        intensity: 2,
+        radius: 20,
+        opacity: 1.0,
+        rampColors: {
+        colors: [
+            '#FF4818',
+            '#F7B74A',
+            '#FFF598',
+            '#F27DEB',
+            '#8C1EB2',
+            '#421EB2'
+        ].reverse(),
+        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+        }
+    });
+```
+
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*UWhySqYeOqcAAAAAAAAAAAAAARQnAQ'>
+
+
+[在线案例 经典热力 classical](../../../examples/heatmap/heatmap#heatmap)  
+[在线案例 蜂窝热力 hexagon](../../../examples/heatmap/hexagon#light)  
+[在线案例 网格热力 grid](../../../examples/heatmap/grid#grid1)  
+
+`markdown:docs/common/layer/base.md`
--- a/docs/api/heatmap_layer/hexagon.en.md
+++ b/docs/api/heatmap_layer/hexagon.en.md
@ -1,135 +1,6 @@
 ---
 title: Hexagon HeatMap
-order: 1
+order: 4
 ---

-`markdown:docs/common/style.md`
-
-将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
-
-## 使用
-
-```javascript
-import { HeatmapLayer } from '@antv/l7';
-```
-
-## source
-
-网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
-
-#### 设置网格聚合参数
-
-布局方法 通过 source 的 tansforms 属性配置
-
- type  数据聚合类型 hexagon
- size  网格半径 单位 米
- field  聚合字段
- method 聚合方法  count,max,min,sum,mean 5 个统计维度
-
-```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,
-  });
-```
-
-`markdown:docs/common/layer/base.md`
+`markdown:docs/api/heatmap_layer/hexagon.zh.md`
--- a/docs/api/heatmap_layer/hexagon.zh.md
+++ b/docs/api/heatmap_layer/hexagon.zh.md
@ -1,6 +1,6 @@
 ---
 title: 蜂窝热力图
-order: 1
+order: 4
 ---

 `markdown:docs/common/style.md`
@ -13,7 +13,7 @@ order: 1
 import { HeatmapLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SLcGSbvZoEwAAAAAAAAAAABkARQnAQ'>

 ### source

--- a/docs/api/heatmap_layer/normal.zh.md
+++ b/docs/api/heatmap_layer/normal.zh.md
@ -11,7 +11,7 @@ order: 1
 import { HeatmapLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*QstiQq4JBOIAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*QstiQq4JBOIAAAAAAAAAAABkARQnAQ'>

 ### shape

--- a/docs/api/point_layer/bubble.zh.md
+++ b/docs/api/point_layer/bubble.zh.md
@ -15,7 +15,7 @@ order: 1
 import { PointLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*fNGiS7YI1tIAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*fNGiS7YI1tIAAAAAAAAAAABkARQnAQ'>

 ### shape

--- a/docs/api/point_layer/chart.zh.md
+++ b/docs/api/point_layer/chart.zh.md
@ -15,7 +15,7 @@ order: 6
 import { PointLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6AR6Qq0Bq-MAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6AR6Qq0Bq-MAAAAAAAAAAABkARQnAQ'>

 [在线案例](../../../examples/point/chart#bar)

--- a/docs/api/point_layer/cluster.zh.md
+++ b/docs/api/point_layer/cluster.zh.md
@ -15,7 +15,7 @@ order: 5
 import { PointLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*paQsRKykjL4AAAAAAAAAAABkARQnAQ'>

 ### Source

--- a/docs/api/point_layer/column.zh.md
+++ b/docs/api/point_layer/column.zh.md
@ -15,7 +15,7 @@ order: 5
 import { PointLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RVw4QKTJe7kAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RVw4QKTJe7kAAAAAAAAAAABkARQnAQ'>

 ### shape

@ -71,7 +71,7 @@ const column = new PointLayer({})
 3D 柱图支持生长动画  
 animate 方法支持的布尔值和对象参数

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*l-SUQ5nU6n8AAAAAAAAAAAAAARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*l-SUQ5nU6n8AAAAAAAAAAAAAARQnAQ'>

 ```javascript
 animate(true)
@ -94,7 +94,7 @@ animateOptions: {

 - opacityLinear 设置 3D 柱图透明度渐变

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*oZWGSIceykwAAAAAAAAAAAAAARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*oZWGSIceykwAAAAAAAAAAAAAARQnAQ'>

 ```javascript
 style({
--- a/docs/api/point_layer/dot.zh.md
+++ b/docs/api/point_layer/dot.zh.md
@ -13,7 +13,7 @@ order: 3
 import { PointLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xr8BQouXGvoAAAAAAAAAAABkARQnAQ'>

 ### shape

--- a/docs/api/point_layer/marker.zh.md
+++ b/docs/api/point_layer/marker.zh.md
@ -13,7 +13,7 @@ order: 7
 import { PointLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*2vBbRYT2bgIAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*2vBbRYT2bgIAAAAAAAAAAABkARQnAQ'>

 [Marker 文档](../component/marker)

--- a/docs/api/point_layer/scatter.zh.md
+++ b/docs/api/point_layer/scatter.zh.md
@ -15,7 +15,7 @@ order: 2
 import { PointLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LnlmQ7sFWigAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LnlmQ7sFWigAAAAAAAAAAABkARQnAQ'>

 ### shape

--- a/docs/api/point_layer/simple.zh.md
+++ b/docs/api/point_layer/simple.zh.md
@ -15,7 +15,7 @@ order: 3
 import { PointLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*dVFmQIKh5TUAAAAAAAAAAAAAARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*dVFmQIKh5TUAAAAAAAAAAAAAARQnAQ'>

 ### shape

--- a/docs/api/point_layer/symbol.zh.md
+++ b/docs/api/point_layer/symbol.zh.md
@ -11,7 +11,7 @@ order: 4
 import { PointLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oVyHT5S3sv0AAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oVyHT5S3sv0AAAAAAAAAAABkARQnAQ'>

 ## 使用

--- a/docs/api/point_layer/text.zh.md
+++ b/docs/api/point_layer/text.zh.md
@ -15,7 +15,7 @@ order: 4
 import { PointLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7blvQ4v7Q1UAAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7blvQ4v7Q1UAAAAAAAAAAABkARQnAQ'>

 ### shape

--- a/docs/api/point_layer/wave.zh.md
+++ b/docs/api/point_layer/wave.zh.md
@ -7,7 +7,7 @@ order: 3

 平面点图层在开启动画模式的情况下，是一种特殊的图层类型：水波点。图层由一圈圈向外扩散的圆环构成。

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*pcp3RKnNK1oAAAAAAAAAAAAAARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*pcp3RKnNK1oAAAAAAAAAAAAAARQnAQ'>

 ## 使用

--- a/docs/api/raster/raster_layer.zh.md
+++ b/docs/api/raster/raster_layer.zh.md
@ -15,7 +15,7 @@ L7 本身内部没有提供栅格数据格式 如 `tiff`,需要外部解析好
 import { RasterLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bUYqRb5esH4AAAAAAAAAAABkARQnAQ'>
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bUYqRb5esH4AAAAAAAAAAABkARQnAQ'>

 ## source

--- a/docs/api/wind.zh.md
+++ b/docs/api/wind.zh.md
@ -11,7 +11,7 @@ WindLayer 用于将存储风场信息的图片，设置其风速线采样相关
 import { WindLayer } from '@antv/l7';
 ```

-<img width="80%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CPveRqBxBwkAAAAAAAAAAAAAARQnAQ' />
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CPveRqBxBwkAAAAAAAAAAAAAARQnAQ' />

 ## API

--- a/examples/heatmap/heatmap/demo/heatmap3d.js
+++ b/examples/heatmap/heatmap/demo/heatmap3d.js
@ -5,10 +5,10 @@ const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'dark',
-    pitch: 58.5,
-    center: [ 111.8759, 30.6942 ],
-    rotation: 0.519,
-    zoom: 3.6116
+    pitch: 50,
+    center: [ 100, 30.6942 ],
+    rotation: 10,
+    zoom: 2
  })
 });
 scene.on('loaded', () => {
@ -23,8 +23,8 @@ scene.on('loaded', () => {
        .shape('heatmap3D')
      // weight映射通道
        .style({
-          intensity: 10,
-          radius: 5,
+          intensity: 5,
+          radius: 10,
          opacity: 1.0,
          rampColors: {
            colors: [