docs: 官网文档修改

docs/api/cityBuilding/cityBuilding.zh.md

@@ -15,6 +15,8 @@ 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'>
+
 ### animate
 
 是否开启动画效果, 仅支持`boolean` 或`enable: boolean` 配置项
@@ -114,6 +116,6 @@ scene.on('loaded', () => {
 });
 ```
 
-<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Fe40RYZYR0kAAAAAAAAAAAAAARQnAQ" alt="L7 建筑图层" height="300" width="300">
+[在线案例](../../../examples/gallery/animate#build_sweep)
 
 `markdown:docs/common/layer/base.md`

docs/api/heatmap_layer/grid.zh.md

@@ -13,6 +13,8 @@ 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'>
+
 ## source
 
 网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
@@ -130,22 +132,12 @@ const layer = new HeatmapLayer({})
   })
   .color('count', [
     '#0B0030',
-    '#100243',
-    '#100243',
-    '#1B048B',
-    '#051FB7',
-    '#0350C1',
-    '#0350C1',
-    '#0072C4',
-    '#0796D3',
-    '#2BA9DF',
-    '#30C7C4',
-    '#6BD5A0',
-    '#A7ECB2',
-    '#D0F4CA',
+    ...
   ]);
 
 scene.addLayer(layer);
 ```
 
+[在线案例](../../../examples/heatmap/grid#china)
+
 `markdown:docs/common/layer/base.md`

docs/api/heatmap_layer/hexagon.zh.md

@@ -5,6 +5,7 @@ order: 1
 
 `markdown:docs/common/style.md`
 
+
 将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
 
 ## 使用
@@ -13,6 +14,8 @@ 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'>
+
 ### source
 
 网格数据只支持点数据作为数据源，数据格式支持 csv、json、geojson.
@@ -132,4 +135,6 @@ const layer = new HeatmapLayer({
   });
 ```
 
+[在线案例](../../../examples/heatmap/hexagon#light)
+
 `markdown:docs/common/layer/base.md`

docs/api/heatmap_layer/normal.zh.md

@@ -11,6 +11,8 @@ 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'>
+
 ### shape
 
 常量 heatmap
@@ -55,15 +57,13 @@ heatmapLayer()
     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],
     },
   });
 ```
 
+[在线案例](../../../examples/heatmap/heatmap#heatmap)
+
 `markdown:docs/common/layer/base.md`

docs/api/point_layer/column.zh.md

@@ -71,6 +71,8 @@ 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'>
+
 ```javascript
 animate(true)
 animate(false)
@@ -92,6 +94,8 @@ 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'>
+
 ```javascript
 style({
   opacityLinear: {

docs/api/point_layer/symbol.zh.md

@@ -50,6 +50,8 @@ const scatter = new PointLayer()
   });
 ```
 
+🌟 为了得到更好的现实效果（图片清晰，无明显锯齿），我们在选择图片以及设置图标大小的时候应保持相当，或者在 L7 图层中设置的图标大小略小于实际图片的像素大小。
+
 [在线案例](../../../examples/point/image#image)
 
 `markdown:docs/common/layer/base.md`

docs/api/raster/raster_layer.zh.md

@@ -15,6 +15,8 @@ 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'>
+
 ## source
 
 见 [raster source](../source/raster)
@@ -39,3 +41,8 @@ import { RasterLayer } from '@antv/l7';
   } // 色带
 
   ⚠️ `color`, `position` 的长度要相同
+
+
+[在线案例](../../../examples/raster/basic#light)
+
+`markdown:docs/common/layer/base.md`

examples/gallery/animate/demo/route_line.js

@@ -110,7 +110,7 @@ scene.on('loaded', () => {
         opacity: 1,
         thetaOffset: 'thetaOffset',
         lineTexture: true, // 开启线的贴图功能
-        iconStep: 20, // 设置贴图纹理的间距
+        iconStep: 10, // 设置贴图纹理的间距
         textureBlend: 'replace'
       })
       .animate({

examples/line/isoline/demo/ele.js

@@ -17,7 +17,7 @@ scene.on('loaded', () => {
       const layer = new LineLayer({})
         .source(data)
         .size('ELEV', h => {
-          return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];
+          return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 0.2 ];
         })
         .shape('line')
         .scale('ELEV', {

examples/line/isoline/demo/ele_dark.js

@@ -17,7 +17,7 @@ scene.on('loaded', () => {
       const layer = new LineLayer({})
         .source(data)
         .size('ELEV', h => {
-          return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];
+          return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 0.2 ];
         })
         .shape('line')
         .scale('ELEV', {