diff --git a/dev-demos/features/canvasLayer/custom.md b/dev-demos/features/canvasLayer/custom.md
new file mode 100644
index 0000000000..ae19c4dfaa
--- /dev/null
+++ b/dev-demos/features/canvasLayer/custom.md
@@ -0,0 +1,155 @@
+### CanvasLayer - demo1
+```tsx
+import { CanvasLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+ let x = 0;
+function draw(option) {
+const { size, ctx, mapService } = option;
+const [ width, height ] = size;
+
+const radius = 30,
+    rectWidth = radius * 2;
+const rectHeight = rectWidth;
+
+ctx.clearRect(0, 0, width, height);
+
+const points = [
+    {
+    lng: 108.544921875,
+    lat: 30.977609093348686,
+    level: 85,
+    color: 'rgba(	220,20,60, 0.6)'
+    },
+    {
+    lng: 110.654296875,
+    lat: 31.090574094954192,
+    level: 75,
+    color: 'rgba(	255,140,0, 0.6)'
+    },
+    {
+    lng: 112.5,
+    lat: 29.80251790576445,
+    level: 65,
+    color: 'rgba(255,165,0, 0.6)'
+    },
+    {
+    lng: 114.78515624999999,
+    lat: 30.64867367928756,
+    level: 40,
+    color: 'rgba(30,144,255, 0.6)'
+    },
+    {
+    lng: 116.49902343749999,
+    lat: 29.84064389983441,
+    level: 50,
+    color: 'rgba(30,144,255, 0.6)'
+    },
+    {
+    lng: 118.21289062499999,
+    lat: 31.16580958786196,
+    level: 20,
+    color: 'rgba(	127,255,0, 0.6)'
+    },
+    {
+    lng: 119.091796875,
+    lat: 32.509761735919426,
+    level: 50,
+    color: 'rgba(30,144,255, 0.6)'
+    },
+    {
+    lng: 121.0693359374999,
+    lat: 31.80289258670676,
+    level: 45,
+    color: 'rgba(30,144,255, 0.6)'
+    }
+];
+ctx.fillStyle = 'rgb(35,75,225)';
+ctx.font = 'normal small-caps bold 14px arial';
+ctx.textAlign = 'center';
+ctx.textBaseline = 'middle';
+
+points.map(point => {
+    const pixelCenter = mapService.lngLatToContainer([ point.lng, point.lat ]);
+    pixelCenter.x *= window.devicePixelRatio;
+    pixelCenter.y *= window.devicePixelRatio;
+    const rectStartX = pixelCenter.x - radius;
+    const rectStartY = pixelCenter.y - radius;
+
+    ctx.save();
+
+    ctx.fillText(point.level + '%', pixelCenter.x, pixelCenter.y);
+
+    ctx.beginPath();
+    ctx.arc(pixelCenter.x, pixelCenter.y, radius, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(135,206,250,0.2)';
+    ctx.closePath();
+    ctx.fill();
+    ctx.clip();
+
+    ctx.beginPath();
+    ctx.fillStyle = point.color;
+    ctx.moveTo(rectStartX, pixelCenter.y);
+
+    const waterheight = rectStartY + ((100 - point.level) / 100) * rectHeight;
+    for (let i = 0; i <= rectWidth; i += 10) {
+    ctx.lineTo(
+        rectStartX + i,
+        waterheight + Math.sin(Math.PI * 2 * (i / rectWidth) + x) * 3 + 1
+    );
+    }
+
+    ctx.lineTo(pixelCenter.x + radius, pixelCenter.y + radius);
+    ctx.lineTo(rectStartX, pixelCenter.y + radius);
+    ctx.lineTo(rectStartX, pixelCenter.y);
+    ctx.closePath();
+
+    ctx.fill();
+
+    ctx.restore();
+});
+}
+
+export default () => {
+    useEffect(() => {
+        const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+            style: 'fresh',
+            center: [ 115, 31 ],
+            zoom: 5.0
+        })
+        });
+        scene.on('loaded', () => {
+        const layer = new CanvasLayer({})
+            .style({
+                zIndex: 10,
+                update: 'always',
+                drawingOnCanvas: draw
+            })
+            .animate({
+                enable: true
+            });
+        scene.addLayer(layer);
+
+        setInterval(() => {
+            x += 0.1;
+            layer.style({
+                drawingOnCanvas: draw
+            });
+            scene.render();
+        }, 30);
+        });
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}
+
+```
\ No newline at end of file
diff --git a/dev-demos/features/canvasLayer/custom2.md b/dev-demos/features/canvasLayer/custom2.md
new file mode 100644
index 0000000000..d33a1d7661
--- /dev/null
+++ b/dev-demos/features/canvasLayer/custom2.md
@@ -0,0 +1,75 @@
+### CanvasLayer - demo2
+```tsx
+import { CanvasLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+ 
+
+export default () => {
+    useEffect(() => {
+       const scene = new Scene({
+            id: 'map',
+            map: new GaodeMap({
+                style: 'fresh',
+                center: [ 90, 31 ],
+                zoom: 2
+            })
+        });
+        scene.on('loaded', () => {
+        fetch(
+            'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
+        )
+            .then(res => res.json())
+            .then(data => {
+            const layer = new CanvasLayer({})
+                .style({
+                zIndex: 10,
+                update: 'dragend',
+                drawingOnCanvas: option => {
+                    const { size, ctx, mapService } = option;
+                    const [ width, height ] = size;
+
+                    ctx.clearRect(0, 0, width, height);
+                    ctx.fillStyle = 'rgba(0, 200, 0, 0.2)';
+                    data.features.map(feature => {
+                    const pixelCenter = mapService.lngLatToContainer(
+                        feature.geometry.coordinates
+                    );
+                    pixelCenter.x *= window.devicePixelRatio;
+                    pixelCenter.y *= window.devicePixelRatio;
+                    if (
+                        pixelCenter.x < 0 ||
+                        pixelCenter.y < 0 ||
+                        pixelCenter.x > width ||
+                        pixelCenter.y > height
+                    ) { return ''; }
+                    ctx.beginPath();
+                    ctx.arc(
+                        pixelCenter.x,
+                        pixelCenter.y,
+                        feature.properties.capacity / 200,
+                        0,
+                        Math.PI * 2
+                    );
+                    ctx.fill();
+                    ctx.closePath();
+                    });
+                }
+                });
+
+            scene.addLayer(layer);
+            });
+        });
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}
+
+```
\ No newline at end of file
diff --git a/dev-demos/features/citybuilding/amap1.md b/dev-demos/features/citybuilding/amap1.md
new file mode 100644
index 0000000000..e42ccb00fc
--- /dev/null
+++ b/dev-demos/features/citybuilding/amap1.md
@@ -0,0 +1,2 @@
+### building - amap1
+<code src="./amap1.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/citybuilding/amap1.tsx b/dev-demos/features/citybuilding/amap1.tsx
new file mode 100644
index 0000000000..2eba793e94
--- /dev/null
+++ b/dev-demos/features/citybuilding/amap1.tsx
@@ -0,0 +1,124 @@
+// @ts-ignore
+import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        style: 'dark',
+        center: [120.145, 30.238915],
+        pitch: 60,
+        zoom: 13.2,
+      }),
+    });
+    fetch(
+      'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
+    ).then(async (res) => {
+      const pointLayer = new CityBuildingLayer();
+      pointLayer
+        .source(await res.json())
+        .size('floor', [0, 500])
+        .color('rgba(242,246,250,1.0)')
+        .animate({
+          enable: true,
+        })
+        .active({
+          color: '#0ff',
+          mix: 0.5,
+        })
+        .style({
+          opacity: 0.7,
+          baseColor: 'rgb(16, 16, 16)',
+          windowColor: 'rgb(30, 60, 89)',
+          brightColor: 'rgb(255, 176, 38)',
+          sweep: {
+            enable: true,
+            sweepRadius: 2,
+            sweepColor: '#1990FF',
+            sweepSpeed: 0.5,
+            sweepCenter: [120.145319, 30.238915],
+          },
+        });
+      scene.addLayer(pointLayer);
+    });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
+    )
+      .then((data) => data.json())
+      .then(({ lakeBorderData, lakeData, landData }) => {
+        const lakeLayer = new PolygonLayer()
+          .source(lakeData)
+          .shape('fill')
+          .color('#1E90FF')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'out', // in - out
+            },
+          });
+        const landLayer = new PolygonLayer()
+          .source(landData)
+          .shape('fill')
+          .color('#3CB371')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        const lakeBorderLayer = new PolygonLayer()
+          .source(lakeBorderData)
+          .shape('fill')
+          .color('#ccc')
+          .style({
+            opacity: 0.5,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        scene.addLayer(lakeLayer);
+        scene.addLayer(lakeBorderLayer);
+        scene.addLayer(landLayer);
+      });
+
+    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,
+          depth: true,
+        })
+          .source(data)
+          .size(1)
+          .shape('line')
+          .color('#1990FF')
+          .animate({
+            interval: 1, // 间隔
+            duration: 2, // 持续时间，延时
+            trailLength: 2, // 流线长度
+          });
+        scene.addLayer(layer);
+      });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/citybuilding/amap2.md b/dev-demos/features/citybuilding/amap2.md
new file mode 100644
index 0000000000..7357b7f283
--- /dev/null
+++ b/dev-demos/features/citybuilding/amap2.md
@@ -0,0 +1,2 @@
+### building - amap2
+<code src="./amap2.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/citybuilding/amap2.tsx b/dev-demos/features/citybuilding/amap2.tsx
new file mode 100644
index 0000000000..2fcbface47
--- /dev/null
+++ b/dev-demos/features/citybuilding/amap2.tsx
@@ -0,0 +1,124 @@
+// @ts-ignore
+import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMapV2 } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMapV2({
+        style: 'dark',
+        center: [120.145, 30.238915],
+        pitch: 60,
+        zoom: 13.2,
+      }),
+    });
+    fetch(
+      'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
+    ).then(async (res) => {
+      const pointLayer = new CityBuildingLayer();
+      pointLayer
+        .source(await res.json())
+        .size('floor', [0, 500])
+        .color('rgba(242,246,250,1.0)')
+        .animate({
+          enable: true,
+        })
+        .active({
+          color: '#0ff',
+          mix: 0.5,
+        })
+        .style({
+          opacity: 0.7,
+          baseColor: 'rgb(16, 16, 16)',
+          windowColor: 'rgb(30, 60, 89)',
+          brightColor: 'rgb(255, 176, 38)',
+          sweep: {
+            enable: true,
+            sweepRadius: 2,
+            sweepColor: '#1990FF',
+            sweepSpeed: 0.5,
+            sweepCenter: [120.145319, 30.238915],
+          },
+        });
+      scene.addLayer(pointLayer);
+    });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
+    )
+      .then((data) => data.json())
+      .then(({ lakeBorderData, lakeData, landData }) => {
+        const lakeLayer = new PolygonLayer()
+          .source(lakeData)
+          .shape('fill')
+          .color('#1E90FF')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'out', // in - out
+            },
+          });
+        const landLayer = new PolygonLayer()
+          .source(landData)
+          .shape('fill')
+          .color('#3CB371')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        const lakeBorderLayer = new PolygonLayer()
+          .source(lakeBorderData)
+          .shape('fill')
+          .color('#ccc')
+          .style({
+            opacity: 0.5,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        scene.addLayer(lakeLayer);
+        scene.addLayer(lakeBorderLayer);
+        scene.addLayer(landLayer);
+      });
+
+    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,
+          depth: true,
+        })
+          .source(data)
+          .size(1)
+          .shape('line')
+          .color('#1990FF')
+          .animate({
+            interval: 1, // 间隔
+            duration: 2, // 持续时间，延时
+            trailLength: 2, // 流线长度
+          });
+        scene.addLayer(layer);
+      });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/citybuilding/mapbox.md b/dev-demos/features/citybuilding/mapbox.md
new file mode 100644
index 0000000000..113fe7c691
--- /dev/null
+++ b/dev-demos/features/citybuilding/mapbox.md
@@ -0,0 +1,2 @@
+### building - mapbox
+<code src="./mapbox.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/citybuilding/mapbox.tsx b/dev-demos/features/citybuilding/mapbox.tsx
new file mode 100644
index 0000000000..f66135a511
--- /dev/null
+++ b/dev-demos/features/citybuilding/mapbox.tsx
@@ -0,0 +1,124 @@
+// @ts-ignore
+import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
+// @ts-ignore
+import { Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        style: 'dark',
+        center: [120.145, 30.238915],
+        pitch: 60,
+        zoom: 13.2,
+      }),
+    });
+    fetch(
+      'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
+    ).then(async (res) => {
+      const pointLayer = new CityBuildingLayer();
+      pointLayer
+        .source(await res.json())
+        .size('floor', [0, 500])
+        .color('rgba(242,246,250,1.0)')
+        .animate({
+          enable: true,
+        })
+        .active({
+          color: '#0ff',
+          mix: 0.5,
+        })
+        .style({
+          opacity: 0.7,
+          baseColor: 'rgb(16, 16, 16)',
+          windowColor: 'rgb(30, 60, 89)',
+          brightColor: 'rgb(255, 176, 38)',
+          sweep: {
+            enable: true,
+            sweepRadius: 2,
+            sweepColor: '#1990FF',
+            sweepSpeed: 0.5,
+            sweepCenter: [120.145319, 30.238915],
+          },
+        });
+      scene.addLayer(pointLayer);
+    });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
+    )
+      .then((data) => data.json())
+      .then(({ lakeBorderData, lakeData, landData }) => {
+        const lakeLayer = new PolygonLayer()
+          .source(lakeData)
+          .shape('fill')
+          .color('#1E90FF')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'out', // in - out
+            },
+          });
+        const landLayer = new PolygonLayer()
+          .source(landData)
+          .shape('fill')
+          .color('#3CB371')
+          .style({
+            opacity: 0.4,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        const lakeBorderLayer = new PolygonLayer()
+          .source(lakeBorderData)
+          .shape('fill')
+          .color('#ccc')
+          .style({
+            opacity: 0.5,
+            opacityLinear: {
+              enable: true,
+              dir: 'in', // in - out
+            },
+          });
+
+        scene.addLayer(lakeLayer);
+        scene.addLayer(lakeBorderLayer);
+        scene.addLayer(landLayer);
+      });
+
+    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,
+          depth: true,
+        })
+          .source(data)
+          .size(1)
+          .shape('line')
+          .color('#1990FF')
+          .animate({
+            interval: 1, // 间隔
+            duration: 2, // 持续时间，延时
+            trailLength: 2, // 流线长度
+          });
+        scene.addLayer(layer);
+      });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/geometry/billboard.md b/dev-demos/features/geometry/billboard.md
new file mode 100644
index 0000000000..4f57860dd9
--- /dev/null
+++ b/dev-demos/features/geometry/billboard.md
@@ -0,0 +1,2 @@
+### billboard
+<code src="./demos/billboard.tsx"></code>
\ No newline at end of file
diff --git a/stories/layerbuild/components/Billboard.tsx b/dev-demos/features/geometry/demos/billboard.tsx
similarity index 77%
rename from stories/layerbuild/components/Billboard.tsx
rename to dev-demos/features/geometry/demos/billboard.tsx
index a39f885ccb..5bafcb4d28 100644
--- a/stories/layerbuild/components/Billboard.tsx
+++ b/dev-demos/features/geometry/demos/billboard.tsx
@@ -1,12 +1,11 @@
-// @ts-nocheck
 // @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { GeometryLayer } from '@antv/l7-layers';
+import { Scene, GeometryLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class Demo extends React.Component {
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
@@ -60,20 +59,14 @@ export default class Demo extends React.Component {
       img.src =
         'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*zMw0T6gEIZYAAAAAAAAAAAAAARQnAQ';
     });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/geometry/sprite.tsx b/dev-demos/features/geometry/demos/sprite.tsx
similarity index 100%
rename from dev-demos/features/geometry/sprite.tsx
rename to dev-demos/features/geometry/demos/sprite.tsx
diff --git a/dev-demos/features/geometry/sprite.md b/dev-demos/features/geometry/sprite.md
index 7167bda454..879e3a556e 100644
--- a/dev-demos/features/geometry/sprite.md
+++ b/dev-demos/features/geometry/sprite.md
@@ -1,2 +1,2 @@
 ### sprite
-<code src="./sprite.tsx"></code>
\ No newline at end of file
+<code src="./demos/sprite.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/heatmap/heatmap.tsx b/dev-demos/features/heatmap/demos/heatmap.tsx
similarity index 100%
rename from dev-demos/features/heatmap/heatmap.tsx
rename to dev-demos/features/heatmap/demos/heatmap.tsx
diff --git a/stories/layerbuild/components/Heatmap3d.tsx b/dev-demos/features/heatmap/demos/heatmap3d.tsx
similarity index 70%
rename from stories/layerbuild/components/Heatmap3d.tsx
rename to dev-demos/features/heatmap/demos/heatmap3d.tsx
index 5e315cf5bf..ce71020c8c 100644
--- a/stories/layerbuild/components/Heatmap3d.tsx
+++ b/dev-demos/features/heatmap/demos/heatmap3d.tsx
@@ -1,12 +1,11 @@
-// @ts-nocheck
 // @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { HeatmapLayer } from '@antv/l7-layers';
+import { Scene, HeatmapLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class Demo extends React.Component {
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
@@ -45,20 +44,14 @@ export default class Demo extends React.Component {
           scene.addLayer(layer);
         });
     });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/heatmap/heatmap.md b/dev-demos/features/heatmap/heatmap.md
index ed169c7b73..642df4ceb8 100644
--- a/dev-demos/features/heatmap/heatmap.md
+++ b/dev-demos/features/heatmap/heatmap.md
@@ -1,2 +1,2 @@
 ### Heatmap
-<code src="./heatmap.tsx"></code>
\ No newline at end of file
+<code src="./demos/heatmap.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/heatmap/heatmap3d.md b/dev-demos/features/heatmap/heatmap3d.md
new file mode 100644
index 0000000000..954578e597
--- /dev/null
+++ b/dev-demos/features/heatmap/heatmap3d.md
@@ -0,0 +1,2 @@
+### Heatmap - 3D
+<code src="./demos/heatmap3d.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/imageLayer/image.md b/dev-demos/features/imageLayer/image.md
new file mode 100644
index 0000000000..4c2b589044
--- /dev/null
+++ b/dev-demos/features/imageLayer/image.md
@@ -0,0 +1,2 @@
+### Image Layer
+<code src="./image.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/image.tsx b/dev-demos/features/imageLayer/image.tsx
similarity index 100%
rename from dev-demos/features/point/image.tsx
rename to dev-demos/features/imageLayer/image.tsx
diff --git a/dev-demos/features/imageLayer/raster.md b/dev-demos/features/imageLayer/raster.md
new file mode 100644
index 0000000000..5806fc4cde
--- /dev/null
+++ b/dev-demos/features/imageLayer/raster.md
@@ -0,0 +1,2 @@
+### Image Layer - raster
+<code src="./raster.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/imageLayer/raster.tsx b/dev-demos/features/imageLayer/raster.tsx
new file mode 100644
index 0000000000..045b5b3e28
--- /dev/null
+++ b/dev-demos/features/imageLayer/raster.tsx
@@ -0,0 +1,88 @@
+// @ts-ignore
+import { RasterLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import * as GeoTIFF from 'geotiff';
+
+async function getTiffData() {
+  const response = await fetch(
+    'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
+  );
+  const arrayBuffer = await response.arrayBuffer();
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image = await tiff.getImage();
+  const width = image.getWidth();
+  const height = image.getHeight();
+  const values = await image.readRasters();
+  return {
+    data: values[0],
+    width,
+    height,
+    min: 0,
+    max: 8000,
+  };
+}
+
+async function addLayer() {
+  const tiffdata = await getTiffData();
+
+  const layer = new RasterLayer({});
+  layer
+    .source(tiffdata.data, {
+      parser: {
+        type: 'raster',
+        width: tiffdata.width,
+        height: tiffdata.height,
+        min: 0,
+        max: 80,
+        extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
+      },
+    })
+    .style({
+      heightRatio: 100,
+      opacity: 0.8,
+      domain: [0, 2000],
+      rampColors: {
+        colors: [
+          '#FF4818',
+          '#F7B74A',
+          '#FFF598',
+          '#91EABC',
+          '#2EA9A1',
+          '#206C7C',
+        ].reverse(),
+        positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
+      },
+    });
+  return layer;
+}
+
+export default () => {
+  useEffect(() => {
+    (async () => {
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+          center: [121.268, 30.3628],
+          zoom: 3,
+        }),
+      });
+
+      const layer = await addLayer();
+
+      scene.on('loaded', () => {
+        scene.addLayer(layer);
+      });
+    })();
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/point/greatcircleline.tsx b/dev-demos/features/line/demos/greatcircleline.tsx
similarity index 99%
rename from dev-demos/features/point/greatcircleline.tsx
rename to dev-demos/features/line/demos/greatcircleline.tsx
index 867d029aac..cd17d3aaef 100644
--- a/dev-demos/features/point/greatcircleline.tsx
+++ b/dev-demos/features/line/demos/greatcircleline.tsx
@@ -1,4 +1,3 @@
-// @ts-ignore
 import {
   LineLayer,
   Scene,
@@ -6,6 +5,7 @@ import {
   lineAtOffset,
   lineAtOffsetAsyc,
   PointLayer,
+  // @ts-ignore
 } from '@antv/l7';
 // @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
diff --git a/dev-demos/features/line/line.tsx b/dev-demos/features/line/demos/line.tsx
similarity index 99%
rename from dev-demos/features/line/line.tsx
rename to dev-demos/features/line/demos/line.tsx
index d335acfdd6..fd5f6322b2 100644
--- a/dev-demos/features/line/line.tsx
+++ b/dev-demos/features/line/demos/line.tsx
@@ -6,6 +6,7 @@ import {
   lineAtOffset,
   lineAtOffsetAsyc,
   PointLayer,
+  // @ts-ignore
 } from '@antv/l7';
 // @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
@@ -18,7 +19,6 @@ export default () => {
       map: new GaodeMap({
         center: [105, 32],
         zoom: 4,
-        // pitch: 60
       }),
     });
 
diff --git a/stories/Layers/components/lineAnimate.tsx b/dev-demos/features/line/demos/lineAnimate.tsx
similarity index 65%
rename from stories/Layers/components/lineAnimate.tsx
rename to dev-demos/features/line/demos/lineAnimate.tsx
index 178fb8fbb3..fede344c49 100644
--- a/stories/Layers/components/lineAnimate.tsx
+++ b/dev-demos/features/line/demos/lineAnimate.tsx
@@ -1,22 +1,26 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class LineDemo extends React.Component {
+// @ts-ignore
+import {
+  LineLayer,
+  Scene,
+  Source,
+  lineAtOffset,
+  lineAtOffsetAsyc,
+  PointLayer,
   // @ts-ignore
-  private scene: Scene;
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
 
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  // @ts-ignore
+  useEffect(async () => {
     const response = await fetch(
       'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json',
     );
     const scene = new Scene({
       id: 'map',
-      map: new Mapbox({
+      map: new GaodeMap({
         center: [110.19382669582967, 40.258134],
         pitch: 0,
         zoom: 3,
@@ -53,21 +57,14 @@ export default class LineDemo extends React.Component {
       .render();
     lineLayer.fitBounds();
     scene.addLayer(lineLayer);
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/Map/components/amap2demo_arcLine3d.tsx b/dev-demos/features/line/demos/lineArc3d.tsx
similarity index 84%
rename from stories/Map/components/amap2demo_arcLine3d.tsx
rename to dev-demos/features/line/demos/lineArc3d.tsx
index 8d483b7aee..43ff8dc5fe 100644
--- a/stories/Map/components/amap2demo_arcLine3d.tsx
+++ b/dev-demos/features/line/demos/lineArc3d.tsx
@@ -1,16 +1,16 @@
-import { PointLayer, LineLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_arcLine3d extends React.Component {
+// @ts-ignore
+import {
+  LineLayer,
+  Scene,
+  PointLayer,
   // @ts-ignore
-  private scene: Scene;
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
 
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
@@ -21,7 +21,6 @@ export default class Amap2demo_arcLine3d extends React.Component {
         style: 'dark',
       }),
     });
-    this.scene = scene;
 
     scene.on('loaded', () => {
       scene.addImage(
@@ -123,22 +122,14 @@ export default class Amap2demo_arcLine3d extends React.Component {
         scene.addLayer(flyLine);
       });
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/line/demos/lineArcPlane.tsx b/dev-demos/features/line/demos/lineArcPlane.tsx
new file mode 100644
index 0000000000..41c494a582
--- /dev/null
+++ b/dev-demos/features/line/demos/lineArcPlane.tsx
@@ -0,0 +1,120 @@
+// @ts-ignore
+import { LineLayer, Scene, PointLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 40,
+        center: [ 40, 40.16797 ],
+        style: 'dark',
+        zoom: 2.5
+      })
+    });
+    scene.addImage(
+      'plane',
+      'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
+    );
+    scene.on('loaded', () => {
+      Promise.all([
+        fetch(
+          'https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.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);
+        // @ts-ignore
+        const flydata = eval(flyline).map(item => {
+          // @ts-ignore
+          const latlng1 = item.from.split(',').map(e => {
+            return e * 1;
+          });
+          // @ts-ignore
+          const latlng2 = item.to.split(',').map(e => {
+            return e * 1;
+          });
+          return { coord: [ latlng1, latlng2 ] };
+        });
+    
+        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);
+        const flyLine = new LineLayer({ blend: 'normal' })
+          .source(flydata, {
+            parser: {
+              type: 'json',
+              coordinates: 'coord'
+            }
+          })
+          .color('#ff6b34')
+          .texture('plane')
+          .shape('arc')
+          .size(15)
+          .animate({
+            duration: 1,
+            interval: 0.2,
+            trailLength: 0.5
+          })
+          .style({
+            textureBlend: 'replace',
+            lineTexture: true, // 开启线的贴图功能
+            iconStep: 10, // 设置贴图纹理的间距
+          });
+    
+        const flyLine2 = new LineLayer()
+          .source(flydata, {
+            parser: {
+              type: 'json',
+              coordinates: 'coord'
+            }
+          })
+          .color('#ff6b34')
+          .shape('arc')
+          .size(1)
+          .style({
+            lineType: 'dash',
+            dashArray: [ 5, 5 ],
+            opacity: 0.5
+          });
+        scene.addLayer(worldLine);
+        scene.addLayer(dotPoint);
+        scene.addLayer(flyLine2);
+        scene.addLayer(flyLine);
+      });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/line/demos/lineArrow.tsx b/dev-demos/features/line/demos/lineArrow.tsx
new file mode 100644
index 0000000000..d29ad9a73f
--- /dev/null
+++ b/dev-demos/features/line/demos/lineArrow.tsx
@@ -0,0 +1,150 @@
+// @ts-ignore
+import { LineLayer, Scene, PointLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [ 120.15, 30.3 ],
+        zoom: 10,
+        style: 'light'
+      })
+    });
+    
+    const pointLayer = new PointLayer()
+      .source([{ lng: 120.155, lat: 30.31 }], {
+        parser: {
+          type: 'json',
+          x: 'lng',
+          y: 'lat'
+        }
+      })
+      .shape('circle')
+      .size(6000)
+      .color('#f00')
+      .animate(true)
+      .style({
+        unit: 'meter'
+      });
+    const lineLayer = new LineLayer({})
+      .source({
+        type: 'FeatureCollection',
+        features: [
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [
+                  120.1863098144,
+                  30.321915039121
+                ],
+                [
+                  120.3401184082,
+                  30.43446594614
+                ]
+              ]
+            }
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [
+                  120.19660949707033,
+                  30.298796461361665
+                ],
+                [
+                  120.31883239746092,
+                  30.28041626667403
+                ]
+              ]
+            }
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [
+                  120.12245178222656,
+                  30.29523927312319
+                ],
+                [
+                  120.01808166503906,
+                  30.261439550638762
+                ]
+              ]
+            }
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [
+                  120.15609741210938,
+                  30.285159872426014
+                ],
+                [
+                  120.14923095703124,
+                  30.20626765511821
+                ]
+              ]
+            }
+          },
+          {
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: [
+                [
+                  120.10940551757812,
+                  30.320136880604423
+                ],
+                [
+                  120.01327514648438,
+                  30.362803774813028
+                ]
+              ]
+            }
+          }
+        ]
+      }
+      )
+      .size(2)
+      .shape('line')
+      .style({
+        arrow: {
+          enable: true,
+          arrowWidth: 4,
+          arrowHeight: 4,
+          tailWidth: 0.4
+        }
+      })
+      .color('#f00');
+    scene.on('loaded', () => {
+      scene.addLayer(pointLayer);
+      scene.addLayer(lineLayer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/line/demos/lineTexture.tsx b/dev-demos/features/line/demos/lineTexture.tsx
new file mode 100644
index 0000000000..5acd6bea20
--- /dev/null
+++ b/dev-demos/features/line/demos/lineTexture.tsx
@@ -0,0 +1,70 @@
+// @ts-ignore
+import {
+  LineLayer,
+  Scene,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        center: [120.15, 30.246],
+        pitch: 0,
+        zoom: 13.5,
+        style: 'dark',
+        pitchEnable: false,
+        rotation: -90,
+      }),
+    });
+
+    scene.addImage(
+      'arrow',
+      'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
+    );
+
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const colors = ['#66c2a4', '#2ca25f', '#006d2c'];
+          const layer = new LineLayer({})
+            .source(data)
+            .size(2.5)
+            .shape('line')
+            .texture('arrow')
+            .color('', () => {
+              return colors[Math.floor(Math.random() * colors.length)];
+            })
+            .animate({
+              interval: 1, // 间隔
+              duration: 1, // 持续时间，延时
+              trailLength: 2, // 流线长度
+            })
+            .style({
+              opacity: 0.6,
+              lineTexture: true, // 开启线的贴图功能
+              iconStep: 20, // 设置贴图纹理的间距
+              borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
+              borderColor: '#fff', // 默认为 #ccc
+            });
+          scene.addLayer(layer);
+        });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/layerbuild/components/LineArc.tsx b/dev-demos/features/line/demos/lineWorker.tsx
similarity index 58%
rename from stories/layerbuild/components/LineArc.tsx
rename to dev-demos/features/line/demos/lineWorker.tsx
index 8f16eaa2cc..4c5f81a65d 100644
--- a/stories/layerbuild/components/LineArc.tsx
+++ b/dev-demos/features/line/demos/lineWorker.tsx
@@ -1,12 +1,15 @@
-// @ts-nocheck
 // @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { LineLayer } from '@antv/l7-layers';
+import {
+  LineLayer,
+  Scene,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class Demo extends React.Component {
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
@@ -15,7 +18,7 @@ export default class Demo extends React.Component {
         zoom: 2,
       }),
     });
-    const layer = new LineLayer()
+    const layer = new LineLayer({ workerEnabled: true })
       .source({
         type: 'FeatureCollection',
         features: [
@@ -32,26 +35,20 @@ export default class Demo extends React.Component {
           },
         ],
       })
-      .shape('arc')
+      .shape('line')
       .color('#f00')
       .size(5);
     scene.on('loaded', () => {
       scene.addLayer(layer);
     });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/point/arcline.tsx b/dev-demos/features/line/demos/linearc.tsx
similarity index 99%
rename from dev-demos/features/point/arcline.tsx
rename to dev-demos/features/line/demos/linearc.tsx
index e88e48cd41..a9b4d487f3 100644
--- a/dev-demos/features/point/arcline.tsx
+++ b/dev-demos/features/line/demos/linearc.tsx
@@ -6,6 +6,7 @@ import {
   lineAtOffset,
   lineAtOffsetAsyc,
   PointLayer,
+  // @ts-ignore
 } from '@antv/l7';
 // @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
diff --git a/dev-demos/features/line/linearline.tsx b/dev-demos/features/line/demos/linearline.tsx
similarity index 100%
rename from dev-demos/features/line/linearline.tsx
rename to dev-demos/features/line/demos/linearline.tsx
diff --git a/dev-demos/features/line/lineblur.tsx b/dev-demos/features/line/demos/lineblur.tsx
similarity index 97%
rename from dev-demos/features/line/lineblur.tsx
rename to dev-demos/features/line/demos/lineblur.tsx
index 16d309d1c1..205242339a 100644
--- a/dev-demos/features/line/lineblur.tsx
+++ b/dev-demos/features/line/demos/lineblur.tsx
@@ -1,4 +1,6 @@
+// @ts-ignore
 import { LineLayer, Scene } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
 
diff --git a/stories/Map/components/amap2demo_lineDash.tsx b/dev-demos/features/line/demos/linedash.tsx
similarity index 58%
rename from stories/Map/components/amap2demo_lineDash.tsx
rename to dev-demos/features/line/demos/linedash.tsx
index bb8e681620..7bcaaf1396 100644
--- a/stories/Map/components/amap2demo_lineDash.tsx
+++ b/dev-demos/features/line/demos/linedash.tsx
@@ -1,28 +1,19 @@
+// @ts-ignore
 import { LineLayer, Scene } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class Amap2demo_lineDash extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
         center: [116.3956, 39.9392],
-        pitch: 0,
         zoom: 10,
-        rotation: 0,
         style: 'amap://styles/wine',
-        // viewMode: '2D',
       }),
     });
-    this.scene = scene;
 
     scene.on('loaded', () => {
       fetch(
@@ -43,22 +34,14 @@ export default class Amap2demo_lineDash extends React.Component {
           scene.addLayer(layer);
         });
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/layerbuild/components/LineHalf.tsx b/dev-demos/features/line/demos/linehalf.tsx
similarity index 64%
rename from stories/layerbuild/components/LineHalf.tsx
rename to dev-demos/features/line/demos/linehalf.tsx
index 011523b288..52c66ed7c8 100644
--- a/stories/layerbuild/components/LineHalf.tsx
+++ b/dev-demos/features/line/demos/linehalf.tsx
@@ -1,12 +1,11 @@
-// @ts-nocheck
 // @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { LineLayer } from '@antv/l7-layers';
+import { LineLayer, Scene } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class Demo extends React.Component {
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
@@ -36,6 +35,7 @@ export default class Demo extends React.Component {
       .color('#f00')
       .size(10)
       .style({
+        opacity: 0.5,
         arrow: {
           enable: true,
         },
@@ -43,20 +43,14 @@ export default class Demo extends React.Component {
     scene.on('loaded', () => {
       scene.addLayer(layer);
     });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/line/demos/lineheight.tsx b/dev-demos/features/line/demos/lineheight.tsx
new file mode 100644
index 0000000000..7f02bc7d96
--- /dev/null
+++ b/dev-demos/features/line/demos/lineheight.tsx
@@ -0,0 +1,61 @@
+import { LineLayer, Scene } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new Mapbox({
+        pitch: 40,
+        style: 'light',
+        center: [102.600579, 23.114887],
+        zoom: 14.66,
+      }),
+    });
+
+    scene.on('loaded', () => {
+      fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
+        .then((res) => res.json())
+        .then((data) => {
+          const layer = new LineLayer({})
+            .source(data)
+            .size('ELEV', (h) => {
+              return [h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20]; // amap
+            })
+            .shape('line')
+            .scale('ELEV', {
+              type: 'quantize',
+            })
+            .style({
+              heightfixed: true,
+            })
+            .color(
+              'ELEV',
+              [
+                '#E4682F',
+                '#FF8752',
+                '#FFA783',
+                '#FFBEA8',
+                '#FFDCD6',
+                '#EEF3FF',
+                '#C8D7F5',
+                '#A5C1FC',
+                '#7FA7F9',
+                '#5F8AE5',
+              ].reverse(),
+            );
+          scene.addLayer(layer);
+        });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/Map/components/linewall.tsx b/dev-demos/features/line/demos/linewall.tsx
similarity index 74%
rename from stories/Map/components/linewall.tsx
rename to dev-demos/features/line/demos/linewall.tsx
index 1676158827..595c410a54 100644
--- a/stories/Map/components/linewall.tsx
+++ b/dev-demos/features/line/demos/linewall.tsx
@@ -1,25 +1,17 @@
-import { LineLayer, Scene, flow } from '@antv/l7';
+import { LineLayer, Scene } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo_lineLinear extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
+import React, { useEffect } from 'react';
 
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
         center: [115, 30.258134],
         pitch: 40,
         zoom: 6,
-        viewMode: '3D',
       }),
     });
-    this.scene = scene;
     const geoData = {
       type: 'FeatureCollection',
       features: [
@@ -77,22 +69,14 @@ export default class Amap2demo_lineLinear extends React.Component {
 
       scene.addLayer(layer);
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/point/simpleline.tsx b/dev-demos/features/line/demos/simpleline.tsx
similarity index 75%
rename from dev-demos/features/point/simpleline.tsx
rename to dev-demos/features/line/demos/simpleline.tsx
index fdbd8cbf12..5fbc5abb30 100644
--- a/dev-demos/features/point/simpleline.tsx
+++ b/dev-demos/features/line/demos/simpleline.tsx
@@ -91,62 +91,6 @@ export default () => {
       }),
     });
 
-    const testdata = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'MultiLineString',
-            coordinates: [
-              [
-                [115.565185546875, 41.31082388091818],
-                [115.3948974609375, 41.203456192051306],
-                [115.1751708984375, 40.979898069620134],
-                [115.0982666015625, 40.90105786688403],
-                [114.697265625, 40.701463603604594],
-                [114.89501953125, 40.50126945841643],
-                [114.9993896484375, 40.50126945841643],
-                [115.0982666015625, 40.400947631519614],
-                [114.9993896484375, 40.3004760797495],
-                [114.697265625, 40.20405042511331],
-                [114.697265625, 40.3004760797495],
-                [114.3951416015625, 40.20405042511331],
-                [114.1973876953125, 40.20405042511331],
-                [114.0985107421875, 40.00237193587648],
-                [113.9996337890625, 39.90130858574736],
-                [113.697509765625, 39.80009595634837],
-                [113.2965087890625, 39.90130858574736],
-                [113.0987548828125, 39.80009595634837],
-                [112.9998779296875, 39.70296052957232],
-                [112.69775390625, 39.202462225882385],
-                [112.598876953125, 39.202462225882385],
-                [112.5, 39.0533181067413],
-                [112.3956298828125, 38.90385833966778],
-                [112.1978759765625, 38.70265930723801],
-                [112.060546875, 38.77121637244272],
-                [112.060546875, 40.061256581404734],
-                [112.1978759765625, 40.20405042511331],
-                [112.060546875, 40.20405042511331],
-                [112.060546875, 41.31082388091818],
-                [115.565185546875, 41.31082388091818],
-              ],
-            ],
-          },
-          properties: {
-            ECO_NAME: 'Mongolian-Manchurian grassland',
-            BIOME_NAME: 'Temperate Grasslands, Savannas & Shrublands',
-            REALM: 'Palearctic',
-            NNH: 3,
-            NNH_NAME: 'Nature Could Recover',
-            COLOR: '#F6FC38',
-            COLOR_BIO: '#FEFF73',
-            COLOR_NNH: '#F9A91B',
-          },
-        },
-      ],
-    };
-
     const multipolygon = {
       type: 'Feature',
       geometry: {
@@ -205,11 +149,6 @@ export default () => {
         COLOR_NNH: '#F9A91B',
       },
     };
-    const testdata2 = {
-      type: 'FeatureCollection',
-      features: [],
-    };
-    console.log(polygonToLineString((multipolygon as unknown) as MultiPolygon));
 
     const layer = new LineLayer()
       // .source({
diff --git a/dev-demos/features/line/line.md b/dev-demos/features/line/line.md
index 3a48cf6c90..a48db4048a 100644
--- a/dev-demos/features/line/line.md
+++ b/dev-demos/features/line/line.md
@@ -1,2 +1,2 @@
 ### Line
-<code src="./line.tsx"></code>
\ No newline at end of file
+<code src="./demos/line.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineAnimate.md b/dev-demos/features/line/lineAnimate.md
new file mode 100644
index 0000000000..2decd3f304
--- /dev/null
+++ b/dev-demos/features/line/lineAnimate.md
@@ -0,0 +1,2 @@
+### Line - animate
+<code src="./demos/lineAnimate.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineArc.md b/dev-demos/features/line/lineArc.md
new file mode 100644
index 0000000000..a7b1e40585
--- /dev/null
+++ b/dev-demos/features/line/lineArc.md
@@ -0,0 +1,2 @@
+### Line - arc
+<code src="./demos/linearc.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineArc3d.md b/dev-demos/features/line/lineArc3d.md
new file mode 100644
index 0000000000..c7275bddeb
--- /dev/null
+++ b/dev-demos/features/line/lineArc3d.md
@@ -0,0 +1,2 @@
+### Line - arc3d
+<code src="./demos/lineArc3d.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineArcPlane.md b/dev-demos/features/line/lineArcPlane.md
new file mode 100644
index 0000000000..be2f92bfd2
--- /dev/null
+++ b/dev-demos/features/line/lineArcPlane.md
@@ -0,0 +1,2 @@
+### Line - arc - plane
+<code src="./demos/lineArcPlane.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineArrow.md b/dev-demos/features/line/lineArrow.md
new file mode 100644
index 0000000000..1a4f0c4c6d
--- /dev/null
+++ b/dev-demos/features/line/lineArrow.md
@@ -0,0 +1,2 @@
+### Line - arrow
+<code src="./demos/lineArrow.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineGreatcircle.md b/dev-demos/features/line/lineGreatcircle.md
new file mode 100644
index 0000000000..7b700830a9
--- /dev/null
+++ b/dev-demos/features/line/lineGreatcircle.md
@@ -0,0 +1,2 @@
+### Line - greatCircle 
+<code src="./demos/greatcircleline.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineHalf.md b/dev-demos/features/line/lineHalf.md
new file mode 100644
index 0000000000..5e482576df
--- /dev/null
+++ b/dev-demos/features/line/lineHalf.md
@@ -0,0 +1,2 @@
+### Line - half
+<code src="./demos/linehalf.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineTexture.md b/dev-demos/features/line/lineTexture.md
new file mode 100644
index 0000000000..1aad27b587
--- /dev/null
+++ b/dev-demos/features/line/lineTexture.md
@@ -0,0 +1,2 @@
+### Line - texture
+<code src="./demos/lineTexture.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineWorker.md b/dev-demos/features/line/lineWorker.md
new file mode 100644
index 0000000000..fdb577023e
--- /dev/null
+++ b/dev-demos/features/line/lineWorker.md
@@ -0,0 +1,2 @@
+### Line - worker
+<code src="./demos/lineWorker.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/linearline.md b/dev-demos/features/line/linearline.md
index 71b5a3d981..d8ffed8f8d 100644
--- a/dev-demos/features/line/linearline.md
+++ b/dev-demos/features/line/linearline.md
@@ -1,2 +1,2 @@
-### Linear Line
-<code src="./linearline.tsx"></code>
\ No newline at end of file
+### Line - linear 
+<code src="./demos/linearline.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineblur.md b/dev-demos/features/line/lineblur.md
index 9673470645..1ad3218a8c 100644
--- a/dev-demos/features/line/lineblur.md
+++ b/dev-demos/features/line/lineblur.md
@@ -1,2 +1,2 @@
-### Line Blur
-<code src="./lineblur.tsx"></code>
\ No newline at end of file
+### Line - blur
+<code src="./demos/lineblur.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/linedash.md b/dev-demos/features/line/linedash.md
new file mode 100644
index 0000000000..eeea7d0b09
--- /dev/null
+++ b/dev-demos/features/line/linedash.md
@@ -0,0 +1,2 @@
+### Line - dash
+<code src="./demos/linedash.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/lineheight.md b/dev-demos/features/line/lineheight.md
new file mode 100644
index 0000000000..40a02eae36
--- /dev/null
+++ b/dev-demos/features/line/lineheight.md
@@ -0,0 +1,2 @@
+### Line - height
+<code src="./demos/lineheight.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/linewall.md b/dev-demos/features/line/linewall.md
new file mode 100644
index 0000000000..611663edeb
--- /dev/null
+++ b/dev-demos/features/line/linewall.md
@@ -0,0 +1,2 @@
+### Line - wall
+<code src="./demos/linewall.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/line/simpleline.md b/dev-demos/features/line/simpleline.md
new file mode 100644
index 0000000000..4cc7850ee5
--- /dev/null
+++ b/dev-demos/features/line/simpleline.md
@@ -0,0 +1,2 @@
+### Line - simple 
+<code src="./demos/simpleline.tsx"></code>
\ No newline at end of file
diff --git a/stories/mask/components/heatmap.tsx b/dev-demos/features/mask/demos/heatmap.tsx
similarity index 76%
rename from stories/mask/components/heatmap.tsx
rename to dev-demos/features/mask/demos/heatmap.tsx
index c03e7a4265..54476ecf41 100644
--- a/stories/mask/components/heatmap.tsx
+++ b/dev-demos/features/mask/demos/heatmap.tsx
@@ -1,22 +1,11 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  HeatmapLayer,
-  PointLayer,
-} from '@antv/l7';
+// @ts-ignore
+import { Scene, HeatmapLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class MaskPoints extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       stencil: true,
@@ -27,7 +16,6 @@ export default class MaskPoints extends React.Component {
         style: 'dark',
       }),
     });
-    this.scene = scene;
     scene.addImage(
       '00',
       'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
@@ -67,7 +55,6 @@ export default class MaskPoints extends React.Component {
       )
         .then((res) => res.json())
         .then((data) => {
-          // const heatmapLayer = new HeatmapLayer({ mask: true, maskInside: true })
           const heatmapLayer = new HeatmapLayer({
             mask: true,
             maskInside: false,
@@ -97,22 +84,14 @@ export default class MaskPoints extends React.Component {
           scene.addLayer(heatmapLayer);
         });
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/mask/components/heatmapgrid.tsx b/dev-demos/features/mask/demos/heatmapgrid.tsx
similarity index 81%
rename from stories/mask/components/heatmapgrid.tsx
rename to dev-demos/features/mask/demos/heatmapgrid.tsx
index 4d295608ed..9c5fb8fd73 100644
--- a/stories/mask/components/heatmapgrid.tsx
+++ b/dev-demos/features/mask/demos/heatmapgrid.tsx
@@ -1,22 +1,11 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  HeatmapLayer,
-  PointLayer,
-} from '@antv/l7';
+// @ts-ignore
+import { Scene, HeatmapLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class MaskPoints extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       stencil: true,
@@ -27,7 +16,6 @@ export default class MaskPoints extends React.Component {
         style: 'dark',
       }),
     });
-    this.scene = scene;
     scene.addImage(
       '00',
       'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
@@ -117,22 +105,14 @@ export default class MaskPoints extends React.Component {
           // scene.addMask(mask2, heatmapLayer.id);
         });
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/mask/components/heatmapgrid3d.tsx b/dev-demos/features/mask/demos/heatmapgrid3d.tsx
similarity index 77%
rename from stories/mask/components/heatmapgrid3d.tsx
rename to dev-demos/features/mask/demos/heatmapgrid3d.tsx
index 290abcabc0..cc93f89d50 100644
--- a/stories/mask/components/heatmapgrid3d.tsx
+++ b/dev-demos/features/mask/demos/heatmapgrid3d.tsx
@@ -1,22 +1,11 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  HeatmapLayer,
-  PointLayer,
-} from '@antv/l7';
+// @ts-ignore
+import { Scene, HeatmapLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class MaskPoints extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       stencil: true,
@@ -28,7 +17,6 @@ export default class MaskPoints extends React.Component {
         zoom: 12.47985,
       }),
     });
-    this.scene = scene;
     scene.addImage(
       '00',
       'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
@@ -62,7 +50,6 @@ export default class MaskPoints extends React.Component {
       )
         .then((res) => res.json())
         .then((data) => {
-          // const layer = new HeatmapLayer({ mask: true })
           const layer = new HeatmapLayer({
             mask: true,
             maskInside: false,
@@ -105,22 +92,14 @@ export default class MaskPoints extends React.Component {
           scene.addLayer(layer);
         });
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/mask/components/hexgon.tsx b/dev-demos/features/mask/demos/hexgon.tsx
similarity index 79%
rename from stories/mask/components/hexgon.tsx
rename to dev-demos/features/mask/demos/hexgon.tsx
index 95f25b252c..ea4d5f7e25 100644
--- a/stories/mask/components/hexgon.tsx
+++ b/dev-demos/features/mask/demos/hexgon.tsx
@@ -1,22 +1,11 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  HeatmapLayer,
-  PointLayer,
-} from '@antv/l7';
+// @ts-ignore
+import { Scene, HeatmapLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class MaskPoints extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       stencil: true,
@@ -27,7 +16,6 @@ export default class MaskPoints extends React.Component {
         style: 'dark',
       }),
     });
-    this.scene = scene;
     scene.addImage(
       '00',
       'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
@@ -66,7 +54,6 @@ export default class MaskPoints extends React.Component {
       )
         .then((res) => res.text())
         .then((data) => {
-          // const layer = new HeatmapLayer({ mask: true })
           const layer = new HeatmapLayer({
             mask: true,
             maskInside: false,
@@ -115,22 +102,14 @@ export default class MaskPoints extends React.Component {
           scene.addLayer(layer);
         });
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/mask/components/image.tsx b/dev-demos/features/mask/demos/image.tsx
similarity index 68%
rename from stories/mask/components/image.tsx
rename to dev-demos/features/mask/demos/image.tsx
index 07d27d7c4d..e900bd79a0 100644
--- a/stories/mask/components/image.tsx
+++ b/dev-demos/features/mask/demos/image.tsx
@@ -1,23 +1,11 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  PolygonLayer,
-  PointLayer,
-  ImageLayer,
-} from '@antv/l7';
+// @ts-ignore
+import { Scene, ImageLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class MaskPoints extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       stencil: true,
@@ -28,7 +16,6 @@ export default class MaskPoints extends React.Component {
         style: 'dark',
       }),
     });
-    this.scene = scene;
     scene.addImage(
       '00',
       'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
@@ -64,7 +51,6 @@ export default class MaskPoints extends React.Component {
     };
 
     scene.on('loaded', () => {
-      // let points = new PointLayer({ zIndex: 2, mask: true, maskInside: false }) // maskInside: true
       const layer = new ImageLayer({
         mask: true,
         maskInside: false,
@@ -73,7 +59,7 @@ export default class MaskPoints extends React.Component {
         maskColor: '#f00',
       });
       layer.source(
-        'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
+        'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4UApTKmeiy4AAAAAAAAAAAAAARQnAQ',
         {
           parser: {
             type: 'image',
@@ -88,22 +74,14 @@ export default class MaskPoints extends React.Component {
       );
       scene.addLayer(layer);
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/mask/components/raster.tsx b/dev-demos/features/mask/demos/raster.tsx
similarity index 55%
rename from stories/mask/components/raster.tsx
rename to dev-demos/features/mask/demos/raster.tsx
index a41954b0f6..b3fc9c9d80 100644
--- a/stories/mask/components/raster.tsx
+++ b/dev-demos/features/mask/demos/raster.tsx
@@ -1,38 +1,34 @@
-import { LineLayer, Scene, MaskLayer, RasterLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
 // @ts-ignore
+import { Scene, RasterLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
 import * as GeoTIFF from 'geotiff';
 
-export default class MaskPoints extends React.Component {
+async function getTiffData() {
+  const response = await fetch(
+    'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
+    // 'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff',
+  );
+  const arrayBuffer = await response.arrayBuffer();
+  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
+  const image = await tiff.getImage();
+  const width = image.getWidth();
+  const height = image.getHeight();
+  const values = await image.readRasters();
+  return {
+    data: values[0],
+    width,
+    height,
+    min: 0,
+    max: 8000,
+  };
+}
+
+export default () => {
   // @ts-ignore
-  private scene: Scene;
-
-  private async getTiffData() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
-      // 'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff',
-    );
-    const arrayBuffer = await response.arrayBuffer();
-    const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
-    const image = await tiff.getImage();
-    const width = image.getWidth();
-    const height = image.getHeight();
-    const values = await image.readRasters();
-    return {
-      data: values[0],
-      width,
-      height,
-      min: 0,
-      max: 8000,
-    };
-  }
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+  useEffect( async () => {
     const scene = new Scene({
       id: 'map',
       stencil: true,
@@ -43,13 +39,12 @@ export default class MaskPoints extends React.Component {
         style: 'dark',
       }),
     });
-    this.scene = scene;
     scene.addImage(
       '00',
       'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
     );
 
-    const tiffdata = await this.getTiffData();
+    const tiffdata = await getTiffData();
 
     fetch(
       'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
@@ -57,7 +52,6 @@ export default class MaskPoints extends React.Component {
       .then((res) => res.json())
       .then((maskData) => {
         const layer = new RasterLayer({ mask: true, maskfence: maskData });
-        // const layer = new RasterLayer({ mask: true, maskInside: false });
         const mindata = -0;
         const maxdata = 8000;
         layer
@@ -91,22 +85,14 @@ export default class MaskPoints extends React.Component {
           });
         scene.addLayer(layer);
       });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/mask/components/singleMask.tsx b/dev-demos/features/mask/demos/singleMask.tsx
similarity index 74%
rename from stories/mask/components/singleMask.tsx
rename to dev-demos/features/mask/demos/singleMask.tsx
index 01d9da91de..517ff01106 100644
--- a/stories/mask/components/singleMask.tsx
+++ b/dev-demos/features/mask/demos/singleMask.tsx
@@ -1,22 +1,11 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  PolygonLayer,
-  PointLayer,
-} from '@antv/l7';
+// @ts-ignore
+import { Scene, PointLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class MaskPoints extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       stencil: true,
@@ -27,7 +16,6 @@ export default class MaskPoints extends React.Component {
         style: 'dark',
       }),
     });
-    this.scene = scene;
     scene.addImage(
       '00',
       'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
@@ -55,7 +43,6 @@ export default class MaskPoints extends React.Component {
     };
 
     scene.on('loaded', () => {
-      // let points = new PointLayer({ zIndex: 2, mask: true, maskInside: false }) // maskInside: true
       let point1 = new PointLayer({
         zIndex: 1,
         mask: true,
@@ -85,7 +72,6 @@ export default class MaskPoints extends React.Component {
         })
         .active(true);
 
-      // let point2 = new PointLayer({ zIndex: 3, mask: false, maskInside: true })
       let point2 = new PointLayer({
         zIndex: 3,
         mask: true,
@@ -131,22 +117,14 @@ export default class MaskPoints extends React.Component {
         scene.render();
       }, 2000);
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/mask/components/text.tsx b/dev-demos/features/mask/demos/text.tsx
similarity index 77%
rename from stories/mask/components/text.tsx
rename to dev-demos/features/mask/demos/text.tsx
index 6933fc6303..072c7af111 100644
--- a/stories/mask/components/text.tsx
+++ b/dev-demos/features/mask/demos/text.tsx
@@ -1,22 +1,11 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  PolygonLayer,
-  PointLayer,
-} from '@antv/l7';
+// @ts-ignore
+import { Scene, PointLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class MaskPoints extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       stencil: true,
@@ -26,7 +15,6 @@ export default class MaskPoints extends React.Component {
         zoom: 4,
       }),
     });
-    this.scene = scene;
     scene.addImage(
       '00',
       'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
@@ -65,7 +53,6 @@ export default class MaskPoints extends React.Component {
       )
         .then((res) => res.json())
         .then((data) => {
-          // const pointLayer = new PointLayer({ mask: true })
           const pointLayer = new PointLayer({
             mask: true,
             maskInside: false,
@@ -95,22 +82,14 @@ export default class MaskPoints extends React.Component {
           scene.addLayer(pointLayer);
         });
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/mask/demos/wind.tsx b/dev-demos/features/mask/demos/wind.tsx
new file mode 100644
index 0000000000..4e993abedc
--- /dev/null
+++ b/dev-demos/features/mask/demos/wind.tsx
@@ -0,0 +1,95 @@
+// @ts-ignore
+import { Scene, WindLayer } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      stencil: true,
+      map: new GaodeMap({
+        center: [105.732421875, 32.24997445586331],
+        pitch: 0,
+        style: 'dark',
+        zoom: 2,
+      }),
+    });
+
+    const maskData = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'MultiPolygon',
+            coordinates: [
+              [
+                [
+                  [125.15625000000001, 8.407168163601076],
+                  [116.54296874999999, -21.289374355860424],
+                  [156.26953125, -20.632784250388013],
+                  [150.29296875, 2.1088986592431382],
+                ],
+              ],
+              [
+                [
+                  [78.57421875, 46.92025531537451],
+                  [51.67968749999999, 37.020098201368114],
+                  [87.890625, 28.76765910569123],
+                ],
+              ],
+            ],
+          },
+        },
+      ],
+    };
+
+    scene.on('loaded', () => {
+      const layer = new WindLayer({
+        mask: true,
+        maskInside: false,
+        maskfence: maskData,
+      });
+      layer
+        .source(
+          'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ',
+          {
+            parser: {
+              type: 'image',
+              extent: [-180, -85, 180, 85],
+            },
+          },
+        )
+        .animate(true)
+        .style({
+          uMin: -21.32,
+          uMax: 26.8,
+          vMin: -21.57,
+          vMax: 21.42,
+          numParticles: 35535,
+          fadeOpacity: 0.996,
+          sizeScale: 1.2,
+          rampColors: {
+            0.0: '#c6dbef',
+            0.1: '#9ecae1',
+            0.2: '#6baed6',
+            0.3: '#4292c6',
+            0.4: '#2171b5',
+            0.5: '#084594',
+          },
+        });
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/mask/heatmap.md b/dev-demos/features/mask/heatmap.md
new file mode 100644
index 0000000000..6df8dc5081
--- /dev/null
+++ b/dev-demos/features/mask/heatmap.md
@@ -0,0 +1,2 @@
+### heatmap
+<code src="./demos/heatmap.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/mask/heatmapgrid.md b/dev-demos/features/mask/heatmapgrid.md
new file mode 100644
index 0000000000..cbef235e6f
--- /dev/null
+++ b/dev-demos/features/mask/heatmapgrid.md
@@ -0,0 +1,2 @@
+### heatmapgrid
+<code src="./demos/heatmapgrid.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/mask/heatmapgrid3d.md b/dev-demos/features/mask/heatmapgrid3d.md
new file mode 100644
index 0000000000..100facc3f6
--- /dev/null
+++ b/dev-demos/features/mask/heatmapgrid3d.md
@@ -0,0 +1,2 @@
+### heatmapgrid3d
+<code src="./demos/heatmapgrid3d.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/mask/hexgon.md b/dev-demos/features/mask/hexgon.md
new file mode 100644
index 0000000000..9fc93e16c2
--- /dev/null
+++ b/dev-demos/features/mask/hexgon.md
@@ -0,0 +1,2 @@
+### hexgon
+<code src="./demos/hexgon.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/mask/image.md b/dev-demos/features/mask/image.md
new file mode 100644
index 0000000000..12e1691101
--- /dev/null
+++ b/dev-demos/features/mask/image.md
@@ -0,0 +1,2 @@
+### image
+<code src="./demos/image.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/mask/raster.md b/dev-demos/features/mask/raster.md
new file mode 100644
index 0000000000..b0225f5cc3
--- /dev/null
+++ b/dev-demos/features/mask/raster.md
@@ -0,0 +1,2 @@
+### raster
+<code src="./demos/raster.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/mask/singleMask.md b/dev-demos/features/mask/singleMask.md
new file mode 100644
index 0000000000..1e3c59e880
--- /dev/null
+++ b/dev-demos/features/mask/singleMask.md
@@ -0,0 +1,2 @@
+### singleMask
+<code src="./demos/singleMask.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/mask/text.md b/dev-demos/features/mask/text.md
new file mode 100644
index 0000000000..82c33124c5
--- /dev/null
+++ b/dev-demos/features/mask/text.md
@@ -0,0 +1,2 @@
+### text
+<code src="./demos/text.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/mask/wind.md b/dev-demos/features/mask/wind.md
new file mode 100644
index 0000000000..be482f6762
--- /dev/null
+++ b/dev-demos/features/mask/wind.md
@@ -0,0 +1,2 @@
+### wind
+<code src="./demos/wind.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/arcline.md b/dev-demos/features/point/arcline.md
deleted file mode 100644
index 6390be01cb..0000000000
--- a/dev-demos/features/point/arcline.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### Arc Line
-<code src="./arcline.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/demos/column.tsx b/dev-demos/features/point/demos/column.tsx
new file mode 100644
index 0000000000..58a34192af
--- /dev/null
+++ b/dev-demos/features/point/demos/column.tsx
@@ -0,0 +1,60 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+  
+export default () => {
+    useEffect( () => {
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+          pitch: 66.02383,
+          style: 'dark',
+          center: [121.400257, 31.25287],
+          zoom: 14.55,
+          rotation: 134.9507,
+        }),
+      });
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const pointLayer = new PointLayer({})
+            .source(data, {
+              parser: {
+                type: 'json',
+                x: 'longitude',
+                y: 'latitude',
+              },
+            })
+            .shape('name', [
+              'cylinder',
+              'triangleColumn',
+              'hexagonColumn',
+              'squareColumn',
+            ])
+            .size('unit_price', (h) => {
+              return [6, 6, 100];
+            })
+            .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
+            .style({
+              opacity: 1.0,
+            });
+  
+          scene.addLayer(pointLayer);
+        });
+          
+    }, []);
+    return (
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    );
+  };
+  
\ No newline at end of file
diff --git a/dev-demos/features/point/demos/cylinder.tsx b/dev-demos/features/point/demos/cylinder.tsx
new file mode 100644
index 0000000000..0224f2c72e
--- /dev/null
+++ b/dev-demos/features/point/demos/cylinder.tsx
@@ -0,0 +1,65 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+  
+export default () => {
+    useEffect( () => {
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+          center: [121.107846, 30.267069],
+          pitch: 35.210526315789465,
+          style: 'dark',
+          zoom: 8,
+          animateEnable: false,
+        }),
+      });
+  
+      scene.on('loaded', () => {
+        fetch(
+          'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
+        )
+          .then((res) => res.json())
+          .then((data) => {
+            const pointLayer = new PointLayer({ depth: false })
+              .source(data.list, {
+                parser: {
+                  type: 'json',
+                  x: 'j',
+                  y: 'w',
+                },
+              })
+              .shape('cylinder') // cylinder triangleColumn hexagonColumn squareColumn
+              .size('t', function(level) {
+                return [1, 1, level * 2 + 20];
+              })
+              .active(true)
+              .color('#0ff')
+              .style({
+                // opacity: 0.8,
+                opacityLinear: {
+                  enable: true, // true - false
+                  dir: 'up', // up - down
+                },
+                lightEnable: false,
+                // sourceColor: '#f00',
+                // targetColor: "#0f0"
+              });
+            scene.addLayer(pointLayer);
+          });
+      });
+          
+    }, []);
+    return (
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    );
+  };
+  
\ No newline at end of file
diff --git a/dev-demos/features/point/demos/iconfont.tsx b/dev-demos/features/point/demos/iconfont.tsx
new file mode 100644
index 0000000000..bfd725a45f
--- /dev/null
+++ b/dev-demos/features/point/demos/iconfont.tsx
@@ -0,0 +1,74 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+  
+export default () => {
+    useEffect( () => {
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+          center: [ 110, 36 ],
+          style: 'light',
+          zoom: 3
+        })
+      });
+
+      const fontFamily = 'iconfont';
+      // 指定 iconfont 字体文件
+      const fontPath =
+        '//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140';
+      // 全局添加资源
+      scene.addFontFace(fontFamily, fontPath);
+      // 全局添加 iconfont 字段的映射;
+      scene.addIconFont('icon1', '&#xe6d4;');
+      
+      scene.on('loaded', () => {
+        const imageLayer = new PointLayer()
+          .source(
+            [
+              {
+                j: 118.234433,
+                w: 35.007936,
+                icon: 'icon1',
+                value: 10,
+                name: 'AA',
+                type: 'dibiaoshui',
+              },
+            ],
+            {
+              parser: {
+                type: 'json',
+                x: 'j',
+                y: 'w',
+              },
+            },
+          )
+          .color('#44ff00')
+          .shape('icon', 'text')
+          .size(30)
+          .style({
+            // textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+            // textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
+            padding: [0, 0], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+            stroke: '#ffffff', // 描边颜色
+            fontFamily,
+            iconfont: true,
+            textAllowOverlap: true,
+          });
+        scene.addLayer(imageLayer);
+      });
+
+    }, []);
+    return (
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    );
+  };
+  
\ No newline at end of file
diff --git a/dev-demos/features/point/demos/icons.tsx b/dev-demos/features/point/demos/icons.tsx
new file mode 100644
index 0000000000..2bc53c3127
--- /dev/null
+++ b/dev-demos/features/point/demos/icons.tsx
@@ -0,0 +1,73 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+  
+export default () => {
+  // @ts-ignore
+    useEffect( async () => {
+      const response = await fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
+      );
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+          center: [121.4, 31.258134],
+          zoom: 12,
+          pitch: 0,
+          style: 'normal',
+        }),
+      });
+      scene.addImage(
+        '00',
+        'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*g8cUQ7pPT9YAAAAAAAAAAAAAARQnAQ',
+      );
+      scene.addImage(
+        '01',
+        'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*LTcXTLBM7kYAAAAAAAAAAAAAARQnAQ',
+      );
+      scene.addImage(
+        '02',
+        'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg',
+      );
+      const data = await response.json();
+      const newData = data.map((item: any) => {
+        item.type = ['00', '01', '02'][Math.floor(Math.random() * 3)];
+        return item;
+      });
+      const imageLayer = new PointLayer({
+        blend: 'normal',
+      })
+        .source(newData, {
+          parser: {
+            type: 'json',
+            x: 'longitude',
+            y: 'latitude',
+          },
+        })
+        .shape('type', (v: any) => {
+          return v;
+        })
+        .active(false)
+        .size(20);
+      scene.addLayer(imageLayer);
+      imageLayer.on('mousedown', (e) => {
+        console.log('mousedown', e);
+      });
+      imageLayer.on('click', (e) => {
+        console.log('click', e);
+      });
+          
+    }, []);
+    return (
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    );
+  };
+  
\ No newline at end of file
diff --git a/dev-demos/features/point/demos/normal.tsx b/dev-demos/features/point/demos/normal.tsx
new file mode 100644
index 0000000000..7808e44a2b
--- /dev/null
+++ b/dev-demos/features/point/demos/normal.tsx
@@ -0,0 +1,51 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+  
+export default () => {
+    useEffect( () => {
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+          style: 'dark',
+          center: [ 121.417463, 31.215175 ],
+          pitch: 0,
+          zoom: 11
+        })
+      });
+      scene.on('loaded', () => {
+        fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
+          .then(res => res.text())
+          .then(data => {
+            const pointLayer = new PointLayer({})
+              .source(data, {
+                parser: {
+                  type: 'csv',
+                  y: 'lat',
+                  x: 'lng'
+                }
+              })
+              .size(0.5)
+              .color('#080298')
+              .style({
+                opacity: 1
+              });
+
+            scene.addLayer(pointLayer);
+          });
+      });
+          
+    }, []);
+    return (
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    );
+  };
+  
\ No newline at end of file
diff --git a/dev-demos/features/point/demos/radar.tsx b/dev-demos/features/point/demos/radar.tsx
new file mode 100644
index 0000000000..a1bb2693b3
--- /dev/null
+++ b/dev-demos/features/point/demos/radar.tsx
@@ -0,0 +1,56 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+  
+export default () => {
+    useEffect( () => {
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+          center: [110.19382669582967, 30.258134],
+          pitch: 0,
+          zoom: 2,
+        }),
+      });
+  
+      const layer = new PointLayer()
+        .source(
+          [
+            {
+              lng: 120,
+              lat: 30,
+              t: 'text1',
+            },
+          ],
+          {
+            parser: {
+              type: 'json',
+              x: 'lng',
+              y: 'lat',
+            },
+          },
+        )
+        .size(25)
+        .color('#f00')
+        .shape('radar')
+        .animate(true)
+        .active(true);
+  
+      scene.on('loaded', () => {
+        scene.addLayer(layer);
+      });
+          
+    }, []);
+    return (
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    );
+  };
+  
\ No newline at end of file
diff --git a/dev-demos/features/point/demos/simple.tsx b/dev-demos/features/point/demos/simple.tsx
new file mode 100644
index 0000000000..fc307557ad
--- /dev/null
+++ b/dev-demos/features/point/demos/simple.tsx
@@ -0,0 +1,52 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+  
+export default () => {
+    useEffect( () => {
+        const scene = new Scene({
+            id: 'map',
+            map: new GaodeMap({
+              center: [ 110, 36 ],
+              style: 'light',
+              zoom: 3
+            })
+          });
+          scene.on('loaded', () => {
+            fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
+              .then(res => res.json())
+              .then(data => {
+                const pointLayer = new PointLayer({ blend: 'additive' })
+                  .source(data.list, {
+                    parser: {
+                      type: 'json',
+                      x: 'j',
+                      y: 'w'
+                    }
+                  })
+                  .shape('simple')
+                  .size(6)
+                  .color('#ff0')
+                  .style({
+                    opacity: 0.3
+                  });
+          
+                scene.addLayer(pointLayer);
+              });
+          
+          });
+          
+    }, []);
+    return (
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    );
+  };
+  
\ No newline at end of file
diff --git a/dev-demos/features/point/demos/text.tsx b/dev-demos/features/point/demos/text.tsx
new file mode 100644
index 0000000000..61f9b2e081
--- /dev/null
+++ b/dev-demos/features/point/demos/text.tsx
@@ -0,0 +1,59 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+  
+export default () => {
+    useEffect( () => {
+        const scene = new Scene({
+            id: 'map',
+            map: new GaodeMap({
+              center: [ 110, 36 ],
+              style: 'light',
+              zoom: 3
+            })
+          });
+          scene.on('loaded', () => {
+            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({
+                    // textAllowOverlap: true,
+                    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);
+              });
+          
+          });
+          
+    }, []);
+    return (
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    );
+  };
+  
\ No newline at end of file
diff --git a/dev-demos/features/point/greatcircleline.md b/dev-demos/features/point/greatcircleline.md
deleted file mode 100644
index 73ea935b52..0000000000
--- a/dev-demos/features/point/greatcircleline.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### GreatCircle Line
-<code src="./greatcircleline.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/image.md b/dev-demos/features/point/image.md
deleted file mode 100644
index d7c3ff870c..0000000000
--- a/dev-demos/features/point/image.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### 图片图层
-<code src="./image.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/pointCircle.md b/dev-demos/features/point/pointCircle.md
index aeb36fc878..09647a01ca 100644
--- a/dev-demos/features/point/pointCircle.md
+++ b/dev-demos/features/point/pointCircle.md
@@ -1,4 +1,4 @@
-### point circle
+### point - circle
 ```tsx
 import { PointLayer, Scene } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
diff --git a/dev-demos/features/point/pointColumn.md b/dev-demos/features/point/pointColumn.md
new file mode 100644
index 0000000000..631e8ae93f
--- /dev/null
+++ b/dev-demos/features/point/pointColumn.md
@@ -0,0 +1,2 @@
+### point - column
+<code src="./demos/column.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/pointCylinder.md b/dev-demos/features/point/pointCylinder.md
new file mode 100644
index 0000000000..6f4510921a
--- /dev/null
+++ b/dev-demos/features/point/pointCylinder.md
@@ -0,0 +1,2 @@
+### point - cylinder
+<code src="./demos/cylinder.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/pointFillImage.md b/dev-demos/features/point/pointFillImage.md
index 7da50282b3..1dace4cbd8 100644
--- a/dev-demos/features/point/pointFillImage.md
+++ b/dev-demos/features/point/pointFillImage.md
@@ -1,4 +1,4 @@
-### point fillImage
+### point - fillImage
 ```tsx
 import { PointLayer, Scene } from '@antv/l7';
 import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
diff --git a/dev-demos/features/point/pointIconfont.md b/dev-demos/features/point/pointIconfont.md
new file mode 100644
index 0000000000..e6061f5958
--- /dev/null
+++ b/dev-demos/features/point/pointIconfont.md
@@ -0,0 +1,4 @@
+### Point - text - iconfont
+
+#### iconfont
+<code src="./demos/iconfont.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/pointIcons.md b/dev-demos/features/point/pointIcons.md
new file mode 100644
index 0000000000..ae5e5ee5a7
--- /dev/null
+++ b/dev-demos/features/point/pointIcons.md
@@ -0,0 +1,2 @@
+### point - icons
+<code src="./demos/icons.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/pointImage.md b/dev-demos/features/point/pointImage.md
index ab1729621c..71df2208f8 100644
--- a/dev-demos/features/point/pointImage.md
+++ b/dev-demos/features/point/pointImage.md
@@ -1,4 +1,4 @@
-### point image
+### point - image
 ```tsx
 import { PointLayer, Scene } from '@antv/l7';
 import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
@@ -6,12 +6,10 @@ import React, { useEffect } from 'react';
 
 export default () => {
     useEffect(() => {
-        
         const scene = new Scene({
             id: 'point_fillImage',
             map: new Mapbox({
                 style: 'light',
-
                 center: [120, 30],
                 pitch: 60,
                 zoom: 14
diff --git a/dev-demos/features/point/pointNormal.md b/dev-demos/features/point/pointNormal.md
new file mode 100644
index 0000000000..2a4518ed82
--- /dev/null
+++ b/dev-demos/features/point/pointNormal.md
@@ -0,0 +1,2 @@
+### Point - normal
+<code src="./demos/normal.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/pointRadar.md b/dev-demos/features/point/pointRadar.md
new file mode 100644
index 0000000000..327617ffe9
--- /dev/null
+++ b/dev-demos/features/point/pointRadar.md
@@ -0,0 +1,2 @@
+### point - radar
+<code src="./demos/radar.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/pointSimple.md b/dev-demos/features/point/pointSimple.md
new file mode 100644
index 0000000000..4df6bb8f9d
--- /dev/null
+++ b/dev-demos/features/point/pointSimple.md
@@ -0,0 +1,2 @@
+### Point - simple
+<code src="./demos/simple.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/pointText.md b/dev-demos/features/point/pointText.md
new file mode 100644
index 0000000000..9548a09913
--- /dev/null
+++ b/dev-demos/features/point/pointText.md
@@ -0,0 +1,3 @@
+### Point - text
+#### normal text
+<code src="./demos/text.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/point/pointWave.md b/dev-demos/features/point/pointWave.md
index 7c40580157..91729d1ac8 100644
--- a/dev-demos/features/point/pointWave.md
+++ b/dev-demos/features/point/pointWave.md
@@ -1,4 +1,4 @@
-### point wave
+### point - wave
 ```tsx
 import { PointLayer, Scene } from '@antv/l7';
 import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
diff --git a/dev-demos/features/point/simpleline.md b/dev-demos/features/point/simpleline.md
deleted file mode 100644
index f6b78bf749..0000000000
--- a/dev-demos/features/point/simpleline.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### Simple Line
-<code src="./simpleline.tsx"></code>
\ No newline at end of file
diff --git a/stories/Map/components/amap2demo_polygon_extrude.tsx b/dev-demos/features/polygon/demos/extrude.tsx
similarity index 64%
rename from stories/Map/components/amap2demo_polygon_extrude.tsx
rename to dev-demos/features/polygon/demos/extrude.tsx
index aeb22fd7b9..b663890dc1 100644
--- a/stories/Map/components/amap2demo_polygon_extrude.tsx
+++ b/dev-demos/features/polygon/demos/extrude.tsx
@@ -1,35 +1,26 @@
-import { PolygonLayer, Scene, LineLayer, PointLayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
 
-export default class Amap2demo_polygon_extrude extends React.Component {
-  private gui: dat.GUI;
-  private $stats: Node;
+import {
+  Scene,
+  PolygonLayer,
+  PointLayer,
+  LineLayer,
   // @ts-ignore
-  private scene: Scene;
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
 
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    // const response = await fetch(
-    //   // 'https://gw.alipayobjects.com/os/basement_prod/f79485d8-d86f-4bb3-856d-537b586be06e.json',
-    //   // 'https://gw.alipayobjects.com/os/basement_prod/619a6f16-ecb0-4fca-9f9a-b06b67f6f02b.json',
-    //   'https://gw.alipayobjects.com/os/bmw-prod/93a55259-328e-4e8b-8dc2-35e05844ed31.json'
-    // );
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
-        // map: new GaodeMapV2({
-        // map: new Mapbox({
         style: 'dark',
         center: [120, 29.732983],
         zoom: 6.2,
         pitch: 60,
       }),
     });
-    this.scene = scene;
 
     const wavePoints = new PointLayer({ zIndex: 2 })
       .source(
@@ -70,7 +61,6 @@ export default class Amap2demo_polygon_extrude extends React.Component {
 
     scene.on('loaded', () => {
       scene.addLayer(wavePoints);
-      // @ts-ignore
       let lineDown, lineUp, textLayer;
 
       fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json')
@@ -148,9 +138,6 @@ export default class Amap2demo_polygon_extrude extends React.Component {
             .size(150000)
             .shape('extrude')
             .color('#0DCCFF')
-            // .active({
-            //   color: 'rgb(100,230,255)',
-            // })
             .style({
               heightfixed: true,
               pickLight: true,
@@ -176,58 +163,16 @@ export default class Amap2demo_polygon_extrude extends React.Component {
               sidesurface: false,
             });
           scene.addLayer(provincelayerTop);
-
-          // provincelayer.on('mousemove', () => {
-          //   provincelayer.style({
-          //     raisingHeight: 200000 + 100000,
-          //   });
-          //   // @ts-ignore
-          //   lineDown.style({
-          //     raisingHeight: 200000 + 100000,
-          //   });
-          //   // @ts-ignore
-          //   lineUp.style({
-          //     raisingHeight: 200000 + 150000 + 100000,
-          //   });
-          //   // @ts-ignore
-          //   textLayer.style({
-          //     raisingHeight: 200000 + 150000 + 10000 + 100000,
-          //   });
-          // });
-
-          // provincelayer.on('unmousemove', () => {
-          //   provincelayer.style({
-          //     raisingHeight: 200000,
-          //   });
-          //   // @ts-ignore
-          //   lineDown.style({
-          //     raisingHeight: 200000,
-          //   });
-          //   // @ts-ignore
-          //   lineUp.style({
-          //     raisingHeight: 200000 + 150000,
-          //   });
-          //   // @ts-ignore
-          //   textLayer.style({
-          //     raisingHeight: 200000 + 150000 + 10000,
-          //   });
-          // });
         });
     });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/polygon/demos/fill.tsx b/dev-demos/features/polygon/demos/fill.tsx
new file mode 100644
index 0000000000..91fa31a102
--- /dev/null
+++ b/dev-demos/features/polygon/demos/fill.tsx
@@ -0,0 +1,67 @@
+
+import {
+  Scene,
+  PolygonLayer,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 40,
+        center: [113.8623046875, 30.031055426540206],
+        zoom: 7.5,
+      }),
+    });
+    const data = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {
+            testOpacity: 0.8,
+          },
+          geometry: {
+            type: 'Polygon',
+            coordinates: [
+              [
+                [113.8623046875, 30.031055426540206],
+                [116.3232421875, 30.031055426540206],
+                [116.3232421875, 31.090574094954192],
+                [113.8623046875, 31.090574094954192],
+                [113.8623046875, 30.031055426540206],
+              ],
+            ],
+          },
+        },
+      ],
+    };
+
+
+    const layer = new PolygonLayer({})
+      .source(data)
+      .shape('fill')
+      .color('red')
+      .active(true)
+      .style({
+      });
+
+    scene.on('loaded', () => {
+      scene.addLayer(layer);
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/layerbuild/components/PolygonOcean.tsx b/dev-demos/features/polygon/demos/ocean.tsx
similarity index 65%
rename from stories/layerbuild/components/PolygonOcean.tsx
rename to dev-demos/features/polygon/demos/ocean.tsx
index 3bd8663ea8..c62b4b4905 100644
--- a/stories/layerbuild/components/PolygonOcean.tsx
+++ b/dev-demos/features/polygon/demos/ocean.tsx
@@ -1,12 +1,15 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PolygonLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
 
-export default class Demo extends React.Component {
-  public async componentDidMount() {
+import {
+  Scene,
+  PolygonLayer,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
@@ -46,20 +49,14 @@ export default class Demo extends React.Component {
     scene.on('loaded', () => {
       scene.addLayer(layer);
     });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/stories/layerbuild/components/PolygonWater.tsx b/dev-demos/features/polygon/demos/water.tsx
similarity index 59%
rename from stories/layerbuild/components/PolygonWater.tsx
rename to dev-demos/features/polygon/demos/water.tsx
index 8c99702a48..e0a6d4cbae 100644
--- a/stories/layerbuild/components/PolygonWater.tsx
+++ b/dev-demos/features/polygon/demos/water.tsx
@@ -1,18 +1,21 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PolygonLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
 
-export default class Demo extends React.Component {
-  public async componentDidMount() {
+import {
+  Scene,
+  PolygonLayer,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
         center: [120, 30],
         pitch: 0,
-        zoom: 2,
+        zoom: 3,
       }),
     });
     const layer = new PolygonLayer()
@@ -27,8 +30,9 @@ export default class Demo extends React.Component {
               coordinates: [
                 [
                   [104.4140625, 35.460669951495305],
-                  [98.7890625, 24.206889622398023],
-                  [111.796875, 27.371767300523047],
+                  [114.4140625, 35.460669951495305],
+                  [114.4140625, 30.460669951495305],
+                  [104.4140625, 30.460669951495305],
                   [104.4140625, 35.460669951495305],
                 ],
               ],
@@ -47,20 +51,14 @@ export default class Demo extends React.Component {
     scene.on('loaded', () => {
       scene.addLayer(layer);
     });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/polygon/extrude.md b/dev-demos/features/polygon/extrude.md
new file mode 100644
index 0000000000..17144217fa
--- /dev/null
+++ b/dev-demos/features/polygon/extrude.md
@@ -0,0 +1,2 @@
+### Polygon - extrude
+<code src="./demos/extrude.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/polygon/fill.md b/dev-demos/features/polygon/fill.md
new file mode 100644
index 0000000000..c43009af13
--- /dev/null
+++ b/dev-demos/features/polygon/fill.md
@@ -0,0 +1,2 @@
+### Polygon - fill
+<code src="./demos/fill.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/polygon/ocean.md b/dev-demos/features/polygon/ocean.md
new file mode 100644
index 0000000000..4fab5993a5
--- /dev/null
+++ b/dev-demos/features/polygon/ocean.md
@@ -0,0 +1,2 @@
+### Polygon - ocean
+<code src="./demos/ocean.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/polygon/water.md b/dev-demos/features/polygon/water.md
new file mode 100644
index 0000000000..0718dd28af
--- /dev/null
+++ b/dev-demos/features/polygon/water.md
@@ -0,0 +1,2 @@
+### Polygon - water
+<code src="./demos/water.tsx"></code>
\ No newline at end of file
diff --git a/stories/layerbuild/components/Wind.tsx b/dev-demos/features/something/demos/wind.tsx
similarity index 70%
rename from stories/layerbuild/components/Wind.tsx
rename to dev-demos/features/something/demos/wind.tsx
index 314a7f58f5..2494e04287 100644
--- a/stories/layerbuild/components/Wind.tsx
+++ b/dev-demos/features/something/demos/wind.tsx
@@ -1,12 +1,11 @@
-// @ts-nocheck
 // @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { WindLayer } from '@antv/l7-layers';
+import { Scene, WindLayer } from '@antv/l7';
+// @ts-ignore
 import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class Demo extends React.Component {
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
       id: 'map',
       map: new GaodeMap({
@@ -49,20 +48,14 @@ export default class Demo extends React.Component {
         });
       scene.addLayer(layer);
     });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/something/wind.md b/dev-demos/features/something/wind.md
new file mode 100644
index 0000000000..be482f6762
--- /dev/null
+++ b/dev-demos/features/something/wind.md
@@ -0,0 +1,2 @@
+### wind
+<code src="./demos/wind.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/threejs/amap1.md b/dev-demos/features/threejs/amap1.md
new file mode 100644
index 0000000000..d532a50102
--- /dev/null
+++ b/dev-demos/features/threejs/amap1.md
@@ -0,0 +1,90 @@
+### threejs - amap1
+```tsx
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import { ThreeLayer, ThreeRender } from '@antv/l7-three';
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { animate, easeInOut } from 'popmotion';
+
+export default () => {
+    useEffect(() => {
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMap({
+          center: [111.4453125, 32.84267363195431],
+          pitch: 45,
+          rotation: 30,
+          zoom: 10,
+        }),
+      });
+      scene.registerRenderService(ThreeRender);
+      scene.on('loaded', () => {
+        const threeJSLayer = new ThreeLayer({
+          enableMultiPassRenderer: false,
+          // @ts-ignore
+          onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
+            threeScene.add(new THREE.AmbientLight(0xffffff));
+            const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
+            sunlight.position.set(0, 80000000, 100000000);
+            sunlight.matrixWorldNeedsUpdate = true;
+            threeScene.add(sunlight);
+
+            let center = scene.getCenter();
+            let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
+            let cubeMaterial = new THREE.MeshNormalMaterial();
+            let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+            layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
+            threeScene.add(cube);
+
+            // 使用 Three.js glTFLoader 加载模型
+            const loader = new GLTFLoader();
+            loader.load(
+              'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
+              (gltf) => {
+                // 根据 GeoJSON 数据放置模型
+                const gltfScene = gltf.scene;
+
+                layer.adjustMeshToMap(gltfScene);
+                layer.setMeshScale(gltfScene, 1000, 1000, 1000);
+
+                layer.setObjectLngLat(
+                  gltfScene,
+                  [ center.lng, center.lat ],
+                  0,
+                );
+
+                const animations = gltf.animations;
+                if (animations && animations.length) {
+                  const mixer = new THREE.AnimationMixer(gltfScene);
+                  const animation = animations[2];
+                  const action = mixer.clipAction(animation);
+                  action.play();
+                  layer.addAnimateMixer(mixer);
+                }
+                // 向场景中添加模型
+                threeScene.add(gltfScene);
+                
+                // 重绘图层
+                layer.render();
+              },
+            );
+          },
+        })
+        .animate(true);
+        scene.addLayer(threeJSLayer);
+      });
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}
+
+```
\ No newline at end of file
diff --git a/dev-demos/features/threejs/amap2.md b/dev-demos/features/threejs/amap2.md
new file mode 100644
index 0000000000..5e4be7dd14
--- /dev/null
+++ b/dev-demos/features/threejs/amap2.md
@@ -0,0 +1,90 @@
+### threejs - amap2
+```tsx
+import { Scene } from '@antv/l7';
+import { GaodeMapV2 } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import { ThreeLayer, ThreeRender } from '@antv/l7-three';
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { animate, easeInOut } from 'popmotion';
+
+export default () => {
+    useEffect(() => {
+      const scene = new Scene({
+        id: 'map',
+        map: new GaodeMapV2({
+          center: [111.4453125, 32.84267363195431],
+          pitch: 45,
+          rotation: 30,
+          zoom: 9,
+        }),
+      });
+      scene.registerRenderService(ThreeRender);
+      scene.on('loaded', () => {
+        const threeJSLayer = new ThreeLayer({
+          enableMultiPassRenderer: false,
+          // @ts-ignore
+          onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
+            threeScene.add(new THREE.AmbientLight(0xffffff));
+            const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
+            sunlight.position.set(0, 80000000, 100000000);
+            sunlight.matrixWorldNeedsUpdate = true;
+            threeScene.add(sunlight);
+
+            let center = scene.getCenter();
+            let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
+            let cubeMaterial = new THREE.MeshNormalMaterial();
+            let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+            layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
+            threeScene.add(cube);
+
+            // 使用 Three.js glTFLoader 加载模型
+            const loader = new GLTFLoader();
+            loader.load(
+              'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
+              (gltf) => {
+                // 根据 GeoJSON 数据放置模型
+                const gltfScene = gltf.scene;
+
+                layer.adjustMeshToMap(gltfScene);
+                layer.setMeshScale(gltfScene, 1000, 1000, 1000);
+
+                layer.setObjectLngLat(
+                  gltfScene,
+                  [ center.lng, center.lat ],
+                  0,
+                );
+
+                const animations = gltf.animations;
+                if (animations && animations.length) {
+                  const mixer = new THREE.AnimationMixer(gltfScene);
+                  const animation = animations[2];
+                  const action = mixer.clipAction(animation);
+                  action.play();
+                  layer.addAnimateMixer(mixer);
+                }
+                // 向场景中添加模型
+                threeScene.add(gltfScene);
+                
+                // 重绘图层
+                layer.render();
+              },
+            );
+          },
+        })
+        .animate(true);
+        scene.addLayer(threeJSLayer);
+      });
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}
+
+```
\ No newline at end of file
diff --git a/dev-demos/features/threejs/amapCar.md b/dev-demos/features/threejs/amapCar.md
new file mode 100644
index 0000000000..f8ce75175d
--- /dev/null
+++ b/dev-demos/features/threejs/amapCar.md
@@ -0,0 +1,250 @@
+### threejs - car
+```tsx
+import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import { ThreeLayer, ThreeRender } from '@antv/l7-three';
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { animate, easeInOut } from 'popmotion';
+let isTravel = false;
+
+function travel(
+  mesh,
+  path,
+  duration,
+  callback
+) {
+  if (path.length < 2 || isTravel) return;
+  isTravel = true;
+  let startIndex = 0;
+  const len = path.length;
+  const currentP = path[0],
+    nextP = path[1];
+  const t = duration / len;
+
+  move(currentP, nextP);
+  function move(currentP, nextP) {
+    animate({
+      from: {
+        x: currentP.x,
+        y: currentP.y,
+        z: currentP.z
+      },
+      to: {
+        x: nextP.x,
+        y: nextP.y,
+        z: nextP.z
+      },
+      ease: easeInOut,
+      duration: t,
+      repeatType: 'loop',
+      onUpdate: o => {
+        mesh.position.set(o.x, o.y, o.z);
+      },
+      onComplete: () => {
+        startIndex++;
+        if (startIndex < len - 1) {
+          const currentP = path[startIndex],
+            nextP = path[startIndex + 1];
+          mesh.lookAt(nextP);
+
+          move(currentP, nextP);
+        } else {
+          isTravel = false;
+          callback && callback();
+        }
+      }
+    });
+  }
+}
+export default () => {
+    useEffect(() => {
+        const scene = new Scene({
+            id: 'map',
+            map: new GaodeMap({
+                center: [ 110, 35.39847 ],
+                pitch: 20,
+                style: 'dark',
+                zoom: 3
+            })
+        });
+
+        scene.on('loaded', () => {
+        scene.registerRenderService(ThreeRender);
+
+        fetch(
+            'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json'
+        )
+            .then(d => d.json())
+            .then(data => {
+            const polygonlayer = new PolygonLayer({})
+                .source(data)
+                .color('rgb(22,119,255)')
+                .shape('fill')
+                .active({
+                enable: true,
+                blend: 0.5
+                })
+                .style({
+                opacity: 0.6,
+                opacityLinear: {
+                    enable: true,
+                    dir: 'out' // in - out
+                }
+                });
+
+            const linelayer = new LineLayer({ })
+                .source(data)
+                .color('rgb(72,169,255)')
+                .shape('line')
+                .size(0.5)
+                .style({
+                opacity: 0.6
+                });
+
+            scene.addLayer(polygonlayer);
+            scene.addLayer(linelayer);
+            });
+
+
+            const threeJSLayer = new ThreeLayer({
+                zIndex: 2,
+                enableMultiPassRenderer: false,
+                onAddMeshes: (threeScene, layer) => {
+                // 添加光
+                threeScene.add(new THREE.AmbientLight(0xffffff));
+                const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
+                sunlight.position.set(0, 80000000, 100000000);
+                sunlight.matrixWorldNeedsUpdate = true;
+                threeScene.add(sunlight);
+
+                const lineData = [
+                    [ 116.71874999999999, 26.745610382199022 ],
+                    [ 117.3779296875, 28.8831596093235 ],
+                    [ 115.75195312499999, 31.466153715024294 ],
+                    [ 113.466796875, 33.32134852669881 ],
+                    [ 113.9501953125, 35.85343961959182 ],
+                    [ 115.400390625, 38.272688535980976 ],
+                    [ 116.5869140625, 40.3130432088809 ],
+                    [ 115.6201171875, 42.261049162113856 ],
+                    [ 112.236328125, 42.94033923363181 ],
+                    [ 109.3798828125, 41.04621681452063 ],
+                    [ 103.84277343749999, 39.80853604144591 ],
+                    [ 98.9208984375, 39.842286020743394 ],
+                    [ 95.2294921875, 40.713955826286046 ],
+                    [ 91.7138671875, 39.87601941962116 ],
+                    [ 90.8349609375, 37.125286284966805 ],
+                    [ 90.3076171875, 35.88905007936091 ],
+                    [ 90.703125, 33.284619968887675 ],
+                    [ 92.94433593749999, 31.98944183792288 ],
+                    [ 96.2841796875, 32.21280106801518 ],
+                    [ 98.87695312499999, 32.0639555946604 ],
+                    [ 102.919921875, 28.459033019728043 ],
+                    [ 107.9736328125, 28.497660832963472 ],
+                    [ 108.10546875, 24.206889622398023 ],
+                    [ 109.072265625, 23.039297747769726 ],
+                    [ 112.763671875, 24.44714958973082 ],
+                    [ 116.54296874999999, 25.958044673317843 ]
+                ];
+
+                const lineCoordData = lineData.map(d => {
+                    return layer.lnglatToCoord(d);
+                });
+
+
+                const rawPoints = [];
+                lineCoordData.map(d => {
+                    rawPoints.push(new THREE.Vector3(d[0], d[1], 0));
+                    return '';
+                });
+                const curve = new THREE.CatmullRomCurve3(rawPoints);
+                const points = curve.getPoints(200);
+                const geometry = new THREE.BufferGeometry().setFromPoints(points);
+
+                const material = new THREE.LineBasicMaterial({ color: new THREE.Color('rgb(22,119,255)') });
+
+                const line = new THREE.LineLoop(geometry, material);
+                threeScene.add(line);
+
+
+                // 使用 Three.js glTFLoader 加载模型
+                const loader = new GLTFLoader();
+                loader.load(
+                    'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/truck/CesiumMilkTruck.gltf', // Truck
+                    gltf => {
+                    // 根据 GeoJSON 数据放置模型
+                    const gltfScene = gltf.scene.clone();
+                    setMaterial(gltfScene);
+                    layer.getSource().data.dataArray.forEach(() => {
+                        layer.adjustMeshToMap(gltfScene);
+                        gltfScene.scale.set(500000, 500000, 500000);
+
+                        const animations = gltf.animations;
+                        if (animations && animations.length) {
+                        const mixer = new THREE.AnimationMixer(gltfScene);
+                        // @ts-ignore
+                        for (let i = 0; i < animations.length; i++) {
+                            const animation = animations[i];
+
+                            const action = mixer.clipAction(animation);
+
+                            action.play();
+                        }
+                        layer.addAnimateMixer(mixer);
+                        }
+
+                        // 向场景中添加模型
+                        threeScene.add(gltfScene);
+                    });
+
+                    travelLoop();
+                    function travelLoop() {
+                        travel(gltfScene, points, 5000, () => {
+                        travelLoop();
+                        });
+                    }
+                    // 重绘图层
+                    layer.render();
+                    }
+                );
+                }
+            })
+                .source({
+                type: 'FeatureCollection',
+                features: [
+                    {
+                    type: 'Feature',
+                    properties: {},
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [ 112, 35.39847 ]
+                    }
+                    }
+                ]
+                })
+                .animate(true);
+            scene.addLayer(threeJSLayer);
+            });
+
+            function setMaterial(object) {
+            if (object.children && object.children.length && object.children.length > 0) {
+                object.children.map(child => setMaterial(child));
+            } else if (object.material) {
+                object.material.side = THREE.DoubleSide;
+            }
+            }
+
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}
+
+```
\ No newline at end of file
diff --git a/dev-demos/features/threejs/mapbox.md b/dev-demos/features/threejs/mapbox.md
new file mode 100644
index 0000000000..76c2ab76b7
--- /dev/null
+++ b/dev-demos/features/threejs/mapbox.md
@@ -0,0 +1,113 @@
+### threejs - Mapbox
+```tsx
+import { Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import { ThreeLayer, ThreeRender } from '@antv/l7-three';
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { animate, easeInOut } from 'popmotion';
+
+export default () => {
+    useEffect(() => {
+      const scene = new Scene({
+        id: 'map',
+        map: new Mapbox({
+          center: [ 111.4453125, 32.84267363195431 ],
+          pitch: 45,
+          rotation: 30,
+          zoom: 12,
+          token: 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w3dHk3dnN4MDYzaDNycDkyMDl2bzh6NiJ9.YIrG9kwUpayLj01f6W23Gw',
+        })
+      });
+
+      scene.on('loaded', () => {
+        scene.registerRenderService(ThreeRender);
+
+        const threeJSLayer = new ThreeLayer({
+          enableMultiPassRenderer: false,
+          onAddMeshes: (threeScene, layer) => {
+            threeScene.add(new THREE.AmbientLight(0xffffff));
+            const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
+            sunlight.position.set(0, 80000000, 100000000);
+            sunlight.matrixWorldNeedsUpdate = true;
+            threeScene.add(sunlight);
+
+            const center = scene.getCenter();
+
+            const cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
+            const cubeMaterial = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide });
+            const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+            layer.setObjectLngLat(cube, [ center.lng + 0.05, center.lat ], 0);
+            threeScene.add(cube);
+
+            // 使用 Three.js glTFLoader 加载模型
+            const loader = new GLTFLoader();
+            loader.load(
+              'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
+              gltf => {
+                const gltfScene = gltf.scene;
+                setDouble(gltfScene);
+                layer.adjustMeshToMap(gltfScene);
+                // gltfScene.scale.set(1000, 1000, 1000)
+                layer.setMeshScale(gltfScene, 100, 100, 100);
+
+                layer.setObjectLngLat(
+                  gltfScene,
+                  [ center.lng, center.lat ],
+                  0
+                );
+
+                const animations = gltf.animations;
+                if (animations && animations.length) {
+                  const mixer = new THREE.AnimationMixer(gltfScene);
+
+                  const animation = animations[2];
+
+                  const action = mixer.clipAction(animation);
+
+                  action.play();
+                  layer.addAnimateMixer(mixer);
+                };
+                let t = 0;
+                setInterval(() => {
+                  t += 0.01;
+                  layer.setObjectLngLat(
+                    gltfScene,
+                    [ center.lng, center.lat + Math.sin(t) * 0.1 ],
+                    0
+                  );
+                }, 16);
+
+                // 向场景中添加模型
+                threeScene.add(gltfScene);
+                // 重绘图层
+                layer.render();
+              }
+            );
+          }
+        })
+          .animate(true);
+        scene.addLayer(threeJSLayer);
+      });
+
+      function setDouble(object) {
+        if (object.children && object.children.length && object.children.length > 0) {
+          object.children.map(child => setDouble(child));
+        } else if (object.material) {
+          object.material.side = THREE.DoubleSide;
+        }
+      }
+    }, [])
+    return (
+        <div
+            id="map"
+            style={{
+                height:'500px',
+                position: 'relative'
+            }}
+        />
+    );
+}
+
+```
\ No newline at end of file
diff --git a/dev-demos/features/tile/basemap.md b/dev-demos/features/tile/basemap.md
new file mode 100644
index 0000000000..c184e89da1
--- /dev/null
+++ b/dev-demos/features/tile/basemap.md
@@ -0,0 +1,3 @@
+### Render Map - Base Tile Map （ L7Layer X 12）
+绘制地图
+<code src="./basemap/basemap.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/tile/basemap/basemap.tsx b/dev-demos/features/tile/basemap/basemap.tsx
new file mode 100644
index 0000000000..2e1223081e
--- /dev/null
+++ b/dev-demos/features/tile/basemap/basemap.tsx
@@ -0,0 +1,191 @@
+// @ts-ignore
+import {
+  Scene,
+  LineLayer,
+  Source,
+  PolygonLayer,
+  PointLayer,
+  TileDebugLayer,
+} from '@antv/l7';
+// @ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      stencil: true,
+      map: new Map({
+        center: [121.268, 29],
+        // zoom: 12,
+        // zoom: 7,
+        zoom: 6,
+      }),
+    });
+
+    const url =
+      'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=';
+    const token =
+      // 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ';
+      'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w3dHk3dnN4MDYzaDNycDkyMDl2bzh6NiJ9.YIrG9kwUpayLj01f6W23Gw';
+    const source = new Source(url + token, {
+      parser: {
+        type: 'mvt',
+        tileSize: 256,
+        // extent: [-180, -85.051129, 179, 85.051129],
+        cancelExtent: true,
+      },
+    });
+    /**
+     * admin
+     * country_label
+     * marine_label
+     * place_label
+     * state_label
+     * water
+     * road
+     * road_label
+     * landuse
+     * landuse_overlay
+     * waterway
+     * tunnel
+     */
+
+    scene.on('loaded', () => {
+      const admin = new LineLayer({
+        sourceLayer: 'admin',
+        usage: 'basemap',
+      })
+        .source(source)
+        .shape('simple')
+        .color('#696969');
+
+      scene.addLayer(admin);
+
+      const road = new LineLayer({
+        sourceLayer: 'road',
+        usage: 'basemap',
+      })
+        .source(source)
+        .shape('simple')
+        .color('#FFA500');
+      scene.addLayer(road);
+
+      const poiLabel = new PointLayer({
+        sourceLayer: 'poi_label',
+        usage: 'basemap',
+        zIndex: 1,
+      })
+        .source(source)
+        .shape('name', 'text')
+        .color('#333')
+        .size(10);
+      scene.addLayer(poiLabel);
+
+      const landuse_overlay = new PolygonLayer({
+        sourceLayer: 'landuse_overlay',
+        usage: 'basemap',
+      })
+        .source(source)
+        .color('#f00');
+      scene.addLayer(landuse_overlay);
+
+      // const waterway = new LineLayer({
+      //   sourceLayer: 'waterway',
+      //   usage: 'basemap',
+      // })
+      //   .source(source)
+      //   .shape('simple')
+      //   // .color('#87CEFA');
+      //   .color('#f00');
+      // scene.addLayer(waterway);
+
+      const tunnel = new LineLayer({
+        sourceLayer: 'tunnel',
+        usage: 'basemap',
+      })
+        .source(source)
+        .shape('simple')
+        // .color('#A9A9A9');
+        .color('#f00');
+      scene.addLayer(tunnel);
+
+      const landuse = new PolygonLayer({
+        sourceLayer: 'landuse',
+        usage: 'basemap',
+      })
+        .source(source)
+        .color('#90EE90');
+      scene.addLayer(landuse);
+
+      const state_label = new PointLayer({
+        sourceLayer: 'state_label',
+        zIndex: 1,
+        usage: 'basemap',
+      })
+        .source(source)
+        .shape('name', 'text')
+        .color('#000')
+        .size(12);
+      scene.addLayer(state_label);
+
+      // const placeLabel = new PointLayer({
+      //   sourceLayer: 'place_label',
+      //   zIndex: 1,
+      //   usage: 'basemap',
+      // })
+      //   .source(source)
+      //   .shape('name', 'text')
+      //   .color('#000')
+      //   .size(8);
+      // scene.addLayer(placeLabel);
+
+      const marineLabel = new PointLayer({
+        sourceColor: 'marine_label',
+        zIndex: 1,
+        usage: 'basemap',
+      })
+        .source(source)
+        .shape('name', 'text')
+        .color('#0ff')
+        .size(15);
+      scene.addLayer(marineLabel);
+
+      const countryLabel = new PointLayer({
+        sourceLayer: 'country_label',
+        zIndex: 2,
+        usage: 'basemap',
+      })
+        .source(source)
+        .shape('name', 'text')
+        .color('#f00')
+        .size(15);
+      scene.addLayer(countryLabel);
+
+      const water = new PolygonLayer({
+        sourceLayer: 'water',
+        usage: 'basemap',
+      })
+        .source(source)
+        .color('#87CEFA');
+      scene.addLayer(water);
+
+      const debugerLayer = new TileDebugLayer({ usage: 'basemap' });
+      scene.addLayer(debugerLayer);
+
+      // scene.on('zoom', () => {
+      //   console.log(scene.getLayers().length)
+      // })
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/tile/basemap/vectormap.tsx b/dev-demos/features/tile/basemap/vectormap.tsx
new file mode 100644
index 0000000000..ee78ccd429
--- /dev/null
+++ b/dev-demos/features/tile/basemap/vectormap.tsx
@@ -0,0 +1,166 @@
+// @ts-ignore
+import {
+  Scene,
+  LineLayer,
+  Source,
+  PolygonLayer,
+  PointLayer,
+  TileDebugLayer,
+} from '@antv/l7';
+// @ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      stencil: true,
+      map: new Map({
+        center: [121.268, 30.3628],
+        // zoom: 12,
+        zoom: 7,
+      }),
+    });
+
+    const url =
+      'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=';
+    const token =
+      // 'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ';
+      'pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w3dHk3dnN4MDYzaDNycDkyMDl2bzh6NiJ9.YIrG9kwUpayLj01f6W23Gw';
+    const source = new Source(url + token, {
+      parser: {
+        type: 'mvt',
+        tileSize: 256,
+        // extent: [-180, -85.051129, 179, 85.051129],
+      },
+    });
+    /**
+     * admin
+     * country_label
+     * marine_label
+     * place_label
+     * state_label
+     * water
+     * road
+     * road_label
+     * landuse
+     * landuse_overlay
+     * waterway
+     * tunnel
+     */
+
+    scene.on('loaded', () => {
+      const admin = new LineLayer({
+        sourceLayer: 'admin',
+      })
+        .source(source)
+        .shape('simple')
+        .size(1)
+        .color('#696969');
+      scene.addLayer(admin);
+
+      const road = new LineLayer({
+        sourceLayer: 'road',
+      })
+        .source(source)
+        .shape('simple')
+        .color('#FFA500');
+      scene.addLayer(road);
+
+      // const landuse_overlay = new PolygonLayer({
+      //   sourceLayer: 'landuse_overlay',
+      // })
+      //   .source(source)
+      //   .color('#f00');
+      // scene.addLayer(landuse_overlay);
+
+      // const waterway = new LineLayer({
+      //   sourceLayer: 'waterway',
+      // })
+      //   .source(source)
+      //   .shape('simple')
+      //   .color('#87CEFA');
+      // scene.addLayer(waterway);
+
+      // const tunnel = new LineLayer({
+      //   sourceLayer: 'tunnel',
+      // })
+      //   .source(source)
+      //   .shape('simple')
+      //   // .color('#A9A9A9');
+      //   .color('#f00');
+      // scene.addLayer(tunnel);
+
+      const landuse = new PolygonLayer({
+        sourceLayer: 'landuse',
+      })
+        .source(source)
+        .color('#90EE90');
+      scene.addLayer(landuse);
+
+      const state_label = new PointLayer({
+        sourceLayer: 'state_label',
+        zIndex: 1,
+      })
+        .source(source)
+        .shape('name', 'text')
+        .color('#000')
+        .size(10);
+      scene.addLayer(state_label);
+
+      // const placeLabel = new PointLayer({
+      //   sourceLayer: 'place_label',
+      //   zIndex: 1,
+      // })
+      //   .source(source)
+      //   .shape('name', 'text')
+      //   .color('#000')
+      //   .size(8);
+      // scene.addLayer(placeLabel);
+
+      const marineLabel = new PointLayer({
+        sourceColor: 'marine_label',
+        zIndex: 1,
+      })
+        .source(source)
+        .shape('name', 'text')
+        .color('#0ff')
+        .size(15);
+      scene.addLayer(marineLabel);
+
+      const countryLabel = new PointLayer({
+        sourceLayer: 'country_label',
+        zIndex: 2,
+      })
+        .source(source)
+        .shape('name', 'text')
+        .color('#f00')
+        .size(15);
+      scene.addLayer(countryLabel);
+
+      const water = new PolygonLayer({
+        sourceLayer: 'water',
+      })
+        .source(source)
+        .color('#87CEFA');
+      scene.addLayer(water);
+
+      const debugerLayer = new TileDebugLayer();
+      scene.addLayer(debugerLayer);
+
+      // scene.on('zoom', () => {
+      //   console.log(scene.getLayers().length)
+      // })
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/tile/geojson-vt.md b/dev-demos/features/tile/geojson-vt.md
deleted file mode 100644
index fc6139abaa..0000000000
--- a/dev-demos/features/tile/geojson-vt.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### geojson - vt
-<code src="./geojson-vt.tsx"></code>
\ No newline at end of file
diff --git a/stories/tile/components/RasterImageDataTile.tsx b/dev-demos/features/tile/raster/imageDataMapping.tsx
similarity index 56%
rename from stories/tile/components/RasterImageDataTile.tsx
rename to dev-demos/features/tile/raster/imageDataMapping.tsx
index a201ba9350..2c60ba30a2 100644
--- a/stories/tile/components/RasterImageDataTile.tsx
+++ b/dev-demos/features/tile/raster/imageDataMapping.tsx
@@ -1,19 +1,13 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import { RasterLayer, Scene, LineLayer, ILayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
+//@ts-ignore
+import { Scene, RasterLayer } from '@antv/l7';
+//@ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
 
-export default class OsmRasterTile extends React.Component {
-  private scene: Scene;
-  private gridLayer: ILayer;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map2',
       map: new Map({
         center: [130, 30],
         pitch: 0,
@@ -22,9 +16,7 @@ export default class OsmRasterTile extends React.Component {
       }),
     });
 
-    // this.scene.on('mapchange', this.updateGridLayer);
-
-    this.scene.on('loaded', () => {
+    scene.on('loaded', () => {
       const layer = new RasterLayer({})
         .source(
           'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
@@ -32,17 +24,15 @@ export default class OsmRasterTile extends React.Component {
             parser: {
               type: 'rasterTile',
               tileSize: 256,
-
               zoomOffset: 0,
               updateStrategy: 'overlap',
             },
           },
         )
-        .shape('dataImage')
+        .shape('tileDataImage')
         .style({
           clampLow: false,
           clampHigh: false,
-          // opacity: 0.8,
           domain: [0, 8000],
           rampColors: {
             colors: [
@@ -63,24 +53,16 @@ export default class OsmRasterTile extends React.Component {
           pixelConstantRGB: 1,
         });
 
-      this.scene.addLayer(layer);
+      scene.addLayer(layer);
     });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
+  }, []);
+  return (
+    <div
+      id="map2"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/tile/rastertile.tsx b/dev-demos/features/tile/raster/satellite.tsx
similarity index 84%
rename from dev-demos/features/tile/rastertile.tsx
rename to dev-demos/features/tile/raster/satellite.tsx
index ee4b1ee5af..c708216675 100644
--- a/dev-demos/features/tile/rastertile.tsx
+++ b/dev-demos/features/tile/raster/satellite.tsx
@@ -35,14 +35,11 @@ export default () => {
       zIndex: 0,
     });
     layerTile2.source(
-      // '//t3.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f1f2021a42d110057042177cd22d856f',
       'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
       {
         parser: {
           type: 'rasterTile',
           tileSize: 256,
-          //   zoomOffset: 0
-          // zoomOffset: 1,
         },
       },
     );
diff --git a/dev-demos/features/tile/rasterData.md b/dev-demos/features/tile/rasterData.md
new file mode 100644
index 0000000000..b681b0f55c
--- /dev/null
+++ b/dev-demos/features/tile/rasterData.md
@@ -0,0 +1,10 @@
+### Raster - RasterData
+数据栅格
+#### 加载 tiff
+<code src="./rasterData/loadTiff.tsx"></code>
+
+#### 加载 lerc
+<code src="./rasterData/loadLerc.tsx"></code>
+
+#### 加载 image
+<code src="./rasterData/loadImage.tsx"></code>
\ No newline at end of file
diff --git a/stories/layerbuild/components/RasterDataTile.tsx b/dev-demos/features/tile/rasterData/loadImage.tsx
similarity index 61%
rename from stories/layerbuild/components/RasterDataTile.tsx
rename to dev-demos/features/tile/rasterData/loadImage.tsx
index 99d765cf38..ba7d19a8c7 100644
--- a/stories/layerbuild/components/RasterDataTile.tsx
+++ b/dev-demos/features/tile/rasterData/loadImage.tsx
@@ -1,14 +1,13 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { RasterLayer } from '@antv/l7-layers';
+//@ts-ignore
+import { Scene, RasterLayer } from '@antv/l7';
+//@ts-ignore
 import { Map } from '@antv/l7-maps';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
-export default class Demo extends React.Component {
-  public async componentDidMount() {
+export default () => {
+  useEffect(() => {
     const scene = new Scene({
-      id: 'map',
+      id: 'map2',
       map: new Map({
         center: [105.732421875, 32.24997445586331],
         pitch: 0,
@@ -20,17 +19,14 @@ export default class Demo extends React.Component {
     const canvas = document.createElement('canvas');
     canvas.width = 256;
     canvas.height = 256;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
 
     scene.on('loaded', () => {
       const layer = new RasterLayer();
       layer
         .source(
-          // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-          // 'https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{zoom}/{x}/{y}.pngraw?sku=YOUR_MAPBOX_SKU_TOKEN&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // 'https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/{z}/{y}/{x}.tif',
-          // 'http://rd1yhmrzc.hn-bkt.clouddn.com/Mapnik/{z}/{x}/{y}.png',
+          'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2w3dHk3dnN4MDYzaDNycDkyMDl2bzh6NiJ9.YIrG9kwUpayLj01f6W23Gw',
+        
           {
             parser: {
               type: 'rasterTile',
@@ -46,8 +42,8 @@ export default class Demo extends React.Component {
                 const img = await createImageBitmap(blob);
                 ctx.clearRect(0, 0, 256, 256);
                 ctx.drawImage(img, 0, 0, 256, 256);
-                let imgData = ctx.getImageData(0, 0, 256, 256).data;
-                let arr = [];
+                const imgData = ctx.getImageData(0, 0, 256, 256).data;
+                const arr: number[] = [];
                 for (let i = 0; i < imgData.length; i += 4) {
                   const R = imgData[i];
                   const G = imgData[i + 1];
@@ -83,22 +79,18 @@ export default class Demo extends React.Component {
           },
         });
 
-      scene.addLayer(layer);
+      scene.addLayer(layer)
+    
     });
-  }
+  }, []);
 
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
+  return (
+    <div
+      id="map2"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
\ No newline at end of file
diff --git a/dev-demos/features/tile/rasterData/loadImageMask.tsx b/dev-demos/features/tile/rasterData/loadImageMask.tsx
new file mode 100644
index 0000000000..ca9df919d0
--- /dev/null
+++ b/dev-demos/features/tile/rasterData/loadImageMask.tsx
@@ -0,0 +1,98 @@
+//@ts-ignore
+import { Scene, RasterLayer } from '@antv/l7';
+//@ts-ignore
+import { Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map3',
+      stencil: true,
+      map: new Mapbox({
+        center: [100, 30],
+        pitch: 0,
+        style: 'blank',
+        zoom: 4,
+      }),
+    });
+    const canvas = document.createElement('canvas');
+    canvas.width = 256;
+    canvas.height = 256;
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const layer = new RasterLayer({
+            mask: true,
+            maskfence: data,
+          });
+          layer
+            .source(
+              'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+              {
+                parser: {
+                  type: 'rasterTile',
+                  dataType: 'arraybuffer',
+                  tileSize: 256,
+             
+                  format: async (data: any) => {
+                    const blob: Blob = new Blob([new Uint8Array(data)], {
+                      type: 'image/png',
+                    });
+                    const img = await createImageBitmap(blob);
+                    ctx.clearRect(0, 0, 256, 256);
+                    ctx.drawImage(img, 0, 0, 256, 256);
+
+                    const imgData = ctx.getImageData(0, 0, 256, 256).data;
+                    const arr: number[] = [];
+                    for (let i = 0; i < imgData.length; i += 4) {
+                      arr.push(imgData[i]);
+                    }
+                    return {
+                      rasterData: arr,
+                      width: 256,
+                      height: 256,
+                    };
+                  },
+                },
+              },
+            )
+            .style({
+              opacity: 1,
+              domain: [0, 256],
+              clampLow: true,
+              rampColors: {
+                colors: [
+
+                  'rgb(0,0,255)',
+                  'rgb(0,0,0)',
+                  'rgb(0,255,0)',
+                  'rgb(255,0,0)',
+                  'rgb(255,0,0)',
+                ],
+                positions: [0, 0.25, 0.5, 0.75, 1.0],
+              },
+            })
+            .select(true);
+
+          scene.addLayer(layer);
+
+       
+        });
+    });
+  }, []);
+
+  return (
+    <div
+      id="map3"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
\ No newline at end of file
diff --git a/dev-demos/features/tile/rasterData/loadLerc.tsx b/dev-demos/features/tile/rasterData/loadLerc.tsx
new file mode 100644
index 0000000000..bda0f2fe18
--- /dev/null
+++ b/dev-demos/features/tile/rasterData/loadLerc.tsx
@@ -0,0 +1,68 @@
+//@ts-ignore
+import { RasterLayer, Scene } from '@antv/l7';
+//@ts-ignore
+import { Map } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import * as Lerc from 'lerc';
+
+export default () => {
+
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'lerc',
+      map: new Map({
+        center: [120, 30],
+        style: 'blank',
+        zoom: 3
+      }),
+    });
+
+    scene.on('loaded', () => {
+      const layer = new RasterLayer();
+      layer
+        .source(
+          'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer/tile/{z}/{y}/{x}',
+          {
+            parser: {
+              type: 'rasterTile',
+              dataType: 'arraybuffer',
+              tileSize: 256,
+              format: async (data: any) => {
+                const image = Lerc.decode(data);
+                return {
+                  rasterData: image.pixels[0],
+                  width: image.width,
+                  height: image.height,
+                };
+              },
+            },
+          },
+        )
+        .style({
+          domain: [0, 1024],
+          rampColors: {
+            colors: [ '#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#045a8d', '#023858' ],
+            positions: [ 0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0 ],
+          },
+        })
+        .select(true);
+
+      scene.addLayer(layer);
+    });
+
+  
+    return () => {
+      scene.destroy();
+    };
+  }, []);
+
+  return (
+    <div
+      id="lerc"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/tile/rasterData/loadTiff.tsx b/dev-demos/features/tile/rasterData/loadTiff.tsx
new file mode 100644
index 0000000000..c3d1ccf2b3
--- /dev/null
+++ b/dev-demos/features/tile/rasterData/loadTiff.tsx
@@ -0,0 +1,131 @@
+import { RasterLayer, Scene, Source } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+import * as GeoTIFF from 'geotiff';
+
+const colorList = [
+  '#419bdf', // Water
+  '#419bdf',
+
+  '#397d49', // Tree
+  '#397d49',
+
+  '#88b053', // Grass
+  '#88b053',
+
+  '#7a87c6', // vegetation
+  '#7a87c6',
+
+  '#e49635', // Crops
+  '#e49635',
+
+  '#dfc35a', // shrub
+  '#dfc35a',
+
+  '#c4281b', // Built Area
+  '#c4281b',
+
+  '#a59b8f', // Bare ground
+  '#a59b8f',
+
+  '#a8ebff', // Snow
+  '#a8ebff',
+
+  '#616161', // Clouds
+  '#616161'
+];
+const positions = [
+  0.0,
+  0.1,
+  0.1,
+  0.2,
+  0.2,
+  0.3,
+  0.3,
+  0.4,
+  0.4,
+  0.5,
+  0.5,
+  0.6,
+  0.6,
+  0.7,
+  0.7,
+  0.8,
+  0.8,
+  0.9,
+  0.9,
+  1.0
+];
+export default () => {
+
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      stencil: true,
+      map: new GaodeMap({
+        center: [ 116, 27 ],
+        zoom: 6,
+        style: 'dark'
+      })
+    });
+    
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/bmw-prod/fccd80c0-2611-49f9-9a9f-e2a4dd12226f.json'
+      )
+        .then(res => res.json())
+        .then(maskData => {
+          const layer = new RasterLayer({
+            mask: true,
+            maskfence: maskData
+          });
+    
+          const tileSource = new Source('https://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff',
+            {
+              parser: {
+                type: 'rasterTile',
+                dataType: 'arraybuffer',
+                tileSize: 256,
+                maxZoom: 13.1,
+                format: async data => {
+                  const tiff = await GeoTIFF.fromArrayBuffer(data);
+                  const image = await tiff.getImage();
+                  const width = image.getWidth();
+                  const height = image.getHeight();
+                  const values = await image.readRasters();
+                  return { rasterData: values[0], width, height };
+                }
+              }
+            });
+    
+          layer.source(tileSource)
+            .style({
+              domain: [ 0.001, 11.001 ],
+              clampLow: false,
+              rampColors: {
+                colors: colorList,
+                positions
+              }
+            });
+    
+          scene.addLayer(layer);
+        });
+    });
+    
+
+  
+    return () => {
+      scene.destroy();
+    };
+  }, []);
+
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/tile/rasterDataImage.md b/dev-demos/features/tile/rasterDataImage.md
new file mode 100644
index 0000000000..87f629e447
--- /dev/null
+++ b/dev-demos/features/tile/rasterDataImage.md
@@ -0,0 +1,5 @@
+### Raster - RasterDataImage
+raster 图片瓦片
+
+#### 图片瓦片 - 颜色映射
+<code src="./raster/imageDataMapping.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/tile/rasterDataMask.md b/dev-demos/features/tile/rasterDataMask.md
new file mode 100644
index 0000000000..6404a3beb3
--- /dev/null
+++ b/dev-demos/features/tile/rasterDataMask.md
@@ -0,0 +1,5 @@
+### Raster - RasterData - Mask
+数据栅格 + Mask
+
+#### 加载 image + Mask
+<code src="./rasterData/loadImageMask.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/tile/rasterImage.md b/dev-demos/features/tile/rasterImage.md
new file mode 100644
index 0000000000..5cf250bd80
--- /dev/null
+++ b/dev-demos/features/tile/rasterImage.md
@@ -0,0 +1,8 @@
+### Raster - RasterImage
+raster 图片瓦片
+
+#### 卫星图
+<code src="./raster/satellite.tsx"></code>
+
+#### 图片瓦片 - 颜色映射
+<code src="./raster/imageDataMapping.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/tile/rastertile.md b/dev-demos/features/tile/rastertile.md
deleted file mode 100644
index eeaa53083b..0000000000
--- a/dev-demos/features/tile/rastertile.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### Raster Tile
-<code src="./rastertile.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/tile/testTile.md b/dev-demos/features/tile/testTile.md
deleted file mode 100644
index 79ed00771f..0000000000
--- a/dev-demos/features/tile/testTile.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### Test Tile
-<code src="./testTile.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/tile/vector.md b/dev-demos/features/tile/vector.md
new file mode 100644
index 0000000000..c68b2304c0
--- /dev/null
+++ b/dev-demos/features/tile/vector.md
@@ -0,0 +1,13 @@
+### Vector
+
+#### vector point
+<code src="./vector/point.tsx"></code>
+
+#### vector line
+<code src="./vector/line.tsx"></code>
+
+#### geojson-vt
+<code src="./vector/geojson-vt.tsx"></code>
+
+#### debugLayer
+<code src="./vector/debugLayer.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/tile/testTile.tsx b/dev-demos/features/tile/vector/debugLayer.tsx
similarity index 94%
rename from dev-demos/features/tile/testTile.tsx
rename to dev-demos/features/tile/vector/debugLayer.tsx
index 394ed4a59d..9aa4abb14c 100644
--- a/dev-demos/features/tile/testTile.tsx
+++ b/dev-demos/features/tile/vector/debugLayer.tsx
@@ -5,7 +5,7 @@ import React, { useEffect } from 'react';
 export default () => {
   useEffect(() => {
     const scene = new Scene({
-      id: 'map',
+      id: 'test',
       // stencil: true,
       map: new Mapbox({
         center: [121.268, 30.3628],
@@ -23,7 +23,7 @@ export default () => {
   }, []);
   return (
     <div
-      id="map"
+      id="test"
       style={{
         height: '500px',
         position: 'relative',
diff --git a/dev-demos/features/tile/geojson-vt.tsx b/dev-demos/features/tile/vector/geojson-vt.tsx
similarity index 87%
rename from dev-demos/features/tile/geojson-vt.tsx
rename to dev-demos/features/tile/vector/geojson-vt.tsx
index 57d13f0936..3352cec557 100644
--- a/dev-demos/features/tile/geojson-vt.tsx
+++ b/dev-demos/features/tile/vector/geojson-vt.tsx
@@ -7,7 +7,7 @@ import React, { useEffect } from 'react';
 export default () => {
   useEffect(() => {
     const scene = new Scene({
-      id: 'map',
+      id: 'geojsonvt',
       stencil: true,
       map: new Mapbox({
         center: [121.268, 30.3628],
@@ -28,7 +28,7 @@ export default () => {
             tileSize: 256,
             zoomOffset: 0,
             maxZoom: 9,
-            extent: [-180, -85.051129, 179, 85.051129],
+            // extent: [-180, -85.051129, 179, 85.051129],
           },
         });
 
@@ -46,9 +46,14 @@ export default () => {
         })
           .source(source)
           .color('COLOR')
-          .active(true);
+          .active(true)
+          .style({
+            opacity: 0.6,
+          });
         scene.addLayer(polygon);
 
+        // scene.on('zoom', (e) => console.log(scene.getZoom()));
+
         // const point = new PointLayer({
         //   featureId: 'COLOR',
         //   sourceLayer: 'testName', // woods hillshade contour ecoregions ecoregions2 city
@@ -62,7 +67,7 @@ export default () => {
   }, []);
   return (
     <div
-      id="map"
+      id="geojsonvt"
       style={{
         height: '500px',
         position: 'relative',
diff --git a/dev-demos/features/tile/vectortile.tsx b/dev-demos/features/tile/vector/line.tsx
similarity index 95%
rename from dev-demos/features/tile/vectortile.tsx
rename to dev-demos/features/tile/vector/line.tsx
index 44ee82e5da..14c90e9c79 100644
--- a/dev-demos/features/tile/vectortile.tsx
+++ b/dev-demos/features/tile/vector/line.tsx
@@ -7,7 +7,7 @@ import React, { useEffect } from 'react';
 export default () => {
   useEffect(() => {
     const scene = new Scene({
-      id: 'map',
+      id: 'line',
       stencil: true,
       map: new Mapbox({
         center: [121.268, 30.3628],
@@ -34,8 +34,7 @@ export default () => {
           },
         },
       )
-      .shape('simple')
-
+      // .shape('simple')
       .color('COLOR')
       .size(2)
       .select(true);
@@ -49,7 +48,7 @@ export default () => {
   }, []);
   return (
     <div
-      id="map"
+      id="line"
       style={{
         height: '500px',
         position: 'relative',
diff --git a/dev-demos/features/tile/vectorPointTile.tsx b/dev-demos/features/tile/vector/point.tsx
similarity index 98%
rename from dev-demos/features/tile/vectorPointTile.tsx
rename to dev-demos/features/tile/vector/point.tsx
index e84aa1e68c..fbce15100f 100644
--- a/dev-demos/features/tile/vectorPointTile.tsx
+++ b/dev-demos/features/tile/vector/point.tsx
@@ -58,7 +58,7 @@ const list = [
 export default () => {
   useEffect(() => {
     const scene = new Scene({
-      id: 'map',
+      id: 'point',
       stencil: true,
       map: new Mapbox({
         center: [121.268, 30.3628],
@@ -108,7 +108,7 @@ export default () => {
   }, []);
   return (
     <div
-      id="map"
+      id="point"
       style={{
         height: '500px',
         position: 'relative',
diff --git a/dev-demos/features/tile/vectorPointTile.md b/dev-demos/features/tile/vectorPointTile.md
deleted file mode 100644
index 6db9e09a8e..0000000000
--- a/dev-demos/features/tile/vectorPointTile.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### Vector Point Tile
-<code src="./vectorPointTile.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/tile/vectormap.md b/dev-demos/features/tile/vectormap.md
new file mode 100644
index 0000000000..911c47aa2a
--- /dev/null
+++ b/dev-demos/features/tile/vectormap.md
@@ -0,0 +1,3 @@
+### Render Map - Vector Tile Map
+绘制地图
+<code src="./basemap/vectormap.tsx"></code>
\ No newline at end of file
diff --git a/dev-demos/features/tile/vectortile.md b/dev-demos/features/tile/vectortile.md
deleted file mode 100644
index 89472532cf..0000000000
--- a/dev-demos/features/tile/vectortile.md
+++ /dev/null
@@ -1,2 +0,0 @@
-### Vector Tile
-<code src="./vectortile.tsx"></code>
\ No newline at end of file
diff --git a/packages/component/src/control/layer.ts b/packages/component/src/control/layer.ts
index c48c215f21..9c088bb13a 100644
--- a/packages/component/src/control/layer.ts
+++ b/packages/component/src/control/layer.ts
@@ -125,11 +125,11 @@ export default class Layers extends Control {
   }
   private initLayers() {
     const { baseLayers = {}, overlayers = {} } = this.controlOption;
-    Object.keys(baseLayers).forEach((name: string, index: number) => {
+    Object.keys(baseLayers).forEach((name: string) => {
       // baseLayers[name].once('inited', this.update);
       this.addLayer(baseLayers[name], name, false);
     });
-    Object.keys(overlayers).forEach((name: any, index: number) => {
+    Object.keys(overlayers).forEach((name: any) => {
       // overlayers[name].once('inited', this.update);
       this.addLayer(overlayers[name], name, true);
     });
diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts
index e700e29097..6a25de1f45 100644
--- a/packages/component/src/marker.ts
+++ b/packages/component/src/marker.ts
@@ -54,7 +54,7 @@ export default class Marker extends EventEmitter {
     this.scene = scene;
     this.mapsService = scene.get<IMapService>(TYPES.IMapService);
     this.sceneSerive = scene.get<ISceneService>(TYPES.ISceneService);
-    const { element, draggable } = this.markerOption;
+    const { element } = this.markerOption;
     // this.sceneSerive.getSceneContainer().appendChild(element as HTMLElement);
     this.mapsService.getMarkerContainer().appendChild(element as HTMLElement);
     this.registerMarkerEvent(element as HTMLElement);
@@ -189,6 +189,7 @@ export default class Marker extends EventEmitter {
     return this.markerOption.offsets;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public setDraggable(draggable: boolean) {
     throw new Error('Method not implemented.');
   }
@@ -214,6 +215,7 @@ export default class Marker extends EventEmitter {
     DOM.setTransform(element as HTMLElement, `${anchorTranslate[anchor]}`);
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private onMapClick(e: MouseEvent) {
     const { element } = this.markerOption;
     if (this.popup && element) {
@@ -344,10 +346,13 @@ export default class Marker extends EventEmitter {
       lngLat: this.lngLat,
     });
   };
+  
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private addDragHandler(e: MouseEvent) {
     throw new Error('Method not implemented.');
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private onUp(e: MouseEvent) {
     throw new Error('Method not implemented.');
   }
diff --git a/packages/core/src/inversify.config.ts b/packages/core/src/inversify.config.ts
index 585f9c9b4b..e4b58adf83 100644
--- a/packages/core/src/inversify.config.ts
+++ b/packages/core/src/inversify.config.ts
@@ -125,6 +125,7 @@ export const lazyMultiInject = (
     original.call(this, proto, key);
     if (descriptor) {
       // return link to proto, so own value wont be 'undefined' after component's creation
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       descriptor!.initializer = () => {
         return proto[key];
       };
diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts
index 6262866062..87e1da06cb 100644
--- a/packages/core/src/services/interaction/InteractionService.ts
+++ b/packages/core/src/services/interaction/InteractionService.ts
@@ -107,7 +107,7 @@ export default class InteractionService extends EventEmitter
         this.hammertime = hammertime;
       }
 
-      // // TODO: 根据场景注册事件到 L7 canvas 上
+      // Tip: 根据场景注册事件到 L7 canvas 上
     }
   }
   private removeEventListenerOnMap() {
diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts
index c0fca85a33..11fc388a7f 100644
--- a/packages/core/src/services/interaction/PickingService.ts
+++ b/packages/core/src/services/interaction/PickingService.ts
@@ -9,7 +9,7 @@ import {
   IInteractionTarget,
   InteractionEvent,
 } from '../interaction/IInteractionService';
-import { ILayer, ILayerService } from '../layer/ILayerService';
+import { ILayer, ILayerService, ITileLayer } from '../layer/ILayerService';
 import { ILngLat, IMapService } from '../map/IMapService';
 import { gl } from '../renderer/gl';
 import { IFramebuffer } from '../renderer/IFramebuffer';
@@ -303,7 +303,7 @@ export default class PickingService implements IPickingService {
           .getLayers()
           .filter((l) => l.tileLayer)
           .map((l) => {
-            l.tileLayer.clearPickState();
+            (l.tileLayer as ITileLayer).clearPickState();
           });
       }
     }
@@ -322,24 +322,29 @@ export default class PickingService implements IPickingService {
     }
   }
   private async pickingAllLayer(target: IInteractionTarget) {
-    if (
-      // TODO: this.alreadyInPicking 避免多次重复拾取
-      this.alreadyInPicking ||
-      // TODO: this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作
-      this.layerService.alreadyInRendering ||
-      // Tip: this.interactionService.dragging amap2 在点击操作的时候同时会触发 dragging 的情况（避免舍去）
-      this.interactionService.indragging ||
-      // TODO: 判断当前 是都进行 shader pick 拾取判断
-      !this.layerService.getShaderPickStat()
-    ) {
-      return;
-    }
+    // 判断是否进行拾取操作
+    if (!this.isPickingAllLayer()) return;
+
     this.alreadyInPicking = true;
-    await this.pickingLayers(target);
+    await this.pickingLayers(target); 
     this.layerService.renderLayers();
     this.alreadyInPicking = false;
   }
 
+  private isPickingAllLayer() {
+    // this.alreadyInPicking 避免多次重复拾取
+    if(this.alreadyInPicking) return false;
+    // this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作
+    if(this.layerService.alreadyInRendering) return false;
+    // this.interactionService.dragging amap2 在点击操作的时候同时会触发 dragging 的情况（避免舍去）
+    if(this.interactionService.indragging) return false;
+    // 判断当前进行 shader pick 拾取判断
+    if(!this.layerService.getShaderPickStat()) return false;
+
+    // 进行拾取
+    return true;
+  }
+
   private resizePickingFBO() {
     const { getContainer } = this.rendererService;
     let { width, height } = this.getContainerSize(
@@ -359,10 +364,8 @@ export default class PickingService implements IPickingService {
   }
   private async pickingLayers(target: IInteractionTarget) {
     const {
-      getViewportSize,
       useFramebuffer,
       clear,
-      getContainer,
     } = this.rendererService;
     this.resizePickingFBO();
 
@@ -387,12 +390,12 @@ export default class PickingService implements IPickingService {
             });
           // Tip: clear last picked tilelayer state
           this.pickedTileLayers.map((pickedTileLayer) =>
-            pickedTileLayer.tileLayer?.clearPick(target.type),
+            (pickedTileLayer.tileLayer as ITileLayer)?.clearPick(target.type),
           );
 
           // Tip: 如果当前 layer 是瓦片图层，则走瓦片图层独立的拾取逻辑
-          if (layer.tileLayer) {
-            return layer.tileLayer.pickLayers(target);
+          if (layer.tileLayer && (layer.tileLayer as ITileLayer).pickLayers) {
+            return (layer.tileLayer as ITileLayer).pickLayers(target);
           }
 
           layer.hooks.beforePickingEncode.call();
diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts
index 26bf9bd66e..3d9618e6a6 100644
--- a/packages/core/src/services/layer/ILayerService.ts
+++ b/packages/core/src/services/layer/ILayerService.ts
@@ -19,6 +19,7 @@ import {
   IPostProcessingPass,
 } from '../renderer/IMultiPassRenderer';
 import { IRendererService } from '../renderer/IRendererService';
+import { ITexture2D } from '../renderer/ITexture2D';
 import { IUniform } from '../renderer/IUniform';
 import { ISource, ISourceCFG, ITransform } from '../source/ISourceService';
 import {
@@ -82,7 +83,7 @@ export interface ILayerModel {
   buildModels(callbackModel: (models: IModel[]) => void): void;
   initModels(callbackModel: (models: IModel[]) => void): void;
   needUpdate(): boolean;
-  clearModels(): void;
+  clearModels(refresh?: boolean): void;
 
   // canvasLayer
   clearCanvas?(): void;
@@ -135,8 +136,9 @@ export interface ISubLayerStyles {
  * For tile subLayer
  */
 export interface ISubLayerInitOptions {
+  usage?: string|undefined;
   layerType: string;
-  transforms: ITransform[];
+  transforms?: ITransform[];
   shape?: string | string[] | IScaleValue;
   // options
   zIndex: number;
@@ -149,13 +151,16 @@ export interface ISubLayerInitOptions {
 
   opacity: number;
   color?: IScaleValue;
+  basemapColor?: string;
   size?: IScaleValue;
+  basemapSize?: number;
 
   // raster tiff
   domain?: [number, number];
   clampLow?: boolean;
   clampHigh?: boolean;
   rampColors?: IColorRamp;
+  colorTexture?: ITexture2D;
   // 在初始化的时候使用
   rampColorsData?: ImageData | IImagedata;
 
@@ -182,11 +187,10 @@ export interface ITilePickManager {
   pickRender(layers: ILayer[], target: IInteractionTarget): boolean;
 }
 
-export interface ITileLayerManager {
+export interface IBaseTileLayerManager {
   sourceLayer: string;
   parent: ILayer;
   children: ILayer[];
-  tilePickManager: ITilePickManager;
 
   createTile(tile: Tile): { layers: ILayer[]; layerIDList: string[] };
 
@@ -198,21 +202,26 @@ export interface ITileLayerManager {
   clearChild(): void;
   hasChild(layer: ILayer): boolean;
   render(isPicking?: boolean): void;
-
-  pickLayers(target: IInteractionTarget): boolean;
-
   updateLayersConfig(layers: ILayer[], key: string, value: any): void;
 }
 
-export interface ITileLayer {
+export interface ITileLayerManager extends IBaseTileLayerManager{
+  tilePickManager: ITilePickManager;
+  pickLayers(target: IInteractionTarget): boolean;
+}
+
+export interface IBaseTileLayer {
   type: string;
   sourceLayer: string;
   parent: ILayer;
-  tileLayerManager: ITileLayerManager;
+  tileLayerManager: IBaseTileLayerManager;
   tilesetManager: TilesetManager | undefined;
   children: ILayer[];
   scaleField: any;
   render(isPicking?: boolean): void;
+}
+export interface ITileLayer extends IBaseTileLayer{
+  tileLayerManager: ITileLayerManager;
   pickLayers(target: IInteractionTarget): boolean;
   clearPick(type: string): void;
   clearPickState(): void;
@@ -260,7 +269,7 @@ export interface ILayer {
   layerModelNeedUpdate: boolean;
   styleNeedUpdate: boolean;
   layerModel: ILayerModel;
-  tileLayer: ITileLayer;
+  tileLayer: IBaseTileLayer;
   layerChildren: ILayer[]; // 在图层中添加子图层
   masks: ILayer[]; // 图层的 mask 列表
   sceneContainer: Container | undefined;
@@ -295,6 +304,7 @@ export interface ILayer {
   // 初始化 layer 的时候指定 layer type 类型（）兼容空数据的情况
   layerType?: string | undefined;
   isVector?: boolean;
+  isTileLayer?: boolean;
   triangulation?: Triangulation | undefined;
 
   /**
@@ -525,6 +535,7 @@ export interface ILayerConfig {
   cursorEnabled?: boolean;
   cursor?: string;
   forward: boolean; // 正方向
+  usage?: string; // 指定图层的使用类型 - 用户地图底图绘制的优化
 
   /**
    * 开启拾取
@@ -580,6 +591,7 @@ export interface ILayerConfig {
 /**
  * 提供 Layer 管理服务
  */
+
 export interface ILayerService {
   pickedLayerId: number;
   clock: Clock;
@@ -606,7 +618,9 @@ export interface ILayerService {
   remove(layer: ILayer, parentLayer?: ILayer): void;
   removeAllLayers(): void;
   updateLayerRenderList(): void;
-  renderLayers(type?: string): void;
+  reRender(): void;
+  throttleRenderLayers(): void;
+  renderLayers(): void;
   setEnableRender(flag: boolean): void;
   getOESTextureFloat(): boolean;
 
diff --git a/packages/core/src/services/layer/IStyleAttributeService.ts b/packages/core/src/services/layer/IStyleAttributeService.ts
index b2f505603d..9d054ce1fc 100644
--- a/packages/core/src/services/layer/IStyleAttributeService.ts
+++ b/packages/core/src/services/layer/IStyleAttributeService.ts
@@ -184,10 +184,6 @@ export interface IStyleAttributeUpdateOptions {
 }
 
 export interface IStyleAttributeService {
-  // registerDefaultStyleOptions(
-  //   layerName: string,
-  //   options: ILayerStyleOptions,
-  // ): void;
   attributesAndIndices: {
     attributes: {
       [attributeName: string]: IAttribute;
diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts
index c393860b73..1d938ad0c7 100644
--- a/packages/core/src/services/layer/LayerService.ts
+++ b/packages/core/src/services/layer/LayerService.ts
@@ -4,10 +4,10 @@ import 'reflect-metadata';
 import { ILayer } from '../..';
 import { TYPES } from '../../types';
 import Clock from '../../utils/clock';
-import { IGlobalConfigService } from '../config/IConfigService';
 import { IMapService } from '../map/IMapService';
 import { IRendererService } from '../renderer/IRendererService';
 import { ILayerService } from './ILayerService';
+import { throttle } from 'lodash';
 
 @injectable()
 export default class LayerService implements ILayerService {
@@ -38,8 +38,15 @@ export default class LayerService implements ILayerService {
   @inject(TYPES.IMapService)
   private readonly mapService: IMapService;
 
-  @inject(TYPES.IGlobalConfigService)
-  private readonly configService: IGlobalConfigService;
+  public reRender = throttle(() => {
+    this.updateLayerRenderList();
+    this.renderLayers();
+  }, 32)
+
+  public throttleRenderLayers = throttle(() => {
+    this.renderLayers();
+  }, 16)
+  
 
   public add(layer: ILayer) {
     if (this.sceneInited) {
@@ -92,8 +99,7 @@ export default class LayerService implements ILayerService {
       this.layers.splice(layerIndex, 1);
     }
     if (refresh) {
-      this.updateLayerRenderList();
-      this.renderLayers();
+      this.throttleRenderLayers();
     }
   }
 
@@ -112,7 +118,6 @@ export default class LayerService implements ILayerService {
     }
     this.updateLayerRenderList();
     layer.destroy();
-    this.renderLayers();
   }
 
   public removeAllLayers() {
@@ -157,18 +162,11 @@ export default class LayerService implements ILayerService {
       }
       layer.hooks.afterRender.call();
     }
-
-    // this.layerList.forEach((layer) => {
-    //   layer.hooks.beforeRenderData.call();
-    //   layer.hooks.beforeRender.call();
-    //   layer.render();
-    //   layer.hooks.afterRender.call();
-    // });
     this.alreadyInRendering = false;
   }
 
   public updateLayerRenderList() {
-    // TODO: 每次更新都是从 layers 重新构建
+    // Tip: 每次更新都是从 layers 重新构建
     this.layerList = [];
     this.layers
       .filter((layer) => layer.inited)
diff --git a/packages/core/src/services/layer/StyleAttributeService.ts b/packages/core/src/services/layer/StyleAttributeService.ts
index 8b1a36df50..5c32d77206 100644
--- a/packages/core/src/services/layer/StyleAttributeService.ts
+++ b/packages/core/src/services/layer/StyleAttributeService.ts
@@ -19,10 +19,6 @@ import {
 } from './IStyleAttributeService';
 import StyleAttribute from './StyleAttribute';
 
-function sleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
 const bytesPerElementMap = {
   [gl.FLOAT]: 4,
   [gl.UNSIGNED_BYTE]: 1,
@@ -351,7 +347,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
                 vertexIdx, // 当前顶点所在feature索引
                 normal,
                 vertexIndex,
-                // TODO: 传入顶点索引 vertexIdx
+                // 传入顶点索引 vertexIdx
               ),
             );
           } // end if
@@ -475,7 +471,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
                 vertexIdx, // 当前顶点所在feature索引
                 normal,
                 vertexIndex,
-                // TODO: 传入顶点索引 vertexIdx
+                // 传入顶点索引 vertexIdx
               ),
             );
           } // end if
diff --git a/packages/core/src/services/renderer/IModel.ts b/packages/core/src/services/renderer/IModel.ts
index cb0e31ddad..6f8aeafc02 100644
--- a/packages/core/src/services/renderer/IModel.ts
+++ b/packages/core/src/services/renderer/IModel.ts
@@ -109,6 +109,10 @@ type BlendingFunctionSeparate = Partial<{
 }>;
 
 export interface IModelInitializationOptions {
+  /**
+   * 该 model 是否支持拾取
+   */
+  pick?: boolean;
   /**
    * Shader 字符串，假设此时已经经过 ShaderLib 处理
    */
diff --git a/packages/core/src/services/renderer/IRendererService.ts b/packages/core/src/services/renderer/IRendererService.ts
index 227685d889..31f6a29402 100644
--- a/packages/core/src/services/renderer/IRendererService.ts
+++ b/packages/core/src/services/renderer/IRendererService.ts
@@ -17,7 +17,7 @@ export interface IRenderConfig {
   passes?: Array<IPass<unknown>>;
   antialias?: boolean;
   preserveDrawingBuffer?: boolean;
-  // TODO: 场景是否支持 stencil mask
+  // Tip: 场景是否支持 stencil mask
   stencil?: boolean;
 }
 
diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts
index 8146f1ac2b..e154ebc747 100644
--- a/packages/core/src/services/scene/SceneService.ts
+++ b/packages/core/src/services/scene/SceneService.ts
@@ -430,7 +430,7 @@ export default class Scene extends EventEmitter implements ISceneService {
     this.fontService.destroy();
     this.iconService.destroy();
 
-    // TODO: 销毁 container 容器
+    // 销毁 container 容器
     this.$container?.parentNode?.removeChild(this.$container);
 
     this.removeAllListeners();
diff --git a/packages/core/src/shaders/picking.frag.glsl b/packages/core/src/shaders/picking.frag.glsl
index 3cafb2aafc..7afade6481 100644
--- a/packages/core/src/shaders/picking.frag.glsl
+++ b/packages/core/src/shaders/picking.frag.glsl
@@ -56,7 +56,7 @@ vec4 filterPickingColor(vec4 color) {
  * highlight color if this item is selected, otherwise unmodified argument.
  */
 vec4 filterColor(vec4 color) {
-  // TODO: 过滤多余的 shader 计算
+  // 过滤多余的 shader 计算
   // return color;
   if(u_shaderPick < 0.5) {
     return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
@@ -67,7 +67,7 @@ vec4 filterColor(vec4 color) {
 }
 
 vec4 filterColorAlpha(vec4 color, float alpha) {
-  // TODO: 过滤多余的 shader 计算
+  // 过滤多余的 shader 计算
   // return color;
   if(u_shaderPick < 0.5) {
     return color; // 暂时去除 直接取消计算在选中时拖拽地图会有问题
diff --git a/packages/layers/package.json b/packages/layers/package.json
index fcd913255a..1753a93f06 100644
--- a/packages/layers/package.json
+++ b/packages/layers/package.json
@@ -37,6 +37,7 @@
     "@turf/meta": "^6.0.2",
     "@turf/polygon-to-line": "^6.5.0",
     "@turf/union": "^6.5.0",
+    "@turf/clone": "^6.5.0",
     "d3-array": "1",
     "d3-color": "^1.4.0",
     "d3-interpolate": "1.4.0",
diff --git a/packages/layers/src/Geometry/index.ts b/packages/layers/src/Geometry/index.ts
index 008a159c62..e87ae8fce1 100644
--- a/packages/layers/src/Geometry/index.ts
+++ b/packages/layers/src/Geometry/index.ts
@@ -21,11 +21,15 @@ export default class GeometryLayer extends BaseLayer<
     this.layerModel = new GeometryModels[modelType](this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
 
   protected getConfigSchema() {
diff --git a/packages/layers/src/Geometry/models/billboard.ts b/packages/layers/src/Geometry/models/billboard.ts
index 296429fc97..c9b79cd6e6 100644
--- a/packages/layers/src/Geometry/models/billboard.ts
+++ b/packages/layers/src/Geometry/models/billboard.ts
@@ -142,8 +142,7 @@ export default class BillBoardModel extends BaseModel {
         wrapS: gl.CLAMP_TO_EDGE,
         wrapT: gl.CLAMP_TO_EDGE,
       });
-      this.layerService.updateLayerRenderList();
-      this.layerService.renderLayers();
+      this.layerService.reRender();
     }
   }
 
diff --git a/packages/layers/src/Geometry/models/plane.ts b/packages/layers/src/Geometry/models/plane.ts
index 66fa63caea..b1a3ae22d8 100644
--- a/packages/layers/src/Geometry/models/plane.ts
+++ b/packages/layers/src/Geometry/models/plane.ts
@@ -224,8 +224,7 @@ export default class PlaneModel extends BaseModel {
           wrapS: gl.CLAMP_TO_EDGE,
           wrapT: gl.CLAMP_TO_EDGE,
         });
-        this.layerService.updateLayerRenderList();
-        this.layerService.renderLayers();
+        this.layerService.reRender();
       };
       img.src = mapTexture;
     } else {
@@ -299,7 +298,7 @@ export default class PlaneModel extends BaseModel {
       },
     );
     this.layer.updateModelData(modelData as IAttrubuteAndElements);
-    this.layerService.renderLayers();
+    this.layerService.throttleRenderLayers();
   }
 
   /**
diff --git a/packages/layers/src/Geometry/models/sprite.ts b/packages/layers/src/Geometry/models/sprite.ts
index 94df676fd9..869f561c58 100644
--- a/packages/layers/src/Geometry/models/sprite.ts
+++ b/packages/layers/src/Geometry/models/sprite.ts
@@ -100,7 +100,7 @@ export default class SpriteModel extends BaseModel {
     this.layer.models.map((m) => {
       m.updateAttributes(attributes);
     });
-    this.layer.renderLayers();
+    this.layerService.throttleRenderLayers();
 
     this.timer = requestAnimationFrame(this.updateModel);
   };
@@ -213,8 +213,7 @@ export default class SpriteModel extends BaseModel {
           wrapS: gl.CLAMP_TO_EDGE,
           wrapT: gl.CLAMP_TO_EDGE,
         });
-        this.layerService.updateLayerRenderList();
-        this.layerService.renderLayers();
+        this.layerService.reRender();
       };
       img.src = mapTexture;
     } else {
diff --git a/packages/layers/src/canvas/index.ts b/packages/layers/src/canvas/index.ts
index 981da540f9..36c1030cdf 100644
--- a/packages/layers/src/canvas/index.ts
+++ b/packages/layers/src/canvas/index.ts
@@ -1,19 +1,53 @@
 import BaseLayer from '../core/BaseLayer';
+import { ILayer } from '@antv/l7-core';
 import { ICanvasLayerStyleOptions } from '../core/interface';
 import CanvasModels, { CanvasModelType } from './models/index';
 export default class CanvasLayer extends BaseLayer<ICanvasLayerStyleOptions> {
   public type: string = 'CanvasLayer';
+  public forceRender: boolean = true;
   public buildModels() {
     const modelType = this.getModelType();
     this.layerModel = new CanvasModels[modelType](this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
+
+  public hide(): ILayer {
+    // 清除画布
+    this.layerModel.clearCanvas && this.layerModel?.clearCanvas();
+
+    this.updateLayerConfig({
+      visible: false,
+    });
+    this.reRender();
+    return this;
+  }
+
+  public renderModels() {
+    if (this?.layerModel?.renderUpdate) {
+      this.layerModel.renderUpdate();
+    }
+
+    this.models.forEach((model) => {
+      model.draw(
+        {
+          uniforms: this.layerModel.getUninforms(),
+        },
+        false,
+      );
+    });
+    return this;
+  }
+
   protected getConfigSchema() {
     return {
       properties: {
diff --git a/packages/layers/src/citybuliding/building.ts b/packages/layers/src/citybuliding/building.ts
index bbc3d34371..9e95f17ff4 100644
--- a/packages/layers/src/citybuliding/building.ts
+++ b/packages/layers/src/citybuliding/building.ts
@@ -7,11 +7,15 @@ export default class CityBuildingLayer extends BaseLayer {
     this.layerModel = new CityBuildModel(this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
   public setLight(t: number) {
     this.updateLayerConfig({
diff --git a/packages/layers/src/citybuliding/models/build.ts b/packages/layers/src/citybuliding/models/build.ts
index b3a1e5211a..b4874c8773 100644
--- a/packages/layers/src/citybuliding/models/build.ts
+++ b/packages/layers/src/citybuliding/models/build.ts
@@ -4,20 +4,7 @@ import BaseModel from '../../core/BaseModel';
 import { PolygonExtrudeTriangulation } from '../../core/triangulation';
 import buildFrag from '../shaders/build_frag.glsl';
 import buildVert from '../shaders/build_vert.glsl';
-interface ICityBuildLayerStyleOptions {
-  opacity: number;
-  baseColor: string;
-  brightColor: string;
-  windowColor: string;
-  time: number;
-  sweep: {
-    enable: boolean;
-    sweepRadius: number;
-    sweepColor: string;
-    sweepSpeed: number;
-    sweepCenter?: [number, number];
-  };
-}
+import { ICityBuildLayerStyleOptions } from '../../core/interface';
 export default class CityBuildModel extends BaseModel {
   private cityCenter: [number, number];
   private cityMinSize: number;
@@ -145,9 +132,6 @@ export default class CityBuildModel extends BaseModel {
         size: 1,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const { size = 10 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
@@ -170,9 +154,7 @@ export default class CityBuildModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
-          const { size } = feature;
           return [vertex[3], vertex[4]];
         },
       },
diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts
index 1e3772bdba..6a6ea21416 100644
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@@ -139,10 +139,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     values: any;
   };
 
-  // TODO: 记录 sceneContainer 供创建子图层的时候使用 如 imageTileLayer
+  // 记录 sceneContainer 供创建子图层的时候使用 如 imageTileLayer
   public sceneContainer: Container | undefined;
   public tileLayer: any | undefined;
-  // TODO: 用于保存子图层对象
+  // 用于保存子图层对象
   public layerChildren: ILayer[] = [];
   public masks: ILayer[] = [];
   // Tip: 用于标识矢量图层
@@ -187,7 +187,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
   /**
    * 图层容器
    */
-  private container: Container;
+  protected container: Container;
 
   private encodedData: IEncodeFeature[];
 
@@ -195,14 +195,14 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
 
   private currentPickId: number | null = null;
 
-  private rawConfig: Partial<ILayerConfig & ChildLayerStyleOptions>;
+  protected rawConfig: Partial<ILayerConfig & ChildLayerStyleOptions>;
 
   private needUpdateConfig: Partial<ILayerConfig & ChildLayerStyleOptions>;
 
   /**
    * 待更新样式属性，在初始化阶段完成注册
    */
-  private pendingStyleAttributes: Array<{
+  protected pendingStyleAttributes: Array<{
     attributeName: string;
     attributeField: StyleAttributeField;
     attributeValues?: StyleAttributeOption;
@@ -216,7 +216,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
 
   private aniamateStatus: boolean = false;
 
-  // TODO: layer 保底颜色
+  // Tip: layer 保底颜色
   private bottomColor = 'rgba(0, 0, 0, 0)';
 
   private isDestroied: boolean = false;
@@ -496,16 +496,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     values?: StyleAttributeOption,
     updateOptions?: Partial<IStyleAttributeUpdateOptions>,
   ) {
-    // 设置 color、size、shape、style 时由于场景服务尚未完成（并没有调用 scene.addLayer），因此暂时加入待更新属性列表
     this.updateStyleAttribute('color', field, values, updateOptions);
-
-    // this.pendingStyleAttributes.push({
-    //   attributeName: 'color',
-    //   attributeField: field,
-    //   attributeValues: values,
-    //   defaultName: 'colors',
-    //   updateOptions,
-    // });
     return this;
   }
 
@@ -559,7 +550,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
       values,
     };
     this.updateStyleAttribute('shape', field, values, updateOptions);
-    // TODO: 根据 shape 判断是否需要更新 model
+    // Tip: 根据 shape 判断是否需要更新 model
     if (!this.tileLayer) {
       updateShape(this, lastShape, currentShape);
     }
@@ -691,11 +682,12 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
   }
 
   public render(): ILayer {
-    if (this.tileLayer !== undefined) {
+    if (this.tileLayer) {
       // 瓦片图层执行单独的 render 渲染队列
       this.tileLayer.render();
       return this;
     }
+
     if (this.encodeDataLength <= 0 && !this.forceRender) return this;
     // Tip: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
     this.renderModels();
@@ -841,10 +833,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
   }
 
   public hide(): ILayer {
-    if (this.type === 'CanvasLayer' && this.layerModel.clearCanvas) {
-      // 对 canvasLayer 的 hide 操作做特殊处理
-      this.layerModel.clearCanvas();
-    }
     this.updateLayerConfig({
       visible: false,
     });
@@ -981,19 +969,19 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     }
 
     // remove child layer
-    this.layerChildren.map((child: ILayer) => child.destroy());
+    this.layerChildren.map((child: ILayer) => child.destroy(false));
     this.layerChildren = [];
 
     // remove mask list
-    this.masks.map((mask: ILayer) => mask.destroy());
+    this.masks.map((mask: ILayer) => mask.destroy(false));
     this.masks = [];
 
     this.hooks.beforeDestroy.call();
     // 清除sources事件
     this.layerSource.off('sourceUpdate', this.sourceEvent);
 
-    this.multiPassRenderer.destroy();
-    // console.log(this.styleAttributeService.getAttributes())
+    this.multiPassRenderer?.destroy();
+
     // 清除所有属性以及关联的 vao == 销毁所有 => model this.models.forEach((model) => model.destroy());
     this.styleAttributeService.clearAllAttributes();
 
@@ -1001,8 +989,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
 
     this.hooks.afterDestroy.call();
 
-    // TODO: 清除各个图层自定义的 models 资源
-    this.layerModel?.clearModels();
+    // Tip: 清除各个图层自定义的 models 资源
+    this.layerModel?.clearModels(refresh);
 
     this.models = [];
 
@@ -1170,56 +1158,58 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     const { vs, fs, uniforms } = this.shaderModuleService.getModule(moduleName);
     const { createModel } = this.rendererService;
     return new Promise((resolve, reject) => {
-      // filter supported worker & worker enabled layer
-      if (
-        workerOptions &&
-        workerOptions.modelType in WorkerSourceMap &&
-        workerEnabled
-      ) {
-        this.styleAttributeService
-          .createAttributesAndIndicesAscy(
+      setTimeout(() => {
+        // filter supported worker & worker enabled layer
+        if (
+          workerOptions &&
+          workerOptions.modelType in WorkerSourceMap &&
+          workerEnabled
+        ) {
+          this.styleAttributeService
+            .createAttributesAndIndicesAscy(
+              this.encodedData,
+              segmentNumber,
+              workerOptions,
+            )
+            .then(({ attributes, elements }) => {
+              const m = createModel({
+                attributes,
+                uniforms,
+                fs,
+                vs,
+                elements,
+                blend: BlendTypes[BlendType.normal],
+                ...rest,
+              });
+              resolve(m);
+            })
+            .catch((err) => reject(err));
+        } else {
+          const {
+            attributes,
+            elements,
+            count,
+          } = this.styleAttributeService.createAttributesAndIndices(
             this.encodedData,
+            triangulation,
             segmentNumber,
-            workerOptions,
-          )
-          .then(({ attributes, elements }) => {
-            const m = createModel({
-              attributes,
-              uniforms,
-              fs,
-              vs,
-              elements,
-              blend: BlendTypes[BlendType.normal],
-              ...rest,
-            });
-            resolve(m);
-          })
-          .catch((err) => reject(err));
-      } else {
-        const {
-          attributes,
-          elements,
-          count,
-        } = this.styleAttributeService.createAttributesAndIndices(
-          this.encodedData,
-          triangulation,
-          segmentNumber,
-        );
-        const modeloptions = {
-          attributes,
-          uniforms,
-          fs,
-          vs,
-          elements,
-          blend: BlendTypes[BlendType.normal],
-          ...rest,
-        };
-        if (count) {
-          modeloptions.count = count;
+          );
+          const modeloptions = {
+            attributes,
+            uniforms,
+            fs,
+            vs,
+            elements,
+            blend: BlendTypes[BlendType.normal],
+            ...rest,
+          };
+          if (count) {
+            modeloptions.count = count;
+          }
+          const m = createModel(modeloptions);
+          resolve(m);
         }
-        const m = createModel(modeloptions);
-        resolve(m);
-      }
+      });
     });
   }
 
@@ -1258,6 +1248,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
   }
 
   public needPick(type: string): boolean {
+    // 地图图层的判断
+    if (this.rawConfig.usage === 'basemap') return false;
+
     const {
       enableHighlight = true,
       enableSelect = true,
@@ -1295,7 +1288,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
   public renderModels(isPicking?: boolean) {
     // TODO: this.getEncodedData().length > 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
     if (this.encodeDataLength <= 0 && !this.forceRender) return this;
-
     if (this.layerModelNeedUpdate && this.layerModel) {
       this.layerModel.buildModels((models: IModel[]) => {
         this.models = models;
@@ -1303,9 +1295,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
         this.layerModelNeedUpdate = false;
       });
     }
-    if (this?.layerModel?.renderUpdate) {
-      this.layerModel.renderUpdate();
-    }
 
     this.models.forEach((model) => {
       model.draw(
@@ -1360,6 +1349,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
    * 继承空方法
    * @param time
    */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public setEarthTime(time: number) {
     console.warn('empty fn');
   }
@@ -1375,24 +1365,19 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     return {};
   }
 
-  private sourceEvent = () => {
+  protected sourceEvent = () => {
     this.dataState.dataSourceNeedUpdate = true;
     const layerConfig = this.getLayerConfig();
     if (layerConfig && layerConfig.autoFit) {
       this.fitBounds(layerConfig.fitBoundsOptions);
     }
-    // 对外暴露事件 迁移到 DataMappingPlugin generateMapping，保证在重新重新映射后触发
-    // this.emit('dataUpdate');
     this.reRender();
   };
 
-  private reRender() {
-    if (this.inited) {
-      this.layerService.updateLayerRenderList();
-      this.layerService.renderLayers();
-    }
+  protected reRender() {
+    this.inited && this.layerService.reRender();
   }
-  private splitValuesAndCallbackInAttribute(
+  protected splitValuesAndCallbackInAttribute(
     valuesOrCallback?: unknown[],
     defaultValues?: unknown[],
   ) {
diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts
index 5531a8c3d7..7c1739eca9 100644
--- a/packages/layers/src/core/BaseModel.ts
+++ b/packages/layers/src/core/BaseModel.ts
@@ -259,7 +259,7 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
    * @returns
    */
   public dataTextureNeedUpdate(options: {
-    // TODO: thetaOffset 目前只有 lineLayer/arc 使用
+    // thetaOffset 目前只有 lineLayer/arc 使用
     thetaOffset?: styleSingle;
     opacity?: styleSingle;
     strokeOpacity?: styleSingle;
@@ -514,13 +514,16 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
   public needUpdate(): boolean {
     return false;
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public buildModels(callbackModel: (models: IModel[]) => void): void {
     throw new Error('Method not implemented.');
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public initModels(callbackModel: (models: IModel[]) => void): void {
     throw new Error('Method not implemented.');
   }
-  public clearModels() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public clearModels(refresh = true) {
     return;
   }
   public getAttribute(): {
diff --git a/packages/layers/src/core/interface.ts b/packages/layers/src/core/interface.ts
index b31f5e3183..8c16fa88e6 100644
--- a/packages/layers/src/core/interface.ts
+++ b/packages/layers/src/core/interface.ts
@@ -1,4 +1,4 @@
-import { IAnimateOption, IMapService } from '@antv/l7-core';
+import { IAnimateOption, IMapService, ITexture2D } from '@antv/l7-core';
 import { IColorRamp, IImagedata } from '@antv/l7-utils';
 import { styleOffset } from '../core/BaseModel';
 import { anchorType } from '../utils/symbol-layout';
@@ -41,6 +41,10 @@ export interface IBaseLayerStyleOptions {
   // 蒙层
   mask?: boolean; // 可选参数 时候允许蒙层
   maskInside?: boolean; // 可选参数 控制图层是否显示在蒙层的内部
+
+  usage?: string;
+  color?: string;
+  size?: number;
 }
 
 export interface ILineLayerStyleOptions extends IBaseLayerStyleOptions {
@@ -159,6 +163,7 @@ export interface IRasterTileLayerStyleOptions extends IBaseLayerStyleOptions {
 export interface IMaskLayerStyleOptions extends IBaseLayerStyleOptions {
   // define
   opacity: number;
+  color: string;
 }
 
 export interface IWindLayerStyleOptions extends IBaseLayerStyleOptions {
@@ -184,6 +189,7 @@ export interface IImageLayerStyleOptions extends IBaseLayerStyleOptions {
   clampHigh?: boolean;
   rampColors?: IColorRamp;
   rampColorsData?: ImageData | IImagedata;
+  colorTexture?: ITexture2D;
   pixelConstant?: number;
   pixelConstantR?: number;
   pixelConstantG?: number;
@@ -191,6 +197,21 @@ export interface IImageLayerStyleOptions extends IBaseLayerStyleOptions {
   pixelConstantRGB?: number;
 }
 
+export interface ICityBuildLayerStyleOptions {
+  opacity: number;
+  baseColor: string;
+  brightColor: string;
+  windowColor: string;
+  time: number;
+  sweep: {
+    enable: boolean;
+    sweepRadius: number;
+    sweepColor: string;
+    sweepSpeed: number;
+    sweepCenter?: [number, number];
+  };
+}
+
 export interface IGeometryLayerStyleOptions extends IBaseLayerStyleOptions {
   mapTexture?: string;
   terrainTexture?: string;
diff --git a/packages/layers/src/core/triangulation.ts b/packages/layers/src/core/triangulation.ts
index 63409da3f0..71130bd2dd 100644
--- a/packages/layers/src/core/triangulation.ts
+++ b/packages/layers/src/core/triangulation.ts
@@ -147,7 +147,15 @@ export function LineTriangulation(feature: IEncodeFeature) {
 export function SimpleLineTriangulation(feature: IEncodeFeature) {
   const { coordinates } = feature;
   const pos: any[] = [];
-
+  if (!Array.isArray(coordinates[0])) {
+    return {
+      vertices: [],
+      indices: [],
+      normals: [],
+      size: 6,
+      count: 0,
+    };
+  }
   const { results, totalDistance } = getSimpleLineVertices(
     coordinates as IPosition[],
   );
@@ -164,17 +172,43 @@ export function SimpleLineTriangulation(feature: IEncodeFeature) {
   };
 }
 
+export function TileSimpleLineTriangulation(feature: IEncodeFeature) {
+  const { coordinates } = feature;
+  const pos: any[] = [];
+  if (!Array.isArray(coordinates[0])) {
+    return {
+      vertices: [],
+      indices: [],
+      size: 4,
+      count: 0,
+    };
+  }
+  const { results } = getTileSimpleLineVertices(coordinates as IPosition[]);
+  results.map((point) => {
+    pos.push(point[0], point[1], point[2], point[3]);
+  });
+
+  return {
+    vertices: pos,
+    indices: [],
+    size: 4,
+    count: results.length,
+  };
+}
+
 function lineSegmentDistance(b1: number[], a1: number[]) {
   const dx = a1[0] - b1[0];
   const dy = a1[1] - b1[1];
   return Math.sqrt(dx * dx + dy * dy);
 }
 
-function pushDis(point: number[], n: number) {
+function pushDis(point: number[], n?: number) {
   if (point.length < 3) {
     point.push(0);
   }
-  point.push(n);
+  if (n !== undefined) {
+    point.push(n);
+  }
   return point;
 }
 
@@ -212,6 +246,28 @@ function getSimpleLineVertices(points: number[][]) {
   }
 }
 
+function getTileSimpleLineVertices(points: number[][]) {
+  if (points.length < 2) {
+    return {
+      results: points,
+    };
+  } else {
+    const results: number[][] = [];
+    const point = pushDis(points[0]);
+    results.push(point);
+
+    for (let i = 1; i < points.length - 1; i++) {
+      const mulPoint = pushDis(points[i]);
+      results.push(mulPoint);
+      results.push(mulPoint);
+    }
+    results.push(pushDis(points[points.length - 1]));
+    return {
+      results,
+    };
+  }
+}
+
 export function polygonTriangulation(feature: IEncodeFeature) {
   const { coordinates } = feature;
   const flattengeo = earcut.flatten(coordinates as number[][][]);
@@ -223,7 +279,7 @@ export function polygonTriangulation(feature: IEncodeFeature) {
   };
 }
 
-// TODO：构建几何图形（带有中心点和大小）
+// 构建几何图形（带有中心点和大小）
 export function polygonTriangulationWithCenter(feature: IEncodeFeature) {
   const { coordinates } = feature;
   const flattengeo = earcut.flatten(coordinates as number[][][]);
diff --git a/packages/layers/src/earth/index.ts b/packages/layers/src/earth/index.ts
index 4cdf996769..f17c7e61a7 100644
--- a/packages/layers/src/earth/index.ts
+++ b/packages/layers/src/earth/index.ts
@@ -38,7 +38,8 @@ export default class EarthLayer extends BaseLayer<IEarthLayerStyleOptions> {
     this.layerModel = new EarthModels[shape](this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
 
diff --git a/packages/layers/src/earth/models/base.ts b/packages/layers/src/earth/models/base.ts
index f84b78be5c..ce681673fa 100644
--- a/packages/layers/src/earth/models/base.ts
+++ b/packages/layers/src/earth/models/base.ts
@@ -57,7 +57,7 @@ export default class BaseEarthModel extends BaseModel {
     this.sunX = Math.cos(this.earthTime) * (this.sunRadius - this.sunY);
     this.sunZ = Math.sin(this.earthTime) * (this.sunRadius - this.sunY);
 
-    this.layerService.renderLayers();
+    this.layerService.throttleRenderLayers();
   }
 
   public initModels(callbackModel: (models: IModel[]) => void) {
@@ -78,8 +78,7 @@ export default class BaseEarthModel extends BaseModel {
         width: imageData[0].width,
         height: imageData[0].height,
       });
-      this.layerService.updateLayerRenderList();
-      this.layerService.renderLayers();
+      this.layerService.reRender();
     });
 
     this.buildModels(callbackModel);
diff --git a/packages/layers/src/earth/shaders/atmosphere_frag.glsl b/packages/layers/src/earth/shaders/atmosphere_frag.glsl
index 1d288be36f..307768695c 100644
--- a/packages/layers/src/earth/shaders/atmosphere_frag.glsl
+++ b/packages/layers/src/earth/shaders/atmosphere_frag.glsl
@@ -10,7 +10,7 @@ void main() {
     
     // float intensity = pow(0.5 + dot(normalize(vVertexNormal), normalize(u_CameraPosition)), 3.0);
     float intensity = pow(v_offset + dot(normalize(vVertexNormal), normalize(u_CameraPosition)), 3.0);
-    // TODO: 去除背面
+    // 去除背面
     if(intensity > 1.0) intensity = 0.0;
 
     gl_FragColor = vec4(v_Color.rgb, v_Color.a * intensity * u_opacity);
diff --git a/packages/layers/src/earth/shaders/bloomsphere_frag.glsl b/packages/layers/src/earth/shaders/bloomsphere_frag.glsl
index ee8ad4e5d1..9711824fb4 100644
--- a/packages/layers/src/earth/shaders/bloomsphere_frag.glsl
+++ b/packages/layers/src/earth/shaders/bloomsphere_frag.glsl
@@ -8,7 +8,7 @@ void main() {
 
 
     float intensity =  - dot(normalize(vVertexNormal), normalize(u_CameraPosition));
-    // TODO: 去除背面
+    // 去除背面
     if(intensity > 1.0) intensity = 0.0;
 
     gl_FragColor = vec4(v_Color.rgb, v_Color.a * intensity * u_opacity);
diff --git a/packages/layers/src/heatmap/index.ts b/packages/layers/src/heatmap/index.ts
index 0388e0e2f4..3b5578eb46 100644
--- a/packages/layers/src/heatmap/index.ts
+++ b/packages/layers/src/heatmap/index.ts
@@ -10,11 +10,15 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
     this.layerModel = new HeatMapModels[shape](this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
   public renderModels() {
     const shape = this.getModelType();
diff --git a/packages/layers/src/heatmap/models/heatmap.ts b/packages/layers/src/heatmap/models/heatmap.ts
index 7f2f65008c..163eba7d48 100644
--- a/packages/layers/src/heatmap/models/heatmap.ts
+++ b/packages/layers/src/heatmap/models/heatmap.ts
@@ -63,10 +63,8 @@ export default class HeatMapModel extends BaseModel {
   public async initModels(callbackModel: (models: IModel[]) => void) {
     const {
       createFramebuffer,
-      clear,
       getViewportSize,
       createTexture2D,
-      useFramebuffer,
     } = this.rendererService;
     const shapeAttr = this.styleAttributeService.getLayerStyleAttribute(
       'shape',
@@ -177,6 +175,7 @@ export default class HeatMapModel extends BaseModel {
           dstAlpha: 1,
         },
       },
+      pick: false
     });
     return model;
   }
@@ -201,6 +200,7 @@ export default class HeatMapModel extends BaseModel {
       createModel,
     } = this.rendererService;
     return createModel({
+      pick: false,
       vs,
       fs,
       attributes: {
diff --git a/packages/layers/src/image/index.ts b/packages/layers/src/image/index.ts
index 9e26e64ca2..513b64dd68 100644
--- a/packages/layers/src/image/index.ts
+++ b/packages/layers/src/image/index.ts
@@ -8,11 +8,15 @@ export default class ImageLayer extends BaseLayer<IImageLayerStyleOptions> {
     this.layerModel = new ImageModels[modelType](this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
   protected getConfigSchema() {
     return {
@@ -30,6 +34,7 @@ export default class ImageLayer extends BaseLayer<IImageLayerStyleOptions> {
     const defaultConfig = {
       image: {},
       dataImage: {},
+      tileDataImage: {},
     };
     return defaultConfig[type];
   }
@@ -43,6 +48,8 @@ export default class ImageLayer extends BaseLayer<IImageLayerStyleOptions> {
       return 'dataImage';
     } else if (shape === 'image') {
       return 'image';
+    } else if (shape === 'tileDataImage') {
+      return 'tileDataImage';
     } else {
       return 'image';
     }
diff --git a/packages/layers/src/image/models/dataImage.ts b/packages/layers/src/image/models/dataImage.ts
index 213ab384a7..9801101d8f 100644
--- a/packages/layers/src/image/models/dataImage.ts
+++ b/packages/layers/src/image/models/dataImage.ts
@@ -6,7 +6,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
-import { generateColorRamp, getMask, IColorRamp, isMini } from '@antv/l7-utils';
+import { generateColorRamp, getMask, IColorRamp } from '@antv/l7-utils';
 import { isEqual } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IImageLayerStyleOptions } from '../../core/interface';
@@ -70,35 +70,16 @@ export default class ImageDataModel extends BaseModel {
       width: 0,
     });
 
-    if (isMini) {
-      // @ts-ignore
-      const canvas = this.layerService.sceneService.getSceneConfig().canvas;
-      const img = canvas.createImage();
-      img.crossOrigin = 'anonymous';
-      img.src = source.data.originData;
-
-      img.onload = () => {
+    source.data.images.then(
+      (imageData: Array<HTMLImageElement | ImageBitmap>) => {
         this.texture = createTexture2D({
-          data: img,
-          width: img.width,
-          height: img.height,
+          data: imageData[0],
+          width: imageData[0].width,
+          height: imageData[0].height,
         });
-        this.layerService.updateLayerRenderList();
-        this.layerService.renderLayers();
-      };
-    } else {
-      source.data.images.then(
-        (imageData: Array<HTMLImageElement | ImageBitmap>) => {
-          this.texture = createTexture2D({
-            data: imageData[0],
-            width: imageData[0].width,
-            height: imageData[0].height,
-          });
-          this.layerService.updateLayerRenderList();
-          this.layerService.renderLayers();
-        },
-      );
-    }
+        this.layerService.reRender();
+      },
+    );
 
     const rampImageData = rampColorsData
       ? rampColorsData
@@ -120,6 +101,7 @@ export default class ImageDataModel extends BaseModel {
         depth: { enable: false },
         blend: this.getBlend(),
         stencil: getMask(mask, maskInside),
+        pick: false,
       })
       .then((model) => {
         callbackModel([model]);
@@ -152,14 +134,12 @@ export default class ImageDataModel extends BaseModel {
   }
 
   protected registerBuiltinAttributes() {
-    // point layer size;
     this.styleAttributeService.registerStyleAttribute({
       name: 'uv',
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Uv',
         buffer: {
-          // give the WebGL driver a hint that this buffer may change
           usage: gl.DYNAMIC_DRAW,
           data: [],
           type: gl.FLOAT,
@@ -169,7 +149,6 @@ export default class ImageDataModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
           return [vertex[3], vertex[4]];
         },
diff --git a/packages/layers/src/image/models/image.ts b/packages/layers/src/image/models/image.ts
index bc27fb4b22..2ec12a82d8 100644
--- a/packages/layers/src/image/models/image.ts
+++ b/packages/layers/src/image/models/image.ts
@@ -49,8 +49,7 @@ export default class ImageModel extends BaseModel {
           width: img.width,
           height: img.height,
         });
-        this.layerService.updateLayerRenderList();
-        this.layerService.renderLayers();
+        this.layerService.reRender();
       };
     } else {
       source.data.images.then(
@@ -62,8 +61,7 @@ export default class ImageModel extends BaseModel {
             mag: gl.LINEAR,
             min: gl.LINEAR,
           });
-          this.layerService.updateLayerRenderList();
-          this.layerService.renderLayers();
+          this.layerService.reRender();
         },
       );
     }
@@ -81,6 +79,7 @@ export default class ImageModel extends BaseModel {
         },
         depth: { enable: false },
         stencil: getMask(mask, maskInside),
+        pick: false,
       })
       .then((model) => {
         callbackModel([model]);
diff --git a/packages/layers/src/image/models/index.ts b/packages/layers/src/image/models/index.ts
index d2753e18b5..2242c88bbf 100644
--- a/packages/layers/src/image/models/index.ts
+++ b/packages/layers/src/image/models/index.ts
@@ -1,10 +1,12 @@
 import DataImageModel from './dataImage';
 import ImageModel from './image';
-export type ImageModelType = 'image' | 'dataImage';
+import TileDataImageModel from './tileDataImage';
+export type ImageModelType = 'image' | 'dataImage' | 'tileDataImage';
 
 const ImageModels: { [key in ImageModelType]: any } = {
   image: ImageModel,
   dataImage: DataImageModel,
+  tileDataImage: TileDataImageModel,
 };
 
 export default ImageModels;
diff --git a/packages/layers/src/image/models/tileDataImage.ts b/packages/layers/src/image/models/tileDataImage.ts
new file mode 100644
index 0000000000..6bfa3100db
--- /dev/null
+++ b/packages/layers/src/image/models/tileDataImage.ts
@@ -0,0 +1,143 @@
+import {
+  AttributeType,
+  gl,
+  IEncodeFeature,
+  IModel,
+  IModelUniform,
+  ITexture2D,
+} from '@antv/l7-core';
+import { getMask } from '@antv/l7-utils';
+import BaseModel from '../../core/BaseModel';
+import { IImageLayerStyleOptions } from '../../core/interface';
+import { RasterImageTriangulation } from '../../core/triangulation';
+import ImageFrag from '../shaders/dataImage_frag.glsl';
+import ImageVert from '../shaders/image_vert.glsl';
+
+export default class ImageDataModel extends BaseModel {
+  protected texture: ITexture2D;
+  public getUninforms(): IModelUniform {
+    const { createTexture2D } = this.rendererService;
+    const {
+      opacity,
+      clampLow = true,
+      clampHigh = true,
+      noDataValue = -9999999,
+      domain = [0, 1],
+
+      colorTexture = createTexture2D({
+        height: 0,
+        width: 0,
+      }),
+      pixelConstant = 0.0,
+      pixelConstantR = 256 * 256,
+      pixelConstantG = 256,
+      pixelConstantB = 1,
+      pixelConstantRGB = 0.1,
+    } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
+
+    return {
+      u_opacity: opacity || 1,
+      u_texture: this.texture,
+
+      u_pixelConstant: pixelConstant,
+      u_pixelConstantR: pixelConstantR,
+      u_pixelConstantG: pixelConstantG,
+      u_pixelConstantB: pixelConstantB,
+      u_pixelConstantRGB: pixelConstantRGB,
+
+      u_domain: domain,
+      u_clampLow: clampLow,
+      u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow,
+      u_noDataValue: noDataValue,
+      u_colorTexture: colorTexture,
+    };
+  }
+  public initModels(callbackModel: (models: IModel[]) => void) {
+    const {
+      mask = false,
+      maskInside = true,
+    } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
+
+    const source = this.layer.getSource();
+    const { createTexture2D } = this.rendererService;
+    this.texture = createTexture2D({
+      height: 0,
+      width: 0,
+    });
+
+    source.data.images.then(
+      (imageData: Array<HTMLImageElement | ImageBitmap>) => {
+        this.texture = createTexture2D({
+          data: imageData[0],
+          width: imageData[0].width,
+          height: imageData[0].height,
+        });
+        this.layerService.reRender();
+      },
+    );
+   
+
+    this.layer
+      .buildLayerModel({
+        moduleName: 'RasterTileDataImage',
+        vertexShader: ImageVert,
+        fragmentShader: ImageFrag,
+        triangulation: RasterImageTriangulation,
+        primitive: gl.TRIANGLES,
+        depth: { enable: false },
+        blend: this.getBlend(),
+        stencil: getMask(mask, maskInside),
+        pick: false,
+      })
+      .then((model) => {
+        callbackModel([model]);
+      })
+      .catch((err) => {
+        console.warn(err);
+        callbackModel([]);
+      });
+  }
+
+  public clearModels(): void {
+    this.texture?.destroy();
+  }
+
+  public buildModels(callbackModel: (models: IModel[]) => void) {
+    this.initModels(callbackModel);
+  }
+
+  protected getConfigSchema() {
+    return {
+      properties: {
+        opacity: {
+          type: 'number',
+          minimum: 0,
+          maximum: 1,
+        },
+      },
+    };
+  }
+
+  protected registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Uv',
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT,
+        },
+        size: 2,
+        update: (
+          feature: IEncodeFeature,
+          featureIdx: number,
+          vertex: number[],
+        ) => {
+          return [vertex[3], vertex[4]];
+        },
+      },
+    });
+  }
+}
diff --git a/packages/layers/src/line/index.ts b/packages/layers/src/line/index.ts
index c77306789d..98066a1c6f 100644
--- a/packages/layers/src/line/index.ts
+++ b/packages/layers/src/line/index.ts
@@ -5,6 +5,7 @@ import { isVectorTile } from '../tile/utils';
 
 export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
   public type: string = 'LineLayer';
+  public arrowInsertCount: number = 0;
   public defaultSourceConfig = {
     data: [
       {
@@ -30,11 +31,15 @@ export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
     this.layerModel = new LineModels[shape](this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
 
   protected getConfigSchema() {
diff --git a/packages/layers/src/line/models/arc.ts b/packages/layers/src/line/models/arc.ts
index ab129e0526..daa16e5608 100644
--- a/packages/layers/src/line/models/arc.ts
+++ b/packages/layers/src/line/models/arc.ts
@@ -179,7 +179,7 @@ export default class ArcModel extends BaseModel {
       maskInside = true,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     const { frag, vert, type } = this.getShaders();
-
+    //
     this.layer
       .buildLayerModel({
         moduleName: 'lineArc2d' + type,
diff --git a/packages/layers/src/line/models/half.ts b/packages/layers/src/line/models/half.ts
index c92d9aca1e..5abc643946 100644
--- a/packages/layers/src/line/models/half.ts
+++ b/packages/layers/src/line/models/half.ts
@@ -173,11 +173,7 @@ export default class LineModel extends BaseModel {
         size: 4,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
-          // console.log(feature)
           const startPoint = (feature.coordinates[0] || [0, 0]) as number[];
           const endPoint = (feature.coordinates[3] || [0, 0]) as number[];
 
@@ -200,9 +196,6 @@ export default class LineModel extends BaseModel {
         size: 2,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
@@ -251,7 +244,6 @@ export default class LineModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
           return [vertex[4]];
         },
diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts
index 9db3291346..1163c007aa 100644
--- a/packages/layers/src/line/models/line.ts
+++ b/packages/layers/src/line/models/line.ts
@@ -173,6 +173,7 @@ export default class LineModel extends BaseModel {
       enablePicking,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     const { frag, vert, type } = this.getShaders();
+    // console.log(frag)
     this.layer.triangulation = LineTriangulation;
     this.layer
       .buildLayerModel({
@@ -277,7 +278,6 @@ export default class LineModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
           return [vertex[5]];
         },
@@ -298,9 +298,6 @@ export default class LineModel extends BaseModel {
         size: 2,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
@@ -349,7 +346,6 @@ export default class LineModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
           return [vertex[4]];
         },
@@ -370,9 +366,6 @@ export default class LineModel extends BaseModel {
         size: 2,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const iconMap = this.iconService.getIconMap();
           const { texture } = feature;
diff --git a/packages/layers/src/line/models/simpleLine.ts b/packages/layers/src/line/models/simpleLine.ts
index 19ff3df987..fe6f9d0e89 100644
--- a/packages/layers/src/line/models/simpleLine.ts
+++ b/packages/layers/src/line/models/simpleLine.ts
@@ -125,6 +125,7 @@ export default class SimpleLineModel extends BaseModel {
         depth: { enable: false },
         blend: this.getBlend(),
         stencil: getMask(mask, maskInside),
+        pick: false,
       })
       .then((model) => {
         callbackModel([model]);
diff --git a/packages/layers/src/line/models/simpleTileLine.ts b/packages/layers/src/line/models/simpleTileLine.ts
new file mode 100644
index 0000000000..74e5f301a2
--- /dev/null
+++ b/packages/layers/src/line/models/simpleTileLine.ts
@@ -0,0 +1,65 @@
+import {
+  gl,
+  IModel,
+  IModelUniform,
+} from '@antv/l7-core';
+import { getMask, rgb2arr } from '@antv/l7-utils';
+import { isNumber } from 'lodash';
+import BaseModel from '../../core/BaseModel';
+import { ILineLayerStyleOptions } from '../../core/interface';
+import { TileSimpleLineTriangulation } from '../../core/triangulation';
+import simple_line_frag from '../../shader/minify_frag.glsl';
+import simple_line_vert from '../shaders/tile/simpleline_vert.glsl';
+
+import simple_line_map_frag from '../../shader/minify_frag.glsl';
+import simple_line_map_vert from '../shaders/tile/simpleline_map_vert.glsl';
+export default class SimpleTileLineModel extends BaseModel {
+  public getUninforms(): IModelUniform {
+    const {
+      opacity = 1,
+      usage,
+      color = '#fff'
+    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+    return {
+      u_opacity: isNumber(opacity) ? opacity : 1.0,
+      u_color: usage === 'basemap' ? rgb2arr(color): [0, 0, 0, 0]
+    };
+  }
+
+  public initModels(callbackModel: (models: IModel[]) => void) {
+    this.buildModels(callbackModel);
+  }
+
+  public clearModels() {
+  }
+
+  public buildModels(callbackModel: (models: IModel[]) => void) {
+    const {
+      mask = false,
+      maskInside = true,
+      usage
+    } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
+    this.layer
+      .buildLayerModel({
+        moduleName: 'lineTileSimpleNormal_' + usage,
+        vertexShader: usage === 'basemap' ? simple_line_map_vert : simple_line_vert,
+        fragmentShader: usage === 'basemap' ? simple_line_map_frag : simple_line_frag,
+        triangulation: TileSimpleLineTriangulation,
+        primitive: gl.LINES,
+        depth: { enable: false },
+        blend: this.getBlend(),
+        stencil: getMask(mask, maskInside),
+        pick: false,
+      })
+      .then((model) => {
+        callbackModel([model]);
+      })
+      .catch((err) => {
+        console.warn(err);
+        callbackModel([]);
+      });
+  }
+
+  protected registerBuiltinAttributes() {
+  }
+}
diff --git a/packages/layers/src/line/models/tile.ts b/packages/layers/src/line/models/tile.ts
index 4a8a83fd7a..2ce4e75b97 100644
--- a/packages/layers/src/line/models/tile.ts
+++ b/packages/layers/src/line/models/tile.ts
@@ -4,136 +4,60 @@ import {
   IEncodeFeature,
   IModel,
   IModelUniform,
-  ITexture2D,
 } from '@antv/l7-core';
-
 import { getMask, rgb2arr } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
 import { LineTriangulation } from '../../core/triangulation';
 
-import line_tile_frag from '../shaders/tile/line_tile_frag.glsl';
+import line_tile_frag from '../../shader/minify_picking_frag.glsl';
 import line_tile_vert from '../shaders/tile/line_tile_vert.glsl';
+import line_tile_map_frag from '../../shader/minify_frag.glsl';
+import line_tile_map_vert from '../shaders/tile/line_tile_map_vert.glsl'
 
 export default class LineModel extends BaseModel {
-  protected texture: ITexture2D;
   public getUninforms(): IModelUniform {
     const {
       opacity = 1,
-      textureBlend = 'normal',
-      lineTexture = false,
-      iconStep = 100,
-      vertexHeightScale = 20.0,
-      borderWidth = 0.0,
-      borderColor = '#ccc',
-      heightfixed = false,
-      arrow = {
-        enable: false,
-        arrowWidth: 2,
-        arrowHeight: 3,
-        tailWidth: 1,
-      },
-      coord = 'lnglat',
-      tileOrigin,
+      usage,
+      color = '#fff',
+      size = 1
+      // coord = 'lnglat',
+      // tileOrigin,
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
 
-    if (this.rendererService.getDirty()) {
-      this.texture.bind();
-    }
-
-    if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
-      this.judgeStyleAttributes({ opacity });
-      const encodeData = this.layer.getEncodedData();
-      const { data, width, height } = this.calDataFrame(
-        this.cellLength,
-        encodeData,
-        this.cellProperties,
-      );
-      this.rowCount = height; // 当前数据纹理有多少行
-
-      this.dataTexture =
-        this.cellLength > 0 && data.length > 0
-          ? this.createTexture2D({
-              flipY: true,
-              data,
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width,
-              height,
-            })
-          : this.createTexture2D({
-              flipY: true,
-              data: [1],
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width: 1,
-              height: 1,
-            });
-    }
     return {
-      u_tileOrigin: tileOrigin || [0, 0],
-      u_coord: coord === 'lnglat' ? 1.0 : 0.0,
-      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
-      u_cellTypeLayout: this.getCellTypeLayout(),
+      // u_tileOrigin: tileOrigin || [0, 0],
+      // u_coord: coord === 'lnglat' ? 1.0 : 0.0,
       u_opacity: Number(opacity),
-      u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
-
-      // 纹理支持参数
-      u_texture: this.texture, // 贴图
-      u_line_texture: lineTexture ? 1.0 : 0.0, // 传入线的标识
-      u_icon_step: iconStep,
-      u_textSize: [1024, this.iconService.canvasHeight || 128],
-
-      // line border 参数
-      u_borderWidth: borderWidth,
-      u_borderColor: rgb2arr(borderColor),
-
-      // 是否固定高度
-      u_heightfixed: Number(heightfixed),
-
-      // 顶点高度 scale
-      u_vertexScale: vertexHeightScale,
-
-      // arrow
-      u_arrow: Number(arrow.enable),
-      u_arrowHeight: arrow.arrowHeight || 3,
-      u_arrowWidth: arrow.arrowWidth || 2,
-      u_tailWidth: arrow.tailWidth === undefined ? 1 : arrow.tailWidth,
+      u_color: usage === 'basemap' ? rgb2arr(color): [0, 0, 0, 0],
+      u_size: usage === 'basemap' ? size: 1
     };
   }
 
   public initModels(callbackModel: (models: IModel[]) => void) {
-    this.updateTexture();
-    this.iconService.on('imageUpdate', this.updateTexture);
-
     this.buildModels(callbackModel);
   }
 
-  public clearModels() {
-    this.texture?.destroy();
-    this.dataTexture?.destroy();
-    this.iconService.off('imageUpdate', this.updateTexture);
-  }
-
   public async buildModels(callbackModel: (models: IModel[]) => void) {
     const {
       mask = false,
       maskInside = true,
       depth = false,
+      usage
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
-
     this.layer.triangulation = LineTriangulation;
 
     this.layer
       .buildLayerModel({
-        moduleName: 'lineTile',
-        vertexShader: line_tile_vert,
-        fragmentShader: line_tile_frag,
+        moduleName: 'lineTile_' + usage,
+        vertexShader: usage === 'basemap' ? line_tile_map_vert : line_tile_vert,
+        fragmentShader: usage === 'basemap' ? line_tile_map_frag : line_tile_frag,
         triangulation: LineTriangulation,
         blend: this.getBlend(),
         depth: { enable: depth },
-        // depth: { enable: true },
         stencil: getMask(mask, maskInside),
+        pick: usage !== 'basemap'
       })
       .then((model) => {
         callbackModel([model]);
@@ -145,77 +69,30 @@ export default class LineModel extends BaseModel {
   }
 
   protected registerBuiltinAttributes() {
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'distanceAndIndex',
-      type: AttributeType.Attribute,
-      descriptor: {
-        name: 'a_DistanceAndIndex',
-        buffer: {
-          // give the WebGL driver a hint that this buffer may change
-          usage: gl.STATIC_DRAW,
-          data: [],
-          type: gl.FLOAT,
+    const { usage } = this.layer.getLayerConfig();
+    if(usage !== 'basemap') {
+      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: 2,
+          update: (
+            feature: IEncodeFeature,
+          ) => {
+            const { size = 1 } = feature;
+            return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
+          },
         },
-        size: 2,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-          normal: number[],
-          vertexIndex?: number,
-        ) => {
-          return vertexIndex === undefined
-            ? [vertex[3], 10]
-            : [vertex[3], vertexIndex];
-        },
-      },
-    });
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'total_distance',
-      type: AttributeType.Attribute,
-      descriptor: {
-        name: 'a_Total_Distance',
-        buffer: {
-          // give the WebGL driver a hint that this buffer may change
-          usage: gl.STATIC_DRAW,
-          data: [],
-          type: gl.FLOAT,
-        },
-        size: 1,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-        ) => {
-          return [vertex[5]];
-        },
-      },
-    });
-
-    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: 2,
-        update: (
-          feature: IEncodeFeature,
-        ) => {
-          const { size = 1 } = feature;
-          return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
-        },
-      },
-    });
-
-    // point layer size;
+      });
+    }
+   
     this.styleAttributeService.registerStyleAttribute({
       name: 'normal',
       type: AttributeType.Attribute,
@@ -263,49 +140,5 @@ export default class LineModel extends BaseModel {
       },
     });
 
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'uv',
-      type: AttributeType.Attribute,
-      descriptor: {
-        name: 'a_iconMapUV',
-        buffer: {
-          // give the WebGL driver a hint that this buffer may change
-          usage: gl.DYNAMIC_DRAW,
-          data: [],
-          type: gl.FLOAT,
-        },
-        size: 2,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-        ) => {
-          const iconMap = this.iconService.getIconMap();
-          const { texture } = feature;
-          const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };
-          return [x, y];
-        },
-      },
-    });
   }
-
-  private updateTexture = () => {
-    const { createTexture2D } = this.rendererService;
-    if (this.texture) {
-      this.texture.update({
-        data: this.iconService.getCanvas(),
-      });
-      this.layer.render();
-      return;
-    }
-    this.texture = createTexture2D({
-      data: this.iconService.getCanvas(),
-      mag: gl.NEAREST,
-      min: gl.NEAREST,
-      premultiplyAlpha: false,
-      width: 1024,
-      height: this.iconService.canvasHeight || 128,
-    });
-  };
 }
diff --git a/packages/layers/src/line/models/wall.ts b/packages/layers/src/line/models/wall.ts
index 58e9bbc4e4..31bf92402f 100644
--- a/packages/layers/src/line/models/wall.ts
+++ b/packages/layers/src/line/models/wall.ts
@@ -13,8 +13,8 @@ import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { ILineLayerStyleOptions } from '../../core/interface';
 import { LineTriangulation } from '../../core/triangulation';
-import line_frag from '../shaders/wall_frag.glsl';
-import line_vert from '../shaders/wall_vert.glsl';
+import line_frag from '../shaders/wall/wall_frag.glsl';
+import line_vert from '../shaders/wall/wall_vert.glsl';
 
 export default class LineWallModel extends BaseModel {
   protected texture: ITexture2D;
@@ -44,41 +44,9 @@ export default class LineWallModel extends BaseModel {
       useLinearColor = 1;
     }
 
-    if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
-      this.judgeStyleAttributes({ opacity });
-      const encodeData = this.layer.getEncodedData();
-      const { data, width, height } = this.calDataFrame(
-        this.cellLength,
-        encodeData,
-        this.cellProperties,
-      );
-      this.rowCount = height; // 当前数据纹理有多少行
-
-      this.dataTexture =
-        this.cellLength > 0 && data.length > 0
-          ? this.createTexture2D({
-              flipY: true,
-              data,
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width,
-              height,
-            })
-          : this.createTexture2D({
-              flipY: true,
-              data: [1],
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width: 1,
-              height: 1,
-            });
-    }
-
     return {
       u_heightfixed: Number(heightfixed),
-      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
-      u_cellTypeLayout: this.getCellTypeLayout(),
-
+  
       u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_textureBlend: textureBlend === 'normal' ? 0.0 : 1.0,
 
@@ -112,7 +80,6 @@ export default class LineWallModel extends BaseModel {
 
   public clearModels() {
     this.texture?.destroy();
-    this.dataTexture?.destroy();
     this.iconService.off('imageUpdate', this.updateTexture);
   }
 
@@ -172,7 +139,6 @@ export default class LineWallModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
           return [vertex[5]];
         },
@@ -193,9 +159,6 @@ export default class LineWallModel extends BaseModel {
         size: 2,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0], size[1]] : [size as number, 0];
@@ -245,7 +208,6 @@ export default class LineWallModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
           return [vertex[4]];
         },
@@ -266,9 +228,6 @@ export default class LineWallModel extends BaseModel {
         size: 2,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const iconMap = this.iconService.getIconMap();
           const { texture } = feature;
diff --git a/packages/layers/src/line/shaders/dash/arc_dash_vert.glsl b/packages/layers/src/line/shaders/dash/arc_dash_vert.glsl
index a8f023fece..2f82166b03 100644
--- a/packages/layers/src/line/shaders/dash/arc_dash_vert.glsl
+++ b/packages/layers/src/line/shaders/dash/arc_dash_vert.glsl
@@ -48,6 +48,8 @@ vec2 midPoint(vec2 source, vec2 target, float arcThetaOffset) {
   // return mid;
 }
 float getSegmentRatio(float index) {
+  // dash: index / (segmentNumber - 1.);
+  // normal: smoothstep(0.0, 1.0, index / (segmentNumber - 1.));
   return index / (segmentNumber - 1.);
 }
 vec2 interpolate (vec2 source, vec2 target, float t, float arcThetaOffset) {
diff --git a/packages/layers/src/line/shaders/dash/line_dash_frag.glsl b/packages/layers/src/line/shaders/dash/line_dash_frag.glsl
index 9f49cdb9e2..ae5b65d98f 100644
--- a/packages/layers/src/line/shaders/dash/line_dash_frag.glsl
+++ b/packages/layers/src/line/shaders/dash/line_dash_frag.glsl
@@ -9,7 +9,7 @@ varying vec4 v_dash_array;
 #pragma include "picking"
 
 uniform float u_time;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; // 控制运动
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ]; // 控制运动
 
 varying mat4 styleMappingMat;
 // [animate, duration, interval, trailLength],
diff --git a/packages/layers/src/line/shaders/line_arc2d_vert.glsl b/packages/layers/src/line/shaders/line_arc2d_vert.glsl
index 6c82f012d4..0add0db068 100644
--- a/packages/layers/src/line/shaders/line_arc2d_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc2d_vert.glsl
@@ -7,7 +7,7 @@ attribute vec4 a_Instance;
 attribute float a_Size;
 uniform mat4 u_ModelMatrix;
 uniform float segmentNumber;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 varying vec4 v_color;
 varying vec2 v_normal;
 
diff --git a/packages/layers/src/line/shaders/line_arc_3d_frag.glsl b/packages/layers/src/line/shaders/line_arc_3d_frag.glsl
index b81e7df804..a456ddc2ca 100644
--- a/packages/layers/src/line/shaders/line_arc_3d_frag.glsl
+++ b/packages/layers/src/line/shaders/line_arc_3d_frag.glsl
@@ -20,7 +20,7 @@ uniform float segmentNumber;
 varying vec2 v_iconMapUV;
 
 uniform float u_time;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 
 varying mat4 styleMappingMat;
 
diff --git a/packages/layers/src/line/shaders/line_arc_3d_vert.glsl b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl
index 15efcd9e1c..475f44abc2 100644
--- a/packages/layers/src/line/shaders/line_arc_3d_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl
@@ -13,7 +13,7 @@ uniform float u_global_height: 10;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 uniform float segmentNumber;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 varying vec4 v_color;
 // varying vec2 v_normal;
 uniform float u_line_type: 0.0;
@@ -85,11 +85,11 @@ float torad(float deg) {
 
 vec3 lglt2xyz(vec2 lnglat) {
   float pi = 3.1415926;
-  // TODO: + Math.PI/2 是为了对齐坐标
+  // + Math.PI/2 是为了对齐坐标
   float lng = torad(lnglat.x) + pi / 2.0;
   float lat = torad(lnglat.y);
 
-  // TODO: 手动增加一些偏移，减轻面的冲突
+  // 手动增加一些偏移，减轻面的冲突
   float radius = u_globel_radius;
 
   float z = radius * cos(lat) * cos(lng);
diff --git a/packages/layers/src/line/shaders/line_arc_frag.glsl b/packages/layers/src/line/shaders/line_arc_frag.glsl
index 6711ca6732..3a50ead93f 100644
--- a/packages/layers/src/line/shaders/line_arc_frag.glsl
+++ b/packages/layers/src/line/shaders/line_arc_frag.glsl
@@ -11,7 +11,7 @@ varying vec4 v_dash_array;
 varying vec4 v_color;
 
 uniform float u_time;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 
 uniform float u_line_texture;
 uniform sampler2D u_texture;
diff --git a/packages/layers/src/line/shaders/line_arc_great_circle_frag.glsl b/packages/layers/src/line/shaders/line_arc_great_circle_frag.glsl
index 434bcdeedd..9a9acfa91c 100644
--- a/packages/layers/src/line/shaders/line_arc_great_circle_frag.glsl
+++ b/packages/layers/src/line/shaders/line_arc_great_circle_frag.glsl
@@ -13,7 +13,7 @@ varying float v_distance_ratio;
 varying vec4 v_color;
 
 uniform float u_time;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 
 uniform float u_line_texture: 0.0;
 uniform sampler2D u_texture;
diff --git a/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl b/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
index ef6e965583..e714b27388 100644
--- a/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl
@@ -10,7 +10,7 @@ attribute float a_Size;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 uniform float segmentNumber;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 varying vec4 v_color;
 // varying vec2 v_normal;
 
diff --git a/packages/layers/src/line/shaders/line_arc_vert.glsl b/packages/layers/src/line/shaders/line_arc_vert.glsl
index 1d3d7ae695..854dafd271 100644
--- a/packages/layers/src/line/shaders/line_arc_vert.glsl
+++ b/packages/layers/src/line/shaders/line_arc_vert.glsl
@@ -8,7 +8,7 @@ attribute float a_Size;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 uniform float segmentNumber;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 varying vec4 v_color;
 
 uniform float u_lineDir: 1.0;
@@ -52,8 +52,10 @@ vec2 midPoint(vec2 source, vec2 target, float arcThetaOffset) {
   // return mid;
 }
 float getSegmentRatio(float index) {
-    // return smoothstep(0.0, 1.0, index / (segmentNumber - 1.));
-     return index / (segmentNumber - 1.);
+    // dash: index / (segmentNumber - 1.);
+    // normal: smoothstep(0.0, 1.0, index / (segmentNumber - 1.));
+    return smoothstep(0.0, 1.0, index / (segmentNumber - 1.));
+    //  return index / (segmentNumber - 1.);
 }
 vec2 interpolate (vec2 source, vec2 target, float t, float arcThetaOffset) {
   // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation
diff --git a/packages/layers/src/line/shaders/line_bezier_vert.glsl b/packages/layers/src/line/shaders/line_bezier_vert.glsl
index 7baa167c7e..2735b91696 100644
--- a/packages/layers/src/line/shaders/line_bezier_vert.glsl
+++ b/packages/layers/src/line/shaders/line_bezier_vert.glsl
@@ -7,7 +7,7 @@ attribute vec4 a_Instance;
 attribute float a_Size;
 uniform mat4 u_ModelMatrix;
 uniform float segmentNumber;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 varying vec4 v_color;
 varying vec2 v_normal;
 
diff --git a/packages/layers/src/line/shaders/line_frag.glsl b/packages/layers/src/line/shaders/line_frag.glsl
index a9f745a39d..3dc3c5393d 100644
--- a/packages/layers/src/line/shaders/line_frag.glsl
+++ b/packages/layers/src/line/shaders/line_frag.glsl
@@ -19,7 +19,7 @@ varying vec2 v_iconMapUV;
 #pragma include "picking"
 
 uniform float u_time;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; // 控制运动
+uniform vec4 u_aimate: [ 1, 2., 1.0, 0.2 ]; // 控制运动
 
 varying mat4 styleMappingMat;
 // [animate, duration, interval, trailLength],
@@ -95,6 +95,5 @@ void main() {
     gl_FragColor.a *= mix(u_blur.g, u_blur.b, (blurV - 0.5)/0.5);
   }
   
-
   gl_FragColor = filterColor(gl_FragColor);
 }
diff --git a/packages/layers/src/line/shaders/line_vert.glsl b/packages/layers/src/line/shaders/line_vert.glsl
index adc74dc014..cfe1bb38c5 100644
--- a/packages/layers/src/line/shaders/line_vert.glsl
+++ b/packages/layers/src/line/shaders/line_vert.glsl
@@ -15,7 +15,7 @@ attribute vec2 a_DistanceAndIndex;
 
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 uniform float u_icon_step: 100;
 
 uniform float u_heightfixed: 0.0;
diff --git a/packages/layers/src/line/shaders/linear/arc3d_linear_frag.glsl b/packages/layers/src/line/shaders/linear/arc3d_linear_frag.glsl
index fb0516f91e..f57e91c058 100644
--- a/packages/layers/src/line/shaders/linear/arc3d_linear_frag.glsl
+++ b/packages/layers/src/line/shaders/linear/arc3d_linear_frag.glsl
@@ -8,7 +8,7 @@ uniform float segmentNumber;
 
 
 uniform float u_time;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 
 uniform float u_linearColor: 0;
 uniform vec4 u_sourceColor;
diff --git a/packages/layers/src/line/shaders/linear/arc3d_linear_vert.glsl b/packages/layers/src/line/shaders/linear/arc3d_linear_vert.glsl
index 15efcd9e1c..475f44abc2 100644
--- a/packages/layers/src/line/shaders/linear/arc3d_linear_vert.glsl
+++ b/packages/layers/src/line/shaders/linear/arc3d_linear_vert.glsl
@@ -13,7 +13,7 @@ uniform float u_global_height: 10;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 uniform float segmentNumber;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 varying vec4 v_color;
 // varying vec2 v_normal;
 uniform float u_line_type: 0.0;
@@ -85,11 +85,11 @@ float torad(float deg) {
 
 vec3 lglt2xyz(vec2 lnglat) {
   float pi = 3.1415926;
-  // TODO: + Math.PI/2 是为了对齐坐标
+  // + Math.PI/2 是为了对齐坐标
   float lng = torad(lnglat.x) + pi / 2.0;
   float lat = torad(lnglat.y);
 
-  // TODO: 手动增加一些偏移，减轻面的冲突
+  // 手动增加一些偏移，减轻面的冲突
   float radius = u_globel_radius;
 
   float z = radius * cos(lat) * cos(lng);
diff --git a/packages/layers/src/line/shaders/linear/arc_linear_frag.glsl b/packages/layers/src/line/shaders/linear/arc_linear_frag.glsl
index 0e755bf3ac..f4c681be51 100644
--- a/packages/layers/src/line/shaders/linear/arc_linear_frag.glsl
+++ b/packages/layers/src/line/shaders/linear/arc_linear_frag.glsl
@@ -10,7 +10,7 @@ varying vec4 v_dash_array;
 varying vec4 v_color;
 
 uniform float u_time;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 
 uniform float u_line_texture;
 uniform sampler2D u_texture;
diff --git a/packages/layers/src/line/shaders/tile/line_tile_frag.glsl b/packages/layers/src/line/shaders/tile/line_tile_frag.glsl
deleted file mode 100644
index 4d816342dd..0000000000
--- a/packages/layers/src/line/shaders/tile/line_tile_frag.glsl
+++ /dev/null
@@ -1,79 +0,0 @@
-#define LineTexture 1.0
-uniform float u_blur : 0.99;
-uniform float u_opacity : 1.0;
-uniform float u_textureBlend;
-
-uniform float u_borderWidth: 0.0;
-uniform vec4 u_borderColor;
-varying vec4 v_color;
-
-// line texture
-uniform float u_line_texture;
-uniform sampler2D u_texture;
-uniform vec2 u_textSize;
-
-varying vec2 v_iconMapUV;
-
-#pragma include "picking"
-
-varying mat4 styleMappingMat;
-
-void main() {
-  float opacity = styleMappingMat[0][0];
-  float d_distance_ratio = styleMappingMat[3].r; // 当前点位距离占线总长的比例
-  gl_FragColor = v_color;
-  // anti-alias
-  // float blur = 1.0 - smoothstep(u_blur, 1., length(v_normal.xy));
-  gl_FragColor.a *= opacity; // 全局透明度
-
-
-  if(u_line_texture == LineTexture) { // while load texture
-    float aDistance = styleMappingMat[3].g;      // 当前顶点的距离
-    float d_texPixelLen = styleMappingMat[3].b;  // 贴图的像素长度，根据地图层级缩放
-    float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen);
-    float v = styleMappingMat[3].a;  // 线图层贴图部分的 v 坐标值
-
-    // v = max(smoothstep(0.95, 1.0, v), v);
-    vec2 uv= v_iconMapUV / u_textSize + vec2(u, v) / u_textSize * 64.;
-    
-    // gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, vec2(u, v)));
-    // gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
-     vec4 pattern = texture2D(u_texture, uv);
-
-    if(u_textureBlend == 0.0) { // normal
-      pattern.a = 0.0;
-      gl_FragColor += pattern;
-    } else { // replace
-        pattern.a *= opacity;
-        if(gl_FragColor.a <= 0.0) {
-          pattern.a = 0.0;
-        }
-        gl_FragColor = pattern;
-    }
-  } 
-
-  float v = styleMappingMat[3].a;
-  float borderWidth = min(0.5, u_borderWidth);
-  // 绘制 border
-  if(borderWidth > 0.01) {
-    float borderOuterWidth = borderWidth/2.0;
-
-    if(v >= 1.0 - borderWidth || v <= borderWidth) {
-      if(v > borderWidth) {
-        float linear = smoothstep(0.0, 1.0, (v - (1.0 - borderWidth))/borderWidth);
-        gl_FragColor.rgb = mix(gl_FragColor.rgb, u_borderColor.rgb, linear);
-      } else if(v <= borderWidth) {
-        float linear = smoothstep(0.0, 1.0, v/borderWidth);
-        gl_FragColor.rgb = mix(u_borderColor.rgb, gl_FragColor.rgb, linear);
-      }
-    }
-
-    if(v < borderOuterWidth) {
-      gl_FragColor.a = mix(0.0, gl_FragColor.a, v/borderOuterWidth);
-    } else if(v > 1.0 - borderOuterWidth) {
-      gl_FragColor.a = mix(gl_FragColor.a, 0.0, (v - (1.0 - borderOuterWidth))/borderOuterWidth);
-    }
-  }
-
-  gl_FragColor = filterColor(gl_FragColor);
-}
diff --git a/packages/layers/src/line/shaders/tile/line_tile_map_vert.glsl b/packages/layers/src/line/shaders/tile/line_tile_map_vert.glsl
new file mode 100644
index 0000000000..7e74783439
--- /dev/null
+++ b/packages/layers/src/line/shaders/tile/line_tile_map_vert.glsl
@@ -0,0 +1,25 @@
+attribute float a_Miter;
+attribute vec4 a_Color;
+attribute vec3 a_Normal;
+attribute vec3 a_Position;
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+uniform float u_size;
+
+#pragma include "projection"
+
+void main() {
+
+  vec3 size = a_Miter * u_size * reverse_offset_normal(a_Normal);
+  
+  vec2 offset = project_pixel(size.xy);
+
+  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(project_pos.xy + offset, 0.0, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
+  }
+}
diff --git a/packages/layers/src/line/shaders/tile/line_tile_vert.glsl b/packages/layers/src/line/shaders/tile/line_tile_vert.glsl
index aaf25efa1b..f240c0bc60 100644
--- a/packages/layers/src/line/shaders/tile/line_tile_vert.glsl
+++ b/packages/layers/src/line/shaders/tile/line_tile_vert.glsl
@@ -1,210 +1,52 @@
-
 attribute float a_Miter;
 attribute vec4 a_Color;
 attribute vec2 a_Size;
 attribute vec3 a_Normal;
 attribute vec3 a_Position;
 
-attribute vec2 a_iconMapUV;
-
-// dash line
-attribute float a_Total_Distance;
-attribute vec2 a_DistanceAndIndex;
-
-uniform vec2 u_tileOrigin;
-uniform float u_coord;
+// uniform vec2 u_tileOrigin;
+// uniform float u_coord;
 
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
-uniform float u_icon_step: 100;
 
-uniform float u_heightfixed: 0.0;
-uniform float u_vertexScale: 1.0;
 
 #pragma include "projection"
 #pragma include "picking"
 
 varying vec4 v_color;
 
-// texV 线图层 - 贴图部分的 v 坐标（线的宽度方向）
-varying vec2 v_iconMapUV;
-
-
-uniform float u_linearColor: 0;
-uniform float u_arrow: 0.0;
-uniform float u_arrowHeight: 3.0;
-uniform float u_arrowWidth: 2.0;
-uniform float u_tailWidth: 1.0;
-
-uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
-
-vec2 calculateArrow(vec2 offset) {
-  /*
-  * 在支持箭头的时候，第二、第三组顶点是额外插入用于构建顶点的
-  */
-  float arrowFlag = -1.0;
-  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
-    // 高德 2.0 的旋转角度不同
-    arrowFlag = 1.0;
-  }
-  float pi = arrowFlag * 3.1415926/2.;
-  if(a_Miter < 0.) {
-    // 根据线的两侧偏移不同、旋转的方向相反
-    pi = -pi;
-  }
-  highp float angle_sin = sin(pi);
-  highp float angle_cos = cos(pi);
-  // 计算垂直与线方向的旋转矩阵
-  mat2 rotation_matrix = mat2(angle_cos, -1.0 * angle_sin, angle_sin, angle_cos);
-  float arrowWidth = u_arrowWidth;
-  float arrowHeight = u_arrowHeight;
-
-  vec2 arrowOffset = vec2(0.0);
-  /*
-  * a_DistanceAndIndex.y 用于标记当前顶点属于哪一组（两个顶点一组，构成线的其实是矩形，最简需要四个顶点、两组顶点构成）
-  */
-  if(a_DistanceAndIndex.y == 0.0) {
-    // 箭头尖部
-    offset = vec2(0.0);
-  } else if(a_DistanceAndIndex.y == 1.0) {
-    // 箭头两侧
-    arrowOffset = rotation_matrix*(offset * arrowHeight);
-    offset += arrowOffset; // 沿线偏移
-    offset = offset * arrowWidth; // 垂直线向外偏移（是构建箭头两侧的顶点）
-  } else if(a_DistanceAndIndex.y == 2.0 || a_DistanceAndIndex.y == 3.0 || a_DistanceAndIndex.y == 4.0) {
-    // 偏移其余的点位（将长度让位给箭头）
-    arrowOffset = rotation_matrix*(offset * arrowHeight) * arrowWidth;
-    offset += arrowOffset;// 沿线偏移
-  }
-
-  return offset;
-}
-
 void main() {
-  // cal style mapping - 数据纹理映射部分的计算
-  styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0  // distance_ratio/distance/pixelLen/texV
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
-
-  float d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
-
-  v_iconMapUV = a_iconMapUV;
-  d_texPixelLen = project_float_pixel(u_icon_step);
-  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
-    d_texPixelLen *= 10.0;
-  }
-
   v_color = a_Color;
 
   vec3 size = a_Miter * setPickingSize(a_Size.x) * reverse_offset_normal(a_Normal);
   
   vec2 offset = project_pixel(size.xy);
 
-  float lineDistance = a_DistanceAndIndex.x;
-  float currentLinePointRatio = lineDistance / a_Total_Distance;
- 
-  if(u_arrow > 0.0) {
-      //  计算箭头
-    offset = calculateArrow(offset);
-
-    if(a_DistanceAndIndex.y > 4.0) {
-      offset *= mix(1.0, u_tailWidth, currentLinePointRatio);
-    }
-  }
-
-  float lineOffsetWidth = length(offset + offset * sign(a_Miter)); // 线横向偏移的距离（向两侧偏移的和）
-  float linePixelSize = project_pixel(a_Size.x) * 2.0;  // 定点位置偏移，按地图等级缩放后的距离 单侧 * 2
-  float texV = lineOffsetWidth/linePixelSize; // 线图层贴图部分的 v 坐标值
-
-  // 设置数据集的参数
-  styleMappingMat[3][0] = currentLinePointRatio; // 当前点位距离占线总长的比例
-  styleMappingMat[3][1] = lineDistance;       // 当前顶点的距离
-  styleMappingMat[3][2] = d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
-  styleMappingMat[3][3] = texV;             // 线图层贴图部分的 v 坐标值
-
   vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
 
-  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, a_Size.y, 1.0));
-
-  float h = float(a_Position.z) * u_vertexScale; // 线顶点的高度 - 兼容不存在第三个数值的情况 vertex height
-  float lineHeight = a_Size.y; // size 第二个参数代表的高度 [linewidth, lineheight]
-
-if(u_coord > 0.0) {
-    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    lineHeight *= 0.2; // 保持和 amap/mapbox 一致的效果
-    h *= 0.2;
-    if(u_heightfixed < 1.0) {
-      lineHeight = project_pixel(a_Size.y);
-    }
-    gl_Position = u_Mvp * (vec4(project_pos.xy + offset, lineHeight + h, 1.0));
-  } else {
-    // mapbox -  amap
-    
-    // 兼容 mapbox 在线高度上的效果表现基本一致
-    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
-      // mapbox
-      // 保持高度相对不变
-      float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
-      h *= mapboxZoomScale;
-      if(u_heightfixed > 0.0) {
-        lineHeight *= mapboxZoomScale;
-      }
-      
+  // if(u_coord > 0.0) { // 使用经纬度坐标
+      if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      gl_Position = u_Mvp * (vec4(project_pos.xy + offset, 0.0, 1.0));
     } else {
-      // amap
-      // lineHeight 顶点偏移高度
-      if(u_heightfixed < 1.0) {
-        lineHeight *= pow(2.0, 20.0 - u_Zoom);
-      }
+      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
     }
+  // } else { // 使用偏移坐标
+  //   vec2 pointPos = a_Position.xy;
+  //   vec4 tileWorld = vec4(project_mvt_offset_position(vec4(u_tileOrigin, 0.0, 1.0)).xyz, 1.0); // 瓦片起始点的世界坐标
 
-    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, lineHeight + h, 1.0));
-  }
-} else {
-  vec2 pointPos = a_Position.xy;
-  vec4 tileWorld = vec4(project_mvt_offset_position(vec4(u_tileOrigin, 0.0, 1.0)).xyz, 1.0); // 瓦片起始点的世界坐标
+  //   vec2 pointOffset =  pointPos *  pow(2.0, u_Zoom); // 瓦片内的点的偏移坐标
+    
+  //   tileWorld.xy += pointOffset;
 
-  vec2 pointOffset =  pointPos *  pow(2.0, u_Zoom); // 瓦片内的点的偏移坐标
-  
-  tileWorld.xy += pointOffset;
-
-  tileWorld.xy += offset;
-
-  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
-    // Needs to be divided with project_uCommonUnitsPerMeter
-    tileWorld.w *= u_PixelsPerMeter.z;
-  }
-
-  gl_Position = u_ViewProjectionMatrix * tileWorld + u_ViewportCenterProjection;
-}
+  //   tileWorld.xy += offset;
 
+  //   if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+  //     // Needs to be divided with project_uCommonUnitsPerMeter
+  //     tileWorld.w *= u_PixelsPerMeter.z;
+  //   }
+  //   gl_Position = u_ViewProjectionMatrix * tileWorld + u_ViewportCenterProjection;
+  // }
 
   setPickingColor(a_PickingColor);
-
-
 }
diff --git a/packages/layers/src/line/shaders/tile/simpleline_map_vert.glsl b/packages/layers/src/line/shaders/tile/simpleline_map_vert.glsl
new file mode 100644
index 0000000000..07529b33c1
--- /dev/null
+++ b/packages/layers/src/line/shaders/tile/simpleline_map_vert.glsl
@@ -0,0 +1,15 @@
+attribute vec3 a_Position;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+
+#pragma include "projection"
+
+void main() {
+  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(project_pos.xy, 0.0, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.0));
+  }
+}
\ No newline at end of file
diff --git a/packages/layers/src/line/shaders/tile/simpleline_vert.glsl b/packages/layers/src/line/shaders/tile/simpleline_vert.glsl
new file mode 100644
index 0000000000..87fab6d435
--- /dev/null
+++ b/packages/layers/src/line/shaders/tile/simpleline_vert.glsl
@@ -0,0 +1,21 @@
+attribute vec4 a_Color;
+attribute vec3 a_Position;
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+
+#pragma include "projection"
+
+varying vec4 v_color;
+
+void main() {
+  v_color = a_Color; 
+
+  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(project_pos.xy, 0.0, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.0));
+  }
+}
diff --git a/packages/layers/src/line/shaders/wall_frag.glsl b/packages/layers/src/line/shaders/wall/wall_frag.glsl
similarity index 79%
rename from packages/layers/src/line/shaders/wall_frag.glsl
rename to packages/layers/src/line/shaders/wall/wall_frag.glsl
index 28cb7d4348..e893f944f9 100644
--- a/packages/layers/src/line/shaders/wall_frag.glsl
+++ b/packages/layers/src/line/shaders/wall/wall_frag.glsl
@@ -1,36 +1,32 @@
 #define Animate 0.0
 #define LineTexture 1.0
 
-uniform float u_opacity : 1.0;
-uniform float u_textureBlend;
-uniform float u_iconStepCount;
-
-varying vec4 v_color;
-
 // line texture
 uniform float u_line_texture;
 uniform sampler2D u_texture;
 uniform vec2 u_textSize;
-
-varying vec2 v_iconMapUV;
-varying float v_blur;
-
 uniform float u_linearColor: 0;
 uniform vec4 u_sourceColor;
 uniform vec4 u_targetColor;
+uniform float u_opacity : 1.0;
+uniform float u_textureBlend;
+uniform float u_iconStepCount;
+uniform float u_time;
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ]; // 控制运动
+
+varying vec2 v_iconMapUV;
+varying float v_blur;
+varying float v_radio;
+varying vec4 v_color;
+varying vec4 v_dataset;
 
 #pragma include "picking"
 
-uniform float u_time;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; // 控制运动
-
-varying mat4 styleMappingMat;
-// [animate, duration, interval, trailLength],
 void main() {
-  float opacity = styleMappingMat[0][0];
+  float opacity = u_opacity;
   float animateSpeed = 0.0; // 运动速度
-  float d_distance_ratio = styleMappingMat[3].r; // 当前点位距离占线总长的比例
-  float v = styleMappingMat[3].a;
+  float d_distance_ratio = v_dataset.r; // 当前点位距离占线总长的比例
+  float v = v_dataset.a;
 
   if(u_linearColor == 1.0) { // 使用渐变颜色
     gl_FragColor = mix(u_sourceColor, u_targetColor, v);
@@ -48,10 +44,10 @@ void main() {
   }
 
   if(u_line_texture == LineTexture) { // while load texture
-    float aDistance = styleMappingMat[3].g;      // 当前顶点的距离
-    float d_texPixelLen = styleMappingMat[3].b;  // 贴图的像素长度，根据地图层级缩放
+    float aDistance = v_dataset.g;      // 当前顶点的距离
+    float d_texPixelLen = v_dataset.b;  // 贴图的像素长度，根据地图层级缩放
     float u = fract(mod(aDistance, d_texPixelLen)/d_texPixelLen - animateSpeed);
-    float v = styleMappingMat[3].a;  // 线图层贴图部分的 v 坐标值
+    float v = v_dataset.a;  // 线图层贴图部分的 v 坐标值
 
     // 计算纹理间隔 start
     float flag = 0.0;
diff --git a/packages/layers/src/line/shaders/wall/wall_vert.glsl b/packages/layers/src/line/shaders/wall/wall_vert.glsl
new file mode 100644
index 0000000000..c070e10265
--- /dev/null
+++ b/packages/layers/src/line/shaders/wall/wall_vert.glsl
@@ -0,0 +1,77 @@
+#define Animate 0.0
+
+attribute float a_Miter;
+attribute vec4 a_Color;
+attribute vec2 a_Size;
+attribute vec3 a_Normal;
+attribute vec3 a_Position;
+attribute vec2 a_iconMapUV;
+attribute float a_Total_Distance;
+attribute float a_Distance;
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
+uniform float u_icon_step: 100;
+uniform float u_heightfixed;
+uniform float u_linearColor: 0;
+
+#pragma include "projection"
+#pragma include "light"
+#pragma include "picking"
+
+// texV 线图层 - 贴图部分的 v 坐标（线的宽度方向）
+varying vec2 v_iconMapUV;
+varying vec4 v_color;
+varying float v_blur;
+varying float v_radio;
+varying vec4 v_dataset;
+
+void main() {
+
+
+  float d_distance_ratio; // 当前点位距离占线总长的比例
+  float d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
+
+  v_iconMapUV = a_iconMapUV;
+  if(u_heightfixed < 1.0) {     // 高度随 zoom 调整
+    d_texPixelLen = project_pixel(u_icon_step);
+  } else {
+    d_texPixelLen = u_icon_step;
+  }
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
+    d_texPixelLen *= 10.0;
+  }
+
+  if(u_aimate.x == Animate || u_linearColor == 1.0) {
+      d_distance_ratio = a_Distance / a_Total_Distance;
+  }
+
+  float miter = (a_Miter + 1.0)/2.0;
+  // 设置数据集的参数
+  v_dataset[0] = d_distance_ratio; // 当前点位距离占线总长的比例
+  v_dataset[1] = a_Distance;       // 当前顶点的距离
+  v_dataset[2] = d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
+  v_dataset[3] = miter;          // 线图层贴图部分的 v 坐标值 0 - 1
+
+  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
+
+  float originSize = a_Size.x;  // 固定高度
+  if(u_heightfixed < 1.0) {     // 高度随 zoom 调整
+    originSize = project_float_pixel(a_Size.x);
+  }
+
+  float wallHeight = originSize * miter;
+  float lightWeight = calc_lighting(vec4(project_pos.xy, wallHeight, 1.0));
+
+  v_blur = min(project_float_pixel(2.0) / originSize, 0.05);
+  v_color = vec4(a_Color.rgb * lightWeight, a_Color.w);
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(project_pos.xy, wallHeight, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, wallHeight, 1.0));
+  }
+
+  setPickingColor(a_PickingColor);
+}
diff --git a/packages/layers/src/line/shaders/wall_vert.glsl b/packages/layers/src/line/shaders/wall_vert.glsl
deleted file mode 100644
index 6384c47dc5..0000000000
--- a/packages/layers/src/line/shaders/wall_vert.glsl
+++ /dev/null
@@ -1,111 +0,0 @@
-#define Animate 0.0
-
-attribute float a_Miter;
-attribute vec4 a_Color;
-attribute vec2 a_Size;
-attribute vec3 a_Normal;
-attribute vec3 a_Position;
-attribute vec2 a_iconMapUV;
-
-attribute float a_Total_Distance;
-attribute float a_Distance;
-
-uniform mat4 u_ModelMatrix;
-uniform mat4 u_Mvp;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
-uniform float u_icon_step: 100;
-uniform float u_heightfixed;
-
-#pragma include "projection"
-#pragma include "light"
-#pragma include "picking"
-
-varying vec4 v_color;
-varying float v_blur;
-
-// texV 线图层 - 贴图部分的 v 坐标（线的宽度方向）
-varying vec2 v_iconMapUV;
-
-uniform float u_linearColor: 0;
-
-uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
-#pragma include "styleMapping"
-#pragma include "light"
-#pragma include "styleMappingCalOpacity"
-
-void main() {
-  // cal style mapping - 数据纹理映射部分的计算
-  styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0  // distance_ratio/distance/pixelLen/texV
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
-
-  float d_distance_ratio; // 当前点位距离占线总长的比例
-  float d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
-
-  v_iconMapUV = a_iconMapUV;
-  if(u_heightfixed < 1.0) {     // 高度随 zoom 调整
-    d_texPixelLen = project_pixel(u_icon_step);
-  } else {
-    d_texPixelLen = u_icon_step;
-  }
-  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
-    d_texPixelLen *= 10.0;
-  }
-
-  if(u_aimate.x == Animate || u_linearColor == 1.0) {
-      d_distance_ratio = a_Distance / a_Total_Distance;
-  }
-
-  float miter = (a_Miter + 1.0)/2.0;
-  // 设置数据集的参数
-  styleMappingMat[3][0] = d_distance_ratio; // 当前点位距离占线总长的比例
-  styleMappingMat[3][1] = a_Distance;       // 当前顶点的距离
-  styleMappingMat[3][2] = d_texPixelLen;    // 贴图的像素长度，根据地图层级缩放
-  styleMappingMat[3][3] = miter;          // 线图层贴图部分的 v 坐标值 0 - 1
-
-  vec4 project_pos = project_position(vec4(a_Position.xy, 0, 1.0));
-
-  float originSize = a_Size.x;  // 固定高度
-  if(u_heightfixed < 1.0) {     // 高度随 zoom 调整
-    originSize = project_float_pixel(a_Size.x);
-  }
-
-  float wallHeight = originSize * miter;
-  float lightWeight = calc_lighting(vec4(project_pos.xy, wallHeight, 1.0));
-
-  v_blur = min(project_float_pixel(2.0) / originSize, 0.05);
-
-  v_color = vec4(a_Color.rgb * lightWeight, a_Color.w);
-  // v_color = a_Color;
-
-  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    gl_Position = u_Mvp * (vec4(project_pos.xy, wallHeight, 1.0));
-  } else {
-    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, wallHeight, 1.0));
-  }
-
-  setPickingColor(a_PickingColor);
-}
diff --git a/packages/layers/src/mask/index.ts b/packages/layers/src/mask/index.ts
index a8513d4fe9..06ec2878fd 100644
--- a/packages/layers/src/mask/index.ts
+++ b/packages/layers/src/mask/index.ts
@@ -1,7 +1,17 @@
 import BaseLayer from '../core/BaseLayer';
 import { IMaskLayerStyleOptions } from '../core/interface';
 import MaskModels, { MaskModelType } from './models';
-
+import {
+  TYPES,
+  ICameraService,
+  ICoordinateSystemService,
+  ILayerPlugin,
+  ILayerService,
+  IMapService,
+  IRendererService,
+  IShaderModuleService,
+  IStyleAttributeService,
+} from '@antv/l7-core';
 export default class MaskLayer extends BaseLayer<IMaskLayerStyleOptions> {
   public type: string = 'MaskLayer';
   public defaultSourceConfig: {
@@ -12,16 +22,97 @@ export default class MaskLayer extends BaseLayer<IMaskLayerStyleOptions> {
       };
     };
   };
+
+  public init() {
+    // 设置配置项
+    const sceneId = this.container.get<string>(TYPES.SceneID);
+
+    this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
+    this.layerType = this.rawConfig.layerType;
+
+    this.rendererService = this.container.get<IRendererService>(
+      TYPES.IRendererService,
+    );
+    this.layerService = this.container.get<ILayerService>(TYPES.ILayerService);
+
+    this.mapService = this.container.get<IMapService>(TYPES.IMapService);
+
+    this.cameraService = this.container.get<ICameraService>(
+      TYPES.ICameraService,
+    );
+    this.coordinateService = this.container.get<ICoordinateSystemService>(
+      TYPES.ICoordinateSystemService,
+    );
+    this.shaderModuleService = this.container.get<IShaderModuleService>(
+      TYPES.IShaderModuleService,
+    );
+    this.postProcessingPassFactory = this.container.get(
+      TYPES.IFactoryPostProcessingPass,
+    );
+    this.normalPassFactory = this.container.get(TYPES.IFactoryNormalPass);
+
+    // 图层容器服务
+    this.styleAttributeService = this.container.get<IStyleAttributeService>(
+      TYPES.IStyleAttributeService,
+    );
+
+    // 完成样式服务注册完成前添加的属性
+    this.pendingStyleAttributes.forEach(
+      ({ attributeName, attributeField, attributeValues, updateOptions }) => {
+        this.styleAttributeService.updateStyleAttribute(
+          attributeName,
+          {
+            // @ts-ignore
+            scale: {
+              field: attributeField,
+              ...this.splitValuesAndCallbackInAttribute(
+                // @ts-ignore
+                attributeValues,
+                // @ts-ignore
+                this.getLayerConfig()[attributeName],
+              ),
+            },
+          },
+          // @ts-ignore
+          updateOptions,
+        );
+      },
+    );
+    this.pendingStyleAttributes = [];
+
+    // 获取插件集
+    this.plugins = this.container.getAll<ILayerPlugin>(TYPES.ILayerPlugin);
+    // 完成插件注册，传入场景和图层容器内的服务
+    for (const plugin of this.plugins) {
+      plugin.apply(this, {
+        rendererService: this.rendererService,
+        mapService: this.mapService,
+        styleAttributeService: this.styleAttributeService,
+        normalPassFactory: this.normalPassFactory,
+        postProcessingPassFactory: this.postProcessingPassFactory,
+      });
+    }
+
+    // 触发 init 生命周期插件
+    this.hooks.init.call();
+    this.hooks.afterInit.call();
+
+    return this;
+  }
+
   public buildModels() {
     const shape = this.getModelType();
     this.layerModel = new MaskModels[shape](this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
   protected getConfigSchema() {
     return {
diff --git a/packages/layers/src/mask/models/fill.ts b/packages/layers/src/mask/models/fill.ts
index 3b9362f277..a1842d8365 100644
--- a/packages/layers/src/mask/models/fill.ts
+++ b/packages/layers/src/mask/models/fill.ts
@@ -1,18 +1,21 @@
 import { gl, IModel } from '@antv/l7-core';
+import { rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
 import { IMaskLayerStyleOptions } from '../../core/interface';
 import { polygonTriangulation } from '../../core/triangulation';
-import mask_frag from '../shaders/mask_frag.glsl';
+import mask_frag from '../../shader/minify_frag.glsl';
 import mask_vert from '../shaders/mask_vert.glsl';
 
 export default class MaskModel extends BaseModel {
   public getUninforms() {
     const {
       opacity = 0,
+      color = '#000'
     } = this.layer.getLayerConfig() as IMaskLayerStyleOptions;
     return {
       u_opacity: isNumber(opacity) ? opacity : 0.0,
+      u_color: rgb2arr(color),
     };
   }
 
@@ -43,6 +46,7 @@ export default class MaskModel extends BaseModel {
             zpass: gl.REPLACE,
           },
         },
+        pick: false
       })
       .then((model) => {
         callbackModel([model]);
@@ -53,9 +57,8 @@ export default class MaskModel extends BaseModel {
       });
   }
 
-  public clearModels() {
-    this.dataTexture?.destroy();
-    this.layerService.clear();
+  public clearModels(refresh = true) {
+    refresh && this.layerService.clear();
   }
 
   protected registerBuiltinAttributes() {
diff --git a/packages/layers/src/mask/shaders/mask_frag.glsl b/packages/layers/src/mask/shaders/mask_frag.glsl
deleted file mode 100644
index f1debbb1fb..0000000000
--- a/packages/layers/src/mask/shaders/mask_frag.glsl
+++ /dev/null
@@ -1,7 +0,0 @@
-uniform float u_opacity;
-varying vec4 v_Color;
-
-void main() {
-  gl_FragColor = v_Color;
-  gl_FragColor.a *= u_opacity;
-}
diff --git a/packages/layers/src/mask/shaders/mask_vert.glsl b/packages/layers/src/mask/shaders/mask_vert.glsl
index dbceb0975e..125b5ac452 100644
--- a/packages/layers/src/mask/shaders/mask_vert.glsl
+++ b/packages/layers/src/mask/shaders/mask_vert.glsl
@@ -1,17 +1,11 @@
-attribute vec4 a_Color;
 attribute vec3 a_Position;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
-varying vec4 v_Color;
-
 #pragma include "projection"
 
 void main() {
-
-  v_Color = a_Color;
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
-  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts
index 33bbdbf25f..ccd80837d7 100644
--- a/packages/layers/src/plugins/DataMappingPlugin.ts
+++ b/packages/layers/src/plugins/DataMappingPlugin.ts
@@ -1,7 +1,6 @@
 import {
   IEncodeFeature,
   IFontService,
-  IGlobalConfigService,
   ILayer,
   ILayerPlugin,
   IMapService,
@@ -20,9 +19,6 @@ import { ILineLayerStyleOptions } from '../core/interface';
 
 @injectable()
 export default class DataMappingPlugin implements ILayerPlugin {
-  @inject(TYPES.IGlobalConfigService)
-  private readonly configService: IGlobalConfigService;
-
   @inject(TYPES.IMapService)
   private readonly mapService: IMapService;
 
@@ -45,7 +41,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
           this.generateMaping(layer, { styleAttributeService });
         });
       }
-      // this.generateMaping(layer, { styleAttributeService });
     });
 
     layer.hooks.beforeRenderData.tap('DataMappingPlugin', () => {
@@ -59,8 +54,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
         });
       }
 
-      // this.generateMaping(layer, { styleAttributeService });
-
       return true;
     });
 
@@ -90,20 +83,24 @@ export default class DataMappingPlugin implements ILayerPlugin {
       if (attributesToRemapping.length) {
         // 过滤数据
         if (filter?.needRemapping) {
-          layer.setEncodedData(
-            this.mapping(layer, attributes, filterData, undefined, bottomColor),
+          const encodeData = this.mapping(
+            layer,
+            attributes,
+            filterData,
+            undefined,
+            bottomColor,
           );
+          layer.setEncodedData(encodeData);
           filter.needRemapping = false;
         } else {
-          layer.setEncodedData(
-            this.mapping(
-              layer,
-              attributesToRemapping,
-              filterData,
-              layer.getEncodedData(),
-              bottomColor,
-            ),
+          const encodeData = this.mapping(
+            layer,
+            attributesToRemapping,
+            filterData,
+            layer.getEncodedData(),
+            bottomColor,
           );
+          layer.setEncodedData(encodeData);
         }
         // 处理文本更新
         layer.emit('remapping', null);
@@ -127,23 +124,18 @@ export default class DataMappingPlugin implements ILayerPlugin {
         return this.applyAttributeMapping(filter, record, bottomColor)[0];
       });
     }
-    layer.setEncodedData(
-      this.mapping(layer, attributes, filterData, undefined, bottomColor),
+    const encodeData = this.mapping(
+      layer,
+      attributes,
+      filterData,
+      undefined,
+      bottomColor,
     );
+    layer.setEncodedData(encodeData);
     // 对外暴露事件
     layer.emit('dataUpdate', null);
   }
 
-  private getArrowPoints(p1: Position, p2: Position) {
-    const dir = [p2[0] - p1[0], p2[1] - p1[1]];
-    const normalizeDir = normalize(dir);
-    const arrowPoint = [
-      p1[0] + normalizeDir[0] * 0.0001,
-      p1[1] + normalizeDir[1] * 0.0001,
-    ];
-    return arrowPoint;
-  }
-
   private mapping(
     layer: ILayer,
     attributes: IStyleAttribute[],
@@ -155,7 +147,14 @@ export default class DataMappingPlugin implements ILayerPlugin {
       arrow = {
         enable: false,
       },
+      usage,
     } = layer.getLayerConfig() as ILineLayerStyleOptions;
+    if (usage === 'basemap') {
+      return this.mapLayerMapping(layer, attributes, data, predata);
+    }
+    const usedAttributes = attributes.filter(
+      (attribute) => attribute.scale !== undefined,
+    );
     const mappedData = data.map((record: IParseDataItem, i) => {
       const preRecord = predata ? predata[i] : {};
       const encodeRecord: IEncodeFeature = {
@@ -163,25 +162,88 @@ export default class DataMappingPlugin implements ILayerPlugin {
         coordinates: record.coordinates,
         ...preRecord,
       };
-      attributes
-        .filter((attribute) => attribute.scale !== undefined)
-        .forEach((attribute: IStyleAttribute) => {
-          // console.log('record', record)
-          let values = this.applyAttributeMapping(
-            attribute,
-            record,
-            minimumColor,
+      usedAttributes.forEach((attribute: IStyleAttribute) => {
+        let values = this.applyAttributeMapping(
+          attribute,
+          record,
+          minimumColor,
+        );
+        attribute.needRemapping = false;
+
+        // TODO: 支持每个属性配置 postprocess
+        if (attribute.name === 'color') {
+          values = values.map((c: unknown) => {
+            return rgb2arr(c as string);
+          });
+        }
+        // @ts-ignore
+        encodeRecord[attribute.name] =
+          Array.isArray(values) && values.length === 1 ? values[0] : values;
+
+        // 增加对 layer/text/iconfont unicode 映射的解析
+        if (attribute.name === 'shape') {
+          encodeRecord.shape = this.fontService.getIconFontKey(
+            encodeRecord[attribute.name] as string,
           );
-          // console.log('values', values)
+        }
+      });
+
+      if (
+        arrow.enable &&
+        (encodeRecord.shape === 'line' || encodeRecord.shape === 'halfLine')
+      ) {
+        // 只有在线图层且支持配置箭头的时候进行插入顶点的处理
+        const coords = encodeRecord.coordinates as Position[];
+        // @ts-ignore
+        if (layer.arrowInsertCount < layer.encodeDataLength) {
+          // Tip: arrowInsert 的判断用于确保每一条线数据 arrow 的属性点只会被植入一次
+          const arrowPoint = this.getArrowPoints(coords[0], coords[1]);
+          encodeRecord.coordinates.splice(1, 0, arrowPoint, arrowPoint);
+          // @ts-ignore
+          layer.arrowInsertCount++;
+        }
+      }
+      return encodeRecord;
+    }) as IEncodeFeature[];
+
+    // 调整数据兼容 Amap2.0
+    this.adjustData2Amap2Coordinates(mappedData, layer);
+
+    // 调整数据兼容 SimpleCoordinates
+    this.adjustData2SimpleCoordinates(mappedData);
+
+    return mappedData;
+  }
+
+  private mapLayerMapping(
+    layer: ILayer,
+    attributes: IStyleAttribute[],
+    data: IParseDataItem[],
+    predata?: IEncodeFeature[],
+  ): IEncodeFeature[] {
+    const usedAttributes = attributes.filter(
+      (attribute) => attribute.scale !== undefined,
+    );
+    const mappedData = data.map((record: IParseDataItem, i) => {
+      const preRecord = predata ? predata[i] : {};
+      const encodeRecord: IEncodeFeature = {
+        id: record._id,
+        coordinates: record.coordinates,
+        ...preRecord,
+      };
+      usedAttributes.forEach((attribute: IStyleAttribute) => {
+        if (
+          attribute.name === 'shape' &&
+          // @ts-ignore
+          layer.shapeOption?.field === 'simple'
+        ) {
+          encodeRecord[attribute.name] = 'simple';
+          attribute.needRemapping = false;
+        } else {
+          const values = this.applyMapLayerAttributeMapping(attribute, record);
+
           attribute.needRemapping = false;
 
-          // TODO: 支持每个属性配置 postprocess
-          if (attribute.name === 'color') {
-            // console.log('attribute', attribute)
-            values = values.map((c: unknown) => {
-              return rgb2arr(c as string);
-            });
-          }
           // @ts-ignore
           encodeRecord[attribute.name] =
             Array.isArray(values) && values.length === 1 ? values[0] : values;
@@ -192,27 +254,19 @@ export default class DataMappingPlugin implements ILayerPlugin {
               encodeRecord[attribute.name] as string,
             );
           }
-        });
+        }
+      });
 
-      if (
-        arrow.enable &&
-        (encodeRecord.shape === 'line' || encodeRecord.shape === 'halfLine')
-      ) {
-        // 只有在线图层且支持配置箭头的时候进行插入顶点的处理
-        const coords = encodeRecord.coordinates as Position[];
-        const arrowPoint = this.getArrowPoints(coords[0], coords[1]);
-        encodeRecord.coordinates.splice(1, 0, arrowPoint, arrowPoint);
+      if (encodeRecord.size === undefined) {
+        // in case not set size
+        encodeRecord.size = 1;
       }
       return encodeRecord;
     }) as IEncodeFeature[];
-    // console.log('mappedData', mappedData)
 
     // 调整数据兼容 Amap2.0
     this.adjustData2Amap2Coordinates(mappedData, layer);
 
-    // 调整数据兼容 SimpleCoordinates
-    this.adjustData2SimpleCoordinates(mappedData);
-
     return mappedData;
   }
 
@@ -264,11 +318,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
     }
   }
 
-  private getLayerCenter(layer: ILayer) {
-    const source = layer.getSource();
-    return source.center;
-  }
-
   private adjustData2SimpleCoordinates(mappedData: IEncodeFeature[]) {
     if (mappedData.length > 0 && this.mapService.version === Version.SIMPLE) {
       mappedData.map((d) => {
@@ -280,6 +329,11 @@ export default class DataMappingPlugin implements ILayerPlugin {
     }
   }
 
+  private getLayerCenter(layer: ILayer) {
+    const source = layer.getSource();
+    return source.center;
+  }
+
   private unProjectCoordinates(coordinates: any) {
     if (typeof coordinates[0] === 'number') {
       return this.mapService.simpleMapCoord.unproject(
@@ -337,8 +391,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
         params.push(record[field]);
       }
     });
-    // console.log('params', params)
-    // console.log('attribute', attribute)
 
     const mappingResult = attribute.mapping ? attribute.mapping(params) : [];
     if (attribute.name === 'color' && !isColor(mappingResult[0])) {
@@ -347,4 +399,37 @@ export default class DataMappingPlugin implements ILayerPlugin {
     return mappingResult;
     // return attribute.mapping ? attribute.mapping(params) : [];
   }
+
+  private applyMapLayerAttributeMapping(
+    attribute: IStyleAttribute,
+    record: { [key: string]: unknown },
+  ) {
+    if (!attribute.scale) {
+      return [];
+    }
+    const scalers = attribute?.scale?.scalers || [];
+    const params: unknown[] = [];
+
+    scalers.forEach(({ field }) => {
+      if (
+        record.hasOwnProperty(field) ||
+        attribute.scale?.type === 'variable'
+      ) {
+        params.push(record[field]);
+      }
+    });
+
+    const mappingResult = attribute.mapping ? attribute.mapping(params) : [];
+    return mappingResult;
+  }
+
+  private getArrowPoints(p1: Position, p2: Position) {
+    const dir = [p2[0] - p1[0], p2[1] - p1[1]];
+    const normalizeDir = normalize(dir);
+    const arrowPoint = [
+      p1[0] + normalizeDir[0] * 0.0001,
+      p1[1] + normalizeDir[1] * 0.0001,
+    ];
+    return arrowPoint;
+  }
 }
diff --git a/packages/layers/src/plugins/DataSourcePlugin.ts b/packages/layers/src/plugins/DataSourcePlugin.ts
index 1b248f9e05..c03855ab40 100644
--- a/packages/layers/src/plugins/DataSourcePlugin.ts
+++ b/packages/layers/src/plugins/DataSourcePlugin.ts
@@ -24,7 +24,6 @@ export default class DataSourcePlugin implements ILayerPlugin {
           this.updateClusterData(layer);
         });
       }
-      // this.updateClusterData(layer);
     });
 
     // 检测数据是否需要更新
@@ -37,6 +36,8 @@ export default class DataSourcePlugin implements ILayerPlugin {
   }
 
   private updateClusterData(layer: ILayer): boolean {
+    // Tip: 矢量瓦片不需要进行聚合操作
+    if (layer.isTileLayer || layer.tileLayer) return false;
     const source = layer.getSource();
     const cluster = source.cluster;
     const { zoom = 0 } = source.clusterOptions;
diff --git a/packages/layers/src/plugins/FeatureScalePlugin.ts b/packages/layers/src/plugins/FeatureScalePlugin.ts
index 54c9d7e66b..9163be661e 100644
--- a/packages/layers/src/plugins/FeatureScalePlugin.ts
+++ b/packages/layers/src/plugins/FeatureScalePlugin.ts
@@ -1,5 +1,4 @@
 import {
-  IGlobalConfigService,
   ILayer,
   ILayerPlugin,
   IScale,
@@ -10,14 +9,13 @@ import {
   ScaleTypeName,
   ScaleTypes,
   StyleScaleType,
-  TYPES,
   IParserData,
 } from '@antv/l7-core';
 import { IParseDataItem } from '@antv/l7-source';
 import { extent } from 'd3-array';
 import * as d3interpolate from 'd3-interpolate';
 import * as d3 from 'd3-scale';
-import { inject, injectable } from 'inversify';
+import { injectable } from 'inversify';
 import { isNil, isString, uniq } from 'lodash';
 import 'reflect-metadata';
 
@@ -42,13 +40,6 @@ const scaleMap = {
  */
 @injectable()
 export default class FeatureScalePlugin implements ILayerPlugin {
-  @inject(TYPES.IGlobalConfigService)
-  private readonly configService: IGlobalConfigService;
-  // key = field_attribute name
-  private scaleCache: {
-    [field: string]: IStyleScale;
-  } = {};
-
   private scaleOptions: IScaleOptions = {};
 
   private getSourceData(layer: ILayer, callback: (data: IParserData) => void) {
@@ -79,14 +70,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
           this.caculateScalesForAttributes(attributes || [], dataArray);
         }
       });
-      // const { dataArray } = layer.getSource().data;
-      // if (dataArray.length === 0) {
-      //   return;
-      // }
-      // this.caculateScalesForAttributes(
-      //   attributes || [],
-      //   dataArray as IParseDataItem[],
-      // );
     });
 
     // 检测数据是否需要更新
@@ -101,15 +84,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
         this.caculateScalesForAttributes(attributes || [], dataArray);
         layer.layerModelNeedUpdate = true;
       });
-      // const { dataArray } = layer.getSource().data;
-      // if (dataArray.length === 0) {
-      //   return;
-      // }
-      // this.caculateScalesForAttributes(
-      //   attributes || [],
-      //   dataArray
-      // );
-      // layer.layerModelNeedUpdate = true;
       return true;
     });
 
@@ -131,20 +105,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
             this.caculateScalesForAttributes(attributesToRescale, dataArray);
           }
         });
-
-        // const { dataArray } = layer.getSource().data;
-        // if (dataArray.length === 0) {
-        //   return;
-        // }
-        // const attributesToRescale = attributes.filter(
-        //   (attribute) => attribute.needRescale,
-        // );
-        // if (attributesToRescale.length) {
-        //   this.caculateScalesForAttributes(
-        //     attributesToRescale,
-        //     dataArray,
-        //   );
-        // }
       }
     });
   }
@@ -156,7 +116,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
     attributes: IStyleAttribute[],
     dataArray: IParseDataItem[],
   ) {
-    this.scaleCache = {};
     attributes.forEach((attribute) => {
       if (attribute.scale) {
         // 创建Scale
diff --git a/packages/layers/src/plugins/LayerAnimateStylePlugin.ts b/packages/layers/src/plugins/LayerAnimateStylePlugin.ts
index a572e341de..b95743c080 100644
--- a/packages/layers/src/plugins/LayerAnimateStylePlugin.ts
+++ b/packages/layers/src/plugins/LayerAnimateStylePlugin.ts
@@ -1,33 +1,19 @@
-import {
-  ICameraService,
-  ILayer,
-  ILayerPlugin,
-  IModel,
-  IRendererService,
-  TYPES,
-} from '@antv/l7-core';
-import { inject, injectable } from 'inversify';
+import { ILayer, ILayerPlugin, IModel } from '@antv/l7-core';
+import { injectable } from 'inversify';
 import 'reflect-metadata';
 
 @injectable()
 export default class LayerAnimateStylePlugin implements ILayerPlugin {
-  @inject(TYPES.ICameraService)
-  private readonly cameraService: ICameraService;
-
-  @inject(TYPES.IRendererService)
-  private readonly rendererService: IRendererService;
-
   public apply(layer: ILayer) {
-    // layer.hooks.beforeRender.tap('LayerAnimateStylePlugin', () => {
-
-    // })
     layer.hooks.beforeRender.tap('LayerAnimateStylePlugin', () => {
-      // 重新计算坐标系参数
-      layer.models.forEach((model: IModel) => {
-        model.addUniforms({
-          ...layer.layerModel.getAnimateUniforms(),
+      // @ts-ignore
+      const aniamateStatus = layer.aniamateStatus;
+      aniamateStatus &&
+        layer.models.forEach((model: IModel) => {
+          model.addUniforms({
+            ...layer.layerModel.getAnimateUniforms(),
+          });
         });
-      });
     });
   }
 }
diff --git a/packages/layers/src/plugins/LayerModelPlugin.ts b/packages/layers/src/plugins/LayerModelPlugin.ts
index 922d22d44f..4bb7853043 100644
--- a/packages/layers/src/plugins/LayerModelPlugin.ts
+++ b/packages/layers/src/plugins/LayerModelPlugin.ts
@@ -11,8 +11,6 @@ export default class LayerModelPlugin implements ILayerPlugin {
     layer.prepareBuildModel();
     // 初始化 Model
     layer.buildModels();
-    // emit layer model loaded
-    layer.emit('modelLoaded', null);
     layer.styleNeedUpdate = false;
   }
 
@@ -22,8 +20,6 @@ export default class LayerModelPlugin implements ILayerPlugin {
     layer.clearModels();
     // 初始化 Model
     layer.buildModels();
-    // emit layer model loaded
-    layer.emit('modelLoaded', null);
     layer.layerModelNeedUpdate = false;
   }
 
diff --git a/packages/layers/src/plugins/LightingPlugin.ts b/packages/layers/src/plugins/LightingPlugin.ts
index 5b3dbcab1d..3c97a53dd1 100644
--- a/packages/layers/src/plugins/LightingPlugin.ts
+++ b/packages/layers/src/plugins/LightingPlugin.ts
@@ -65,8 +65,6 @@ const DEFAULT_SPOT_LIGHT = {
   blur: 5,
 };
 
-const COLOR_ATTRIBUTES = ['ambient', 'diffuse', 'specular'];
-
 export function generateLightingUniforms(
   lights?: Array<Partial<IDirectionalLight | ISpotLight>>,
 ) {
@@ -88,12 +86,6 @@ export function generateLightingUniforms(
     const lightsUniformName = lightTypeUniformMap[type].lights;
     const lightsNumUniformName = lightTypeUniformMap[type].num;
 
-    // Object.keys(rest).forEach(key => {
-    //   if (Util.isString(rest[key]) && COLOR_ATTRIBUTES.indexOf(key) > -1) {
-    //     rest[key] = ColorUtil.color2RGBA(rest[key]).slice(0, 3);
-    //   }
-    // });
-
     // @ts-ignore
     const num = lightsMap[lightsNumUniformName];
     // @ts-ignore
diff --git a/packages/layers/src/plugins/MultiPassRendererPlugin.ts b/packages/layers/src/plugins/MultiPassRendererPlugin.ts
index 350e7af4a3..f5e7539db9 100644
--- a/packages/layers/src/plugins/MultiPassRendererPlugin.ts
+++ b/packages/layers/src/plugins/MultiPassRendererPlugin.ts
@@ -1,13 +1,11 @@
 import {
-  IGlobalConfigService,
   ILayer,
   ILayerPlugin,
   IPass,
   IPostProcessingPass,
   IRendererService,
-  TYPES,
 } from '@antv/l7-core';
-import { inject, injectable } from 'inversify';
+import { injectable } from 'inversify';
 import 'reflect-metadata';
 import { createMultiPassRenderer } from '../utils/multiPassRender';
 
@@ -26,9 +24,6 @@ import { createMultiPassRenderer } from '../utils/multiPassRender';
  */
 @injectable()
 export default class MultiPassRendererPlugin implements ILayerPlugin {
-  @inject(TYPES.IGlobalConfigService)
-  private readonly configService: IGlobalConfigService;
-
   private enabled: boolean;
 
   public apply(
diff --git a/packages/layers/src/plugins/PixelPickingPlugin.ts b/packages/layers/src/plugins/PixelPickingPlugin.ts
index 43600d9d24..06a11db22a 100644
--- a/packages/layers/src/plugins/PixelPickingPlugin.ts
+++ b/packages/layers/src/plugins/PixelPickingPlugin.ts
@@ -26,7 +26,6 @@ export default class PixelPickingPlugin implements ILayerPlugin {
   public apply(
     layer: ILayer,
     {
-      rendererService,
       styleAttributeService,
     }: {
       rendererService: IRendererService;
@@ -35,8 +34,7 @@ export default class PixelPickingPlugin implements ILayerPlugin {
   ) {
     // TODO: 由于 Shader 目前无法根据是否开启拾取进行内容修改，因此即使不开启也需要生成 a_PickingColor
     layer.hooks.init.tap('PixelPickingPlugin', () => {
-      const { enablePicking, enableMultiPassRenderer } = layer.getLayerConfig();
-      // const enablePicking = true;
+      const { enablePicking } = layer.getLayerConfig();
       styleAttributeService.registerStyleAttribute({
         name: 'pickingColor',
         type: AttributeType.Attribute,
@@ -48,7 +46,7 @@ export default class PixelPickingPlugin implements ILayerPlugin {
           },
           size: 3,
           // TODO: 固定 feature range 范围内的 pickingColor 都是固定的，可以生成 cache
-          update: (feature: IEncodeFeature, featureIdx: number) => {
+          update: (feature: IEncodeFeature) => {
             // 只有开启拾取才需要 encode
             const { id } = feature;
             return enablePicking ? encodePickingColor(id as number) : [0, 0, 0];
@@ -57,7 +55,6 @@ export default class PixelPickingPlugin implements ILayerPlugin {
       });
     });
     // 必须要与 PixelPickingPass 结合使用，因此必须开启 multiPassRenderer
-    // if (layer.multiPassRenderer) {
     layer.hooks.beforePickingEncode.tap('PixelPickingPlugin', () => {
       const { enablePicking } = layer.getLayerConfig();
       if (enablePicking && layer.isVisible()) {
@@ -85,36 +82,21 @@ export default class PixelPickingPlugin implements ILayerPlugin {
       'PixelPickingPlugin',
       (pickedColor: number[]) => {
         const { highlightColor, activeMix = 0 } = layer.getLayerConfig();
-        // const {
-        //   highlightColor,
-        //   activeMix = 0,
-        //   enableSelect,
-        // } = layer.getLayerConfig();
+
         const highlightColorInArray =
           typeof highlightColor === 'string'
             ? rgb2arr(highlightColor)
             : highlightColor || [1, 0, 0, 1];
 
-        // const { selectColor } = layer.getLayerConfig();
-        // const selectColorInArray =
-        //   typeof selectColor === 'string'
-        //     ? rgb2arr(selectColor)
-        //     : selectColor || [1, 0, 0, 1];
         layer.updateLayerConfig({
           pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor)),
         });
-        // const currentSelectedId = layer.getCurrentSelectedId();
         layer.models.forEach((model) =>
           model.addUniforms({
             u_PickingStage: PickingStage.HIGHLIGHT,
             u_PickingColor: pickedColor,
             u_HighlightColor: highlightColorInArray.map((c) => c * 255),
             u_activeMix: activeMix,
-            // u_CurrentSelectedId: currentSelectedId
-            //   ? encodePickingColor(layer.getCurrentSelectedId()!)
-            //   : [0, 0, 0],
-            // u_SelectColor: selectColorInArray.map((c) => c * 255),
-            // u_EnableSelect: +(enableSelect || false),
           }),
         );
       },
@@ -144,6 +126,5 @@ export default class PixelPickingPlugin implements ILayerPlugin {
         );
       },
     );
-    // }
   }
 }
diff --git a/packages/layers/src/plugins/RegisterStyleAttributePlugin.ts b/packages/layers/src/plugins/RegisterStyleAttributePlugin.ts
index 3e1b8edaf9..515c2f79b2 100644
--- a/packages/layers/src/plugins/RegisterStyleAttributePlugin.ts
+++ b/packages/layers/src/plugins/RegisterStyleAttributePlugin.ts
@@ -21,12 +21,50 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
     }: { styleAttributeService: IStyleAttributeService },
   ) {
     layer.hooks.init.tap('RegisterStyleAttributePlugin', () => {
-      this.registerBuiltinAttributes(styleAttributeService);
+      this.registerBuiltinAttributes(styleAttributeService, layer);
     });
   }
 
   private registerBuiltinAttributes(
     styleAttributeService: IStyleAttributeService,
+    layer: ILayer,
+  ) {
+    // 过滤 tileGroup layer （瓦片图层）
+    const source = layer.getSource();
+    switch (source.parser.type) {
+      case 'mvt':
+      case 'testTile':
+      case 'rasterTile':
+        // layer 仅作为 group 使用
+        return;
+    }
+
+    if (layer.type === 'MaskLayer') {
+      this.registerPositionAttribute(styleAttributeService);
+      return;
+    }
+
+    const { usage } = layer.getLayerConfig();
+    if (usage === 'basemap ') {
+      this.registerPositionAttribute(styleAttributeService);
+      return;
+    }
+
+    if (layer.isTileLayer) {
+      this.registerPositionAttribute(styleAttributeService);
+      this.registerColorAttribute(styleAttributeService);
+      return;
+    }
+
+    // Tip: normal render layer
+    this.registerPositionAttribute(styleAttributeService);
+    this.registerFilterAttribute(styleAttributeService);
+    this.registerColorAttribute(styleAttributeService);
+    this.registerVertexIdAttribute(styleAttributeService);
+  }
+
+  private registerPositionAttribute(
+    styleAttributeService: IStyleAttributeService,
   ) {
     styleAttributeService.registerStyleAttribute({
       name: 'position',
@@ -49,7 +87,11 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
         },
       },
     });
+  }
 
+  private registerFilterAttribute(
+    styleAttributeService: IStyleAttributeService,
+  ) {
     styleAttributeService.registerStyleAttribute({
       name: 'filter',
       type: AttributeType.Attribute,
@@ -62,12 +104,17 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (feature: IEncodeFeature, featureIdx: number) => {
+        update: (feature: IEncodeFeature) => {
           const { filter } = feature;
           return filter ? [1] : [0];
         },
       },
     });
+  }
+
+  private registerColorAttribute(
+    styleAttributeService: IStyleAttributeService,
+  ) {
     styleAttributeService.registerStyleAttribute({
       name: 'color',
       type: AttributeType.Attribute,
@@ -80,12 +127,17 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
           type: gl.FLOAT,
         },
         size: 4,
-        update: (feature: IEncodeFeature, featureIdx: number) => {
+        update: (feature: IEncodeFeature) => {
           const { color } = feature;
           return !color || !color.length ? [1, 1, 1, 1] : color;
         },
       },
     });
+  }
+
+  private registerVertexIdAttribute(
+    styleAttributeService: IStyleAttributeService,
+  ) {
     styleAttributeService.registerStyleAttribute({
       // 统一注册每个顶点的唯一编号（目前用于样式的数据映射计算使用）
       name: 'vertexId',
@@ -99,12 +151,7 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
           type: gl.FLOAT,
         },
         size: 1,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-        ) => {
+        update: (feature: IEncodeFeature, featureIdx: number) => {
           return [featureIdx];
         },
       },
diff --git a/packages/layers/src/plugins/ShaderUniformPlugin.ts b/packages/layers/src/plugins/ShaderUniformPlugin.ts
index 4815575f59..f9d2249f03 100644
--- a/packages/layers/src/plugins/ShaderUniformPlugin.ts
+++ b/packages/layers/src/plugins/ShaderUniformPlugin.ts
@@ -85,7 +85,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
           u_DevicePixelRatio: $window.devicePixelRatio,
           // u_ModelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
           u_PickingBuffer: layer.getLayerConfig().pickingBuffer || 0,
-          // TODO: 当前地图是否在拖动
+          // Tip: 当前地图是否在拖动
           u_shaderPick: Number(layer.getShaderPickStat()),
         });
       });
diff --git a/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts b/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts
index 2642ee3ef0..0381064e82 100644
--- a/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts
+++ b/packages/layers/src/plugins/UpdateStyleAttributePlugin.ts
@@ -17,11 +17,6 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin {
       this.initStyleAttribute(layer, { styleAttributeService });
     });
 
-    // layer.hooks.beforeRenderData.tap('styleAttributeService', () => {
-    //   // layer.layerModelNeedUpdate = true;
-    //   return true;
-    // });
-
     layer.hooks.beforeRender.tap('UpdateStyleAttributePlugin', () => {
       if (layer.layerModelNeedUpdate) {
         return;
@@ -37,12 +32,7 @@ export default class UpdateStyleAttributePlugin implements ILayerPlugin {
   ) {
     const attributes = styleAttributeService.getLayerStyleAttributes() || [];
     const filter = styleAttributeService.getLayerStyleAttribute('filter');
-    const shape = styleAttributeService.getLayerStyleAttribute('shape');
-    if (
-      filter &&
-      filter.needRegenerateVertices // ||
-      // (shape && shape.needRegenerateVertices) // TODO:Shape 更新重新build
-    ) {
+    if (filter && filter.needRegenerateVertices) {
       layer.layerModelNeedUpdate = true;
       attributes.forEach((attr) => (attr.needRegenerateVertices = false));
       return;
diff --git a/packages/layers/src/point/index.ts b/packages/layers/src/point/index.ts
index 92236959b3..ee70cbf4cd 100644
--- a/packages/layers/src/point/index.ts
+++ b/packages/layers/src/point/index.ts
@@ -23,11 +23,15 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
     this.layerModel.initModels((models) => {
       this.models = models;
       this.layerService.updateLayerRenderList();
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
 
   /**
diff --git a/packages/layers/src/point/models/fillmage.ts b/packages/layers/src/point/models/fillmage.ts
index ea1ac3cb8a..5994ac04d9 100644
--- a/packages/layers/src/point/models/fillmage.ts
+++ b/packages/layers/src/point/models/fillmage.ts
@@ -347,7 +347,7 @@ export default class FillImageModel extends BaseModel {
       });
       // this.layer.render();
       // TODO: 更新完纹理后在更新的图层的时候需要更新所有的图层
-      this.layer.renderLayers();
+      this.layerService.throttleRenderLayers();
       return;
     }
     this.texture = createTexture2D({
diff --git a/packages/layers/src/point/models/image.ts b/packages/layers/src/point/models/image.ts
index cf8e3fce89..900fcabc48 100644
--- a/packages/layers/src/point/models/image.ts
+++ b/packages/layers/src/point/models/image.ts
@@ -183,7 +183,7 @@ export default class ImageModel extends BaseModel {
         mipmap: true,
       });
       // TODO: 更新完纹理后在更新的图层的时候需要更新所有的图层
-      this.layer.renderLayers();
+      this.layerService.throttleRenderLayers();
       return;
     }
     this.texture = createTexture2D({
diff --git a/packages/layers/src/point/models/normal.ts b/packages/layers/src/point/models/normal.ts
index 11a1da0f0c..ef570f32fb 100644
--- a/packages/layers/src/point/models/normal.ts
+++ b/packages/layers/src/point/models/normal.ts
@@ -1,6 +1,5 @@
 import {
   AttributeType,
-  BlendType,
   gl,
   IEncodeFeature,
   IModel,
@@ -31,55 +30,10 @@ export default class NormalModel extends BaseModel {
   public getUninforms(): IModelUniform {
     const {
       opacity = 1,
-      offsets = [0, 0],
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
-    if (
-      this.dataTextureTest &&
-      this.dataTextureNeedUpdate({
-        opacity,
-        offsets,
-      })
-    ) {
-      // 判断当前的样式中哪些是需要进行数据映射的，哪些是常量，同时计算用于构建数据纹理的一些中间变量
-      this.judgeStyleAttributes({
-        opacity,
-        offsets,
-      });
-      const encodeData = this.layer.getEncodedData();
-      const { data, width, height } = this.calDataFrame(
-        this.cellLength,
-        encodeData,
-        this.cellProperties,
-      );
-      this.rowCount = height; // 当前数据纹理有多少行
-
-      this.dataTexture =
-        this.cellLength > 0 && data.length > 0
-          ? this.createTexture2D({
-              flipY: true,
-              data,
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width,
-              height,
-            })
-          : this.createTexture2D({
-              flipY: true,
-              data: [1],
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width: 1,
-              height: 1,
-            });
-    }
     return {
-      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
-      u_cellTypeLayout: this.getCellTypeLayout(),
       u_opacity: isNumber(opacity) ? opacity : 1.0,
-      u_offsets: this.isOffsetStatic(offsets)
-        ? (offsets as [number, number])
-        : [0, 0],
     };
   }
 
@@ -104,6 +58,7 @@ export default class NormalModel extends BaseModel {
         primitive: gl.POINTS,
         blend: this.getBlend(),
         stencil: getMask(mask, maskInside),
+        pick: false,
       })
       .then((model) => {
         callbackModel([model]);
@@ -115,7 +70,6 @@ export default class NormalModel extends BaseModel {
   }
 
   public clearModels() {
-    this.dataTexture?.destroy();
   }
 
   protected registerBuiltinAttributes() {
@@ -134,9 +88,6 @@ export default class NormalModel extends BaseModel {
         size: 1,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
@@ -144,10 +95,4 @@ export default class NormalModel extends BaseModel {
       },
     });
   }
-
-  private defaultStyleOptions(): Partial<IPointLayerStyleOptions> {
-    return {
-      blend: BlendType.additive,
-    };
-  }
 }
diff --git a/packages/layers/src/point/models/radar.ts b/packages/layers/src/point/models/radar.ts
index f398634d5a..0e001efcad 100644
--- a/packages/layers/src/point/models/radar.ts
+++ b/packages/layers/src/point/models/radar.ts
@@ -26,62 +26,15 @@ export default class RadarModel extends BaseModel {
   public getUninforms(): IModelUniform {
     const {
       opacity = 1,
-      offsets = [0, 0],
       blend,
       speed = 1,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
-    if (
-      this.dataTextureTest &&
-      this.dataTextureNeedUpdate({
-        opacity,
-        offsets,
-      })
-    ) {
-      // 判断当前的样式中哪些是需要进行数据映射的，哪些是常量，同时计算用于构建数据纹理的一些中间变量
-      this.judgeStyleAttributes({
-        opacity,
-        offsets,
-      });
-
-      const encodeData = this.layer.getEncodedData();
-      const { data, width, height } = this.calDataFrame(
-        this.cellLength,
-        encodeData,
-        this.cellProperties,
-      );
-      this.rowCount = height; // 当前数据纹理有多少行
-
-      this.dataTexture =
-        this.cellLength > 0 && data.length > 0
-          ? this.createTexture2D({
-              flipY: true,
-              data,
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width,
-              height,
-            })
-          : this.createTexture2D({
-              flipY: true,
-              data: [1],
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width: 1,
-              height: 1,
-            });
-    }
     return {
       u_isMeter: Number(this.isMeter),
       u_speed: speed,
       u_additive: blend === 'additive' ? 1.0 : 0.0,
-      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
-      u_cellTypeLayout: this.getCellTypeLayout(),
-
       u_opacity: isNumber(opacity) ? opacity : 1.0,
-      u_offsets: this.isOffsetStatic(offsets)
-        ? (offsets as [number, number])
-        : [0, 0],
     };
   }
   public getAnimateUniforms(): IModelUniform {
@@ -218,7 +171,6 @@ export default class RadarModel extends BaseModel {
           attributeIdx: number,
         ) => {
           const extrude = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0];
-
           const extrudeIndex = (attributeIdx % 4) * 3;
           return [
             extrude[extrudeIndex],
@@ -244,9 +196,6 @@ export default class RadarModel extends BaseModel {
         size: 1,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const { size = 5 } = feature;
           return Array.isArray(size)
@@ -255,32 +204,5 @@ export default class RadarModel extends BaseModel {
         },
       },
     });
-
-    // point layer size;
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'shape',
-      type: AttributeType.Attribute,
-      descriptor: {
-        name: 'a_Shape',
-        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 { shape = 2 } = feature;
-          const shape2d = this.layer.getLayerConfig().shape2d as string[];
-          const shapeIndex = shape2d.indexOf(shape as string);
-          return [shapeIndex];
-        },
-      },
-    });
   }
 }
diff --git a/packages/layers/src/point/models/simplePoint.ts b/packages/layers/src/point/models/simplePoint.ts
index d19bbe7cb4..2cb1e07c4b 100644
--- a/packages/layers/src/point/models/simplePoint.ts
+++ b/packages/layers/src/point/models/simplePoint.ts
@@ -1,6 +1,5 @@
 import {
   AttributeType,
-  BlendType,
   gl,
   IEncodeFeature,
   IModel,
@@ -129,14 +128,12 @@ export default class SimplePointModel 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,
@@ -144,9 +141,6 @@ export default class SimplePointModel extends BaseModel {
         size: 1,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const { size = 1 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
@@ -154,10 +148,4 @@ export default class SimplePointModel extends BaseModel {
       },
     });
   }
-
-  private defaultStyleOptions(): Partial<IPointLayerStyleOptions> {
-    return {
-      blend: BlendType.additive,
-    };
-  }
 }
diff --git a/packages/layers/src/point/models/text.ts b/packages/layers/src/point/models/text.ts
index ace9357245..ccf35c5d80 100644
--- a/packages/layers/src/point/models/text.ts
+++ b/packages/layers/src/point/models/text.ts
@@ -231,6 +231,7 @@ export default class TextModel extends BaseModel {
       this.reBuildModel();
       return true;
     }
+    
     return false;
   }
 
@@ -253,9 +254,6 @@ export default class TextModel extends BaseModel {
         size: 1,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const { rotate = 0 } = feature;
           return Array.isArray(rotate) ? [rotate[0]] : [rotate as number];
@@ -278,7 +276,6 @@ export default class TextModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
           return [vertex[5], vertex[6]];
         },
@@ -300,9 +297,6 @@ export default class TextModel extends BaseModel {
         size: 1,
         update: (
           feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
         ) => {
           const { size = 12 } = feature;
           return Array.isArray(size) ? [size[0]] : [size as number];
@@ -327,7 +321,6 @@ export default class TextModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
           return [vertex[3], vertex[4]];
         },
@@ -402,7 +395,7 @@ export default class TextModel extends BaseModel {
    * 生成文字布局（对照文字纹理字典提取对应文字的位置很好信息）
    */
   private generateGlyphLayout(iconfont: boolean) {
-    // TODO:更新文字布局
+    // 更新文字布局
     const { mapping } = this.fontService;
     const {
       spacing = 2,
@@ -483,7 +476,6 @@ export default class TextModel extends BaseModel {
         anchorPointY: pixels.y,
       });
       if (box && box.length) {
-        // TODO：featureIndex
         collisionIndex.insertCollisionBox(box, id);
         return true;
       } else {
@@ -546,7 +538,7 @@ export default class TextModel extends BaseModel {
       })
       .then((model) => {
         this.layer.models = [model];
-        this.layer.renderLayers();
+        this.layerService.throttleRenderLayers();
       })
       .catch((err) => {
         console.warn(err);
diff --git a/packages/layers/src/point/models/tile.ts b/packages/layers/src/point/models/tile.ts
index 9c098433e3..ef859a7f84 100644
--- a/packages/layers/src/point/models/tile.ts
+++ b/packages/layers/src/point/models/tile.ts
@@ -8,95 +8,37 @@ import {
   IModel,
   IModelUniform,
 } from '@antv/l7-core';
-import { getCullFace, getMask } from '@antv/l7-utils';
+import { getCullFace } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
 import { PointFillTriangulation } from '../../core/triangulation';
 
 import point_tile_frag from '../shaders/tile/fill_tile_frag.glsl';
 import point_tile_vert from '../shaders/tile/fill_tile_vert.glsl';
-
-import { Version } from '@antv/l7-maps';
 export default class FillModel extends BaseModel {
-  public meter2coord: number = 1;
-  private isMeter: boolean = false;
+
   public getUninforms(): IModelUniform {
     const {
       opacity = 1,
       strokeOpacity = 1,
       strokeWidth = 0,
       stroke = 'rgba(0,0,0,0)',
-      offsets = [0, 0],
+    
       blend,
-      blur = 0,
-      coord = 'lnglat',
-      tileOrigin,
+      // coord = 'lnglat',
+      // tileOrigin,
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
-    if (
-      this.dataTextureTest &&
-      this.dataTextureNeedUpdate({
-        opacity,
-        strokeOpacity,
-        strokeWidth,
-        stroke,
-        offsets,
-      })
-    ) {
-      // 判断当前的样式中哪些是需要进行数据映射的，哪些是常量，同时计算用于构建数据纹理的一些中间变量
-      this.judgeStyleAttributes({
-        opacity,
-        strokeOpacity,
-        strokeWidth,
-        stroke,
-        offsets,
-      });
-
-      const encodeData = this.layer.getEncodedData();
-      const { data, width, height } = this.calDataFrame(
-        this.cellLength,
-        encodeData,
-        this.cellProperties,
-      );
-      this.rowCount = height; // 当前数据纹理有多少行
-
-      this.dataTexture =
-        this.cellLength > 0 && data.length > 0
-          ? this.createTexture2D({
-              flipY: true,
-              data,
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width,
-              height,
-            })
-          : this.createTexture2D({
-              flipY: true,
-              data: [1],
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width: 1,
-              height: 1,
-            });
-    }
     return {
-      u_tileOrigin: tileOrigin || [0, 0],
-      u_coord: coord === 'lnglat' ? 1.0 : 0.0,
-
-      u_isMeter: Number(this.isMeter),
-      u_blur: blur,
-
+      // u_tileOrigin: tileOrigin || [0, 0],
+      // u_coord: coord === 'lnglat' ? 1.0 : 0.0,
+      
       u_additive: blend === 'additive' ? 1.0 : 0.0,
-      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
-      u_cellTypeLayout: this.getCellTypeLayout(),
-
+    
       u_opacity: Number(opacity),
       u_stroke_opacity: Number(strokeOpacity),
       u_stroke_width: Number(strokeWidth),
       u_stroke_color: this.getStrokeColor(stroke),
-      u_offsets: this.isOffsetStatic(offsets)
-        ? (offsets as [number, number])
-        : [0, 0],
     };
   }
 
@@ -113,77 +55,21 @@ export default class FillModel extends BaseModel {
   }
 
   public initModels(callbackModel: (models: IModel[]) => void) {
-    const {
-      unit = 'l7size',
-    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
-    const { version } = this.mapService;
-    if (
-      unit === 'meter' &&
-      version !== Version.L7MAP &&
-      version !== Version.GLOBEL
-    ) {
-      this.isMeter = true;
-      this.calMeter2Coord();
-    }
-
     this.buildModels(callbackModel);
   }
 
-  /**
-   * 计算等面积点图层（unit meter）笛卡尔坐标标度与世界坐标标度的比例
-   * @returns
-   */
-  public calMeter2Coord() {
-    const [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
-    const center = [(minLng + maxLng) / 2, (minLat + maxLat) / 2];
-
-    const { version } = this.mapService;
-    if (version === Version.MAPBOX && window.mapboxgl.MercatorCoordinate) {
-      const coord = window.mapboxgl.MercatorCoordinate.fromLngLat(
-        { lng: center[0], lat: center[1] },
-        0,
-      );
-      const offsetInMeters = 1;
-      const offsetInMercatorCoordinateUnits =
-        offsetInMeters * coord.meterInMercatorCoordinateUnits();
-      const westCoord = new window.mapboxgl.MercatorCoordinate(
-        coord.x - offsetInMercatorCoordinateUnits,
-        coord.y,
-        coord.z,
-      );
-      const westLnglat = westCoord.toLngLat();
-
-      this.meter2coord = center[0] - westLnglat.lng;
-      return;
-    }
-
-    // @ts-ignore
-    const m1 = this.mapService.meterToCoord(center, [minLng, minLat]);
-    // @ts-ignore
-    const m2 = this.mapService.meterToCoord(center, [
-      maxLng === minLng ? maxLng + 0.1 : maxLng,
-      maxLat === minLat ? minLat + 0.1 : maxLat,
-    ]);
-    this.meter2coord = (m1 + m2) / 2;
-    if (!this.meter2coord) {
-      // Tip: 兼容单个数据导致的 m1、m2 为 NaN
-      this.meter2coord = 7.70681090738883;
-    }
-  }
 
   public buildModels(callbackModel: (models: IModel[]) => void) {
     const {
-      mask = false,
-      maskInside = true,
       workerEnabled = false,
+      usage
     } = this.layer.getLayerConfig() as Partial<
       ILayerConfig & IPointLayerStyleOptions
     >;
-
     this.layer.triangulation = PointFillTriangulation;
     this.layer
       .buildLayerModel({
-        moduleName: 'pointTile',
+        moduleName: 'pointTile_' + usage,
         vertexShader: point_tile_vert,
         fragmentShader: point_tile_frag,
         triangulation: PointFillTriangulation,
@@ -193,11 +79,11 @@ export default class FillModel extends BaseModel {
           face: getCullFace(this.mapService.version),
         },
         blend: this.getBlend(),
-        stencil: getMask(mask, maskInside),
         workerEnabled,
         workerOptions: {
           modelType: 'pointTile',
         },
+        pick: usage !== 'basemap'
       })
       .then((model) => {
         callbackModel([model]);
@@ -209,10 +95,8 @@ export default class FillModel extends BaseModel {
   }
 
   public clearModels() {
-    this.dataTexture?.destroy();
   }
 
-  // overwrite baseModel func
   protected registerBuiltinAttributes() {
     this.styleAttributeService.registerStyleAttribute({
       name: 'extrude',
@@ -244,7 +128,6 @@ export default class FillModel extends BaseModel {
       },
     });
 
-    // point layer size;
     this.styleAttributeService.registerStyleAttribute({
       name: 'size',
       type: AttributeType.Attribute,
@@ -264,15 +147,13 @@ export default class FillModel extends BaseModel {
           attributeIdx: number,
         ) => {
           const { size = 5 } = feature;
-          // console.log('featureIdx', featureIdx, feature)
           return Array.isArray(size)
-            ? [size[0] * this.meter2coord]
-            : [(size as number) * this.meter2coord];
+            ? [size[0]]
+            : [(size as number)];
         },
       },
     });
 
-    // point layer size;
     this.styleAttributeService.registerStyleAttribute({
       name: 'shape',
       type: AttributeType.Attribute,
diff --git a/packages/layers/src/point/models/tileText.ts b/packages/layers/src/point/models/tileText.ts
index dd4a75ad3e..0d62b0ec6f 100644
--- a/packages/layers/src/point/models/tileText.ts
+++ b/packages/layers/src/point/models/tileText.ts
@@ -8,8 +8,8 @@ import {
 } from '@antv/l7-core';
 import {
   calculateCentroid,
-  getMask,
   padBounds,
+  rgb2arr
 } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
@@ -20,8 +20,10 @@ import {
   IGlyphQuad,
   shapeText,
 } from '../../utils/symbol-layout';
-import textFrag from '../shaders/text_frag.glsl';
-import textVert from '../shaders/text_vert.glsl';
+import text_frag from '../shaders/tile/text_frag.glsl';
+import text_vert from '../shaders/tile/text_vert.glsl';
+import text_map_frag from '../shaders/tile/text_map_frag.glsl';
+import text_map_vert from '../shaders/tile/text_map_vert.glsl';
 
 export function TextTriangulation(feature: IEncodeFeature) {
   // @ts-ignore
@@ -80,7 +82,6 @@ export function TextTriangulation(feature: IEncodeFeature) {
     size: 7,
   };
 }
-
 export default class TextModel extends BaseModel {
   public glyphInfo: IEncodeFeature[];
   public glyphInfoMap: {
@@ -105,7 +106,9 @@ export default class TextModel extends BaseModel {
       textAllowOverlap = false,
       halo = 0.5,
       gamma = 2.0,
-      raisingHeight = 0,
+      usage,
+      color = '#fff',
+      size = 1
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
     const { canvas, mapping } = this.fontService;
     if (Object.keys(mapping).length !== this.textCount) {
@@ -117,53 +120,7 @@ export default class TextModel extends BaseModel {
       textAllowOverlap,
     };
 
-    if (
-      this.dataTextureTest &&
-      this.dataTextureNeedUpdate({
-        opacity,
-        strokeWidth,
-        stroke,
-      })
-    ) {
-      this.judgeStyleAttributes({
-        opacity,
-        strokeWidth,
-        stroke,
-      });
-
-      const encodeData = this.layer.getEncodedData();
-      const { data, width, height } = this.calDataFrame(
-        this.cellLength,
-        encodeData,
-        this.cellProperties,
-      );
-      this.rowCount = height; // 当前数据纹理有多少行
-
-      this.dataTexture =
-        this.cellLength > 0 && data.length > 0
-          ? this.createTexture2D({
-              flipY: true,
-              data,
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width,
-              height,
-            })
-          : this.createTexture2D({
-              flipY: true,
-              data: [1],
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width: 1,
-              height: 1,
-            });
-    }
-
     return {
-      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
-      u_cellTypeLayout: this.getCellTypeLayout(),
-      u_raisingHeight: Number(raisingHeight),
-
       u_opacity: isNumber(opacity) ? opacity : 1.0,
       u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 1.0,
       u_stroke_color: this.getStrokeColor(stroke),
@@ -172,11 +129,13 @@ export default class TextModel extends BaseModel {
       u_halo_blur: halo,
       u_gamma_scale: gamma,
       u_sdf_map_size: [canvas.width, canvas.height],
+
+      u_color: usage === 'basemap' ? rgb2arr(color): [0, 0, 0, 0],
+      u_size: usage === 'basemap' ? size : 1
     };
   }
 
   public initModels(callbackModel: (models: IModel[]) => void) {
-    this.layer.on('remapping', this.mapping);
     this.extent = this.textExtent();
     const {
       textAnchor = 'center',
@@ -190,21 +149,17 @@ export default class TextModel extends BaseModel {
   }
 
   public buildModels = async (callbackModel: (models: IModel[]) => void) => {
-    const {
-      mask = false,
-      maskInside = true,
-    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
     this.mapping();
-
+    const { usage } = this.layer.getLayerConfig();
     this.layer
       .buildLayerModel({
-        moduleName: 'pointText',
-        vertexShader: textVert,
-        fragmentShader: textFrag,
+        moduleName: 'pointTileText_' + usage,
+        vertexShader: usage === 'basemap' ? text_map_vert : text_vert,
+        fragmentShader: usage === 'basemap' ? text_map_frag : text_frag,
         triangulation: TextTriangulation.bind(this),
         depth: { enable: false },
         blend: this.getBlend(),
-        stencil: getMask(mask, maskInside),
+        pick: usage !== 'basemap'
       })
       .then((model) => {
         callbackModel([model]);
@@ -217,39 +172,15 @@ export default class TextModel extends BaseModel {
 
   public clearModels() {
     this.texture?.destroy();
-    this.dataTexture?.destroy();
-    this.layer.off('remapping', this.mapping);
   }
   protected registerBuiltinAttributes() {
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'rotate',
-      type: AttributeType.Attribute,
-      descriptor: {
-        name: 'a_Rotate',
-        buffer: {
-          usage: gl.DYNAMIC_DRAW,
-          data: [],
-          type: gl.FLOAT,
-        },
-        size: 1,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-        ) => {
-          const { rotate = 0 } = feature;
-          return Array.isArray(rotate) ? [rotate[0]] : [rotate as number];
-        },
-      },
-    });
+    const { usage } = this.layer.getLayerConfig();
     this.styleAttributeService.registerStyleAttribute({
       name: 'textOffsets',
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_textOffsets',
         buffer: {
-          // give the WebGL driver a hint that this buffer may change
           usage: gl.STATIC_DRAW,
           data: [],
           type: gl.FLOAT,
@@ -266,32 +197,32 @@ export default class TextModel extends BaseModel {
       },
     });
 
-    // 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,
+    if(usage !== 'basemap') {
+      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 = 12 } = feature;
+            return Array.isArray(size) ? [size[0]] : [size as number];
+          },
         },
-        size: 1,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-        ) => {
-          const { size = 12 } = feature;
-          return Array.isArray(size) ? [size[0]] : [size as number];
-        },
-      },
-    });
-
-    // point layer size;
+      });
+    }
+    
     this.styleAttributeService.registerStyleAttribute({
       name: 'textUv',
       type: AttributeType.Attribute,
@@ -354,36 +285,10 @@ export default class TextModel extends BaseModel {
     });
   }
 
-  /**
-   * 生成 iconfont 纹理字典
-   */
-  private initIconFontTex() {
-    const {
-      fontWeight = '400',
-      fontFamily = 'sans-serif',
-    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
-    const data = this.layer.getEncodedData();
-    const characterSet: string[] = [];
-    data.forEach((item: IEncodeFeature) => {
-      let { shape = '' } = item;
-      shape = `${shape}`;
-      if (characterSet.indexOf(shape) === -1) {
-        characterSet.push(shape);
-      }
-    });
-    this.fontService.setFontOptions({
-      characterSet,
-      fontWeight,
-      fontFamily,
-      iconfont: true,
-    });
-  }
-
   /**
    * 生成文字布局（对照文字纹理字典提取对应文字的位置很好信息）
    */
-  private generateGlyphLayout(iconfont: boolean) {
-    // TODO:更新文字布局
+  private generateGlyphLayout() {
     const { mapping } = this.fontService;
     const {
       spacing = 2,
@@ -403,7 +308,7 @@ export default class TextModel extends BaseModel {
         'left',
         spacing,
         textOffset,
-        iconfont,
+        false,
       );
       const glyphQuads = getGlyphQuads(shaping, textOffset, false);
       feature.shaping = shaping;
@@ -459,7 +364,6 @@ export default class TextModel extends BaseModel {
         anchorPointY: pixels.y,
       });
       if (box && box.length) {
-        // TODO：featureIndex
         collisionIndex.insertCollisionBox(box, id);
         return true;
       } else {
@@ -475,12 +379,11 @@ export default class TextModel extends BaseModel {
    * 初始化文字布局
    */
   private initGlyph() {
-    const { iconfont = false } = this.layer.getLayerConfig();
-    // 1.生成文字纹理（或是生成 iconfont）
-    iconfont ? this.initIconFontTex() : this.initTextFont();
+    // 1.生成文字纹理
+    this.initTextFont();
 
     // 2.生成文字布局
-    this.generateGlyphLayout(iconfont);
+    this.generateGlyphLayout();
   }
   /**
    * 更新文字纹理
@@ -503,24 +406,22 @@ export default class TextModel extends BaseModel {
   }
 
   private reBuildModel() {
-    const {
-      mask = false,
-      maskInside = true,
-    } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
+    const { usage } = this.layer.getLayerConfig();
+    
     this.filterGlyphs();
     this.layer
       .buildLayerModel({
-        moduleName: 'pointTileText',
-        vertexShader: textVert,
-        fragmentShader: textFrag,
+        moduleName: 'pointTileText_' + usage,
+        vertexShader: usage === 'basemap' ? text_map_vert : text_vert,
+        fragmentShader: usage === 'basemap' ? text_map_frag : text_frag,
         triangulation: TextTriangulation.bind(this),
         depth: { enable: false },
         blend: this.getBlend(),
-        stencil: getMask(mask, maskInside),
+        pick: usage !== 'basemap'
       })
       .then((model) => {
         this.layer.models = [model];
-        this.layer.renderLayers();
+        this.layerService.throttleRenderLayers();
       })
       .catch((err) => {
         console.warn(err);
diff --git a/packages/layers/src/point/shaders/animate/wave_frag.glsl b/packages/layers/src/point/shaders/animate/wave_frag.glsl
index bdac0493c6..4448a05dfd 100644
--- a/packages/layers/src/point/shaders/animate/wave_frag.glsl
+++ b/packages/layers/src/point/shaders/animate/wave_frag.glsl
@@ -7,7 +7,7 @@ varying vec4 v_data;
 varying vec4 v_color;
 varying float v_radius;
 uniform float u_time;
-uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
+uniform vec4 u_aimate: [ 1., 2., 1.0, 0.2 ];
 
 #pragma include "sdf_2d"
 #pragma include "picking"
@@ -53,10 +53,10 @@ void main() {
   }
   float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * u_aimate.z - u_aimate.y * u_time)), 0.0, 1.0);
   
-  // TODO: 根据叠加模式选择效果
+  // 根据叠加模式选择效果
   if(u_additive > 0.0) {
     gl_FragColor *= intensity;
-    // TODO: 优化水波点 blend additive 模式下有的拾取效果 
+    // 优化水波点 blend additive 模式下有的拾取效果 
     gl_FragColor = filterColorAlpha(gl_FragColor, gl_FragColor.a);
   } else {
     gl_FragColor = vec4(gl_FragColor.xyz, gl_FragColor.a * intensity);
diff --git a/packages/layers/src/point/shaders/earth/fill_vert.glsl b/packages/layers/src/point/shaders/earth/fill_vert.glsl
index 820eb28544..369a7756da 100644
--- a/packages/layers/src/point/shaders/earth/fill_vert.glsl
+++ b/packages/layers/src/point/shaders/earth/fill_vert.glsl
@@ -111,7 +111,6 @@ void main() {
   // radius(16-bit)
   v_radius = newSize;
 
-  // TODO: billboard
   // anti-alias
   //  float antialiased_blur = -max(u_blur, antialiasblur);
   float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, u_blur);
diff --git a/packages/layers/src/point/shaders/fill_vert.glsl b/packages/layers/src/point/shaders/fill_vert.glsl
index 3d572947c1..53362767fc 100644
--- a/packages/layers/src/point/shaders/fill_vert.glsl
+++ b/packages/layers/src/point/shaders/fill_vert.glsl
@@ -130,7 +130,6 @@ void main() {
   // radius(16-bit)
   v_radius = newSize;
 
-  // TODO: billboard
   // anti-alias
   //  float antialiased_blur = -max(u_blur, antialiasblur);
   float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, u_blur);
diff --git a/packages/layers/src/point/shaders/normal_frag.glsl b/packages/layers/src/point/shaders/normal_frag.glsl
index f3b0d8bf06..2771f19fa9 100644
--- a/packages/layers/src/point/shaders/normal_frag.glsl
+++ b/packages/layers/src/point/shaders/normal_frag.glsl
@@ -1,15 +1,6 @@
-
 uniform float u_opacity : 1;
-uniform vec2 u_offsets;
 varying vec4 v_color;
-varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
-
-#pragma include "picking"
 void main() {
-  float opacity = styleMappingMat[0][0];
-
   gl_FragColor = v_color;
-  // gl_FragColor.a =gl_FragColor.a * u_opacity;
-  gl_FragColor.a =gl_FragColor.a * opacity;
-  gl_FragColor = filterColor(gl_FragColor);
+  gl_FragColor.a *= u_opacity;
 }
diff --git a/packages/layers/src/point/shaders/normal_vert.glsl b/packages/layers/src/point/shaders/normal_vert.glsl
index 233c3fa355..8f3a9c366a 100644
--- a/packages/layers/src/point/shaders/normal_vert.glsl
+++ b/packages/layers/src/point/shaders/normal_vert.glsl
@@ -4,76 +4,21 @@ uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 attribute float a_Size;
 attribute vec4 a_Color;
+
 varying vec4 v_color;
 
-uniform float u_opacity : 1;
-uniform vec2 u_offsets;
-
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
-
 #pragma include "projection"
-#pragma include "picking"
 #pragma include "project"
+
 void main() {
   v_color = a_Color;
 
-  // cal style mapping - 数据纹理映射部分的计算
-styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-
-  vec2 textrueOffsets = vec2(0.0, 0.0);
-  if(hasOffsets()) {
-    vec2 valueXPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
-    textrueOffsets.r = pos2value(valueXPos, columnWidth, rowHeight); // x
-    textureOffset += 1.0;
-
-    vec2 valueYPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
-    textrueOffsets.g = pos2value(valueYPos, columnWidth, rowHeight); // x
-    textureOffset += 1.0;
-  } else {
-    textrueOffsets = u_offsets;
-  }
-
-  // cal style mapping
-  
-  // vec2 offset = project_pixel(u_offsets);
-  vec2 offset = project_pixel(textrueOffsets);
-  // vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2.,-a_Size /2.,0.,0.);
-  // gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));\
-  // 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    // vec2 offset = project_pixel((u_offsets));
-    gl_Position = u_Mvp * vec4(a_Position.xy + offset, a_Position.z, 1.0);
-  } else { // else
-    // vec2 offset = project_pixel(u_offsets);
+    gl_Position = u_Mvp * vec4(a_Position.xy, a_Position.z, 1.0);
+  } else {
     vec4 project_pos = project_position(vec4(a_Position, 1.0)) + vec4(a_Size / 2.,-a_Size /2.,0.,0.);
-    gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy+offset),project_pos.z,project_pos.w));
+    gl_Position = project_common_position_to_clipspace(vec4(vec2(project_pos.xy),project_pos.z,project_pos.w));
   }
 
   gl_PointSize = a_Size * 2.0 * u_DevicePixelRatio;
-  setPickingColor(a_PickingColor);
 }
diff --git a/packages/layers/src/point/shaders/radar/radar_frag.glsl b/packages/layers/src/point/shaders/radar/radar_frag.glsl
index 5ab5e356b4..ff9c1c3617 100644
--- a/packages/layers/src/point/shaders/radar/radar_frag.glsl
+++ b/packages/layers/src/point/shaders/radar/radar_frag.glsl
@@ -1,26 +1,15 @@
 
 uniform float u_additive;
-
-varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+uniform float u_opacity: 1.0;
 
 varying vec4 v_data;
 varying vec4 v_color;
 varying float v_radius;
-
+varying vec2 v_exteude;
 #pragma include "sdf_2d"
 #pragma include "picking"
 
 void main() {
-  int shape = int(floor(v_data.w + 0.5));
-
-  vec4 textrueStroke = vec4(
-    styleMappingMat[1][0],
-    styleMappingMat[1][1],
-    styleMappingMat[1][2],
-    styleMappingMat[1][3]
-  );
-
-  float opacity = styleMappingMat[0][0];
 
   lowp float antialiasblur = v_data.z;
   float r = v_radius / (v_radius);
@@ -30,7 +19,7 @@ void main() {
 
   float opacity_t = smoothstep(0.0, antialiasblur, outer_df);
 
-  gl_FragColor = vec4(v_color.rgb, v_color.a * opacity);
+  gl_FragColor = vec4(v_color.rgb, v_color.a * u_opacity);
 
   if(u_additive > 0.0) {
     gl_FragColor *= opacity_t;
@@ -42,7 +31,7 @@ void main() {
     gl_FragColor = filterColor(gl_FragColor);
   }
 
-  vec2 extrude =  styleMappingMat[2].ba;
+  vec2 extrude =  v_exteude;
   vec2 dir = normalize(extrude);
   vec2 baseDir = vec2(1.0, 0.0);
   float pi = 3.14159265359;
diff --git a/packages/layers/src/point/shaders/radar/radar_vert.glsl b/packages/layers/src/point/shaders/radar/radar_vert.glsl
index c57889feb3..6c52d786bd 100644
--- a/packages/layers/src/point/shaders/radar/radar_vert.glsl
+++ b/packages/layers/src/point/shaders/radar/radar_vert.glsl
@@ -2,12 +2,9 @@ attribute vec4 a_Color;
 attribute vec3 a_Position;
 attribute vec3 a_Extrude;
 attribute float a_Size;
-attribute float a_Shape;
 uniform float u_speed: 1.0;
 uniform float u_time;
 
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 uniform float u_isMeter;
@@ -15,68 +12,21 @@ uniform float u_isMeter;
 varying vec4 v_data;
 varying vec4 v_color;
 varying float v_radius;
-
-uniform float u_opacity : 1;
-uniform vec2 u_offsets;
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
+varying vec2 v_exteude;
 
 #pragma include "projection"
 #pragma include "picking"
 
 void main() {
   vec3 extrude = a_Extrude;
-  float shape_type = a_Shape;
   float newSize = setPickingSize(a_Size);
 
-  // cal style mapping - 数据纹理映射部分的计算
-  styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - empty - empty - empty
-    0.0, 0.0, 0.0, 0.0, // empty - empty - empty - empty
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1] - a_Extrude.x - a_Extrude.y
-    0.0, 0.0, 0.0, 0.0  // 
-  );
-
   float time = u_time * u_speed;
   mat2 rotateMatrix = mat2( 
     cos(time), sin(time), 
     -sin(time), cos(time)
   );
-  styleMappingMat[2].ba = rotateMatrix * a_Extrude.xy;
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> empty -> empty ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-
-
-  vec2 textrueOffsets = vec2(0.0, 0.0);
-  if(hasOffsets()) {
-    vec2 valueXPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
-    textrueOffsets.r = pos2value(valueXPos, columnWidth, rowHeight); // x
-    textureOffset += 1.0;
-
-    vec2 valueYPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
-    textrueOffsets.g = pos2value(valueYPos, columnWidth, rowHeight); // x
-    textureOffset += 1.0;
-  } else {
-    textrueOffsets = u_offsets;
-  }
-
-  // cal style mapping
+  v_exteude = rotateMatrix * a_Extrude.xy;
 
   // unpack color(vec2)
   v_color = a_Color;
@@ -88,7 +38,7 @@ void main() {
   float blur = 0.0;
   float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, blur);
 
-  vec2 offset = (extrude.xy * (newSize) + textrueOffsets);
+  vec2 offset = (extrude.xy * (newSize));
   vec3 aPosition = a_Position;
   if(u_isMeter < 1.0) {
     // 不以米为实际单位
@@ -106,7 +56,7 @@ void main() {
     }
   }
 
-  v_data = vec4(extrude.x, extrude.y, antialiasblur,shape_type);
+  v_data = vec4(extrude.x, extrude.y, antialiasblur, -1.0);
 
   vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));
 
diff --git a/packages/layers/src/point/shaders/tile/fill_tile_frag.glsl b/packages/layers/src/point/shaders/tile/fill_tile_frag.glsl
index 08ffd5685d..39038a2dfe 100644
--- a/packages/layers/src/point/shaders/tile/fill_tile_frag.glsl
+++ b/packages/layers/src/point/shaders/tile/fill_tile_frag.glsl
@@ -1,5 +1,9 @@
 uniform float u_additive;
-varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
+
+uniform float u_opacity : 1;
+uniform float u_stroke_opacity : 1;
+uniform float u_stroke_width : 2;
+uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
 
 varying vec4 v_data;
 varying vec4 v_color;
@@ -11,20 +15,9 @@ varying float v_radius;
 void main() {
   int shape = int(floor(v_data.w + 0.5));
 
-  vec4 textrueStroke = vec4(
-    styleMappingMat[1][0],
-    styleMappingMat[1][1],
-    styleMappingMat[1][2],
-    styleMappingMat[1][3]
-  );
-
-  float opacity = styleMappingMat[0][0];
-  float stroke_opacity = styleMappingMat[0][1];
-  float strokeWidth = styleMappingMat[0][2];
-  vec4 strokeColor = textrueStroke == vec4(0) ? v_color : textrueStroke;
 
   lowp float antialiasblur = v_data.z;
-  float r = v_radius / (v_radius + strokeWidth);
+  float r = v_radius / (v_radius + u_stroke_width);
 
   float outer_df;
   float inner_df;
@@ -61,16 +54,16 @@ void main() {
 
   float opacity_t = smoothstep(0.0, antialiasblur, outer_df);
 
-  float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep(
+  float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(
     antialiasblur,
     0.0,
     inner_df
   );
 
-  if(strokeWidth < 0.01) {
-    gl_FragColor = vec4(v_color.rgb, v_color.a * opacity);
+  if(u_stroke_width < 0.01) {
+    gl_FragColor = vec4(v_color.rgb, v_color.a * u_opacity);
   } else {
-    gl_FragColor = mix(vec4(v_color.rgb, v_color.a * opacity), strokeColor * stroke_opacity, color_t);
+    gl_FragColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), u_stroke_color * u_stroke_opacity, color_t);
   }
 
   if(u_additive > 0.0) {
diff --git a/packages/layers/src/point/shaders/tile/fill_tile_vert.glsl b/packages/layers/src/point/shaders/tile/fill_tile_vert.glsl
index cff8357a22..246b9606d4 100644
--- a/packages/layers/src/point/shaders/tile/fill_tile_vert.glsl
+++ b/packages/layers/src/point/shaders/tile/fill_tile_vert.glsl
@@ -4,14 +4,11 @@ attribute vec3 a_Extrude;
 attribute float a_Size;
 attribute float a_Shape;
 
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
-uniform float u_isMeter;
 
-uniform vec2 u_tileOrigin;
-uniform float u_coord;
+// uniform vec2 u_tileOrigin;
+// uniform float u_coord;
 
 varying vec4 v_data;
 varying vec4 v_color;
@@ -21,14 +18,6 @@ uniform float u_opacity : 1;
 uniform float u_stroke_opacity : 1;
 uniform float u_stroke_width : 2;
 uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
-uniform vec2 u_offsets;
-
-uniform float u_blur : 0.0;
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
-#pragma include "styleMappingCalStrokeOpacity"
-#pragma include "styleMappingCalStrokeWidth"
 
 #pragma include "projection"
 #pragma include "picking"
@@ -38,83 +27,6 @@ void main() {
   float shape_type = a_Shape;
   float newSize = setPickingSize(a_Size);
 
-  // cal style mapping - 数据纹理映射部分的计算
-  styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-
-  vec2 strokeOpacityAndOffset = calStrokeOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][1] = strokeOpacityAndOffset.r;
-  textureOffset = strokeOpacityAndOffset.g;
-
-  vec2 strokeWidthAndOffset = calStrokeWidthAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][2] = strokeWidthAndOffset.r;
-  textureOffset = strokeWidthAndOffset.g;
-
-  vec4 textrueStroke = vec4(-1.0, -1.0, -1.0, -1.0);
-  if(hasStroke()) {
-    vec2 valueRPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
-    styleMappingMat[1][0] = pos2value(valueRPos, columnWidth, rowHeight); // R
-    textureOffset += 1.0;
-
-    vec2 valueGPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
-    styleMappingMat[1][1] = pos2value(valueGPos, columnWidth, rowHeight); // G
-    textureOffset += 1.0;
-
-    vec2 valueBPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
-    styleMappingMat[1][2] = pos2value(valueBPos, columnWidth, rowHeight); // B
-    textureOffset += 1.0;
-
-    vec2 valueAPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
-    styleMappingMat[1][3] = pos2value(valueAPos, columnWidth, rowHeight); // A
-    textureOffset += 1.0;
-  } else {
-    if(u_stroke_color == vec4(0.0)) {
-      styleMappingMat[1][0] = v_color.r;
-      styleMappingMat[1][1] = v_color.g;
-      styleMappingMat[1][2] = v_color.b;
-      styleMappingMat[1][3] = v_color.a;
-    } else {
-      styleMappingMat[1][0] = u_stroke_color.r;
-      styleMappingMat[1][1] = u_stroke_color.g;
-      styleMappingMat[1][2] = u_stroke_color.b;
-      styleMappingMat[1][3] = u_stroke_color.a;
-    }
-  }
-
-  vec2 textrueOffsets = vec2(0.0, 0.0);
-  if(hasOffsets()) {
-    vec2 valueXPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
-    textrueOffsets.r = pos2value(valueXPos, columnWidth, rowHeight); // x
-    textureOffset += 1.0;
-
-    vec2 valueYPos = nextPos(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset);
-    textrueOffsets.g = pos2value(valueYPos, columnWidth, rowHeight); // x
-    textureOffset += 1.0;
-  } else {
-    textrueOffsets = u_offsets;
-  }
-
   // cal style mapping
 
   v_color = a_Color;
@@ -122,57 +34,42 @@ void main() {
 
   // anti-alias
   //  float antialiased_blur = -max(u_blur, antialiasblur);
-  float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, u_blur);
+  float antialiasblur = -max(2.0 / u_DevicePixelRatio / a_Size, 0.0);
 
-  vec2 offset = (extrude.xy * (newSize + u_stroke_width) + textrueOffsets);
-  vec3 aPosition = a_Position;
-  if(u_isMeter < 1.0) {
-    // 不以米为实际单位
-    offset = project_pixel(offset);
-  } else {
-    // 以米为实际单位
-    antialiasblur *= pow(19.0 - u_Zoom, 2.0);
-    antialiasblur = max(antialiasblur, -0.01);
-    // offset *= 0.5;
-
-    if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
-      aPosition.xy += offset;
-      offset.x = 0.0;
-      offset.y = 0.0;
-    }
-  }
+  vec2 offset = (extrude.xy * (newSize + u_stroke_width));
+  offset = project_pixel(offset);
 
   v_data = vec4(extrude.x, extrude.y, antialiasblur,shape_type);
 
-  vec4 project_pos = project_position(vec4(aPosition.xy, 0.0, 1.0));
+  vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
     float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
   }
 
-if(u_coord > 0.0) {
+// if(u_coord > 0.0) {
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * vec4(project_pos.xy + offset, 0.0, 1.0);
   } else {
     gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
   }
-} else {
-  gl_PointSize = 24.0;
-  vec2 pointPos = a_Position.xy;
-  vec4 world = vec4(project_mvt_offset_position(vec4(u_tileOrigin, 0.0, 1.0)).xyz, 1.0); // 瓦片起始点的世界坐标
+// } else {
 
-  vec2 pointOffset =  pointPos *  pow(2.0, u_Zoom); // 瓦片内的点的偏移坐标
+  // vec2 pointPos = a_Position.xy;
+  // vec4 world = vec4(project_mvt_offset_position(vec4(u_tileOrigin, 0.0, 1.0)).xyz, 1.0); // 瓦片起始点的世界坐标
+
+  // vec2 pointOffset =  pointPos *  pow(2.0, u_Zoom); // 瓦片内的点的偏移坐标
   
-  world.xy += offset;
-  world.xy += pointOffset;
+  // world.xy += offset;
+  // world.xy += pointOffset;
 
-  if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
-    // Needs to be divided with project_uCommonUnitsPerMeter
-    world.w *= u_PixelsPerMeter.z;
-  }
+  // if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+  //   // Needs to be divided with project_uCommonUnitsPerMeter
+  //   world.w *= u_PixelsPerMeter.z;
+  // }
 
-  gl_Position = u_ViewProjectionMatrix * world + u_ViewportCenterProjection;
-}
+  // gl_Position = u_ViewProjectionMatrix * world + u_ViewportCenterProjection;
+// }
 
  
   setPickingColor(a_PickingColor);
diff --git a/packages/layers/src/point/shaders/tile/text_frag.glsl b/packages/layers/src/point/shaders/tile/text_frag.glsl
new file mode 100644
index 0000000000..c59f2b115b
--- /dev/null
+++ b/packages/layers/src/point/shaders/tile/text_frag.glsl
@@ -0,0 +1,33 @@
+#define SDF_PX 8.0
+#define EDGE_GAMMA 0.105
+#define FONT_SIZE 48.0
+uniform sampler2D u_sdf_map;
+uniform float u_gamma_scale : 0.5;
+// uniform float u_font_size : 24.0;
+uniform float u_opacity : 1.0;
+uniform vec4 u_stroke_color : [0, 0, 0, 1];
+uniform float u_stroke_width : 2.0;
+uniform float u_halo_blur : 0.5;
+uniform float u_DevicePixelRatio;
+
+varying vec4 v_color;
+varying vec2 v_uv;
+varying float v_gamma_scale;
+varying float v_fontScale;
+
+#pragma include "picking"
+void main() {
+  // get sdf from atlas
+  float dist = texture2D(u_sdf_map, v_uv).a;
+
+  lowp float buff = (6.0 - u_stroke_width / v_fontScale) / SDF_PX;
+  highp float gamma = (u_halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (v_fontScale * u_gamma_scale) / 1.0;
+
+  highp float gamma_scaled = gamma * v_gamma_scale;
+
+  highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
+  
+  gl_FragColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), vec4(u_stroke_color.rgb, u_stroke_color.a * u_opacity), smoothstep(0., 0.5, 1. - dist));
+  gl_FragColor.a= gl_FragColor.a * alpha;
+  gl_FragColor = filterColor(gl_FragColor);
+}
diff --git a/packages/layers/src/point/shaders/tile/text_map_frag.glsl b/packages/layers/src/point/shaders/tile/text_map_frag.glsl
new file mode 100644
index 0000000000..1631b2b2f5
--- /dev/null
+++ b/packages/layers/src/point/shaders/tile/text_map_frag.glsl
@@ -0,0 +1,31 @@
+#define SDF_PX 8.0
+#define EDGE_GAMMA 0.105
+#define FONT_SIZE 48.0
+uniform sampler2D u_sdf_map;
+uniform float u_gamma_scale : 0.5;
+
+uniform float u_opacity : 1.0;
+uniform vec4 u_stroke_color : [0, 0, 0, 1];
+uniform float u_stroke_width : 2.0;
+uniform float u_halo_blur : 0.5;
+uniform float u_DevicePixelRatio;
+
+varying vec2 v_uv;
+varying float v_gamma_scale;
+varying float v_fontScale;
+uniform vec4 u_color;
+
+void main() {
+  // get sdf from atlas
+  float dist = texture2D(u_sdf_map, v_uv).a;
+
+  lowp float buff = (6.0 - u_stroke_width / v_fontScale) / SDF_PX;
+  highp float gamma = (u_halo_blur * 1.19 / SDF_PX + EDGE_GAMMA) / (v_fontScale * u_gamma_scale) / 1.0;
+
+  highp float gamma_scaled = gamma * v_gamma_scale;
+
+  highp float alpha = smoothstep(buff - gamma_scaled, buff + gamma_scaled, dist);
+  
+  gl_FragColor = mix(vec4(u_color.rgb, u_color.a * u_opacity), vec4(u_stroke_color.rgb, u_stroke_color.a * u_opacity), smoothstep(0., 0.5, 1. - dist));
+  gl_FragColor.a= gl_FragColor.a * alpha;
+}
diff --git a/packages/layers/src/point/shaders/tile/text_map_vert.glsl b/packages/layers/src/point/shaders/tile/text_map_vert.glsl
new file mode 100644
index 0000000000..13da272e8b
--- /dev/null
+++ b/packages/layers/src/point/shaders/tile/text_map_vert.glsl
@@ -0,0 +1,38 @@
+#define FONT_SIZE 24.0
+attribute vec3 a_Position;
+attribute vec2 a_tex;
+attribute vec2 a_textOffsets;
+
+uniform vec2 u_sdf_map_size;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+
+uniform float u_size;
+
+varying vec2 v_uv;
+varying float v_gamma_scale;
+varying float v_fontScale;
+
+#pragma include "projection"
+
+void main() {
+  v_uv = a_tex / u_sdf_map_size;
+
+  // 文本缩放比例
+  float fontScale = u_size / FONT_SIZE;
+  v_fontScale = fontScale;
+
+  vec4 project_pos = project_position(vec4(a_Position, 1.0));
+
+  vec4 projected_position;
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+   projected_position  = u_Mvp * (vec4(a_Position.xyz, 1.0));
+  } else { // else
+   projected_position  = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  }
+
+  gl_Position = vec4(
+    projected_position.xy / projected_position.w + a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
+  v_gamma_scale = gl_Position.w;
+
+}
diff --git a/packages/layers/src/point/shaders/tile/text_vert.glsl b/packages/layers/src/point/shaders/tile/text_vert.glsl
new file mode 100644
index 0000000000..077d2b3d1c
--- /dev/null
+++ b/packages/layers/src/point/shaders/tile/text_vert.glsl
@@ -0,0 +1,48 @@
+#define SDF_PX 8.0
+#define EDGE_GAMMA 0.105
+#define FONT_SIZE 24.0
+attribute vec3 a_Position;
+attribute vec2 a_tex;
+attribute vec2 a_textOffsets;
+attribute vec4 a_Color;
+attribute float a_Size;
+
+uniform vec2 u_sdf_map_size;
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+
+varying vec2 v_uv;
+varying float v_gamma_scale;
+varying vec4 v_color;
+varying float v_fontScale;
+
+uniform float u_opacity : 1;
+uniform float u_stroke_width : 2;
+uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
+
+#pragma include "projection"
+#pragma include "picking"
+
+void main() {
+  v_color = a_Color;
+  v_uv = a_tex / u_sdf_map_size;
+
+  // 文本缩放比例
+  float fontScale = a_Size / FONT_SIZE;
+  v_fontScale = fontScale;
+
+  vec4 project_pos = project_position(vec4(a_Position, 1.0));
+
+  vec4 projected_position;
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+   projected_position  = u_Mvp * (vec4(a_Position.xyz, 1.0));
+  } else { // else
+   projected_position  = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  }
+
+  gl_Position = vec4(
+    projected_position.xy / projected_position.w + a_textOffsets * fontScale / u_ViewportSize * 2.0 * u_DevicePixelRatio, 0.0, 1.0);
+  v_gamma_scale = gl_Position.w;
+  setPickingColor(a_PickingColor);
+
+}
diff --git a/packages/layers/src/polygon/index.ts b/packages/layers/src/polygon/index.ts
index 5bb4fbde47..2fcf327888 100644
--- a/packages/layers/src/polygon/index.ts
+++ b/packages/layers/src/polygon/index.ts
@@ -19,11 +19,15 @@ export default class PolygonLayer extends BaseLayer<IPolygonLayerStyleOptions> {
     this.layerModel = new PolygonModels[shape](this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
   protected getConfigSchema() {
     return {
diff --git a/packages/layers/src/polygon/models/extrude.ts b/packages/layers/src/polygon/models/extrude.ts
index 0dd1d710b7..b34b5cc97a 100644
--- a/packages/layers/src/polygon/models/extrude.ts
+++ b/packages/layers/src/polygon/models/extrude.ts
@@ -260,8 +260,7 @@ export default class ExtrudeModel extends BaseModel {
           min: gl.LINEAR,
           mag: gl.LINEAR,
         });
-        this.layerService.updateLayerRenderList();
-        this.layerService.renderLayers();
+        this.layerService.reRender();
       };
     }
   }
diff --git a/packages/layers/src/polygon/models/fill.ts b/packages/layers/src/polygon/models/fill.ts
index 5952591200..1bf204c794 100644
--- a/packages/layers/src/polygon/models/fill.ts
+++ b/packages/layers/src/polygon/models/fill.ts
@@ -135,10 +135,7 @@ export default class FillModel extends BaseModel {
             feature: IEncodeFeature,
             featureIdx: number,
             vertex: number[],
-            attributeIdx: number,
-            normal: number[],
           ) => {
-            // center[0] center[1] radius
             return [vertex[3], vertex[4], vertex[5]];
           },
         },
diff --git a/packages/layers/src/polygon/models/ocean.ts b/packages/layers/src/polygon/models/ocean.ts
index e8b883d88b..313882c73e 100644
--- a/packages/layers/src/polygon/models/ocean.ts
+++ b/packages/layers/src/polygon/models/ocean.ts
@@ -6,6 +6,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
+import { Version } from '@antv/l7-maps';
 import { getMask, rgb2arr } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
@@ -23,43 +24,13 @@ export default class OceanModel extends BaseModel {
       watercolor = '#6D99A8',
       watercolor2 = '#0F121C',
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-    if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
-      this.judgeStyleAttributes({ opacity });
-      const encodeData = this.layer.getEncodedData();
-      const { data, width, height } = this.calDataFrame(
-        this.cellLength,
-        encodeData,
-        this.cellProperties,
-      );
-      this.rowCount = height; // 当前数据纹理有多少行
-
-      this.dataTexture =
-        this.cellLength > 0 && data.length > 0
-          ? this.createTexture2D({
-              flipY: true,
-              data,
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width,
-              height,
-            })
-          : this.createTexture2D({
-              flipY: true,
-              data: [1],
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width: 1,
-              height: 1,
-            });
-    }
+   
     return {
       u_texture1: this.texture1,
       u_texture2: this.texture2,
       u_texture3: this.texture3,
       u_watercolor: rgb2arr(watercolor),
       u_watercolor2: rgb2arr(watercolor2),
-      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
-      u_cellTypeLayout: this.getCellTypeLayout(),
       u_opacity: isNumber(opacity) ? opacity : 1.0,
     };
   }
@@ -89,6 +60,7 @@ export default class OceanModel extends BaseModel {
         primitive: gl.TRIANGLES,
         depth: { enable: false },
         stencil: getMask(mask, maskInside),
+        pick: false,
       })
       .then((model) => {
         callbackModel([model]);
@@ -103,7 +75,6 @@ export default class OceanModel extends BaseModel {
     this.texture1?.destroy();
     this.texture2?.destroy();
     this.texture3?.destroy();
-    this.dataTexture?.destroy();
   }
 
   protected registerBuiltinAttributes() {
@@ -129,9 +100,9 @@ export default class OceanModel extends BaseModel {
           featureIdx: number,
           vertex: number[],
           attributeIdx: number,
-          normal: number[],
         ) => {
-          const [lng, lat] = vertex;
+          const v = (feature.version === Version['GAODE2.x'] ? feature.originCoordinates[0][attributeIdx] : vertex)
+          const [lng, lat] = v;
           return [(lng - minLng) / lngLen, (lat - minLat) / latLen];
         },
       },
@@ -151,8 +122,7 @@ export default class OceanModel extends BaseModel {
       this.texture1 = initTex(images[0]);
       this.texture2 = initTex(images[1]);
       this.texture3 = initTex(images[2]);
-      this.layerService.updateLayerRenderList();
-      this.layerService.renderLayers();
+      this.layerService.reRender();
     });
 
     function initImage(callback: (loadedImages: HTMLImageElement[]) => void) {
diff --git a/packages/layers/src/polygon/models/tile.ts b/packages/layers/src/polygon/models/tile.ts
index 128007333f..f74b335a78 100644
--- a/packages/layers/src/polygon/models/tile.ts
+++ b/packages/layers/src/polygon/models/tile.ts
@@ -1,55 +1,28 @@
-import { gl, IModel } from '@antv/l7-core';
-import { getMask } from '@antv/l7-utils';
+import { IModel } from '@antv/l7-core';
+import { getMask, rgb2arr } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IPolygonLayerStyleOptions } from '../../core/interface';
 import { polygonTriangulation } from '../../core/triangulation';
 
-import polygon_tile_frag from '../shaders/tile/polygon_tile_frag.glsl';
+import polygon_tile_frag from '../../shader/minify_picking_frag.glsl';
 import polygon_tile_vert from '../shaders/tile/polygon_tile_vert.glsl';
+import polygon_tile_map_frag from '../../shader/minify_frag.glsl';
+import polygon_tile_map_vert from '../shaders/tile/polygon_tile_map_vert.glsl';
 export default class FillModel extends BaseModel {
   public getUninforms() {
     const {
       opacity = 1,
-      tileOrigin,
-      coord = 'lnglat',
+      // tileOrigin,
+      // coord = 'lnglat',
+      usage,
+      color = '#fff'
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-    if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
-      this.judgeStyleAttributes({ opacity });
-      const encodeData = this.layer.getEncodedData();
-      const { data, width, height } = this.calDataFrame(
-        this.cellLength,
-        encodeData,
-        this.cellProperties,
-      );
-      this.rowCount = height; // 当前数据纹理有多少行
-
-      this.dataTexture =
-        this.cellLength > 0 && data.length > 0
-          ? this.createTexture2D({
-              flipY: true,
-              data,
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width,
-              height,
-            })
-          : this.createTexture2D({
-              flipY: true,
-              data: [1],
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width: 1,
-              height: 1,
-            });
-    }
+   
     return {
-      u_tileOrigin: tileOrigin || [0, 0],
-      u_coord: coord === 'lnglat' ? 1.0 : 0.0,
-
-      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
-      u_cellTypeLayout: this.getCellTypeLayout(),
-
+      // u_tileOrigin: tileOrigin || [0, 0],
+      // u_coord: coord === 'lnglat' ? 1.0 : 0.0,
       u_opacity: opacity,
+      u_color: usage === 'basemap' ? rgb2arr(color): [0, 0, 0, 0]
     };
   }
 
@@ -61,18 +34,19 @@ export default class FillModel extends BaseModel {
     const {
       mask = false,
       maskInside = true,
+      usage
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
     this.layer.triangulation = polygonTriangulation;
     this.layer
       .buildLayerModel({
-        moduleName: 'polygonTile',
-        vertexShader: polygon_tile_vert,
-        fragmentShader: polygon_tile_frag,
+        moduleName: 'polygonTile_' + usage,
+        vertexShader: usage === 'basemap' ? polygon_tile_map_vert : polygon_tile_vert,
+        fragmentShader: usage === 'basemap' ? polygon_tile_map_frag : polygon_tile_frag,
         triangulation: polygonTriangulation,
-        primitive: gl.TRIANGLES,
         depth: { enable: false },
         blend: this.getBlend(),
         stencil: getMask(mask, maskInside),
+        pick: usage !== 'basemap'
       })
       .then((model) => {
         callbackModel([model]);
@@ -84,7 +58,6 @@ export default class FillModel extends BaseModel {
   }
 
   public clearModels() {
-    this.dataTexture?.destroy();
   }
 
   protected registerBuiltinAttributes() {
diff --git a/packages/layers/src/polygon/models/water.ts b/packages/layers/src/polygon/models/water.ts
index 0a4c52e29c..88a500a9c1 100644
--- a/packages/layers/src/polygon/models/water.ts
+++ b/packages/layers/src/polygon/models/water.ts
@@ -6,6 +6,7 @@ import {
   IModelUniform,
   ITexture2D,
 } from '@antv/l7-core';
+import { Version } from '@antv/l7-maps';
 import { getMask } from '@antv/l7-utils';
 import { isNumber } from 'lodash';
 import BaseModel from '../../core/BaseModel';
@@ -20,39 +21,8 @@ export default class WaterModel extends BaseModel {
       opacity = 1,
       speed = 0.5,
     } = this.layer.getLayerConfig() as IPolygonLayerStyleOptions;
-    if (this.dataTextureTest && this.dataTextureNeedUpdate({ opacity })) {
-      this.judgeStyleAttributes({ opacity });
-      const encodeData = this.layer.getEncodedData();
-      const { data, width, height } = this.calDataFrame(
-        this.cellLength,
-        encodeData,
-        this.cellProperties,
-      );
-      this.rowCount = height; // 当前数据纹理有多少行
-
-      this.dataTexture =
-        this.cellLength > 0 && data.length > 0
-          ? this.createTexture2D({
-              flipY: true,
-              data,
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width,
-              height,
-            })
-          : this.createTexture2D({
-              flipY: true,
-              data: [1],
-              format: gl.LUMINANCE,
-              type: gl.FLOAT,
-              width: 1,
-              height: 1,
-            });
-    }
     return {
       u_texture: this.texture,
-      u_dataTexture: this.dataTexture, // 数据纹理 - 有数据映射的时候纹理中带数据，若没有任何数据映射时纹理是 [1]
-      u_cellTypeLayout: this.getCellTypeLayout(),
       u_speed: speed,
       u_opacity: isNumber(opacity) ? opacity : 1.0,
     };
@@ -83,6 +53,7 @@ export default class WaterModel extends BaseModel {
         primitive: gl.TRIANGLES,
         depth: { enable: false },
         stencil: getMask(mask, maskInside),
+        pick: false,
       })
       .then((model) => {
         callbackModel([model]);
@@ -95,7 +66,6 @@ export default class WaterModel extends BaseModel {
 
   public clearModels() {
     this.texture?.destroy();
-    this.dataTexture?.destroy();
   }
 
   protected registerBuiltinAttributes() {
@@ -120,10 +90,10 @@ export default class WaterModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
-          normal: number[],
+          attributeIdx: number
         ) => {
-          const [lng, lat] = vertex;
+          const v = (feature.version === Version['GAODE2.x'] ? feature.originCoordinates[0][attributeIdx] : vertex)
+          const [lng, lat] = v;
           return [(lng - minLng) / lngLen, (lat - minLat) / latLen];
         },
       },
@@ -164,8 +134,7 @@ export default class WaterModel extends BaseModel {
         min: gl.LINEAR,
         mag: gl.LINEAR,
       });
-      this.layerService.updateLayerRenderList();
-      this.layerService.renderLayers();
+      this.layerService.reRender();
     };
   }
 }
diff --git a/packages/layers/src/polygon/shaders/polygon_frag.glsl b/packages/layers/src/polygon/shaders/polygon_frag.glsl
index c907c08c8d..eef5872aef 100644
--- a/packages/layers/src/polygon/shaders/polygon_frag.glsl
+++ b/packages/layers/src/polygon/shaders/polygon_frag.glsl
@@ -1,12 +1,12 @@
 uniform float u_opacity: 1.0;
-varying vec4 v_Color;
+varying vec4 v_color;
 varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 
 #pragma include "picking"
 
 void main() {
   float opacity = styleMappingMat[0][0];
-  gl_FragColor = v_Color;
+  gl_FragColor = v_color;
   gl_FragColor.a *= opacity;
   gl_FragColor = filterColor(gl_FragColor);
 }
diff --git a/packages/layers/src/polygon/shaders/polygon_vert.glsl b/packages/layers/src/polygon/shaders/polygon_vert.glsl
index d8187accf8..88cb85c03b 100644
--- a/packages/layers/src/polygon/shaders/polygon_vert.glsl
+++ b/packages/layers/src/polygon/shaders/polygon_vert.glsl
@@ -7,7 +7,7 @@ uniform mat4 u_Mvp;
 uniform float u_opacity: 1.0;
 uniform float u_raisingHeight: 0.0;
 
-varying vec4 v_Color;
+varying vec4 v_color;
 varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
 #pragma include "styleMapping"
@@ -43,7 +43,7 @@ styleMappingMat = mat4(
   textureOffset = opacityAndOffset.g;
   // cal style mapping - 数据纹理映射部分的计算
 
-  v_Color = a_Color;
+  v_color = a_Color;
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
diff --git a/packages/layers/src/polygon/shaders/tile/polygon_tile_frag.glsl b/packages/layers/src/polygon/shaders/tile/polygon_tile_frag.glsl
deleted file mode 100644
index c907c08c8d..0000000000
--- a/packages/layers/src/polygon/shaders/tile/polygon_tile_frag.glsl
+++ /dev/null
@@ -1,12 +0,0 @@
-uniform float u_opacity: 1.0;
-varying vec4 v_Color;
-varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
-
-#pragma include "picking"
-
-void main() {
-  float opacity = styleMappingMat[0][0];
-  gl_FragColor = v_Color;
-  gl_FragColor.a *= opacity;
-  gl_FragColor = filterColor(gl_FragColor);
-}
diff --git a/packages/layers/src/polygon/shaders/tile/polygon_tile_map_vert.glsl b/packages/layers/src/polygon/shaders/tile/polygon_tile_map_vert.glsl
new file mode 100644
index 0000000000..6660427a66
--- /dev/null
+++ b/packages/layers/src/polygon/shaders/tile/polygon_tile_map_vert.glsl
@@ -0,0 +1,16 @@
+attribute vec3 a_Position;
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+
+#pragma include "projection"
+
+void main() {
+  vec4 project_pos = project_position(vec4(a_Position, 1.0));
+
+  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+    gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
+  } else {
+    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  }
+}
\ No newline at end of file
diff --git a/packages/layers/src/polygon/shaders/tile/polygon_tile_vert.glsl b/packages/layers/src/polygon/shaders/tile/polygon_tile_vert.glsl
index c6e9c347ae..9a6a98de55 100644
--- a/packages/layers/src/polygon/shaders/tile/polygon_tile_vert.glsl
+++ b/packages/layers/src/polygon/shaders/tile/polygon_tile_vert.glsl
@@ -4,78 +4,38 @@ attribute vec3 a_Position;
 uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
-uniform float u_opacity: 1.0;
+// uniform vec2 u_tileOrigin;
+// uniform float u_coord;
 
-uniform vec2 u_tileOrigin;
-uniform float u_coord;
-
-varying vec4 v_Color;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
+varying vec4 v_color;
 
 #pragma include "projection"
 #pragma include "picking"
 
 void main() {
-  // cal style mapping - 数据纹理映射部分的计算
-styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
-
-  v_Color = a_Color;
+  v_color = a_Color;
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
 
-
-  if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
-    float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
-    project_pos.z *= mapboxZoomScale;
-  }
-
-if(u_coord > 0.0) {
-  if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-    gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
-  } else {
-    gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
-  }
-} else {
-    vec2 pointPos = a_Position.xy;
-    vec4 world = vec4(project_mvt_offset_position(vec4(u_tileOrigin, 0.0, 1.0)).xyz, 1.0); // 瓦片起始点的世界坐标
-
-    vec2 pointOffset =  pointPos *  pow(2.0, u_Zoom); // 瓦片内的点的偏移坐标
-    
-    world.xy += pointOffset;
-
-    if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
-      // Needs to be divided with project_uCommonUnitsPerMeter
-      world.w *= u_PixelsPerMeter.z;
+  // if(u_coord > 0.0) {
+    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
+    } else {
+      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
     }
+  // } else {
+  //   vec4 world = vec4(project_mvt_offset_position(vec4(u_tileOrigin, 0.0, 1.0)).xyz, 1.0); // 瓦片起始点的世界坐标
 
-    gl_Position = u_ViewProjectionMatrix * world + u_ViewportCenterProjection;
-}
+  //   vec2 pointOffset = a_Position.xy *  pow(2.0, u_Zoom); // 瓦片内的点的偏移坐标
+    
+  //   world.xy += pointOffset;
 
+  //   if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+  //     // Needs to be divided with project_uCommonUnitsPerMeter
+  //     world.w *= u_PixelsPerMeter.z;
+  //   }
+
+  //   gl_Position = u_ViewProjectionMatrix * world + u_ViewportCenterProjection;
+  // }
 
   setPickingColor(a_PickingColor);
 }
diff --git a/packages/layers/src/polygon/shaders/water/polygon_ocean_frag.glsl b/packages/layers/src/polygon/shaders/water/polygon_ocean_frag.glsl
index 37e4ebdf93..9ce1f3573f 100644
--- a/packages/layers/src/polygon/shaders/water/polygon_ocean_frag.glsl
+++ b/packages/layers/src/polygon/shaders/water/polygon_ocean_frag.glsl
@@ -3,7 +3,6 @@ uniform float u_time: 0.0;
 uniform float u_opacity: 1.0;
 
 varying vec2 v_uv;
-varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
 
 float coast2water_fadedepth = 0.10;
 float large_waveheight      = .750; // change to adjust the "heavy" waves
@@ -243,6 +242,6 @@ void main() {
     }
     
 
-  float opacity = styleMappingMat[0][0];
+  float opacity = u_opacity;
   gl_FragColor = vec4(col, opacity);  
 }
diff --git a/packages/layers/src/polygon/shaders/water/polygon_ocean_vert.glsl b/packages/layers/src/polygon/shaders/water/polygon_ocean_vert.glsl
index 89152ace61..ff1638b916 100644
--- a/packages/layers/src/polygon/shaders/water/polygon_ocean_vert.glsl
+++ b/packages/layers/src/polygon/shaders/water/polygon_ocean_vert.glsl
@@ -4,44 +4,13 @@ uniform mat4 u_ModelMatrix;
 uniform mat4 u_Mvp;
 
 varying vec2 v_uv;
-uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
-
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
 
 #pragma include "projection"
 
 void main() {
   v_uv = a_uv;
-  // cal style mapping - 数据纹理映射部分的计算
-styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
 
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
-  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
diff --git a/packages/layers/src/polygon/shaders/water/polygon_water_frag.glsl b/packages/layers/src/polygon/shaders/water/polygon_water_frag.glsl
index 03663c64d5..7f3996c05b 100644
--- a/packages/layers/src/polygon/shaders/water/polygon_water_frag.glsl
+++ b/packages/layers/src/polygon/shaders/water/polygon_water_frag.glsl
@@ -5,8 +5,6 @@ uniform float u_opacity: 1.0;
 
 varying vec4 v_Color;
 varying vec2 v_uv;
-varying mat4 styleMappingMat; // 传递从片元中传递的映射数据
-
 
 float rand(vec2 n) { return 0.5 + 0.5 * fract(sin(dot(n.xy, vec2(12.9898, 78.233)))* 43758.5453); }
 
@@ -64,7 +62,7 @@ float calSpc() {
 }
 
 void main() {
-  float opacity = styleMappingMat[0][0];
+  float opacity = u_opacity;
   gl_FragColor = v_Color;
   gl_FragColor.a *= opacity;
 
diff --git a/packages/layers/src/polygon/shaders/water/polygon_water_vert.glsl b/packages/layers/src/polygon/shaders/water/polygon_water_vert.glsl
index 356d232ddc..12d8cda80a 100644
--- a/packages/layers/src/polygon/shaders/water/polygon_water_vert.glsl
+++ b/packages/layers/src/polygon/shaders/water/polygon_water_vert.glsl
@@ -7,44 +7,15 @@ uniform mat4 u_Mvp;
 varying vec4 v_Color;
 varying vec2 v_uv;
 uniform float u_opacity: 1.0;
-varying mat4 styleMappingMat; // 用于将在顶点着色器中计算好的样式值传递给片元
 
-#pragma include "styleMapping"
-#pragma include "styleMappingCalOpacity"
 
 #pragma include "projection"
 
 void main() {
   v_uv = a_uv;
-  // cal style mapping - 数据纹理映射部分的计算
-styleMappingMat = mat4(
-    0.0, 0.0, 0.0, 0.0, // opacity - strokeOpacity - strokeWidth - empty
-    0.0, 0.0, 0.0, 0.0, // strokeR - strokeG - strokeB - strokeA
-    0.0, 0.0, 0.0, 0.0, // offsets[0] - offsets[1]
-    0.0, 0.0, 0.0, 0.0
-  );
-
-  float rowCount = u_cellTypeLayout[0][0];    // 当前的数据纹理有几行
-  float columnCount = u_cellTypeLayout[0][1]; // 当看到数据纹理有几列
-  float columnWidth = 1.0/columnCount;  // 列宽
-  float rowHeight = 1.0/rowCount;       // 行高
-  float cellCount = calCellCount(); // opacity - strokeOpacity - strokeWidth - stroke - offsets
-  float id = a_vertexId; // 第n个顶点
-  float cellCurrentRow = floor(id * cellCount / columnCount) + 1.0; // 起始点在第几行
-  float cellCurrentColumn = mod(id * cellCount, columnCount) + 1.0; // 起始点在第几列
-  
-  // cell 固定顺序 opacity -> strokeOpacity -> strokeWidth -> stroke ... 
-  // 按顺序从 cell 中取值、若没有则自动往下取值
-  float textureOffset = 0.0; // 在 cell 中取值的偏移量
-
-  vec2 opacityAndOffset = calOpacityAndOffset(cellCurrentRow, cellCurrentColumn, columnCount, textureOffset, columnWidth, rowHeight);
-  styleMappingMat[0][0] = opacityAndOffset.r;
-  textureOffset = opacityAndOffset.g;
-  // cal style mapping - 数据纹理映射部分的计算
 
   v_Color = a_Color;
   vec4 project_pos = project_position(vec4(a_Position, 1.0));
-  // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
     gl_Position = u_Mvp * (vec4(project_pos.xyz, 1.0));
diff --git a/packages/layers/src/raster/index.ts b/packages/layers/src/raster/index.ts
index 95bfa02ede..ce5b1bad72 100644
--- a/packages/layers/src/raster/index.ts
+++ b/packages/layers/src/raster/index.ts
@@ -8,11 +8,15 @@ export default class RaterLayer extends BaseLayer<IRasterLayerStyleOptions> {
     this.layerModel = new RasterModels[modelType](this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
   protected getConfigSchema() {
     return {
diff --git a/packages/layers/src/raster/models/raster.ts b/packages/layers/src/raster/models/raster.ts
index f840bead13..a7e76f3f6b 100644
--- a/packages/layers/src/raster/models/raster.ts
+++ b/packages/layers/src/raster/models/raster.ts
@@ -78,6 +78,7 @@ export default class RasterModel extends BaseModel {
         primitive: gl.TRIANGLES,
         depth: { enable: false },
         stencil: getMask(mask, maskInside),
+        pick: false,
       })
       .then((model) => {
         callbackModel([model]);
@@ -115,7 +116,6 @@ export default class RasterModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
           return [vertex[3], vertex[4]];
         },
diff --git a/packages/layers/src/shader/minify_frag.glsl b/packages/layers/src/shader/minify_frag.glsl
new file mode 100644
index 0000000000..6fb20cb940
--- /dev/null
+++ b/packages/layers/src/shader/minify_frag.glsl
@@ -0,0 +1,7 @@
+uniform float u_opacity : 1.0;
+uniform vec4 u_color;
+
+void main() {
+  gl_FragColor = u_color;
+  gl_FragColor.a *= u_opacity;
+}
diff --git a/packages/layers/src/shader/minify_picking_frag.glsl b/packages/layers/src/shader/minify_picking_frag.glsl
new file mode 100644
index 0000000000..763e78eecd
--- /dev/null
+++ b/packages/layers/src/shader/minify_picking_frag.glsl
@@ -0,0 +1,10 @@
+uniform float u_opacity : 1.0;
+varying vec4 v_color;
+
+#pragma include "picking"
+
+void main() {
+  gl_FragColor = v_color;
+  gl_FragColor.a *= u_opacity;
+  gl_FragColor = filterColor(gl_FragColor);
+}
diff --git a/packages/layers/src/tile/manager/baseMapTileLayerManager.ts b/packages/layers/src/tile/manager/baseMapTileLayerManager.ts
new file mode 100644
index 0000000000..9d6163509c
--- /dev/null
+++ b/packages/layers/src/tile/manager/baseMapTileLayerManager.ts
@@ -0,0 +1,191 @@
+import {
+  ILayer,
+  IMapService,
+  IRendererService,
+  ISubLayerInitOptions,
+  IBaseTileLayerManager,
+} from '@antv/l7-core';
+import { Tile } from '@antv/l7-utils';
+import { getTileFactory, ITileFactory, TileType } from '../tileFactory';
+import { getLayerShape, getMaskValue } from '../utils';
+export class BaseMapTileLayerManager implements IBaseTileLayerManager {
+  // only support vector layer
+  public sourceLayer: string;
+  public parent: ILayer;
+  public children: ILayer[];
+  public mapService: IMapService;
+  public rendererService: IRendererService;
+  private tileFactory: ITileFactory;
+  private initOptions: ISubLayerInitOptions;
+  constructor(
+    parent: ILayer,
+    mapService: IMapService,
+    rendererService: IRendererService,
+  ) {
+    this.parent = parent;
+    this.children = parent.layerChildren;
+    this.mapService = mapService;
+    this.rendererService = rendererService;
+
+
+    this.setSubLayerInitOptipn();
+    this.initTileFactory();
+  }
+
+  public createTile(tile: Tile) {
+    return this.tileFactory.createTile(tile, this.initOptions);
+  }
+
+  public updateLayersConfig(layers: ILayer[], key: string, value: any) {
+    layers.map((layer) => {
+      if (key === 'mask') {
+        // Tip: 栅格瓦片生效、设置全局的 mask、瓦片被全局的 mask 影响
+        layer.style({
+          mask: value,
+        });
+      } else {
+        layer.updateLayerConfig({
+          [key]: value,
+        });
+      }
+    });
+  }
+
+  public addChild(layer: ILayer) {
+    this.children.push(layer);
+  }
+
+  public addChilds(layers: ILayer[]) {
+    this.children.push(...layers);
+  }
+
+  public removeChilds(layerIDList: string[], refresh = true) {
+    const remveLayerList: ILayer[] = [];
+    const cacheLayerList: ILayer[] = [];
+    this.children.filter((child) => {
+      layerIDList.includes(child.id)
+        ? remveLayerList.push(child)
+        : cacheLayerList.push(child);
+    });
+    remveLayerList.map((layer) => layer.destroy(refresh));
+    this.children = cacheLayerList;
+  }
+
+  public removeChild(layer: ILayer) {
+    const layerIndex = this.children.indexOf(layer);
+    if (layerIndex > -1) {
+      this.children.splice(layerIndex, 1);
+    }
+    layer.destroy();
+  }
+
+  public getChilds(layerIDList: string[]) {
+    return this.children.filter((child) => layerIDList.includes(child.id));
+  }
+
+  public getChild(layerID: string) {
+    return this.children.filter((child) => child.id === layerID)[0];
+  }
+
+  public clearChild() {
+    this.children.forEach((layer: any) => {
+      layer.destroy();
+    });
+
+    this.children.slice(0, this.children.length);
+  }
+
+  public hasChild(layer: ILayer) {
+    return this.children.includes(layer);
+  }
+
+  public render(): void {
+    this.children
+    .filter((layer) => layer.inited)
+    .filter((layer) => layer.isVisible())
+    .map((layer) => {
+      layer.hooks.beforeRenderData.call();
+      layer.hooks.beforeRender.call();
+      if (layer.masks.length > 0) {
+        // 清除上一次的模版缓存
+        this.rendererService.clear({
+          stencil: 0,
+          depth: 1,
+          framebuffer: null,
+        });
+        layer.masks.map((m: ILayer) => {
+          m.hooks.beforeRenderData.call();
+          m.hooks.beforeRender.call();
+          m.render();
+          m.hooks.afterRender.call();
+        });
+      }
+      layer.render();
+      layer.hooks.afterRender.call();
+    });
+  }
+
+  private setSubLayerInitOptipn() {
+    const {
+      zIndex = 0,
+      opacity = 1,
+      mask = false,
+      stroke = '#fff',
+      strokeWidth = 0,
+      strokeOpacity = 1,
+ 
+      workerEnabled = false,
+      sourceLayer,
+    } = this.parent.getLayerConfig() as ISubLayerInitOptions;
+   
+    const source = this.parent.getSource();
+    const parentParserType = source.getParserType();
+  
+    const colorAttribute = this.parent.getAttribute('color');
+    const basemapColor = (colorAttribute?.scale?.field || '#fff') as string;
+    const sizeAttribute = this.parent.getAttribute('size');
+    const basemapSize = (sizeAttribute?.scale?.field || 1) as number;
+
+    const layerShape = getLayerShape(this.parent.type, this.parent);
+
+    this.initOptions = {
+      usage: 'basemap',
+      layerType: this.parent.type,
+      shape: layerShape,
+      zIndex,
+      opacity,
+      sourceLayer: this.getSourceLayer(parentParserType, sourceLayer),
+      basemapColor,
+      basemapSize,
+      mask: getMaskValue(this.parent.type, mask),
+      stroke,
+      strokeWidth,
+      strokeOpacity,
+      // worker
+      workerEnabled,
+    };
+  }
+
+  private getSourceLayer(parentParserType: string, sourceLayer: string|undefined) {
+    if(parentParserType === 'geojsonvt') {
+      return 'geojsonvt';
+    } else if(parentParserType === 'testTile') {
+      return 'testTile';
+    } else {
+      return sourceLayer;
+    }
+  }
+
+  private initTileFactory() {
+    const source = this.parent.getSource();
+    const TileFactory = getTileFactory(
+      this.parent.type as TileType,
+      source.parser,
+    );
+    this.tileFactory = new TileFactory({
+      parent: this.parent,
+      mapService: this.mapService,
+      rendererService: this.rendererService,
+    });
+  }
+}
diff --git a/packages/layers/src/tile/manager/tileLayerManager.ts b/packages/layers/src/tile/manager/tileLayerManager.ts
index 922d88b10b..3103e53e28 100644
--- a/packages/layers/src/tile/manager/tileLayerManager.ts
+++ b/packages/layers/src/tile/manager/tileLayerManager.ts
@@ -1,7 +1,6 @@
 import {
   IInteractionTarget,
   ILayer,
-  ILayerService,
   IMapService,
   IPickingService,
   IRendererService,
@@ -33,7 +32,6 @@ export class TileLayerManager implements ITileLayerManager {
     mapService: IMapService,
     rendererService: IRendererService,
     pickingService: IPickingService,
-    layerService: ILayerService,
     transforms: ITransform[]
   ) {
     this.parent = parent;
@@ -47,7 +45,6 @@ export class TileLayerManager implements ITileLayerManager {
       rendererService,
       pickingService,
       this.children,
-      layerService,
     );
     this.tileConfigManager = new TileConfigManager();
 
@@ -178,10 +175,18 @@ export class TileLayerManager implements ITileLayerManager {
     const parentParserType = source.getParserType();
 
     const layerShape = getLayerShape(this.parent.type, this.parent);
-
+    let colorTexture = undefined;
     if (rampColors) {
       // 构建统一的色带贴图
+      const { createTexture2D } = this.rendererService;
       this.rampColorsData = generateColorRamp(rampColors as IColorRamp);
+      const imageData = generateColorRamp(rampColors as IColorRamp);
+      colorTexture = createTexture2D({
+        data: this.rampColorsData.data,
+        width: imageData.width,
+        height: imageData.height,
+        flipY: false,
+      });
     }
 
 
@@ -206,6 +211,7 @@ export class TileLayerManager implements ITileLayerManager {
       domain,
       rampColors,
       rampColorsData: this.rampColorsData,
+      colorTexture,
       // worker
       workerEnabled,
 
diff --git a/packages/layers/src/tile/manager/tilePickerManager.ts b/packages/layers/src/tile/manager/tilePickerManager.ts
index aaa8cb0fff..f81ac90819 100644
--- a/packages/layers/src/tile/manager/tilePickerManager.ts
+++ b/packages/layers/src/tile/manager/tilePickerManager.ts
@@ -1,7 +1,6 @@
 import {
   IInteractionTarget,
   ILayer,
-  ILayerService,
   IPickingService,
   IRendererService,
   ITilePickManager,
@@ -12,7 +11,6 @@ export default class TilePickManager extends EventEmitter
   public isLastPicked: boolean = false;
   private rendererService: IRendererService;
   private pickingService: IPickingService;
-  private layerService: ILayerService;
   private children: ILayer[];
   private parent: ILayer;
 
@@ -21,13 +19,11 @@ export default class TilePickManager extends EventEmitter
     rendererService: IRendererService,
     pickingService: IPickingService,
     children: ILayer[],
-    layerService: ILayerService,
   ) {
     super();
     this.parent = parent;
     this.rendererService = rendererService;
     this.pickingService = pickingService;
-    this.layerService = layerService;
     this.children = children;
   }
 
diff --git a/packages/layers/src/tile/models/tileModel.ts b/packages/layers/src/tile/models/tileModel.ts
index 4d02e86366..43334cdf9e 100644
--- a/packages/layers/src/tile/models/tileModel.ts
+++ b/packages/layers/src/tile/models/tileModel.ts
@@ -1,15 +1,27 @@
 import { IModelUniform } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
 import { TMSTileLayer } from '../tmsTileLayer';
+import { TMSBaseMapTileLayer } from '../tmsMapTileLayer';
 export default class TileModel extends BaseModel {
   public getUninforms(): IModelUniform {
     return {};
   }
 
+  private getTileLayer(usage?: string) {
+    switch(usage) {
+      case 'basemap':
+        return TMSBaseMapTileLayer;
+      default:
+        return TMSTileLayer;
+    }
+  }
+
   public initModels() {
     const source = this.layer.getSource();
-    if (source?.data.isTile) {
-      this.layer.tileLayer = new TMSTileLayer({
+    const { usage } = this.layer.getLayerConfig();
+    if (source?.data.isTile && !this.layer.tileLayer) {
+      const tileLayer = this.getTileLayer(usage);
+      this.layer.tileLayer = new tileLayer({
         parent: this.layer,
         rendererService: this.rendererService,
         mapService: this.mapService,
diff --git a/packages/layers/src/tile/tileFactory/base.ts b/packages/layers/src/tile/tileFactory/base.ts
index d1cc700c5e..bdb484d964 100644
--- a/packages/layers/src/tile/tileFactory/base.ts
+++ b/packages/layers/src/tile/tileFactory/base.ts
@@ -19,6 +19,7 @@ import VectorLayer from './vectorLayer';
 
 import * as turf from '@turf/helpers';
 import union from '@turf/union';
+import clone from '@turf/clone';
 import polygonToLineString from '@turf/polygon-to-line';
 import {
   CacheEvent,
@@ -29,6 +30,12 @@ import {
   Timeout,
 } from '../interface';
 
+const EMPTY_FEATURE_DATA = {
+  features: [],
+  featureId: null,
+  vectorTileLayer: null,
+  source: null,
+};
 export default class TileFactory implements ITileFactory {
   public type: string;
   public parentLayer: ILayer;
@@ -56,6 +63,7 @@ export default class TileFactory implements ITileFactory {
     this.tilesetManager = source.tileset as TilesetManager;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public createTile(tile: Tile, initOptions: ISubLayerInitOptions) {
     return {
       layers: [] as ILayer[],
@@ -64,33 +72,28 @@ export default class TileFactory implements ITileFactory {
   }
 
   public getFeatureData(tile: Tile, initOptions: ISubLayerInitOptions) {
-    const emptyData = {
-      features: [],
-      featureId: null,
-      vectorTileLayer: null,
-      source: null,
-    };
-    const { sourceLayer, featureId, transforms, layerType, shape } = initOptions;
+    const { sourceLayer, featureId, transforms = [], layerType, shape } = initOptions;
     if (!sourceLayer) {
-      return emptyData;
+      return EMPTY_FEATURE_DATA;
     }
     const vectorTileLayer = tile.data.layers[sourceLayer];
     const features = vectorTileLayer?.features;
     if (!(Array.isArray(features) && features.length > 0)) {
-      return emptyData;
+      return EMPTY_FEATURE_DATA;
     } else {
       let geofeatures = [];
       if(layerType === 'LineLayer' && shape === 'simple') {
         features.map(feature => {
-          if(feature.geometry.type === 'MultiPolygon') {
+          const cloneFeature = clone(feature);
+          if(cloneFeature.geometry.type === 'MultiPolygon') {
             // @ts-ignore
-            const linefeatures = polygonToLineString(feature).features
+            const linefeatures = polygonToLineString(cloneFeature).features
             geofeatures.push(...linefeatures)
-          } else if(feature.geometry.type === 'Polygon') {
-            feature.geometry.type = 'MultiLineString'
-            geofeatures.push(feature);
+          } else if(cloneFeature.geometry.type === 'Polygon') {
+            cloneFeature.geometry.type = 'MultiLineString'
+            geofeatures.push(cloneFeature);
           } else {
-            geofeatures.push(feature);
+            geofeatures.push(cloneFeature);
           }
         })
       } else {
@@ -106,6 +109,7 @@ export default class TileFactory implements ITileFactory {
           parser: {
             type: 'geojson',
             featureId,
+            cancelExtent: true
           },
           transforms
         },
@@ -128,7 +132,7 @@ export default class TileFactory implements ITileFactory {
       vectorTileLayer,
       source,
     } = tileLayerOption;
-    const { mask, color, layerType, size, shape } = initOptions;
+    const { mask, color, layerType, size, shape, usage, basemapColor, basemapSize } = initOptions;
     const FactoryTileLayer = L7Layer ? L7Layer : VectorLayer;
     const layer = new FactoryTileLayer({
       visible: tile.isVisible,
@@ -136,23 +140,35 @@ export default class TileFactory implements ITileFactory {
       coord: vectorTileLayer?.l7TileCoord,
       ...this.getLayerInitOption(initOptions),
     });
-    // vector layer set config
-    if (layer.isVector) {
+
+    if(layerType) layer.type = layerType;
+
+    // Tip: sign tile layer
+    layer.isTileLayer = true; // vector 、raster
+    
+    // vector layer set event
+    if (layer.isVector && usage !== 'basemap') {
       this.emitEvent([layer]);
-      layer.type = layerType;
       layer.select(true);
     }
 
     // set source
     layer.source(source);
 
-    // set scale
-    this.setScale(layer);
-
     // set scale attribute field
     this.setStyleAttributeField(layer, 'shape', shape);
-    this.setStyleAttributeField(layer, 'color', color);
-    this.setStyleAttributeField(layer, 'size', size);
+    if(usage !== 'basemap') {
+       // set scale
+      this.setScale(layer);
+
+      this.setStyleAttributeField(layer, 'color', color);
+      this.setStyleAttributeField(layer, 'size', size);
+    } else {
+      layer.style({
+        color: basemapColor,
+        size: basemapSize
+      })
+    }
 
     // set mask
     const layers = [layer];
@@ -161,8 +177,12 @@ export default class TileFactory implements ITileFactory {
         .source({
           type: 'FeatureCollection',
           features: [tile.bboxPolygon],
-        })
-        .shape('fill');
+        }, {
+          parser: {
+            type: 'geojson',
+            cancelExtent: true
+          }
+        });
 
       layers.push(masklayer as VectorLayer);
 
@@ -183,7 +203,7 @@ export default class TileFactory implements ITileFactory {
   public getDefautStyleAttributeField(layer: ILayer, type: string) {
     switch (type) {
       case 'size':
-        return 2;
+        return 1;
       case 'color':
         return '#fff';
       case 'shape':
@@ -250,8 +270,7 @@ export default class TileFactory implements ITileFactory {
     const tiles = this.tilesetManager.tiles.filter(
       (t) => t.key === `${xy[0]},${xy[1]},${z}`,
     );
-    const tile = tiles[0];
-    return tile;
+    return tiles[0];
   }
 
   protected emitEvent(layers: ILayer[], isVector?: boolean) {
@@ -262,7 +281,7 @@ export default class TileFactory implements ITileFactory {
           if (this.parentLayer.type === 'RasterLayer') {
             const { lng, lat } = e.lngLat;
             const tile = this.getTile(lng, lat);
-            this.getFeatureAndEmitEvent(
+            tile && this.getFeatureAndEmitEvent(
               layer,
               'subLayerClick',
               e,
@@ -279,7 +298,7 @@ export default class TileFactory implements ITileFactory {
           if (this.parentLayer.type === 'RasterLayer') {
             const { lng, lat } = e.lngLat;
             const tile = this.getTile(lng, lat);
-            this.getFeatureAndEmitEvent(
+            tile && this.getFeatureAndEmitEvent(
               layer,
               'subLayerMouseMove',
               e,
@@ -298,7 +317,7 @@ export default class TileFactory implements ITileFactory {
           if (this.parentLayer.type === 'RasterLayer') {
             const { lng, lat } = e.lngLat;
             const tile = this.getTile(lng, lat);
-            this.getFeatureAndEmitEvent(
+            tile && this.getFeatureAndEmitEvent(
               layer,
               'subLayerMouseMove',
               e,
diff --git a/packages/layers/src/tile/tileFactory/line.ts b/packages/layers/src/tile/tileFactory/line.ts
index 64070c5420..389a5763de 100644
--- a/packages/layers/src/tile/tileFactory/line.ts
+++ b/packages/layers/src/tile/tileFactory/line.ts
@@ -29,7 +29,9 @@ export default class VectorPolygonTile extends TileFactory {
       vectorTileLayer,
       source: source as Source,
     });
-
+    layer.once('modelLoaded', () => {
+      tile.layerLoad();
+    })
     return {
       layers: [layer],
       layerIDList: [layer.id],
diff --git a/packages/layers/src/tile/tileFactory/point.ts b/packages/layers/src/tile/tileFactory/point.ts
index 63d71e187c..d0e249b822 100644
--- a/packages/layers/src/tile/tileFactory/point.ts
+++ b/packages/layers/src/tile/tileFactory/point.ts
@@ -29,6 +29,9 @@ export default class VectorPolygonTile extends TileFactory {
       vectorTileLayer,
       source: source as Source,
     });
+    layer.once('modelLoaded', () => {
+      tile.layerLoad();
+    })
     return {
       layers: [layer],
       layerIDList: [layer.id],
diff --git a/packages/layers/src/tile/tileFactory/polygon.ts b/packages/layers/src/tile/tileFactory/polygon.ts
index 64070c5420..389a5763de 100644
--- a/packages/layers/src/tile/tileFactory/polygon.ts
+++ b/packages/layers/src/tile/tileFactory/polygon.ts
@@ -29,7 +29,9 @@ export default class VectorPolygonTile extends TileFactory {
       vectorTileLayer,
       source: source as Source,
     });
-
+    layer.once('modelLoaded', () => {
+      tile.layerLoad();
+    })
     return {
       layers: [layer],
       layerIDList: [layer.id],
diff --git a/packages/layers/src/tile/tileFactory/raster.ts b/packages/layers/src/tile/tileFactory/raster.ts
index 72b3e22098..413dcb7bfa 100644
--- a/packages/layers/src/tile/tileFactory/raster.ts
+++ b/packages/layers/src/tile/tileFactory/raster.ts
@@ -26,7 +26,9 @@ export default class RasterTile extends TileFactory {
       initOptions,
       source,
     });
-
+    layer.once('modelLoaded', () => {
+      tile.layerLoad();
+    })
     return {
       layers: [layer],
       layerIDList: [layer.id],
diff --git a/packages/layers/src/tile/tileFactory/rasterData.ts b/packages/layers/src/tile/tileFactory/rasterData.ts
index 11371c3b02..b0493917f0 100644
--- a/packages/layers/src/tile/tileFactory/rasterData.ts
+++ b/packages/layers/src/tile/tileFactory/rasterData.ts
@@ -55,7 +55,9 @@ export default class RasterTiffTile extends TileFactory {
     this.emitEvent([layer], false);
 
     registerLayers(this.parentLayer, [layer]);
-
+    layer.once('modelLoaded', () => {
+      tile.layerLoad();
+    })
     return {
       layers: [layer],
       layerIDList: [layer.id],
diff --git a/packages/layers/src/tile/tileFactory/rasterDataLayer.ts b/packages/layers/src/tile/tileFactory/rasterDataLayer.ts
index 36bebcd234..b017af8eaf 100644
--- a/packages/layers/src/tile/tileFactory/rasterDataLayer.ts
+++ b/packages/layers/src/tile/tileFactory/rasterDataLayer.ts
@@ -11,12 +11,16 @@ export default class RasterTiffLayer extends BaseLayer<
     this.layerModel = new model(this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
 
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
 
   protected getModelType() {
diff --git a/packages/layers/src/tile/tileFactory/test.ts b/packages/layers/src/tile/tileFactory/test.ts
index b94c4de25f..c7b626aaca 100644
--- a/packages/layers/src/tile/tileFactory/test.ts
+++ b/packages/layers/src/tile/tileFactory/test.ts
@@ -35,32 +35,49 @@ export default class TestTile extends TileFactory {
     
     const properties = features[0].properties;
     
-    const text = new VectorLayer({ layerType: 'PointLayer' })
+    const text = new VectorLayer({ layerType: 'PointLayer', usage: 'basemap' })
     .source([properties], {
       parser: {
         type: 'json',
         x: 'textLng',
-        y: 'textLat'
+        y: 'textLat',
+        cancelExtent: true,
       }
     })
     .shape('key', 'text')
-    .size(20)
-    .color('#000')
     .style({
+      size: 20,
+      color: '#000',
       stroke: '#fff',
       strokeWidth: 2
-    })
+    });
 
-    const line = new VectorLayer({ layerType: 'LineLayer' })
+    const line = new VectorLayer({ layerType: 'LineLayer', usage: 'basemap' })
     .source({
       type: 'FeatureCollection',
       features: features,
+    }, {
+      parser: {
+        type: 'geojson',
+        cancelExtent: true,
+      }
     })
     .shape('simple')
-    .color('#000')
+    .style({
+      color: '#000'
+    });
+
+    // Tip: sign tile layer
+    text.isTileLayer = true;
+    line.isTileLayer = true;
 
     registerLayers(this.parentLayer, [line, text]);
-
+    text.once('modelLoaded', () => {
+      tile.layerLoad();
+    })
+    line.once('modelLoaded', () => {
+      tile.layerLoad();
+    })
     return {
       layers: [line, text],
       layerIDList: [line.id, text.id],
diff --git a/packages/layers/src/tile/tileFactory/vectorLayer.ts b/packages/layers/src/tile/tileFactory/vectorLayer.ts
index d01d1bb694..d603b2815d 100644
--- a/packages/layers/src/tile/tileFactory/vectorLayer.ts
+++ b/packages/layers/src/tile/tileFactory/vectorLayer.ts
@@ -1,4 +1,17 @@
-import { IEncodeFeature } from '@antv/l7-core';
+import {
+  TYPES,
+  ICameraService,
+  ICoordinateSystemService,
+  IEncodeFeature,
+  IFontService,
+  IIconService,
+  ILayerPlugin,
+  ILayerService,
+  IMapService,
+  IRendererService,
+  IShaderModuleService,
+  IStyleAttributeService,
+} from '@antv/l7-core';
 import BaseLayer from '../../core/BaseLayer';
 import {
   ILineLayerStyleOptions,
@@ -6,7 +19,7 @@ import {
   IPolygonLayerStyleOptions,
 } from '../../core/interface';
 import lineFillModel from '../../line/models/tile';
-import lineSimpleModel from '../../line/models/simpleLine';
+import lineSimpleModel from '../../line/models/simpleTileLine';
 
 import pointTextModel from '../../point/models/tileText';
 import pointFillModel from '../../point/models/tile';
@@ -18,10 +31,111 @@ export default class VectorLayer extends BaseLayer<
   >
 > {
   public isVector: boolean = true;
-  public type: string = this.layerType as string;
+  public type: string = this.layerType as string || 'vectorLayer';
   // Tip: 单独被 tile 瓦片的渲染链路使用（用于优化性能）
   private pickedID: number | null = null;
 
+
+  public init() {
+    // 设置配置项
+    const sceneId = this.container.get<string>(TYPES.SceneID);
+    this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
+    this.layerType = this.rawConfig.layerType;
+
+    if(this.type === 'PointLayer') {
+      // Tip: iconService 和 fontService 只有在矢量点图层中才会被使用
+      this.iconService = this.container.get<IIconService>(TYPES.IIconService);
+      this.fontService = this.container.get<IFontService>(TYPES.IFontService);
+    }
+
+    this.rendererService = this.container.get<IRendererService>(
+      TYPES.IRendererService,
+    );
+    this.layerService = this.container.get<ILayerService>(TYPES.ILayerService);
+
+    this.mapService = this.container.get<IMapService>(TYPES.IMapService);
+
+    this.cameraService = this.container.get<ICameraService>(
+      TYPES.ICameraService,
+    );
+    this.coordinateService = this.container.get<ICoordinateSystemService>(
+      TYPES.ICoordinateSystemService,
+    );
+    this.shaderModuleService = this.container.get<IShaderModuleService>(
+      TYPES.IShaderModuleService,
+    );
+    this.postProcessingPassFactory = this.container.get(
+      TYPES.IFactoryPostProcessingPass,
+    );
+    this.normalPassFactory = this.container.get(TYPES.IFactoryNormalPass);
+
+    // 图层容器服务
+    this.styleAttributeService = this.container.get<IStyleAttributeService>(
+      TYPES.IStyleAttributeService,
+    );
+
+    // 完成样式服务注册完成前添加的属性
+    this.pendingStyleAttributes.forEach(
+      ({ attributeName, attributeField, attributeValues, updateOptions }) => {
+        this.styleAttributeService.updateStyleAttribute(
+          attributeName,
+          {
+            // @ts-ignore
+            scale: {
+              field: attributeField,
+              ...this.splitValuesAndCallbackInAttribute(
+                // @ts-ignore
+                attributeValues,
+                // @ts-ignore
+                this.getLayerConfig()[attributeName],
+              ),
+            },
+          },
+          // @ts-ignore
+          updateOptions,
+        );
+      },
+    );
+    this.pendingStyleAttributes = [];
+
+    // 获取插件集
+    this.plugins = this.container.getAll<ILayerPlugin>(TYPES.ILayerPlugin);
+    // 完成插件注册，传入场景和图层容器内的服务
+    for (const plugin of this.plugins) {
+      plugin.apply(this, {
+        rendererService: this.rendererService,
+        mapService: this.mapService,
+        styleAttributeService: this.styleAttributeService,
+        normalPassFactory: this.normalPassFactory,
+        postProcessingPassFactory: this.postProcessingPassFactory,
+      });
+    }
+
+    // 触发 init 生命周期插件
+    this.hooks.init.call();
+    this.hooks.afterInit.call();
+
+    return this;
+  }
+
+  public renderModels(isPicking?: boolean) {
+    this.models.forEach((model) => {
+      model.draw(
+        {
+          uniforms: this.layerModel.getUninforms(),
+        },
+        isPicking,
+      );
+    });
+    return this;
+  }
+
+  protected sourceEvent = () => {
+    // Tip: vector 不支持 autoFit
+    this.dataState.dataSourceNeedUpdate = true;
+    this.reRender();
+  };
+
   public getPickID() {
     return this.pickedID;
   }
@@ -35,12 +149,16 @@ export default class VectorLayer extends BaseLayer<
     this.layerModel = new model(this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
 
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
 
   protected getModelType() {
diff --git a/packages/layers/src/tile/tileLayer/baseMapTileLayer.ts b/packages/layers/src/tile/tileLayer/baseMapTileLayer.ts
new file mode 100644
index 0000000000..cac402a014
--- /dev/null
+++ b/packages/layers/src/tile/tileLayer/baseMapTileLayer.ts
@@ -0,0 +1,179 @@
+import {
+  ILayer,
+  ILayerService,
+  IMapService,
+  ISource,
+  IBaseTileLayer,
+  IBaseTileLayerManager,
+  ITileLayerOPtions,
+} from '@antv/l7-core';
+import { Tile, TilesetManager } from '@antv/l7-utils';
+import { BaseMapTileLayerManager } from '../manager/baseMapTileLayerManager';
+import { debounce } from 'lodash';
+
+export default class BaseTileLayer implements IBaseTileLayer {
+  public get children() {
+    return this.tileLayerManager.children;
+  }
+  public type: string = 'baseTile';
+  public sourceLayer: string;
+  public parent: ILayer;
+  // 瓦片是否加载成功
+  public initedTileset: boolean = false;
+  // 瓦片数据管理器
+  public tilesetManager: TilesetManager | undefined;
+  public tileLayerManager: IBaseTileLayerManager;
+  public scaleField: any;
+
+  private lastViewStates: {
+    zoom: number;
+    latLonBounds: [number, number, number, number];
+  };
+
+  protected mapService: IMapService;
+  protected layerService: ILayerService;
+
+  constructor({
+    parent,
+    rendererService,
+    mapService,
+    layerService,
+  }: ITileLayerOPtions) {
+    const parentSource = parent.getSource();
+    const { sourceLayer } =
+      parentSource?.data?.tilesetOptions || {};
+    this.sourceLayer = sourceLayer;
+    this.parent = parent;
+    this.mapService = mapService;
+    this.layerService = layerService;
+
+    this.tileLayerManager = new BaseMapTileLayerManager(
+      parent,
+      mapService,
+      rendererService,
+    );
+
+    this.initTileSetManager();
+  }
+
+  /**
+   * 渲染瓦片的图层
+   */
+  public render() {
+    if (this.tileLayerManager) {
+      this.tileLayerManager.render();
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public tileLoaded(tile: Tile) {
+    //
+  }
+
+  public tileError(error: Error) {
+    console.warn('error:', error);
+  }
+
+  public tileUnLoad(tile: Tile) {
+    this.tileLayerManager.removeChilds(tile.layerIDList, false);
+  }
+
+  public tileUpdate() {
+    // Base Function
+    if (!this.tilesetManager) {
+      return;
+    }
+
+    if (this.tilesetManager.isLoaded) {
+      // 将事件抛出，图层上可以使用瓦片
+      this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
+    }
+  }
+
+  private initTileSetManager() {
+    const source: ISource = this.parent.getSource();
+    this.tilesetManager = source.tileset as TilesetManager;
+
+    if (!this.initedTileset) {
+      this.bindTilesetEvent();
+      this.initedTileset = true;
+    }
+
+    const { latLonBounds, zoom } = this.getCurrentView();
+    this.tilesetManager?.update(zoom, latLonBounds);
+  }
+
+  private mapchange() {
+    const { latLonBounds, zoom } = this.getCurrentView();
+
+    if (this.mapService.version === 'GAODE1.x') {
+      const { visible } = this.parent.getLayerConfig();
+      if (zoom < 3 && visible) {
+        this.parent.updateLayerConfig({ visible: false });
+        this.layerService.reRender();
+      } else if (zoom >= 3 && !visible) {
+        this.parent.updateLayerConfig({ visible: true });
+        this.layerService.reRender();
+      }
+    }
+
+    if (
+      this.lastViewStates &&
+      this.lastViewStates.zoom === zoom &&
+      this.lastViewStates.latLonBounds.toString() === latLonBounds.toString()
+    ) {
+      return;
+    }
+    this.lastViewStates = { zoom, latLonBounds };
+
+    this.tilesetManager?.update(zoom, latLonBounds);
+  }
+
+  private bindTilesetEvent() {
+    if (!this.tilesetManager) {
+      return;
+    }
+    // 瓦片数据加载成功
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.tilesetManager.on('tile-loaded', (tile: Tile) => {
+      // 将事件抛出，图层上可以监听使用
+    });
+
+    // 瓦片数据从缓存删除或被执行重新加载
+    this.tilesetManager.on('tile-unload', (tile: Tile) => {
+      // 将事件抛出，图层上可以监听使用
+      this.tileUnLoad(tile);
+    });
+
+    // 瓦片数据加载失败
+    this.tilesetManager.on('tile-error', (error, tile: Tile) => {
+      // 将事件抛出，图层上可以监听使用
+      this.tileError(error);
+    });
+
+    // 瓦片显隐状态更新
+    this.tilesetManager.on('tile-update', () => {
+      this.tileUpdate();
+    });
+
+    // 地图视野发生改变
+    this.mapService.on('zoomend', () => this.viewchange());
+    this.mapService.on('moveend', () => this.viewchange());
+  }
+
+  //  防抖操作
+  viewchange = debounce(this.mapchange, 200)
+
+  private getCurrentView() {
+    const bounds = this.mapService.getBounds();
+    const latLonBounds: [number, number, number, number] = [
+      bounds[0][0],
+      bounds[0][1],
+      bounds[1][0],
+      bounds[1][1],
+    ];
+    const zoom = this.mapService.getZoom();
+
+    return { latLonBounds, zoom };
+  }
+}
diff --git a/packages/layers/src/tile/tileLayer/baseTileLayer.ts b/packages/layers/src/tile/tileLayer/baseTileLayer.ts
index eb116b0cba..3fa5085e86 100644
--- a/packages/layers/src/tile/tileLayer/baseTileLayer.ts
+++ b/packages/layers/src/tile/tileLayer/baseTileLayer.ts
@@ -10,6 +10,7 @@ import {
 } from '@antv/l7-core';
 import { decodePickingColor, Tile, TilesetManager } from '@antv/l7-utils';
 import { TileLayerManager } from '../manager/tileLayerManager';
+import { debounce } from 'lodash';
 
 export default class BaseTileLayer implements ITileLayer {
   public get children() {
@@ -30,9 +31,8 @@ export default class BaseTileLayer implements ITileLayer {
     latLonBounds: [number, number, number, number];
   };
 
-  private timer: any;
-  private mapService: IMapService;
-  private layerService: ILayerService;
+  protected mapService: IMapService;
+  protected layerService: ILayerService;
   private pickColors: {
     select: any;
     active: any;
@@ -50,7 +50,7 @@ export default class BaseTileLayer implements ITileLayer {
     transforms
   }: ITileLayerOPtions) {
     const parentSource = parent.getSource();
-    const { sourceLayer, coords, featureId } =
+    const { sourceLayer } =
       parentSource?.data?.tilesetOptions || {};
     this.sourceLayer = sourceLayer;
     this.parent = parent;
@@ -62,7 +62,6 @@ export default class BaseTileLayer implements ITileLayer {
       mapService,
       rendererService,
       pickingService,
-      layerService,
       transforms
     );
 
@@ -128,28 +127,6 @@ export default class BaseTileLayer implements ITileLayer {
       return;
     }
 
-    this.tilesetManager.tiles
-      .filter((tile) => tile.isLoaded)
-      .map((tile) => {
-        if (tile.layerIDList.length === 0) {
-          const { layers, layerIDList } = this.tileLayerManager.createTile(
-            tile,
-          );
-          tile.layerIDList = layerIDList;
-          this.tileLayerManager.addChilds(layers);
-        } else {
-          if (!tile.isVisibleChange) {
-            return;
-          }
-          const layers = this.tileLayerManager.getChilds(tile.layerIDList);
-          this.tileLayerManager.updateLayersConfig(
-            layers,
-            'visible',
-            tile.isVisible,
-          );
-        }
-      });
-
     if (this.tilesetManager.isLoaded) {
       // 将事件抛出，图层上可以使用瓦片
       this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
@@ -330,10 +307,10 @@ export default class BaseTileLayer implements ITileLayer {
       const { visible } = this.parent.getLayerConfig();
       if (zoom < 3 && visible) {
         this.parent.updateLayerConfig({ visible: false });
-        this.layerService.updateLayerRenderList();
+        this.layerService.reRender();
       } else if (zoom >= 3 && !visible) {
         this.parent.updateLayerConfig({ visible: true });
-        this.layerService.updateLayerRenderList();
+        this.layerService.reRender();
       }
     }
 
@@ -346,14 +323,7 @@ export default class BaseTileLayer implements ITileLayer {
     }
     this.lastViewStates = { zoom, latLonBounds };
 
-    if (this.timer) {
-      clearTimeout(this.timer);
-      this.timer = null;
-    }
-
-    // this.timer = setTimeout(() => {
     this.tilesetManager?.update(zoom, latLonBounds);
-    // }, 250);
   }
 
   private bindTilesetEvent() {
@@ -362,18 +332,18 @@ export default class BaseTileLayer implements ITileLayer {
     }
     // 瓦片数据加载成功
     this.tilesetManager.on('tile-loaded', (tile: Tile) => {
-      // todo: 将事件抛出，图层上可以监听使用
+      // 将事件抛出，图层上可以监听使用
     });
 
     // 瓦片数据从缓存删除或被执行重新加载
     this.tilesetManager.on('tile-unload', (tile: Tile) => {
-      // todo: 将事件抛出，图层上可以监听使用
+      // 将事件抛出，图层上可以监听使用
       this.tileUnLoad(tile);
     });
 
     // 瓦片数据加载失败
     this.tilesetManager.on('tile-error', (error, tile: Tile) => {
-      // todo: 将事件抛出，图层上可以监听使用
+      // 将事件抛出，图层上可以监听使用
       this.tileError(error);
     });
 
@@ -383,10 +353,13 @@ export default class BaseTileLayer implements ITileLayer {
     });
 
     // 地图视野发生改变
-    this.mapService.on('zoomend', () => this.mapchange());
-    this.mapService.on('moveend', () => this.mapchange());
+    this.mapService.on('zoomend', () => this.viewchange());
+    this.mapService.on('moveend', () => this.viewchange());
   }
 
+  //  防抖操作
+  viewchange = debounce(this.mapchange, 200)
+
   private getCurrentView() {
     const bounds = this.mapService.getBounds();
     const latLonBounds: [number, number, number, number] = [
diff --git a/packages/layers/src/tile/tileTest.ts b/packages/layers/src/tile/tileTest.ts
index bc51b6f933..3d946ac4d8 100644
--- a/packages/layers/src/tile/tileTest.ts
+++ b/packages/layers/src/tile/tileTest.ts
@@ -9,6 +9,7 @@ export default class TileDebugLayer extends BaseLayer<IBaseLayerStyleOptions> {
     options: {
       parser: {
         type: 'testTile',
+        cancelExtent: true,
       },
     },
   };
@@ -16,7 +17,7 @@ export default class TileDebugLayer extends BaseLayer<IBaseLayerStyleOptions> {
     this.layerModel = new TileModel(this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
     });
   }
 }
diff --git a/packages/layers/src/tile/tmsMapTileLayer.ts b/packages/layers/src/tile/tmsMapTileLayer.ts
new file mode 100644
index 0000000000..53a6a83b13
--- /dev/null
+++ b/packages/layers/src/tile/tmsMapTileLayer.ts
@@ -0,0 +1,69 @@
+import { ILayer } from '@antv/l7-core';
+import { Tile } from '@antv/l7-utils';
+import BaseTileLayer from './tileLayer/baseMapTileLayer';
+import { tileAllLoad } from './utils';
+
+export class TMSBaseMapTileLayer extends BaseTileLayer {
+  public type: string = 'BaseMapTMS';
+  public tileUnLoad(tile: Tile) {
+    this.tileLayerManager.removeChilds(tile.layerIDList, false);
+  }
+  public tileUpdate() {
+    if (!this.tilesetManager) {
+      return;
+    }
+    this.tilesetManager.tiles
+      .filter((tile: Tile) => tile.isLoaded)
+      .map((tile: Tile) => {
+        if (tile.data?.layers && this.sourceLayer) {
+          // vector
+          const vectorTileLayer = tile.data.layers[this.sourceLayer];
+          const features = vectorTileLayer?.features;
+          if (!(Array.isArray(features) && features.length > 0)) {
+            return;
+          }
+        }
+        if (!tile.parentLayerIDList.includes(this.parent.id)) {
+          const { layers, layerIDList } = this.tileLayerManager.createTile(
+            tile,
+          );
+          tile.parentLayerIDList.push(this.parent.id);
+          tile.layerIDList.push(...layerIDList);
+
+          this.tileLayerManager.addChilds(layers);
+        } else {
+          if (!tile.isVisibleChange) {
+            return;
+          }
+          const layers = this.tileLayerManager.getChilds(tile.layerIDList);
+          this.updateTileVisible(tile, layers);
+        }
+      });
+
+    if (this.tilesetManager.isLoaded) {
+      // 将事件抛出，图层上可以使用瓦片
+      this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
+    }
+  }
+
+  private emitTileVisibleEvent(tile: Tile, callback: () => void) {
+    if (tile.isVisible) {
+      callback();
+    } else {
+      tileAllLoad(tile, () => {
+        callback();
+      });
+    }
+  }
+
+  private updateTileVisible(tile: Tile, layers: ILayer[]) {
+    this.emitTileVisibleEvent(tile, () => {
+      this.tileLayerManager.updateLayersConfig(
+        layers,
+        'visible',
+        tile.isVisible,
+      );
+      this.layerService.reRender();
+    });
+  }
+}
diff --git a/packages/layers/src/tile/tmsTileLayer.ts b/packages/layers/src/tile/tmsTileLayer.ts
index f60f8dc4b9..865232863d 100644
--- a/packages/layers/src/tile/tmsTileLayer.ts
+++ b/packages/layers/src/tile/tmsTileLayer.ts
@@ -1,5 +1,7 @@
+import { ILayer } from '@antv/l7-core';
 import { Tile } from '@antv/l7-utils';
 import BaseTileLayer from './tileLayer/baseTileLayer';
+import { tileAllLoad } from './utils';
 
 export class TMSTileLayer extends BaseTileLayer {
   public type: string = 'TMS';
@@ -35,20 +37,35 @@ export class TMSTileLayer extends BaseTileLayer {
             return;
           }
           const layers = this.tileLayerManager.getChilds(tile.layerIDList);
-          this.tileLayerManager.updateLayersConfig(
-            layers,
-            'visible',
-            tile.isVisible,
-          );
+          this.updateTileVisible(tile, layers);
           this.setPickState(layers);
         }
       });
 
-    this.parent.renderLayers();
-
     if (this.tilesetManager.isLoaded) {
       // 将事件抛出，图层上可以使用瓦片
       this.parent.emit('tiles-loaded', this.tilesetManager.currentTiles);
     }
   }
+
+  private emitTileVisibleEvent(tile: Tile, callback: () => void) {
+    if (tile.isVisible) {
+      callback();
+    } else {
+      tileAllLoad(tile, () => {
+        callback();
+      });
+    }
+  }
+
+  private updateTileVisible(tile: Tile, layers: ILayer[]) {
+    this.emitTileVisibleEvent(tile, () => {
+      this.tileLayerManager.updateLayersConfig(
+        layers,
+        'visible',
+        tile.isVisible,
+      );
+      this.layerService.reRender();
+    });
+  }
 }
diff --git a/packages/layers/src/tile/utils.ts b/packages/layers/src/tile/utils.ts
index ab7c8e5fb6..051fa3f0c8 100644
--- a/packages/layers/src/tile/utils.ts
+++ b/packages/layers/src/tile/utils.ts
@@ -135,3 +135,33 @@ export function readPixel(
   });
   return pickedColors;
 }
+
+export function isTileLoaded(tile: Tile) {
+  return tile.layerIDList.length === tile.loadedLayers;
+}
+
+export function isTileChildLoaded(tile: Tile) {
+  const childs = tile.children;
+  return childs.filter((child) => isTileLoaded(child)).length === childs.length;
+}
+
+export function isTileParentLoaded(tile: Tile) {
+  const parent = tile.parent;
+  if (!parent) {
+    return true;
+  } else {
+    return isTileLoaded(parent);
+  }
+}
+
+export function tileAllLoad(tile: Tile, callback: () => void) {
+  const timer = window.setInterval(() => {
+    const tileLoaded = isTileLoaded(tile);
+    const tileChildLoaded = isTileChildLoaded(tile);
+    const tileParentLoaded = isTileParentLoaded(tile);
+    if (tileLoaded && tileChildLoaded && tileParentLoaded) {
+      callback();
+      window.clearInterval(timer);
+    }
+  }, 36);
+}
diff --git a/packages/layers/src/utils/dataMappingStyle.ts b/packages/layers/src/utils/dataMappingStyle.ts
index 67a6add5a9..eee5c2f2c0 100644
--- a/packages/layers/src/utils/dataMappingStyle.ts
+++ b/packages/layers/src/utils/dataMappingStyle.ts
@@ -44,6 +44,9 @@ function registerStyleAttribute(
  * @param layer
  */
 function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) {
+  // 瓦片图层不需要进行样式数据映射
+  if (layer.tileLayer || layer.isTileLayer) return;
+
   if (configToUpdate.opacity) {
     // 处理 style 中 opacity 属性的数据映射
     handleStyleFloat('opacity', layer, configToUpdate.opacity);
diff --git a/packages/layers/src/utils/layerData.ts b/packages/layers/src/utils/layerData.ts
index 15a2cc2a47..bf4559db26 100644
--- a/packages/layers/src/utils/layerData.ts
+++ b/packages/layers/src/utils/layerData.ts
@@ -34,7 +34,7 @@ function adjustData2Amap2Coordinates(
       // 单个的点数据
       // @ts-ignore
       mappedData
-        // TODO: 避免经纬度被重复计算导致坐标位置偏移
+        // 避免经纬度被重复计算导致坐标位置偏移
         .filter((d) => !d.originCoordinates)
         .map((d) => {
           d.version = Version['GAODE2.x'];
@@ -47,7 +47,7 @@ function adjustData2Amap2Coordinates(
       // 连续的线、面数据
       // @ts-ignore
       mappedData
-        // TODO: 避免经纬度被重复计算导致坐标位置偏移
+        // 避免经纬度被重复计算导致坐标位置偏移
         .filter((d) => !d.originCoordinates)
         .map((d) => {
           d.version = Version['GAODE2.x'];
diff --git a/packages/layers/src/utils/updateShape.ts b/packages/layers/src/utils/updateShape.ts
index 15dda8c13c..249f76ea08 100644
--- a/packages/layers/src/utils/updateShape.ts
+++ b/packages/layers/src/utils/updateShape.ts
@@ -1,5 +1,5 @@
 import { ILayer, StyleAttributeField } from '@antv/l7-core';
-// TODO: shapeUpdateList 存储一系列的 shape 类型
+// shapeUpdateList 存储一系列的 shape 类型
 // 当这一系列的 shape 相互切换的时候需要重构 layer 的 model (顶点数据集)
 const shapeUpdateList = [
   // PointLayer
@@ -30,7 +30,7 @@ export function updateShape(
 
     shapeUpdateList.map((shapes) => {
       if (shapes.includes(lastShape) && shapes.includes(currentShape)) {
-        // TODO: dataSourceNeedUpdate 借用数据更新时更新 layer model 的工作流
+        // dataSourceNeedUpdate 借用数据更新时更新 layer model 的工作流
         layer.dataState.dataSourceNeedUpdate = true;
         return;
       }
diff --git a/packages/layers/src/wind/index.ts b/packages/layers/src/wind/index.ts
index 4ccab5b618..e715b38558 100644
--- a/packages/layers/src/wind/index.ts
+++ b/packages/layers/src/wind/index.ts
@@ -8,11 +8,15 @@ export default class WindLayer extends BaseLayer<IWindLayerStyleOptions> {
     this.layerModel = new WindModels[modelType](this);
     this.layerModel.initModels((models) => {
       this.models = models;
-      this.renderLayers();
+      this.emit('modelLoaded', null);
+      this.layerService.throttleRenderLayers();
     });
   }
   public rebuildModels() {
-    this.layerModel.buildModels((models) => (this.models = models));
+    this.layerModel.buildModels((models) => {
+      this.models = models;
+      this.emit('modelLoaded', null);
+    });
   }
 
   public renderModels() {
diff --git a/packages/layers/src/wind/models/wind.ts b/packages/layers/src/wind/models/wind.ts
index 5e829f69d7..e1a9522b2f 100644
--- a/packages/layers/src/wind/models/wind.ts
+++ b/packages/layers/src/wind/models/wind.ts
@@ -7,7 +7,7 @@ import {
   ITexture2D,
   Point,
 } from '@antv/l7-core';
-import { FrequencyController } from '@antv/l7-utils';
+import { FrequencyController, getMask } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import { IWindLayerStyleOptions } from '../../core/interface';
 import { RasterImageTriangulation } from '../../core/triangulation';
@@ -110,8 +110,7 @@ export default class WindModel extends BaseModel {
         height: imageHeight,
       });
 
-      this.layerService.updateLayerRenderList();
-      this.layerService.renderLayers();
+      this.layerService.reRender();
     });
 
     this.layer
@@ -122,7 +121,9 @@ export default class WindModel extends BaseModel {
         triangulation: RasterImageTriangulation,
         primitive: gl.TRIANGLES,
         depth: { enable: false },
+        stencil: getMask(mask, maskInside),
         blend: this.getBlend(),
+        pick: false,
       })
       .then((model) => {
         this.colorModel = model;
@@ -188,7 +189,6 @@ export default class WindModel extends BaseModel {
           feature: IEncodeFeature,
           featureIdx: number,
           vertex: number[],
-          attributeIdx: number,
         ) => {
           return [vertex[3], vertex[4]];
         },
@@ -241,7 +241,7 @@ export default class WindModel extends BaseModel {
       this.wind.dropRateBump = dropRateBump;
 
       const { d, w, h } = this.wind.draw();
-      // TODO: 恢复 L7 渲染流程中 gl 状态
+      // 恢复 L7 渲染流程中 gl 状态
       this.rendererService.setBaseState();
       this.texture.update({
         data: d,
diff --git a/packages/layers/src/wind/shaders/wind_vert.glsl b/packages/layers/src/wind/shaders/wind_vert.glsl
index fd96cd725c..46822f69ef 100644
--- a/packages/layers/src/wind/shaders/wind_vert.glsl
+++ b/packages/layers/src/wind/shaders/wind_vert.glsl
@@ -8,7 +8,7 @@ varying vec2 v_texCoord;
 void main() {
    v_texCoord = a_Uv;
    vec4 project_pos = project_position(vec4(a_Position, 1.0));
-   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+   
    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
       gl_Position = u_Mvp * (vec4(project_pos.xy,0., 1.0));
    } else {
diff --git a/packages/map/src/geo/transform.ts b/packages/map/src/geo/transform.ts
index 3211b5e3c2..4e9f805e67 100644
--- a/packages/map/src/geo/transform.ts
+++ b/packages/map/src/geo/transform.ts
@@ -944,7 +944,7 @@ export default class Transform {
     const nearZ = this.height / 50;
 
     // matrix for conversion from location to GL coordinates (-1 .. 1)
-    // TODO: 使用 Float64Array 的原因是为了避免计算精度问题、 mat4.create() 默认使用 Float32Array
+    // 使用 Float64Array 的原因是为了避免计算精度问题、 mat4.create() 默认使用 Float32Array
     let m = new Float64Array(16);
     // @ts-ignore
     mat4.perspective(m, this._fov, this.width / this.height, nearZ, farZ);
diff --git a/packages/map/src/map.ts b/packages/map/src/map.ts
index f2547ae455..b9454b1d3c 100644
--- a/packages/map/src/map.ts
+++ b/packages/map/src/map.ts
@@ -121,7 +121,7 @@ export class Map extends Camera {
   public resize(eventData?: any) {
     const [width, height] = this.containerDimensions();
     this.transform.resize(width, height);
-    // TODO: 小程序环境不需要执行后续动作
+    // 小程序环境不需要执行后续动作
     if (isMini) {
       return this;
     }
diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts
index 7d81f40055..d97f91a719 100644
--- a/packages/maps/src/amap/map.ts
+++ b/packages/maps/src/amap/map.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * AMapService
  */
@@ -102,7 +103,7 @@ export default class AMapService extends AMapBaseService
             ...rest,
           };
           if (mapConstructorOptions.zoom) {
-            // TODO: 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级
+            // 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级
             mapConstructorOptions.zoom += 1;
           }
           // @ts-ignore
diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts
index 8185101af2..85f6962dcd 100644
--- a/packages/maps/src/amap2/map.ts
+++ b/packages/maps/src/amap2/map.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * AMapService
  */
@@ -136,12 +137,13 @@ export default class AMapService extends AMapBaseService {
       const amap = mapContainer.getElementsByClassName(
         'amap-maps',
       )[0] as HTMLElement;
-      // TODO: amap2 的 amap-maps 新增 z-index=0; 样式，让 marker 中 zIndex 失效
+      // amap2 的 amap-maps 新增 z-index=0; 样式，让 marker 中 zIndex 失效
       amap.style.zIndex = 'auto';
       this.markerContainer = DOM.create('div', 'l7-marker-container2', amap);
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public updateView(_viewOption: Partial<IMapCamera>): void {}
 
   public getOverlayContainer(): HTMLElement | undefined {
@@ -274,7 +276,7 @@ export default class AMapService extends AMapBaseService {
             ...rest,
           };
           if (mapConstructorOptions.zoom) {
-            // TODO: 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级
+            // 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级
             mapConstructorOptions.zoom += 1;
           }
           // @ts-ignore
diff --git a/packages/maps/src/earth/Viewport.ts b/packages/maps/src/earth/Viewport.ts
index 8d4cff7e42..7a92bf9f1d 100644
--- a/packages/maps/src/earth/Viewport.ts
+++ b/packages/maps/src/earth/Viewport.ts
@@ -8,7 +8,7 @@ export interface IEarthCamera {
 }
 
 export default class Viewport implements IViewport {
-  // TODO: 初始化相机的姿态 看向地球
+  // 初始化相机的姿态 看向地球
   private xzReg: number = -Math.PI * 0.6;
   private yReg: number = Math.PI * 0.2;
   // 默认的地球相机半径、地球相机缩放层级
diff --git a/packages/maps/src/earth/map.ts b/packages/maps/src/earth/map.ts
index 2797b201f2..dd4e15d878 100644
--- a/packages/maps/src/earth/map.ts
+++ b/packages/maps/src/earth/map.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * MapboxService
  */
@@ -105,7 +106,7 @@ export default class L7EarthService extends BaseMapService<Map>
   }
 
   public destroy() {
-    // TODO: 销毁地图可视化层的容器
+    // 销毁地图可视化层的容器
     this.$mapContainer?.parentNode?.removeChild(this.$mapContainer);
 
     this.eventEmitter.removeAllListeners();
diff --git a/packages/maps/src/map/map.ts b/packages/maps/src/map/map.ts
index fc83fc277a..aa0b477256 100644
--- a/packages/maps/src/map/map.ts
+++ b/packages/maps/src/map/map.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * MapboxService
  */
@@ -16,6 +17,7 @@ const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
  */
 @injectable()
 export default class L7MapService extends BaseMapService<Map> {
+  public version: string = Version.L7MAP;
   public lngLatToMercator(
     _lnglat: [number, number],
     _altitude: number,
@@ -140,7 +142,7 @@ export default class L7MapService extends BaseMapService<Map> {
     return layersPng;
   }
 
-  // TODO: 处理小程序中有底图模式下的相机跟新
+  // 处理小程序中有底图模式下的相机跟新
   private handleMiniCameraChanged = (
     lng: number,
     lat: number,
diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts
index 437424d081..735f6e36b7 100644
--- a/packages/maps/src/mapbox/map.ts
+++ b/packages/maps/src/mapbox/map.ts
@@ -5,6 +5,7 @@ import { IMercator } from '@antv/l7-core';
 import { mat4, vec3 } from 'gl-matrix';
 import { injectable } from 'inversify';
 import mapboxgl, { Map } from 'mapbox-gl';
+import { Version } from '../version';
 // tslint:disable-next-line:no-submodule-imports
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'reflect-metadata';
@@ -23,6 +24,7 @@ const MAPBOX_API_KEY =
 export default class MapboxService extends BaseMapService<
   Map & IMapboxInstance
 > {
+  public version: string = Version.MAPBOX;
   // get mapStatus method
 
   public viewport: Viewport;
@@ -156,7 +158,7 @@ export default class MapboxService extends BaseMapService<
   }
 
   public destroy() {
-    // TODO: 销毁地图可视化层的容器
+    // 销毁地图可视化层的容器
     this.$mapContainer?.parentNode?.removeChild(this.$mapContainer);
 
     this.eventEmitter.removeAllListeners();
diff --git a/packages/maps/src/utils/BaseMapService.ts b/packages/maps/src/utils/BaseMapService.ts
index 4b911d9f11..021f37bc18 100644
--- a/packages/maps/src/utils/BaseMapService.ts
+++ b/packages/maps/src/utils/BaseMapService.ts
@@ -39,7 +39,8 @@ const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
  * AMapService
  */
 @injectable()
-export default abstract class BaseMapService<T> implements IMapService<Map & T> {
+export default abstract class BaseMapService<T>
+  implements IMapService<Map & T> {
   public version: string = Version.L7MAP;
   public map: Map & T;
   protected viewport: IViewport | unknown;
@@ -229,6 +230,7 @@ export default abstract class BaseMapService<T> implements IMapService<Map & T>
     this.map.setStyle(this.getMapStyle(style));
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public meterToCoord(center: [number, number], outer: [number, number]) {
     return 1.0;
   }
@@ -294,6 +296,7 @@ export default abstract class BaseMapService<T> implements IMapService<Map & T>
     this.cameraChangedCallback = callback;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected handleCameraChanged = (e?: any) => {
     const { lat, lng } = this.map.getCenter();
     // Tip: 统一触发地图变化事件
diff --git a/packages/renderer/src/regl/ReglModel.ts b/packages/renderer/src/regl/ReglModel.ts
index 7632a08885..e7400190fa 100644
--- a/packages/renderer/src/regl/ReglModel.ts
+++ b/packages/renderer/src/regl/ReglModel.ts
@@ -40,6 +40,7 @@ export default class ReglModel implements IModel {
   constructor(reGl: regl.Regl, options: IModelInitializationOptions) {
     this.reGl = reGl;
     const {
+      pick = true,
       vs,
       fs,
       attributes,
@@ -97,14 +98,16 @@ export default class ReglModel implements IModel {
 
     this.drawCommand = reGl(drawParams);
 
-    const pickDrawParams = cloneDeep(drawParams);
+    if (pick) {
+      const pickDrawParams = cloneDeep(drawParams);
 
-    pickDrawParams.blend = {
-      ...pickDrawParams.blend,
-      enable: false,
-    };
+      pickDrawParams.blend = {
+        ...pickDrawParams.blend,
+        enable: false,
+      };
 
-    this.drawPickCommand = reGl(pickDrawParams);
+      this.drawPickCommand = reGl(pickDrawParams);
+    }
     this.drawParams = drawParams;
   }
 
@@ -120,13 +123,15 @@ export default class ReglModel implements IModel {
     this.drawParams.elements = (elements as ReglElements).get();
 
     this.drawCommand = this.reGl(this.drawParams);
-    const pickDrawParams = cloneDeep(this.drawParams);
-    pickDrawParams.blend = {
-      ...pickDrawParams.blend,
-      enable: false,
-    };
+    if (this.options.pick) {
+      const pickDrawParams = cloneDeep(this.drawParams);
+      pickDrawParams.blend = {
+        ...pickDrawParams.blend,
+        enable: false,
+      };
 
-    this.drawPickCommand = this.reGl(pickDrawParams);
+      this.drawPickCommand = this.reGl(pickDrawParams);
+    }
   }
 
   public updateAttributes(attributes: { [key: string]: IAttribute }) {
@@ -137,14 +142,16 @@ export default class ReglModel implements IModel {
     this.drawParams.attributes = reglAttributes;
     this.drawCommand = this.reGl(this.drawParams);
 
-    const pickDrawParams = cloneDeep(this.drawParams);
+    if (this.options.pick) {
+      const pickDrawParams = cloneDeep(this.drawParams);
 
-    pickDrawParams.blend = {
-      ...pickDrawParams.blend,
-      enable: false,
-    };
+      pickDrawParams.blend = {
+        ...pickDrawParams.blend,
+        enable: false,
+      };
 
-    this.drawPickCommand = this.reGl(pickDrawParams);
+      this.drawPickCommand = this.reGl(pickDrawParams);
+    }
   }
 
   public addUniforms(uniforms: { [key: string]: IUniform }) {
@@ -195,11 +202,11 @@ export default class ReglModel implements IModel {
           | ReglTexture2D).get();
       }
     });
-    // TODO: 在进行拾取操作的绘制中，不应该使用叠加模式 - picking 根据拾取的颜色作为判断的输入，而叠加模式会产生新的，在 id 序列中不存在的颜色
+    // 在进行拾取操作的绘制中，不应该使用叠加模式 - picking 根据拾取的颜色作为判断的输入，而叠加模式会产生新的，在 id 序列中不存在的颜色
     if (!pick) {
       this.drawCommand(reglDrawProps);
     } else {
-      this.drawPickCommand(reglDrawProps);
+      this.drawPickCommand && this.drawPickCommand(reglDrawProps);
     }
     // this.drawCommand(reglDrawProps);
     // this.drawPickCommand(reglDrawProps);
@@ -207,11 +214,11 @@ export default class ReglModel implements IModel {
 
   public destroy() {
     // @ts-ignore
-    this.drawParams.elements.destroy();
+    this.drawParams?.elements?.destroy();
     if (this.options.attributes) {
       Object.values(this.options.attributes).forEach((attr: any) => {
         // @ts-ignore
-        (attr as ReglAttribute).destroy();
+        (attr as ReglAttribute)?.destroy();
       });
     }
     this.destroyed = true;
diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts
index aab102d122..a8aaec1bfb 100644
--- a/packages/scene/src/index.ts
+++ b/packages/scene/src/index.ts
@@ -188,8 +188,8 @@ class Scene
         const maskInstance = new MaskLayer()
           .source(maskfence)
           .shape('fill')
-          .color(maskColor)
           .style({
+            color: maskColor,
             opacity: maskOpacity,
           });
 
diff --git a/packages/site/docs/api/scene.zh.md b/packages/site/docs/api/scene.zh.md
index 44b41ca904..72c3e891fd 100644
--- a/packages/site/docs/api/scene.zh.md
+++ b/packages/site/docs/api/scene.zh.md
@@ -486,7 +486,7 @@ scene.zoomIn();
 地图缩小一级
 
 ```javascript
-scene.ZoomOut();
+scene.zoomOut();
 ```
 
 ### panTo 地图移动到
diff --git a/packages/site/examples/amapPlugin/bus/demo/busStop.js b/packages/site/examples/amapPlugin/bus/demo/busStop.js
index 4739c9e41a..2534fecc96 100644
--- a/packages/site/examples/amapPlugin/bus/demo/busStop.js
+++ b/packages/site/examples/amapPlugin/bus/demo/busStop.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 116.475, 39.985 ],
-    pitch: 0,
     zoom: 12.2,
     plugin: [ 'AMap.ToolBar', 'AMap.LineSearch' ]
   })
diff --git a/packages/site/examples/amapPlugin/bus/demo/satellite.js b/packages/site/examples/amapPlugin/bus/demo/satellite.js
index d6311a40e0..4310bbefb5 100644
--- a/packages/site/examples/amapPlugin/bus/demo/satellite.js
+++ b/packages/site/examples/amapPlugin/bus/demo/satellite.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 105, 30 ],
-    pitch: 0,
     zoom: 2
   })
 });
diff --git a/packages/site/examples/amapPlugin/bus/demo/xyzTile.js b/packages/site/examples/amapPlugin/bus/demo/xyzTile.js
index 743da200f1..05bd547175 100644
--- a/packages/site/examples/amapPlugin/bus/demo/xyzTile.js
+++ b/packages/site/examples/amapPlugin/bus/demo/xyzTile.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 105, 30 ],
-    pitch: 0,
     zoom: 2
   })
 });
diff --git a/packages/site/examples/choropleth/administrative/delete/administrative-switch.tsx b/packages/site/examples/choropleth/administrative/delete/administrative-switch.tsx
index e08486f7b8..6ee667b54c 100644
--- a/packages/site/examples/choropleth/administrative/delete/administrative-switch.tsx
+++ b/packages/site/examples/choropleth/administrative/delete/administrative-switch.tsx
@@ -40,7 +40,6 @@ function AdministrativeSwitch() {
             style: 'blank',
             center: [120.19382669582967, 30.258134],
             zoom: 3,
-            pitch: 0,
           },
           source: {
             data,
diff --git a/packages/site/examples/choropleth/administrative/delete/china-city.ts b/packages/site/examples/choropleth/administrative/delete/china-city.ts
index 9ef9c8014e..a2603559c0 100644
--- a/packages/site/examples/choropleth/administrative/delete/china-city.ts
+++ b/packages/site/examples/choropleth/administrative/delete/china-city.ts
@@ -7,7 +7,6 @@ const scene = new Scene({
     style: 'blank',
     center: [120.19382669582967, 30.258134],
     zoom: 3,
-    pitch: 0,
   }),
 });
 
diff --git a/packages/site/examples/choropleth/administrative/delete/china-map.ts b/packages/site/examples/choropleth/administrative/delete/china-map.ts
index 0f193b6543..cc41a762bd 100644
--- a/packages/site/examples/choropleth/administrative/delete/china-map.ts
+++ b/packages/site/examples/choropleth/administrative/delete/china-map.ts
@@ -7,7 +7,6 @@ const scene = new Scene({
     style: 'blank',
     center: [120.19382669582967, 30.258134],
     zoom: 3,
-    pitch: 0,
   }),
 });
 
diff --git a/packages/site/examples/choropleth/administrative/delete/world-map.ts b/packages/site/examples/choropleth/administrative/delete/world-map.ts
index 1256deb37c..93b9add9db 100644
--- a/packages/site/examples/choropleth/administrative/delete/world-map.ts
+++ b/packages/site/examples/choropleth/administrative/delete/world-map.ts
@@ -7,7 +7,6 @@ const scene = new Scene({
     style: 'blank',
     center: [120.19382669582967, 30.258134],
     zoom: 3,
-    pitch: 0,
   }),
 });
 
diff --git a/packages/site/examples/choropleth/administrative/demo/hangzhou-city.ts b/packages/site/examples/choropleth/administrative/demo/hangzhou-city.ts
index c1b3181b2e..197a3d8a00 100644
--- a/packages/site/examples/choropleth/administrative/demo/hangzhou-city.ts
+++ b/packages/site/examples/choropleth/administrative/demo/hangzhou-city.ts
@@ -7,7 +7,6 @@ const scene = new Scene({
     style: 'blank',
     center: [120.19382669582967, 30.258134],
     zoom: 3,
-    pitch: 0,
   }),
 });
 
diff --git a/packages/site/examples/choropleth/administrative/demo/xihu-district.ts b/packages/site/examples/choropleth/administrative/demo/xihu-district.ts
index b3161019d4..baf547f81a 100644
--- a/packages/site/examples/choropleth/administrative/demo/xihu-district.ts
+++ b/packages/site/examples/choropleth/administrative/demo/xihu-district.ts
@@ -7,7 +7,6 @@ const scene = new Scene({
     style: 'blank',
     center: [120.19382669582967, 30.258134],
     zoom: 3,
-    pitch: 0,
   }),
 });
 
diff --git a/packages/site/examples/choropleth/administrative/demo/zhejiang-province.ts b/packages/site/examples/choropleth/administrative/demo/zhejiang-province.ts
index abc1179e22..7259148101 100644
--- a/packages/site/examples/choropleth/administrative/demo/zhejiang-province.ts
+++ b/packages/site/examples/choropleth/administrative/demo/zhejiang-province.ts
@@ -7,7 +7,6 @@ const scene = new Scene({
     style: 'blank',
     center: [120.19382669582967, 30.258134],
     zoom: 3,
-    pitch: 0,
   }),
 });
 
diff --git a/packages/site/examples/draw/UI/demo/amap.js b/packages/site/examples/draw/UI/demo/amap.js
index e8ba25279b..a122d8a4b7 100644
--- a/packages/site/examples/draw/UI/demo/amap.js
+++ b/packages/site/examples/draw/UI/demo/amap.js
@@ -6,9 +6,7 @@ import { DrawControl } from '@antv/l7-draw';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'light',
-    layers: [],
     center: [ 116.1608, 40.1119 ],
     zoom: 15
   })
diff --git a/packages/site/examples/draw/basic/demo/draw_circle.js b/packages/site/examples/draw/basic/demo/draw_circle.js
index 6a5dc70a7e..ba98b4bc95 100644
--- a/packages/site/examples/draw/basic/demo/draw_circle.js
+++ b/packages/site/examples/draw/basic/demo/draw_circle.js
@@ -5,7 +5,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'light',
     center: [ 113.775374, 28.31067 ],
     zoom: 12
diff --git a/packages/site/examples/draw/basic/demo/draw_polygon.js b/packages/site/examples/draw/basic/demo/draw_polygon.js
index aa99901438..9e15116a80 100644
--- a/packages/site/examples/draw/basic/demo/draw_polygon.js
+++ b/packages/site/examples/draw/basic/demo/draw_polygon.js
@@ -96,7 +96,6 @@ const polygon = {
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'light',
     center: [ 116.30470275878906, 39.88352811449648 ],
     zoom: 12
diff --git a/packages/site/examples/earth/arc3d/demo/flyline.js b/packages/site/examples/earth/arc3d/demo/flyline.js
index bb5e550249..f42f472286 100644
--- a/packages/site/examples/earth/arc3d/demo/flyline.js
+++ b/packages/site/examples/earth/arc3d/demo/flyline.js
@@ -5,7 +5,7 @@ const scene = new Scene({
   map: new Earth({})
 });
 
-// TODO: 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色
+// 地球模式下背景色默认为 #000 通过 setBgColor 方法我们可以设置可视化层的背景色
 scene.setBgColor('#333');
 
 const earthlayer = new EarthLayer()
@@ -30,10 +30,7 @@ const earthlayer = new EarthLayer()
 
 const atomLayer = new EarthLayer()
   .color('#2E8AE6')
-  .shape('atomSphere')
-  .style({
-    opacity: 1
-  });
+  .shape('atomSphere');
 
 const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere')
   .style({
@@ -66,7 +63,6 @@ scene.on('loaded', () => {
           duration: 1
         })
         .style({
-          opacity: 1,
           segmentNumber: 60,
           globalArcHeight: 20
         });
diff --git a/packages/site/examples/engine/three/demo/amap_ant.js b/packages/site/examples/engine/three/demo/amap_ant.js
index 0b8366783e..03699146d0 100644
--- a/packages/site/examples/engine/three/demo/amap_ant.js
+++ b/packages/site/examples/engine/three/demo/amap_ant.js
@@ -39,65 +39,48 @@ scene.on('loaded', () => {
       loader.load(
         'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
         gltf => {
-          // 根据 GeoJSON 数据放置模型
-          layer.getSource().data.dataArray.forEach(({ coordinates }) => {
-            const gltfScene = gltf.scene;
-            setDouble(gltfScene);
-            layer.adjustMeshToMap(gltfScene);
-            // gltfScene.scale.set(1000, 1000, 1000)
-            layer.setMeshScale(gltfScene, 1000, 1000, 1000);
+          const gltfScene = gltf.scene;
+          setDouble(gltfScene);
+          layer.adjustMeshToMap(gltfScene);
+          // gltfScene.scale.set(1000, 1000, 1000)
+          layer.setMeshScale(gltfScene, 1000, 1000, 1000);
 
+          layer.setObjectLngLat(
+            gltfScene,
+            [ center.lng, center.lat ],
+            0
+          );
+
+          const animations = gltf.animations;
+          if (animations && animations.length) {
+            const mixer = new THREE.AnimationMixer(gltfScene);
+
+            const animation = animations[2];
+
+            const action = mixer.clipAction(animation);
+
+            action.play();
+            layer.addAnimateMixer(mixer);
+          }
+          // layer.setObjectLngLat(gltfScene, [center.lng + 0.05, center.lat] as ILngLat, 0)
+          let t = 0;
+          setInterval(() => {
+            t += 0.01;
             layer.setObjectLngLat(
               gltfScene,
-              [ coordinates[0] + 0.02, coordinates[1] ],
+              [ center.lng, center.lat + Math.sin(t) * 0.1 ],
               0
             );
+          }, 16);
 
-            const animations = gltf.animations;
-            if (animations && animations.length) {
-              const mixer = new THREE.AnimationMixer(gltfScene);
-
-              const animation = animations[2];
-
-              const action = mixer.clipAction(animation);
-
-              action.play();
-              layer.addAnimateMixer(mixer);
-            }
-            // layer.setObjectLngLat(gltfScene, [center.lng + 0.05, center.lat] as ILngLat, 0)
-            let t = 0;
-            setInterval(() => {
-              t += 0.01;
-              layer.setObjectLngLat(
-                gltfScene,
-                [ center.lng, center.lat + Math.sin(t) * 0.1 ],
-                0
-              );
-            }, 16);
-
-            // 向场景中添加模型
-            threeScene.add(gltfScene);
-          });
+          // 向场景中添加模型
+          threeScene.add(gltfScene);
           // 重绘图层
           layer.render();
         }
       );
     }
-  })
-    .source({
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {},
-          geometry: {
-            type: 'Point',
-            coordinates: [ 111.4453125, 32.84267363195431 ]
-          }
-        }
-      ]
-    })
-    .animate(true);
+  }).animate(true);
   scene.addLayer(threeJSLayer);
 });
 
diff --git a/packages/site/examples/engine/three/demo/space_click.js b/packages/site/examples/engine/three/demo/space_click.js
index 7e0194867b..f6efe59f99 100644
--- a/packages/site/examples/engine/three/demo/space_click.js
+++ b/packages/site/examples/engine/three/demo/space_click.js
@@ -318,19 +318,6 @@ scene.on('loaded', () => {
       );
     }
   })
-    .source({
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {},
-          geometry: {
-            type: 'Point',
-            coordinates: [ 111.4453125, 32.84267363195431 ]
-          }
-        }
-      ]
-    })
     .animate(true);
   scene.addLayer(threeJSLayer);
   // @ts-ignore
diff --git a/packages/site/examples/gallery/animate/delete/amap_car.js b/packages/site/examples/gallery/animate/delete/amap_car.js
index c2544364cc..de41770cce 100644
--- a/packages/site/examples/gallery/animate/delete/amap_car.js
+++ b/packages/site/examples/gallery/animate/delete/amap_car.js
@@ -218,19 +218,6 @@ scene.on('loaded', () => {
       );
     }
   })
-    .source({
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {},
-          geometry: {
-            type: 'Point',
-            coordinates: [ 112, 35.39847 ]
-          }
-        }
-      ]
-    })
     .animate(true);
   scene.addLayer(threeJSLayer);
 });
diff --git a/packages/site/examples/gallery/animate/delete/plane_animate.js b/packages/site/examples/gallery/animate/delete/plane_animate.js
index bd2f40c755..41bd69a3da 100644
--- a/packages/site/examples/gallery/animate/delete/plane_animate.js
+++ b/packages/site/examples/gallery/animate/delete/plane_animate.js
@@ -71,10 +71,7 @@ scene.on('loaded', () => {
       .shape('circle')
       .color('rgb(22,119,255)')
       .animate(true)
-      .size(40)
-      .style({
-        opacity: 1.0
-      });
+      .size(40);
     const flyLine = new LineLayer({
       blend: 'additive',
       zIndex: 2
@@ -98,7 +95,6 @@ scene.on('loaded', () => {
         textureBlend: 'replace',
         lineTexture: true, // 开启线的贴图功能
         iconStep: 8, // 设置贴图纹理的间距
-        opacity: 1
       });
 
     const flyLine2 = new LineLayer()
diff --git a/packages/site/examples/gallery/animate/demo/animate_path_texture.js b/packages/site/examples/gallery/animate/demo/animate_path_texture.js
index b30f23109d..01c8bbde01 100644
--- a/packages/site/examples/gallery/animate/demo/animate_path_texture.js
+++ b/packages/site/examples/gallery/animate/demo/animate_path_texture.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 120.15, 30.246 ],
-    pitch: 0,
     zoom: 13.5,
     style: 'dark',
     pitchEnable: false,
diff --git a/packages/site/examples/gallery/animate/demo/grid.js b/packages/site/examples/gallery/animate/demo/grid.js
index f39c9dd78d..8a1f414515 100644
--- a/packages/site/examples/gallery/animate/demo/grid.js
+++ b/packages/site/examples/gallery/animate/demo/grid.js
@@ -204,14 +204,12 @@ const threeJSLayer = new ThreeLayer({
           const mixer = new THREE.AnimationMixer(antModel);
           const animation = animations[1];
           const action = mixer.clipAction(animation);
-          action.timeScale = 5;
+          action.timeScale = 1;
           action.play();
           layer.addAnimateMixer(mixer);
         }
         antModel.rotation.y = Math.PI;
-        // 向场景中添加模型
         threeScene.add(antModel);
-        // 重绘图层
         layer.render();
         return '';
       }
@@ -312,7 +310,6 @@ img.onload = function() {
   const data = getImageData(img);
   const rData = getR(data.data);
   const d1 = getLngData(rData);
-
   const d2 = getLatData(rData);
   const geoData = {
     type: 'FeatureCollection',
@@ -346,15 +343,23 @@ img.onload = function() {
     });
   scene.addLayer(layer);
 };
-
+const pointData = [
+  { lng: 113, lat: 29, size: 10000 },
+  { lng: 113.5, lat: 29.5, size: 30000 },
+  { lng: 110.23681640625, lat: 29.64509464986076, size: 74020.50373907911 }, 
+  { lng: 115.01586914062499, lat: 26.88777988202911, size: 22908.885529976185 }, 
+  { lng: 111.181640625, lat: 28.724313406473463, size: 73359.37302978932 }, 
+  { lng: 112.686767578125, lat: 29.257648503615542, size: 18500.90838085843 }, 
+  { lng: 114.664306640625, lat: 28.98892237190413, size: 20293.183968726793 }, 
+  { lng: 113.90075683593749, lat: 28.17855984939698, size: 18051.412077639496 }, 
+  { lng: 111.51123046875, lat: 27.45466493898314, size: 37645.94186119526 }, 
+  { lng: 110.67626953125, lat: 28.004101830368654, size: 4214.588023703825 }, 
+  { lng: 114.43359375, lat: 29.477861195816843, size: 61722.01580332115 }, 
+  { lng: 110.445556640625, lat: 26.96124577052697, size: 70806.75519747598 }, 
+  { lng: 113.75244140624999, lat: 27.88278388425912, size: 70930.24993464859 }
+];
 const waveLayer = new PointLayer({ zIndex: 2, blend: 'additive' })
-  .source(
-    [
-      { lng: 113, lat: 29, size: 10000 },
-      { lng: 113.5, lat: 29.5, size: 30000 },
-
-      { lng: 110.23681640625, lat: 29.64509464986076, size: 74020.50373907911 }, { lng: 115.01586914062499, lat: 26.88777988202911, size: 22908.885529976185 }, { lng: 111.181640625, lat: 28.724313406473463, size: 73359.37302978932 }, { lng: 112.686767578125, lat: 29.257648503615542, size: 18500.90838085843 }, { lng: 114.664306640625, lat: 28.98892237190413, size: 20293.183968726793 }, { lng: 113.90075683593749, lat: 28.17855984939698, size: 18051.412077639496 }, { lng: 111.51123046875, lat: 27.45466493898314, size: 37645.94186119526 }, { lng: 110.67626953125, lat: 28.004101830368654, size: 4214.588023703825 }, { lng: 114.43359375, lat: 29.477861195816843, size: 61722.01580332115 }, { lng: 110.445556640625, lat: 26.96124577052697, size: 70806.75519747598 }, { lng: 113.75244140624999, lat: 27.88278388425912, size: 70930.24993464859 }
-    ],
+  .source(pointData,
     {
       parser: {
         type: 'json',
@@ -372,13 +377,7 @@ const waveLayer = new PointLayer({ zIndex: 2, blend: 'additive' })
   });
 
 const barLayer = new PointLayer({ zIndex: 2, depth: false })
-  .source(
-    [
-      { lng: 113, lat: 29, size: 10000 },
-      { lng: 113.5, lat: 29.5, size: 30000 },
-
-      { lng: 110.23681640625, lat: 29.64509464986076, size: 74020.50373907911 }, { lng: 115.01586914062499, lat: 26.88777988202911, size: 22908.885529976185 }, { lng: 111.181640625, lat: 28.724313406473463, size: 73359.37302978932 }, { lng: 112.686767578125, lat: 29.257648503615542, size: 18500.90838085843 }, { lng: 114.664306640625, lat: 28.98892237190413, size: 20293.183968726793 }, { lng: 113.90075683593749, lat: 28.17855984939698, size: 18051.412077639496 }, { lng: 111.51123046875, lat: 27.45466493898314, size: 37645.94186119526 }, { lng: 110.67626953125, lat: 28.004101830368654, size: 4214.588023703825 }, { lng: 114.43359375, lat: 29.477861195816843, size: 61722.01580332115 }, { lng: 110.445556640625, lat: 26.96124577052697, size: 70806.75519747598 }, { lng: 113.75244140624999, lat: 27.88278388425912, size: 70930.24993464859 }
-    ],
+  .source(pointData,
     {
       parser: {
         type: 'json',
@@ -393,8 +392,8 @@ const barLayer = new PointLayer({ zIndex: 2, depth: false })
   .animate(true)
   .style({
     opacityLinear: {
-      enable: true, // true - false
-      dir: 'up' // up - down
+      enable: true,
+      dir: 'up'
     },
     lightEnable: false
   });
diff --git a/packages/site/examples/gallery/animate/demo/turin.js b/packages/site/examples/gallery/animate/demo/turin.js
index 7576d538d1..baf51ea6d2 100644
--- a/packages/site/examples/gallery/animate/demo/turin.js
+++ b/packages/site/examples/gallery/animate/demo/turin.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 7.65, 45.053 ],
-    pitch: 0,
     zoom: 12,
     style: 'dark'
   })
@@ -64,10 +63,6 @@ scene.on('loaded', () => {
           default:
             return '#FFE3E3';
           }
-          // return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)';
-        })
-        .style({
-          opacity: 1
         })
         .animate({
           interval: 1, // 间隔
diff --git a/packages/site/examples/gallery/animate/demo/wind.js b/packages/site/examples/gallery/animate/demo/wind.js
index 23f1fbdd3f..d62b961faa 100644
--- a/packages/site/examples/gallery/animate/demo/wind.js
+++ b/packages/site/examples/gallery/animate/demo/wind.js
@@ -5,10 +5,8 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 105.732421875, 32.24997445586331 ],
-    pitch: 0,
     style: 'dark',
     zoom: 2,
-    viewMode: '3D'
   })
 });
 
diff --git a/packages/site/examples/gallery/basic/demo/bus_dark.js b/packages/site/examples/gallery/basic/demo/bus_dark.js
index a8aa88448a..f77258afbc 100644
--- a/packages/site/examples/gallery/basic/demo/bus_dark.js
+++ b/packages/site/examples/gallery/basic/demo/bus_dark.js
@@ -1,5 +1,3 @@
-// Data Source https://busrouter.sg/visualization/
-
 import { Scene, LineLayer } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 
diff --git a/packages/site/examples/gallery/basic/demo/column_dark.js b/packages/site/examples/gallery/basic/demo/column_dark.js
index 74f913e7dc..4308952eaa 100644
--- a/packages/site/examples/gallery/basic/demo/column_dark.js
+++ b/packages/site/examples/gallery/basic/demo/column_dark.js
@@ -41,9 +41,6 @@ scene.on('loaded', () => {
           '#A1EDB8',
           '#CEF8D6'
         ])
-        .style({
-          opacity: 1.0
-        });
       scene.addLayer(pointLayer);
     });
 });
diff --git a/packages/site/examples/gallery/basic/demo/light.js b/packages/site/examples/gallery/basic/demo/light.js
index 9d966918a3..c9d80ff4f9 100644
--- a/packages/site/examples/gallery/basic/demo/light.js
+++ b/packages/site/examples/gallery/basic/demo/light.js
@@ -33,13 +33,12 @@ scene.on('loaded', () => {
           ]
         })
         .size('sum', sum => {
-          return sum * 200;
+          return sum * 1000000;
         })
         .shape('hexagonColumn')
         .style({
           coverage: 0.8,
           angle: 0,
-          opacity: 1.0
         })
         .color('sum', [
           '#094D4A',
diff --git a/packages/site/examples/gallery/basic/demo/normal.js b/packages/site/examples/gallery/basic/demo/normal.js
index 08792b3d5d..c88793a845 100644
--- a/packages/site/examples/gallery/basic/demo/normal.js
+++ b/packages/site/examples/gallery/basic/demo/normal.js
@@ -6,7 +6,6 @@ const scene = new Scene({
   map: new GaodeMap({
     center: [ 121.417463, 31.215175 ],
     style: 'dark',
-    pitch: 0,
     zoom: 11
   })
 });
@@ -23,10 +22,7 @@ scene.on('loaded', () => {
           }
         })
         .size(0.5)
-        .color('#080298')
-        .style({
-          opacity: 1
-        });
+        .color('#080298');
 
       scene.addLayer(pointLayer);
     });
diff --git a/packages/site/examples/gallery/basic/demo/point.js b/packages/site/examples/gallery/basic/demo/point.js
index 762680a626..bc62cb1f84 100644
--- a/packages/site/examples/gallery/basic/demo/point.js
+++ b/packages/site/examples/gallery/basic/demo/point.js
@@ -30,10 +30,7 @@ scene.on('loaded', () => {
           '#A6E1E0',
           '#B8EFE2',
           '#D7F9F0'
-        ])
-        .style({
-          opacity: 1
-        });
+        ]);
 
       scene.addLayer(pointLayer);
     });
diff --git a/packages/site/examples/heatmap/grid/demo/china.js b/packages/site/examples/heatmap/grid/demo/china.js
index d8e6b09a86..8d9ea7847c 100644
--- a/packages/site/examples/heatmap/grid/demo/china.js
+++ b/packages/site/examples/heatmap/grid/demo/china.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'light',
-    pitch: 0,
     center: [ 107.054293, 35.246265 ],
     zoom: 4.056
   })
diff --git a/packages/site/examples/heatmap/grid/demo/grid_world.js b/packages/site/examples/heatmap/grid/demo/grid_world.js
index 8702de1b72..6efa9fc430 100644
--- a/packages/site/examples/heatmap/grid/demo/grid_world.js
+++ b/packages/site/examples/heatmap/grid/demo/grid_world.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'blank',
-    pitch: 0,
     center: [ 110.097892, 33.853662 ],
     zoom: 4.056
   })
@@ -33,7 +32,6 @@ scene.on('loaded', () => {
         .style({
           coverage: 0.7,
           angle: 0,
-          opacity: 1.0
         });
       scene.addLayer(layer);
     });
diff --git a/packages/site/examples/heatmap/grid/demo/heatmap3.js b/packages/site/examples/heatmap/grid/demo/heatmap3.js
index 5943c03b9f..71a0eb23ee 100644
--- a/packages/site/examples/heatmap/grid/demo/heatmap3.js
+++ b/packages/site/examples/heatmap/grid/demo/heatmap3.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'light',
-    pitch: 0,
     center: [ 110.097892, 33.853662 ],
     zoom: 4.056
   })
diff --git a/packages/site/examples/heatmap/grid/demo/world.js b/packages/site/examples/heatmap/grid/demo/world.js
index 18fff55c49..632ca4404d 100644
--- a/packages/site/examples/heatmap/grid/demo/world.js
+++ b/packages/site/examples/heatmap/grid/demo/world.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'dark',
-    pitch: 0,
     center: [ 110.097892, 33.853662 ],
     zoom: 4.056
   })
diff --git a/packages/site/examples/heatmap/heatmap/demo/heatmap.js b/packages/site/examples/heatmap/heatmap/demo/heatmap.js
index 32648d001b..d835ad7e2b 100644
--- a/packages/site/examples/heatmap/heatmap/demo/heatmap.js
+++ b/packages/site/examples/heatmap/heatmap/demo/heatmap.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'dark',
-    pitch: 0,
     center: [ 127.5671666579043, 7.445038892195569 ],
     zoom: 2.632456779444394
   })
@@ -23,7 +22,6 @@ scene.on('loaded', () => {
         .style({
           intensity: 2,
           radius: 20,
-          opacity: 1.0,
           rampColors: {
             colors: [
               '#FF4818',
diff --git a/packages/site/examples/heatmap/heatmap/demo/heatmap3d.js b/packages/site/examples/heatmap/heatmap/demo/heatmap3d.js
index 8f0eb6f1ef..063aebd721 100644
--- a/packages/site/examples/heatmap/heatmap/demo/heatmap3d.js
+++ b/packages/site/examples/heatmap/heatmap/demo/heatmap3d.js
@@ -25,7 +25,6 @@ scene.on('loaded', () => {
         .style({
           intensity: 5,
           radius: 10,
-          opacity: 1.0,
           rampColors: {
             colors: [
               '#2E8AE6',
diff --git a/packages/site/examples/heatmap/heatmap/demo/heatmap_purple.js b/packages/site/examples/heatmap/heatmap/demo/heatmap_purple.js
index a7a636e899..1762c75581 100644
--- a/packages/site/examples/heatmap/heatmap/demo/heatmap_purple.js
+++ b/packages/site/examples/heatmap/heatmap/demo/heatmap_purple.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'dark',
-    pitch: 0,
     center: [ 127.5671666579043, 7.445038892195569 ],
     zoom: 2.632456779444394
   })
@@ -23,7 +22,6 @@ scene.on('loaded', () => {
         .style({
           intensity: 2,
           radius: 20,
-          opacity: 1.0,
           rampColors: {
             colors: [
               '#FF4818',
diff --git a/packages/site/examples/heatmap/hexagon/demo/hexagon.js b/packages/site/examples/heatmap/hexagon/demo/hexagon.js
index 73f170a0a0..d152268a6d 100644
--- a/packages/site/examples/heatmap/hexagon/demo/hexagon.js
+++ b/packages/site/examples/heatmap/hexagon/demo/hexagon.js
@@ -33,7 +33,6 @@ scene.on('loaded', () => {
         .style({
           coverage: 0.8,
           angle: 0,
-          opacity: 1.0
         })
         .color(
           'sum',
diff --git a/packages/site/examples/heatmap/hexagon/demo/light.js b/packages/site/examples/heatmap/hexagon/demo/light.js
index 9d966918a3..dd0cae6cba 100644
--- a/packages/site/examples/heatmap/hexagon/demo/light.js
+++ b/packages/site/examples/heatmap/hexagon/demo/light.js
@@ -39,7 +39,6 @@ scene.on('loaded', () => {
         .style({
           coverage: 0.8,
           angle: 0,
-          opacity: 1.0
         })
         .color('sum', [
           '#094D4A',
diff --git a/packages/site/examples/heatmap/hexagon/demo/world.js b/packages/site/examples/heatmap/hexagon/demo/world.js
index 86eb1cb601..7633bc3db8 100644
--- a/packages/site/examples/heatmap/hexagon/demo/world.js
+++ b/packages/site/examples/heatmap/hexagon/demo/world.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'light',
-    pitch: 0,
     center: [ 104.995156, 31.450658 ],
     zoom: 3.79
   })
@@ -31,7 +30,6 @@ scene.on('loaded', () => {
         .style({
           coverage: 0.9,
           angle: 0,
-          opacity: 1.0
         })
         .color(
           'sum',
diff --git a/packages/site/examples/line/animate/demo/plane_animate2.js b/packages/site/examples/line/animate/demo/plane_animate2.js
index 1a5ad5ed07..c7268362f4 100644
--- a/packages/site/examples/line/animate/demo/plane_animate2.js
+++ b/packages/site/examples/line/animate/demo/plane_animate2.js
@@ -11,11 +11,11 @@ const scene = new Scene({
     zoom: 2.5
   })
 });
+scene.addImage(
+  'plane',
+  'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
+);
 scene.on('loaded', () => {
-  scene.addImage(
-    'plane',
-    'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
-  );
   Promise.all([
     fetch(
       'https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json'
@@ -59,10 +59,7 @@ scene.on('loaded', () => {
       .shape('circle')
       .color('#ffed11')
       .animate(true)
-      .size(40)
-      .style({
-        opacity: 1.0
-      });
+      .size(40);
     const flyLine = new LineLayer({ blend: 'normal' })
       .source(flydata, {
         parser: {
@@ -73,7 +70,7 @@ scene.on('loaded', () => {
       .color('#ff6b34')
       .texture('plane')
       .shape('arc')
-      .size(20)
+      .size(15)
       .animate({
         duration: 1,
         interval: 0.2,
@@ -82,8 +79,7 @@ scene.on('loaded', () => {
       .style({
         textureBlend: 'replace',
         lineTexture: true, // 开启线的贴图功能
-        iconStep: 6, // 设置贴图纹理的间距
-        opacity: 1
+        iconStep: 10, // 设置贴图纹理的间距
       });
 
     const flyLine2 = new LineLayer()
@@ -95,9 +91,7 @@ scene.on('loaded', () => {
       })
       .color('#ff6b34')
       .shape('arc')
-      // .shape('arc')
       .size(1)
-      // .active(true)
       .style({
         lineType: 'dash',
         dashArray: [ 5, 5 ],
@@ -108,4 +102,4 @@ scene.on('loaded', () => {
     scene.addLayer(flyLine2);
     scene.addLayer(flyLine);
   });
-});
+});
\ No newline at end of file
diff --git a/packages/site/examples/line/arc/demo/trip_arc.js b/packages/site/examples/line/arc/demo/trip_arc.js
index d9db83ca8a..8e60a6e282 100644
--- a/packages/site/examples/line/arc/demo/trip_arc.js
+++ b/packages/site/examples/line/arc/demo/trip_arc.js
@@ -30,7 +30,6 @@ scene.on('loaded', () => {
         .shape('arc3d')
         .color('#0C47BF')
         .style({
-          opacity: 1,
           blur: 0.9
         });
       scene.addLayer(layer);
diff --git a/packages/site/examples/line/isoline/demo/height.js b/packages/site/examples/line/isoline/demo/height.js
index 9c339cf09d..bd6e182676 100644
--- a/packages/site/examples/line/isoline/demo/height.js
+++ b/packages/site/examples/line/isoline/demo/height.js
@@ -1,5 +1,3 @@
-// Data Source https://busrouter.sg/visualization/
-
 import { Scene, LineLayer } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 
diff --git a/packages/site/examples/line/isoline/demo/isoline.js b/packages/site/examples/line/isoline/demo/isoline.js
index 0bc18404a0..51306f9d2f 100644
--- a/packages/site/examples/line/isoline/demo/isoline.js
+++ b/packages/site/examples/line/isoline/demo/isoline.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'light',
     center: [ 104.117492, 36.492696 ],
     zoom: 3.89
diff --git a/packages/site/examples/line/path/demo/bus_dark.js b/packages/site/examples/line/path/demo/bus_dark.js
index bfaa7871ab..9ffc9fe16e 100644
--- a/packages/site/examples/line/path/demo/bus_dark.js
+++ b/packages/site/examples/line/path/demo/bus_dark.js
@@ -1,5 +1,3 @@
-// Data Source https://busrouter.sg/visualization/
-
 import { Scene, LineLayer } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 
diff --git a/packages/site/examples/line/path/demo/bus_light.js b/packages/site/examples/line/path/demo/bus_light.js
index d6e69e8ce9..7643aceafa 100644
--- a/packages/site/examples/line/path/demo/bus_light.js
+++ b/packages/site/examples/line/path/demo/bus_light.js
@@ -1,5 +1,3 @@
-// Data Source https://busrouter.sg/visualization/
-
 import { Scene, LineLayer, Popup } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 
diff --git a/packages/site/examples/line/path/demo/road_dark_dash.js b/packages/site/examples/line/path/demo/road_dark_dash.js
index 05b819d175..ab6e44f237 100644
--- a/packages/site/examples/line/path/demo/road_dark_dash.js
+++ b/packages/site/examples/line/path/demo/road_dark_dash.js
@@ -5,9 +5,7 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 116.3956, 39.9392 ],
-    pitch: 0,
     zoom: 10,
-    rotation: 0,
     style: 'dark'
   })
 });
diff --git a/packages/site/examples/line/path/demo/shanghai_bus.js b/packages/site/examples/line/path/demo/shanghai_bus.js
index ecd22ddcb9..b0a7643954 100644
--- a/packages/site/examples/line/path/demo/shanghai_bus.js
+++ b/packages/site/examples/line/path/demo/shanghai_bus.js
@@ -1,5 +1,3 @@
-// Data Source https://busrouter.sg/visualization/
-
 import { Scene, LineLayer } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 
diff --git a/packages/site/examples/line/wall/demo/bus_wall.js b/packages/site/examples/line/wall/demo/bus_wall.js
index 7c53019ccc..471e812914 100644
--- a/packages/site/examples/line/wall/demo/bus_wall.js
+++ b/packages/site/examples/line/wall/demo/bus_wall.js
@@ -1,5 +1,3 @@
-// Data Source https://busrouter.sg/visualization/
-
 import { Scene, LineLayer } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 
diff --git a/packages/site/examples/line/wall/demo/hangzhou_wall.js b/packages/site/examples/line/wall/demo/hangzhou_wall.js
index 441dd37172..53ea4771a0 100644
--- a/packages/site/examples/line/wall/demo/hangzhou_wall.js
+++ b/packages/site/examples/line/wall/demo/hangzhou_wall.js
@@ -1,5 +1,3 @@
-// Data Source https://busrouter.sg/visualization/
-
 import { Scene, LineLayer } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 
@@ -7,8 +5,8 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 119.297868, 29.732983 ],
-    zoom: 7.109999999999999,
-    rotation: 1.2200000000000273,
+    zoom: 7.11,
+    rotation: 1.22,
     pitch: 45.42056074766357,
     style: 'dark'
   })
diff --git a/packages/site/examples/point/bubble/demo/color.js b/packages/site/examples/point/bubble/demo/color.js
index 70f1534f61..557c5c5e61 100644
--- a/packages/site/examples/point/bubble/demo/color.js
+++ b/packages/site/examples/point/bubble/demo/color.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'light',
     center: [ 121.435159, 31.256971 ],
     zoom: 14.89,
diff --git a/packages/site/examples/point/bubble/demo/point.js b/packages/site/examples/point/bubble/demo/point.js
index 0fba3a223a..90e6f40bbb 100644
--- a/packages/site/examples/point/bubble/demo/point.js
+++ b/packages/site/examples/point/bubble/demo/point.js
@@ -4,8 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
-    type: 'amap',
     style: 'light',
     center: [ 140.067171, 36.26186 ],
     zoom: 5.32,
diff --git a/packages/site/examples/point/bubble/demo/scatter.js b/packages/site/examples/point/bubble/demo/scatter.js
index b942884a49..74fbfbf007 100644
--- a/packages/site/examples/point/bubble/demo/scatter.js
+++ b/packages/site/examples/point/bubble/demo/scatter.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'dark',
     center: [ 112, 23.69 ],
     zoom: 2.5
@@ -28,10 +27,7 @@ scene.on('loaded', () => {
         .active(true)
         .animate(true)
         .size(56)
-        .color('#4cfd47')
-        .style({
-          opacity: 1
-        });
+        .color('#4cfd47');
 
       scene.addLayer(pointLayer);
     });
diff --git a/packages/site/examples/point/chart/demo/bar.js b/packages/site/examples/point/chart/demo/bar.js
index 82c52debb6..e7fe8538ef 100644
--- a/packages/site/examples/point/chart/demo/bar.js
+++ b/packages/site/examples/point/chart/demo/bar.js
@@ -7,7 +7,6 @@ const scene = new Scene({
   map: new GaodeMap({
     style: 'light',
     center: [ 2.6125016864608597, 49.359131 ],
-    pitch: 0,
     zoom: 4.19
   })
 });
diff --git a/packages/site/examples/point/chart/demo/chart.js b/packages/site/examples/point/chart/demo/chart.js
index f767a31e09..25f9f866e7 100644
--- a/packages/site/examples/point/chart/demo/chart.js
+++ b/packages/site/examples/point/chart/demo/chart.js
@@ -7,7 +7,6 @@ const scene = new Scene({
   map: new GaodeMap({
     style: 'light',
     center: [ 2.6125016864608597, 49.359131 ],
-    pitch: 0,
     zoom: 4.19
   })
 });
diff --git a/packages/site/examples/point/cluster/demo/cluster.js b/packages/site/examples/point/cluster/demo/cluster.js
index b5804d4aca..4a6be88380 100644
--- a/packages/site/examples/point/cluster/demo/cluster.js
+++ b/packages/site/examples/point/cluster/demo/cluster.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 120.19382669582967, 30.258134 ],
-    pitch: 0,
     style: 'dark',
     zoom: 3
   })
diff --git a/packages/site/examples/point/cluster/demo/cluster2.js b/packages/site/examples/point/cluster/demo/cluster2.js
index 707602eb42..f8fe012ccc 100644
--- a/packages/site/examples/point/cluster/demo/cluster2.js
+++ b/packages/site/examples/point/cluster/demo/cluster2.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 120.19382669582967, 30.258134 ],
-    pitch: 0,
     style: 'dark',
     zoom: 3
   })
@@ -35,7 +34,6 @@ scene.on('loaded', () => {
         .active(true)
         .color('rgb(73,167,86)')
         .style({
-          opacity: 1,
           strokeWidth: 1,
           stroke: '#fff'
         });
@@ -50,10 +48,8 @@ scene.on('loaded', () => {
         .active(true)
         .color('#fff')
         .style({
-          opacity: 1,
           strokeWidth: 0,
           stroke: '#fff'
-
         });
 
       scene.addLayer(pointLayer);
diff --git a/packages/site/examples/point/column/demo/clumn_shape.js b/packages/site/examples/point/column/demo/clumn_shape.js
index aafb5542ab..5dae47afbc 100644
--- a/packages/site/examples/point/column/demo/clumn_shape.js
+++ b/packages/site/examples/point/column/demo/clumn_shape.js
@@ -36,10 +36,7 @@ scene.on('loaded', () => {
         .size('unit_price', h => {
           return [ 6, 6, h / 500 ];
         })
-        .color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])
-        .style({
-          opacity: 1.0
-        });
+        .color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ]);
 
       scene.addLayer(pointLayer);
     });
diff --git a/packages/site/examples/point/column/demo/column_dark.js b/packages/site/examples/point/column/demo/column_dark.js
index 4d611c0980..5cda5bc74e 100644
--- a/packages/site/examples/point/column/demo/column_dark.js
+++ b/packages/site/examples/point/column/demo/column_dark.js
@@ -39,10 +39,7 @@ scene.on('loaded', () => {
           '#7BE39E',
           '#A1EDB8',
           '#CEF8D6'
-        ])
-        .style({
-          opacity: 1.0
-        });
+        ]);
       scene.addLayer(pointLayer);
     });
 });
diff --git a/packages/site/examples/point/dot/demo/normal.js b/packages/site/examples/point/dot/demo/normal.js
index 96ff882326..58f4f82241 100644
--- a/packages/site/examples/point/dot/demo/normal.js
+++ b/packages/site/examples/point/dot/demo/normal.js
@@ -6,7 +6,6 @@ const scene = new Scene({
   map: new GaodeMap({
     style: 'dark',
     center: [ 121.417463, 31.215175 ],
-    pitch: 0,
     zoom: 11
   })
 });
@@ -23,10 +22,7 @@ scene.on('loaded', () => {
           }
         })
         .size(0.5)
-        .color('#080298')
-        .style({
-          opacity: 1
-        });
+        .color('#080298');
 
       scene.addLayer(pointLayer);
     });
diff --git a/packages/site/examples/point/dot/demo/normal2.js b/packages/site/examples/point/dot/demo/normal2.js
index 762680a626..bc62cb1f84 100644
--- a/packages/site/examples/point/dot/demo/normal2.js
+++ b/packages/site/examples/point/dot/demo/normal2.js
@@ -30,10 +30,7 @@ scene.on('loaded', () => {
           '#A6E1E0',
           '#B8EFE2',
           '#D7F9F0'
-        ])
-        .style({
-          opacity: 1
-        });
+        ]);
 
       scene.addLayer(pointLayer);
     });
diff --git a/packages/site/examples/point/image/demo/fillimage.js b/packages/site/examples/point/image/demo/fillimage.js
deleted file mode 100644
index 9ddd9dae02..0000000000
--- a/packages/site/examples/point/image/demo/fillimage.js
+++ /dev/null
@@ -1,243 +0,0 @@
-import { Scene, PointLayer, LineLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import { animate, linear } from 'popmotion';
-
-const path = [
-  {
-    lng: 168.3984375,
-    lat: -4.565473550710278,
-    img: 'img'
-  },
-  {
-    lng: 165.05859375,
-    lat: -5.7908968128719565,
-    img: 'img'
-  },
-  {
-    lng: 160.3125,
-    lat: -5.7908968128719565,
-    img: 'img'
-  },
-  {
-    lng: 157.32421875,
-    lat: -3.688855143147035,
-    img: 'img'
-  },
-  {
-    lng: 153.80859375,
-    lat: -2.284550660236957,
-    img: 'img'
-  },
-  {
-    lng: 148.88671874999997,
-    lat: -2.108898659243126,
-    img: 'img'
-  },
-  {
-    lng: 145.1953125,
-    lat: -0.7031073524364783,
-    img: 'img'
-  },
-  {
-    lng: 140.44921875,
-    lat: 0,
-    img: 'img'
-  },
-  {
-    lng: 135,
-    lat: 1.4061088354351594,
-    img: 'img'
-  },
-  {
-    lng: 131.8359375,
-    lat: 2.986927393334876,
-    img: 'img'
-  },
-  {
-    lng: 130.078125,
-    lat: 5.965753671065536,
-    img: 'img'
-  },
-  {
-    lng: 128.49609375,
-    lat: 9.102096738726456,
-    img: 'img'
-  },
-  {
-    lng: 127.265625,
-    lat: 12.211180191503997,
-    img: 'img'
-  },
-  {
-    lng: 125.859375,
-    lat: 15.453680224345835,
-    img: 'img'
-  },
-  {
-    lng: 123.92578125,
-    lat: 18.312810846425442,
-    img: 'img'
-  },
-  {
-    lng: 121.11328124999999,
-    lat: 19.80805412808859,
-    img: 'img'
-  },
-  {
-    lng: 117.94921874999999,
-    lat: 20.96143961409684,
-    img: 'img'
-  },
-  {
-    lng: 115.31249999999999,
-    lat: 22.917922936146045,
-    img: 'img'
-  }
-];
-
-let imageLayer;
-let imageData = {
-  lng: 168.3984375,
-  lat: -4.565473550710278,
-  img: 'img'
-};
-let lineLayer;
-let lineData = [];
-let timer2;
-let pathCount = 0;
-let rotation = 0;
-
-const scene = new Scene({
-  id: 'map',
-  map: new GaodeMap({
-    pitch: 0,
-    center: [ 120, 10 ],
-    zoom: 2
-  })
-});
-
-scene.addImage(
-  'img',
-  'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*rd3kTp1VFxIAAAAAAAAAAAAAARQnAQ'
-);
-
-scene.on('loaded', () => {
-  imageLayer = new PointLayer({ layerType: 'fillImage', zIndex: 2 })
-    .source([ imageData ], {
-      parser: {
-        type: 'json',
-        x: 'lng',
-        y: 'lat'
-      }
-    })
-    .shape('img', img => img)
-    .size(60)
-    .active({
-      color: '#f00',
-      mix: 0.5
-    })
-    .style({
-      opacity: 0.8,
-      rotation
-    });
-
-  scene.addLayer(imageLayer);
-
-  const data = [
-    {
-      id: '1',
-      coord: lineData
-    }
-  ];
-  lineLayer = new LineLayer()
-    .source(data, {
-      parser: {
-        type: 'json',
-        coordinates: 'coord'
-      }
-    })
-    .shape('line')
-    .size(2)
-    .color('#f00')
-    .style({
-      opacity: 0.8,
-      targetColor: '#0DCCFF',
-      sourceColor: 'rbga(255,255,255, 0)'
-    });
-
-  scene.addLayer(lineLayer);
-
-  const rotate = () => {
-    rotation -= 2;
-    imageLayer.style({
-      rotation
-    });
-    scene.render();
-    requestAnimationFrame(rotate);
-  };
-  rotate();
-
-  updateLocation();
-});
-
-function updateLocation() {
-  clearTimeout(timer2);
-
-  if (pathCount < path.length) {
-    timer2 = setTimeout(() => {
-      const data = path[pathCount];
-
-      const t = animate({
-        from: {
-          lng: imageData.lng,
-          lat: imageData.lat
-        },
-        to: {
-          lng: data.lng,
-          lat: data.lat
-        },
-        ease: linear,
-        duration: 500,
-        onUpdate: o => {
-          if (pathCount > 1) {
-            imageData.lng = o.lng;
-            imageData.lat = o.lat;
-            imageLayer.setData([ imageData ]);
-
-            lineData.push([ o.lng, o.lat ]);
-            lineLayer.setData([
-              {
-                id: '1',
-                coord: lineData
-              }
-            ]);
-          }
-        },
-        onComplete: () => {
-          t.stop();
-          if (pathCount === path.length - 1) {
-            lineData = [];
-            lineLayer.setData([
-              {
-                id: '1',
-                coord: lineData
-              }
-            ]);
-          }
-        }
-      });
-
-      pathCount++;
-      updateLocation();
-    }, 500);
-  } else {
-    lineData = [];
-    imageData = {
-      lng: 168.3984375,
-      lat: -4.565473550710278,
-      img: 'img'
-    };
-    pathCount = 0;
-    updateLocation();
-  }
-}
diff --git a/packages/site/examples/point/image/demo/image.js b/packages/site/examples/point/image/demo/image.js
index fa45030ae6..12e3877eaf 100644
--- a/packages/site/examples/point/image/demo/image.js
+++ b/packages/site/examples/point/image/demo/image.js
@@ -4,30 +4,29 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'light',
     center: [ 121.434765, 31.256735 ],
     zoom: 14.83
   })
 });
+scene.addImage(
+  '00',
+  'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
+);
+scene.addImage(
+  '01',
+  'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
+);
+scene.addImage(
+  '02',
+  'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
+);
 scene.on('loaded', () => {
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
   )
     .then(res => res.json())
     .then(data => {
-      scene.addImage(
-        '00',
-        'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
-      );
-      scene.addImage(
-        '01',
-        'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
-      );
-      scene.addImage(
-        '02',
-        'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
-      );
       const imageLayer = new PointLayer()
         .source(data, {
           parser: {
diff --git a/packages/site/examples/point/image/demo/locate.js b/packages/site/examples/point/image/demo/locate.js
index d34729658d..6d7b788927 100644
--- a/packages/site/examples/point/image/demo/locate.js
+++ b/packages/site/examples/point/image/demo/locate.js
@@ -4,22 +4,22 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'light',
     center: [ 116.276227, 35.256776 ],
     zoom: 6
   })
 });
+scene.addImage(
+  'marker',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
+);
 scene.on('loaded', () => {
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json'
   )
     .then(res => res.json())
     .then(data => {
-      scene.addImage(
-        'marker',
-        'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
-      );
+      
       const imageLayer = new PointLayer()
         .source(data)
         .shape('marker')
diff --git a/packages/site/examples/point/image/demo/meta.json b/packages/site/examples/point/image/demo/meta.json
index 982a7ebdd1..960d305210 100644
--- a/packages/site/examples/point/image/demo/meta.json
+++ b/packages/site/examples/point/image/demo/meta.json
@@ -9,11 +9,6 @@
       "title": "符号图",
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*uzwBSLxwZGMAAAAAAAAAAAAAARQnAQ"
     },
-    {
-      "filename": "fillimage.js",
-      "title": "台风路径模拟",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*mWtoQbgBCDEAAAAAAAAAAAAAARQnAQ"
-    },
     {
       "filename": "locate.js",
       "title": "精确符号",
diff --git a/packages/site/examples/point/image/demo/monsoon.js b/packages/site/examples/point/image/demo/monsoon.js
index 30f0843b12..f1672c2f69 100644
--- a/packages/site/examples/point/image/demo/monsoon.js
+++ b/packages/site/examples/point/image/demo/monsoon.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'dark',
     center: [ 105, 35 ],
     zoom: 2.5
diff --git a/packages/site/examples/point/marker/demo/clustermarker.js b/packages/site/examples/point/marker/demo/clustermarker.js
index 1a624d1345..0d166c694c 100644
--- a/packages/site/examples/point/marker/demo/clustermarker.js
+++ b/packages/site/examples/point/marker/demo/clustermarker.js
@@ -6,7 +6,6 @@ const scene = new Scene({
   map: new GaodeMap({
     style: 'light',
     center: [ 105.790327, 30 ],
-    pitch: 0,
     zoom: 2
   })
 });
diff --git a/packages/site/examples/point/marker/demo/marker.js b/packages/site/examples/point/marker/demo/marker.js
index c18ba1179e..d612a9316f 100644
--- a/packages/site/examples/point/marker/demo/marker.js
+++ b/packages/site/examples/point/marker/demo/marker.js
@@ -6,7 +6,6 @@ const scene = new Scene({
   map: new GaodeMap({
     style: 'light',
     center: [ 105.790327, 36.495636 ],
-    pitch: 0,
     zoom: 4
   })
 });
diff --git a/packages/site/examples/point/marker/demo/markerlayer.js b/packages/site/examples/point/marker/demo/markerlayer.js
index 0178fbcc1a..7a507951c0 100644
--- a/packages/site/examples/point/marker/demo/markerlayer.js
+++ b/packages/site/examples/point/marker/demo/markerlayer.js
@@ -6,7 +6,6 @@ const scene = new Scene({
   map: new GaodeMap({
     style: 'light',
     center: [ 105.790327, 36.495636 ],
-    pitch: 0,
     zoom: 4
   })
 });
diff --git a/packages/site/examples/point/scatter/demo/animatePoint.js b/packages/site/examples/point/scatter/demo/animatePoint.js
index e6bb545790..66e99bae9f 100644
--- a/packages/site/examples/point/scatter/demo/animatePoint.js
+++ b/packages/site/examples/point/scatter/demo/animatePoint.js
@@ -29,7 +29,6 @@ fetch(
       .size(40)
       .color('#ffa842')
       .style({
-        opacity: 1,
         offsets: [ 40, 40 ]
       });
     const pointLayer2 = new PointLayer({})
@@ -44,10 +43,7 @@ fetch(
       .active(true)
       .animate(true)
       .size(50)
-      .color('#f00')
-      .style({
-        opacity: 1
-      });
+      .color('#f00');
 
     scene.addLayer(pointLayer);
     scene.addLayer(pointLayer2);
diff --git a/packages/site/examples/point/scatter/demo/blur.js b/packages/site/examples/point/scatter/demo/blur.js
index 262ca92de8..7a789294a6 100644
--- a/packages/site/examples/point/scatter/demo/blur.js
+++ b/packages/site/examples/point/scatter/demo/blur.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 112, 30.267069 ],
-    pitch: 0,
     style: 'dark',
     zoom: 3.8
   })
diff --git a/packages/site/examples/point/scatter/demo/radarPoint.js b/packages/site/examples/point/scatter/demo/radarPoint.js
index e3d0200cd9..bf2e9f38fa 100644
--- a/packages/site/examples/point/scatter/demo/radarPoint.js
+++ b/packages/site/examples/point/scatter/demo/radarPoint.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     center: [ 120, 30 ],
     zoom: 13
   })
diff --git a/packages/site/examples/point/scatter/demo/scatter.js b/packages/site/examples/point/scatter/demo/scatter.js
index f4c660d553..bff1d8d416 100644
--- a/packages/site/examples/point/scatter/demo/scatter.js
+++ b/packages/site/examples/point/scatter/demo/scatter.js
@@ -6,7 +6,6 @@ const scene = new Scene({
   map: new GaodeMap({
     style: 'light',
     center: [ -121.24357, 37.58264 ],
-    pitch: 0,
     zoom: 6.45
   })
 });
diff --git a/packages/site/examples/point/scatter/demo/scatterStyleMap.js b/packages/site/examples/point/scatter/demo/scatterStyleMap.js
index 6c6caaa9ca..17e3e12765 100644
--- a/packages/site/examples/point/scatter/demo/scatterStyleMap.js
+++ b/packages/site/examples/point/scatter/demo/scatterStyleMap.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 112, 30.267069 ],
-    pitch: 0,
     style: 'dark',
     zoom: 6
   })
diff --git a/packages/site/examples/point/text/demo/iconfont.js b/packages/site/examples/point/text/demo/iconfont.js
index 4ebc4dc530..cfadec84d7 100644
--- a/packages/site/examples/point/text/demo/iconfont.js
+++ b/packages/site/examples/point/text/demo/iconfont.js
@@ -5,8 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 110, 30 ],
-    pitch: 0,
-    // style: 'light',
     style: 'amap://styles/453e2f8e11603fc8f7548fe18959e9e9',
     zoom: 5
   })
diff --git a/packages/site/examples/point/text/demo/iconfonts.js b/packages/site/examples/point/text/demo/iconfonts.js
index 0f4de42488..5069f5695e 100644
--- a/packages/site/examples/point/text/demo/iconfonts.js
+++ b/packages/site/examples/point/text/demo/iconfonts.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 120.5, 30.2 ],
-    pitch: 0,
     style: 'dark',
     zoom: 8.5,
     zooms: [ 8, 10 ]
diff --git a/packages/site/examples/point/text/demo/point_text.js b/packages/site/examples/point/text/demo/point_text.js
index 79bd2d2100..3363f85427 100644
--- a/packages/site/examples/point/text/demo/point_text.js
+++ b/packages/site/examples/point/text/demo/point_text.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 110, 36 ],
-    pitch: 0,
     style: 'light',
     zoom: 3
   })
@@ -24,9 +23,6 @@ scene.on('loaded', () => {
         })
         .shape('m', 'text')
         .size(12)
-        // .rotate("j",()=>{
-        //   return  Math.random()*3*(Math.random()>0.5?1:-1)
-        // })
         .color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
         .style({
           textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
diff --git a/packages/site/examples/point/text/demo/simpleCoordinate.js b/packages/site/examples/point/text/demo/simpleCoordinate.js
index 0fcafe66ff..4fd4c4821e 100644
--- a/packages/site/examples/point/text/demo/simpleCoordinate.js
+++ b/packages/site/examples/point/text/demo/simpleCoordinate.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new Map({
     center: [ 500, 500 ],
-    pitch: 0,
     zoom: 3,
     version: 'SIMPLE',
     mapSize: 1000,
diff --git a/packages/site/examples/point/text/demo/styleMap.js b/packages/site/examples/point/text/demo/styleMap.js
index c048767770..f171d45981 100644
--- a/packages/site/examples/point/text/demo/styleMap.js
+++ b/packages/site/examples/point/text/demo/styleMap.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 120.5, 30.2 ],
-    pitch: 0,
     style: 'dark',
     zoom: 7.5,
     zooms: [ 8, 10 ]
diff --git a/packages/site/examples/polygon/3d/demo/polygon.js b/packages/site/examples/polygon/3d/demo/polygon.js
index e127051093..50d7c2c766 100644
--- a/packages/site/examples/polygon/3d/demo/polygon.js
+++ b/packages/site/examples/polygon/3d/demo/polygon.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'dark',
     center: [ 114.050008, 22.529272 ],
     zoom: 14.1
@@ -28,10 +27,7 @@ scene.on('loaded', () => {
           '#F5D4E6',
           '#FAE4F1',
           '#FFF3FC'
-        ])
-        .style({
-          opacity: 1.0
-        });
+        ]);
       scene.addLayer(layer);
     });
 });
diff --git a/packages/site/examples/polygon/delete/china_linear_in.js b/packages/site/examples/polygon/delete/china_linear_in.js
index 5481c0fba8..98c1170b6d 100644
--- a/packages/site/examples/polygon/delete/china_linear_in.js
+++ b/packages/site/examples/polygon/delete/china_linear_in.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     center: [ 105, 35 ],
-    pitch: 0,
     style: 'dark',
     zoom: 2.5
   })
@@ -50,10 +49,7 @@ scene.on('loaded', () => {
           '#CF1D49'
         ])
         .shape('line')
-        .select(true)
-        .style({
-          opacity: 1.0
-        });
+        .select(true);
       scene.addLayer(layer2);
     });
 });
diff --git a/packages/site/examples/polygon/delete/city.js b/packages/site/examples/polygon/delete/city.js
index 09b2132049..497cabb40d 100644
--- a/packages/site/examples/polygon/delete/city.js
+++ b/packages/site/examples/polygon/delete/city.js
@@ -23,20 +23,14 @@ scene.on('loaded', () => {
           'name',
           [ '#fee5d9', '#fcae91', '#fb6a4a', '#de2d26', '#a50f15' ]
         )
-        .shape('fill')
-        .style({
-          opacity: 1
-        });
+        .shape('fill');
       //  图层边界
       const layer2 = new LineLayer({
         zIndex: 2
       })
         .source(data)
         .color('#fff')
-        .size(0.5)
-        .style({
-          opacity: 1
-        });
+        .size(0.5);
 
       scene.addLayer(chinaPolygonLayer);
       scene.addLayer(layer2);
@@ -51,10 +45,7 @@ scene.on('loaded', () => {
       })
         .source(data)
         .color('rgb(93,112,146)')
-        .size(0.6)
-        .style({
-          opacity: 1
-        });
+        .size(0.6);
 
       scene.addLayer(boundaries);
     });
@@ -76,7 +67,6 @@ scene.on('loaded', () => {
         .shape('name', 'text')
         .size(12)
         .style({
-          opacity: 1,
           stroke: '#fff',
           strokeWidth: 0,
           padding: [ 5, 5 ],
diff --git a/packages/site/examples/polygon/delete/province.js b/packages/site/examples/polygon/delete/province.js
index 90350975cf..d6d98e4b84 100644
--- a/packages/site/examples/polygon/delete/province.js
+++ b/packages/site/examples/polygon/delete/province.js
@@ -31,20 +31,14 @@ scene.on('loaded', () => {
             'rgb(8,81,156)'
           ]
         )
-        .shape('fill')
-        .style({
-          opacity: 1
-        });
+        .shape('fill');
         //  图层边界
       const layer2 = new LineLayer({
         zIndex: 2
       })
         .source(data)
         .color('rgb(93,112,146)')
-        .size(0.6)
-        .style({
-          opacity: 1
-        });
+        .size(0.6);
 
       scene.addLayer(chinaPolygonLayer);
       scene.addLayer(layer2);
@@ -66,7 +60,6 @@ scene.on('loaded', () => {
         .shape('name', 'text')
         .size(12)
         .style({
-          opacity: 1,
           stroke: '#fff',
           strokeWidth: 0,
           padding: [ 5, 5 ],
diff --git a/packages/site/examples/polygon/fill/demo/fill.js b/packages/site/examples/polygon/fill/demo/fill.js
index 2a28724966..a152ba958b 100644
--- a/packages/site/examples/polygon/fill/demo/fill.js
+++ b/packages/site/examples/polygon/fill/demo/fill.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'light',
     center: [ 116.368652, 39.93866 ],
     zoom: 10.07
@@ -34,19 +33,13 @@ scene.on('loaded', () => {
           ].reverse()
         )
         .shape('fill')
-        .active(true)
-        .style({
-          opacity: 1
-        });
+        .active(true);
       const layer2 = new LineLayer({
         zIndex: 2
       })
         .source(data)
         .color('#fff')
-        .size(0.8)
-        .style({
-          opacity: 1
-        });
+        .size(0.8);
 
       scene.addLayer(layer);
       scene.addLayer(layer2);
diff --git a/packages/site/examples/polygon/fill/demo/ocean.js b/packages/site/examples/polygon/fill/demo/ocean.js
index a27ac3b31e..a588168fe5 100644
--- a/packages/site/examples/polygon/fill/demo/ocean.js
+++ b/packages/site/examples/polygon/fill/demo/ocean.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     center: [ -44.40673828125, -18.375379094031825 ],
     zoom: 13
   })
diff --git a/packages/site/examples/polygon/fill/demo/usa.js b/packages/site/examples/polygon/fill/demo/usa.js
index 5b3c615b08..2a22b965a0 100644
--- a/packages/site/examples/polygon/fill/demo/usa.js
+++ b/packages/site/examples/polygon/fill/demo/usa.js
@@ -25,10 +25,7 @@ scene.on('loaded', () => {
           'density', color
         )
         .shape('fill')
-        .active(true)
-        .style({
-          opacity: 1.0
-        });
+        .active(true);
       const layer2 = new LineLayer({
         zIndex: 2
       })
@@ -39,7 +36,6 @@ scene.on('loaded', () => {
         .style({
           lineType: 'dash',
           dashArray: [ 2, 2 ],
-          opacity: 1
         });
       scene.addLayer(layer);
       scene.addLayer(layer2);
diff --git a/packages/site/examples/polygon/fill/demo/water.js b/packages/site/examples/polygon/fill/demo/water.js
index 1b0c1fba88..16381572cf 100644
--- a/packages/site/examples/polygon/fill/demo/water.js
+++ b/packages/site/examples/polygon/fill/demo/water.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     center: [ -44.40673828125, -18.375379094031825 ],
     zoom: 13
   })
diff --git a/packages/site/examples/raster/basic/delete/dem.js b/packages/site/examples/raster/basic/delete/dem.js
index 25dd197264..b73aad1cd1 100644
--- a/packages/site/examples/raster/basic/delete/dem.js
+++ b/packages/site/examples/raster/basic/delete/dem.js
@@ -5,7 +5,6 @@ const scene = new Scene({
   id: 'map',
   stencil: true,
   map: new GaodeMap({
-    pitch: 0,
     style: 'dark',
     center: [ 105, 37.5 ],
     zoom: 2.5
diff --git a/packages/site/examples/raster/basic/delete/ndvi.js b/packages/site/examples/raster/basic/delete/ndvi.js
index 9dc5cdc4f5..dc36b4c1ed 100644
--- a/packages/site/examples/raster/basic/delete/ndvi.js
+++ b/packages/site/examples/raster/basic/delete/ndvi.js
@@ -5,7 +5,6 @@ import * as GeoTIFF from 'geotiff';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'dark',
     center: [ 105, 37.5 ],
     zoom: 2.5
diff --git a/packages/site/examples/raster/basic/demo/image.js b/packages/site/examples/raster/basic/demo/image.js
index 2c7d15040e..182fea5296 100644
--- a/packages/site/examples/raster/basic/demo/image.js
+++ b/packages/site/examples/raster/basic/demo/image.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'light',
     center: [ 121.268, 30.3628 ],
     zoom: 10
diff --git a/packages/site/examples/raster/basic/demo/light.js b/packages/site/examples/raster/basic/demo/light.js
index 266e1fa592..9f420fdce2 100644
--- a/packages/site/examples/raster/basic/demo/light.js
+++ b/packages/site/examples/raster/basic/demo/light.js
@@ -5,7 +5,6 @@ import * as GeoTIFF from 'geotiff';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'dark',
     center: [ 105, 37.5 ],
     zoom: 2.5
@@ -45,7 +44,6 @@ async function addLayer() {
       }
     })
     .style({
-      opacity: 1.0,
       clampLow: false,
       clampHigh: false,
       domain: [ 0, 90 ],
diff --git a/packages/site/examples/raster/basic/demo/radar.js b/packages/site/examples/raster/basic/demo/radar.js
index 37598050bc..cb22ec0fbc 100644
--- a/packages/site/examples/raster/basic/demo/radar.js
+++ b/packages/site/examples/raster/basic/demo/radar.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 0,
     style: 'dark',
     center: [ 115.5268, 34.3628 ],
     zoom: 7
diff --git a/packages/site/examples/react/control/API.en.md b/packages/site/examples/react/control/API.en.md
deleted file mode 100644
index 7bc40e504c..0000000000
--- a/packages/site/examples/react/control/API.en.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: API
----
-`markdown:docs/common/style.md`
-## Popup Props
-
-| prop name | Type              | Default | Description      |
-| --------- | ----------------- | ------- | ---------------- |
-| option    | `string`          | `null`  | popup 配置项     |
-| lnglat    | `Array | Object`  | `null`  | popup 经纬度位置 |
-| children  | `React.ReactNode` | `null`  | 子组件           |
-
-### option
-
-| prop name    | Type         | Default | Description                                                                    |
-| ------------ | ------------ | ------- | ------------------------------------------------------------------------------ |
-| closeButton  | `string`     | `true`  | 是否显示关闭按钮                                                               |
-| closeOnClick | `string`     | `blue`  | 点击是否关闭 popup                                                             |
-| anchor       | `string`     | `null`  | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
-| offsets      | `Array[x,y]` | `null`  | popup 位置偏移                                                                 |
-| className    | `string`     | `null`  | 样式名称                                                                       |
-
-```jsx
-import { Popup } from '@antv/l7-react';
-
-<Popup option={{}} lnglat={[]} />;
-```
-
-[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)
-
-## Marker Props
-
-| prop name      | Type              | Default | Description       |
-| -------------- | ----------------- | ------- | ----------------- |
-| option         | `string`          | `null`  | marker 配置项     |
-| lnglat         | `Array | Object`  | `null`  | marker 经纬度位置 |
-| onMarkerLoaded | `Function`        | `null`  | layer 回调函数    |
-| children       | `React.ReactNode` | `null`  | 子组件            |
-
-### option
-
-| prop name | Type         | Default | Description                                                                    |
-| --------- | ------------ | ------- | ------------------------------------------------------------------------------ |
-| color     | `string`     | `blue`  | marker 配置项                                                                  |
-| anchor    | `string`     | `null`  | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
-| offsets   | `Array[x,y]` | `null`  | marker 位置偏移                                                                |
-| extData   | `object`     | `null`  | marker 属性数据                                                                |
-
-## Maker 事件
-
-通过 onMarkerLoaded 方法获取 Marker 实例监听
-
-## 实例
-
-```jsx
-import { Marker} from '@antv/l7-react'
-<Marker
- option = {{
-   color:'red'
- }}
- lnglat ={{[120,32]}}
-/>
-
-```
-
diff --git a/packages/site/examples/react/control/API.zh.md b/packages/site/examples/react/control/API.zh.md
deleted file mode 100644
index 7bc40e504c..0000000000
--- a/packages/site/examples/react/control/API.zh.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: API
----
-`markdown:docs/common/style.md`
-## Popup Props
-
-| prop name | Type              | Default | Description      |
-| --------- | ----------------- | ------- | ---------------- |
-| option    | `string`          | `null`  | popup 配置项     |
-| lnglat    | `Array | Object`  | `null`  | popup 经纬度位置 |
-| children  | `React.ReactNode` | `null`  | 子组件           |
-
-### option
-
-| prop name    | Type         | Default | Description                                                                    |
-| ------------ | ------------ | ------- | ------------------------------------------------------------------------------ |
-| closeButton  | `string`     | `true`  | 是否显示关闭按钮                                                               |
-| closeOnClick | `string`     | `blue`  | 点击是否关闭 popup                                                             |
-| anchor       | `string`     | `null`  | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
-| offsets      | `Array[x,y]` | `null`  | popup 位置偏移                                                                 |
-| className    | `string`     | `null`  | 样式名称                                                                       |
-
-```jsx
-import { Popup } from '@antv/l7-react';
-
-<Popup option={{}} lnglat={[]} />;
-```
-
-[popup 使用完整 demo](../../../examples/react/covid#covid_bubble)
-
-## Marker Props
-
-| prop name      | Type              | Default | Description       |
-| -------------- | ----------------- | ------- | ----------------- |
-| option         | `string`          | `null`  | marker 配置项     |
-| lnglat         | `Array | Object`  | `null`  | marker 经纬度位置 |
-| onMarkerLoaded | `Function`        | `null`  | layer 回调函数    |
-| children       | `React.ReactNode` | `null`  | 子组件            |
-
-### option
-
-| prop name | Type         | Default | Description                                                                    |
-| --------- | ------------ | ------- | ------------------------------------------------------------------------------ |
-| color     | `string`     | `blue`  | marker 配置项                                                                  |
-| anchor    | `string`     | `null`  | center, top, top-left, top-right, bottom, bottom-left,bottom-right,left, right |
-| offsets   | `Array[x,y]` | `null`  | marker 位置偏移                                                                |
-| extData   | `object`     | `null`  | marker 属性数据                                                                |
-
-## Maker 事件
-
-通过 onMarkerLoaded 方法获取 Marker 实例监听
-
-## 实例
-
-```jsx
-import { Marker} from '@antv/l7-react'
-<Marker
- option = {{
-   color:'red'
- }}
- lnglat ={{[120,32]}}
-/>
-
-```
-
diff --git a/packages/site/examples/react/control/demo/Marker.tsx b/packages/site/examples/react/control/demo/Marker.tsx
deleted file mode 100644
index 3f1e11e4f0..0000000000
--- a/packages/site/examples/react/control/demo/Marker.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { AMapScene, Marker } from '@antv/l7-react';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-function creatMarkers() {
-  const markers = [];
-  for (let i = 0; i < 5; i++) {
-    for (let j = 0; j < 5; j++) {
-      markers.push(<Marker key={i + '-' + j} lnglat={[112 + i, 30 + j]} />);
-    }
-  }
-  return markers;
-}
-const MapScene = React.memo(function Map() {
-  return (
-    <AMapScene
-      map={{
-        center: [114, 32],
-        pitch: 0,
-        style: 'dark',
-        zoom: 6,
-      }}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      }}
-    >
-      {creatMarkers()}
-    </AMapScene>
-  );
-});
-
-ReactDOM.render(<MapScene />, document.getElementById('map'));
diff --git a/packages/site/examples/react/control/demo/control.tsx b/packages/site/examples/react/control/demo/control.tsx
deleted file mode 100644
index 5aed83a64a..0000000000
--- a/packages/site/examples/react/control/demo/control.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { AMapScene, Control } from '@antv/l7-react';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-const MapScene = React.memo(function Map() {
-  return (
-    <AMapScene
-      map={{
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        style: 'dark',
-        zoom: 1,
-      }}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      }}
-    >
-      <Control type="scale" />
-      <Control type="zoom" />
-    </AMapScene>
-  );
-});
-
-ReactDOM.render(<MapScene />, document.getElementById('map'));
diff --git a/packages/site/examples/react/control/demo/meta.json b/packages/site/examples/react/control/demo/meta.json
deleted file mode 100644
index 690f1370b8..0000000000
--- a/packages/site/examples/react/control/demo/meta.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "title": {
-    "zh": "Scene 组件",
-    "en": "Scene Component"
-  },
-  "demos": [
-
-    {
-      "filename": "Marker.tsx",
-      "title": "Marker 组件",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*a2aXQqtzsiAAAAAAAAAAAAAAARQnAQ"
-    },
-    {
-      "filename": "control.tsx",
-      "title": "Control组件",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bYsqSKyZDU0AAAAAAAAAAAAAARQnAQ"
-    }
-  ]
-}
diff --git a/packages/site/examples/react/control/index.en.md b/packages/site/examples/react/control/index.en.md
deleted file mode 100644
index f00509995a..0000000000
--- a/packages/site/examples/react/control/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Control Component
-order: 3
----
diff --git a/packages/site/examples/react/control/index.zh.md b/packages/site/examples/react/control/index.zh.md
deleted file mode 100644
index 5ac441fc11..0000000000
--- a/packages/site/examples/react/control/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Control 组件
-order: 3
----
diff --git a/packages/site/examples/react/layer/API.en.md b/packages/site/examples/react/layer/API.en.md
deleted file mode 100644
index 5b4be37879..0000000000
--- a/packages/site/examples/react/layer/API.en.md
+++ /dev/null
@@ -1,171 +0,0 @@
----
-title: API
----
-`markdown:docs/common/style.md`
-## Layer 类型
-
-React 各个组件名称和 L7 名称保持一致
-
-- PointLayer
-- PolygonLayer
-- LineLayer
-- HeatmapLayer
-- RasterLayer
-- ImageLayer
-- CityBuildingLayer
-
-### 使用方式
-
-```jsx
-import { PointLayer } '@antv/l7-react';
-
-```
-
-## Layer Props
-
-| prop name     | Type                           | Default                                                   | Description                             |
-| ------------- | ------------------------------ | --------------------------------------------------------- | --------------------------------------- |
-| options       | `layer options`                |                                                           | layer 配置项                            |
-| source        | `sourceOption`                 |                                                           | 数据源配置项                            |
-| color         | `attributeOption`              |                                                           | 颜色通道                                |
-| shape         | `attributeOption`              |                                                           | 图层形状属性                            |
-| size          | `attributeOption`              |                                                           | 图层大小属性                            |
-| style         | `Object`                       |                                                           | 图层样式                                |
-| scale         | `scale Option`                 | 默认会数值类设定 scale，数值类型 linear，字符串类型为 cat | 图层度量                                |
-| filter        | `Function`                     |                                                           | 图层数据过滤方法                        |
-| select        | `boolean` `interaction option` |                                                           | 图层选中高亮                            |
-| active        | `boolean` `interaction option` | `false`                                                   | 图层 hover 高亮                         |
-| animate       | `animate Option`               | `null`                                                    | 图层动画配置                            |
-| onLayerLoaded | `Function`                     |                                                           | 图层添加完成后回调，用于获取 layer 对象 |
-
-### layer options
-
-| prop name | Type      | Default                 | Description                                      |
-| --------- | --------- | ----------------------- | ------------------------------------------------ |
-| name      | `string`  |                         | 图层名字，可根据名称获取 layer                   |
-| visible   | `boolean` | `true`                  | 图层是否可见                                     |
-| zIndex    | `number`  | 0                       | 图层绘制顺序，                                   |
-| minZoom   | `number`  | 0                       | 设置 layer 最小可见等级，小于则不显示            |
-| maxZoom   | `number`  | 与 map 最大缩放等级一致 | 设置 layerd 的最大可见等级，大于则不显示         |
-| aotoFit   | `boolean` | `false`                 | 是否缩放到图层范围                               |
-| blend     | 'string'  | 'normal'                | 图层元素混合效果 [详情]('../layer/layer/#blend') |
-
-### attribute Option
-
-color, size, shape 等图形映射通道，通过下面参数配置
-
-- field 映射字段，如果是常量设置为 null
-- values 映射值 支持 常量，数组，回调函数，如果 values 为数组或回调需要设置 field 字段
-
-详细[配置项](../layer/layer/#size)
-
-### source Option
-
-数据源配置项
-
-- data 支持 geojson、csv、json
-- parser 数据解析配置项
-- transforms 数据处理配置项
-
-详细[配置项](../source/source/#parser-1)
-
-### scale Option
-
-度量配置项
-
-- values scaleCfg
-
-**scaleCfg**
-
-- key 为字段名 fieldname | attributeName
-- value scale 配置项
-
-```javascript
-const scales = {
-  values: {
-    name: {
-      type: 'cat',
-    },
-  },
-};
-```
-
-### interaction option
-
-active，select 配置项
-
-**option**
-
-- color 设置交互的颜色，指滑过或者选中的
-
-```jsx
-<>
-```
-
-### 获取 layer 对象
-
-#### onLayerLoaded
-
-回调函数获取 layer, scene 对象
-
-```javascript
-onLayerLoaded = (layer, scene) => {};
-```
-
-#### Context API
-
-```jsx
-import { LayerContext } from '@antv/l7-react';
-<LayerContext.Consumer>
-  {(layer, scene) => {
-    // use `scene` here
-  }}
-</LayerContext.Consumer>;
-```
-
-### Layer 示例
-
-```jsx
-import { PolygonLayer } from '@antv/l7-react';
-<PolygonLayer
-  key={'2'}
-  source={{
-    data,
-  }}
-  color={{
-    field: 'name',
-    values: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],
-  }}
-  shape={{
-    values: 'fill',
-  }}
-  style={{
-    opacity: 1,
-  }}
-  active={{
-    option: {
-      color: 'red',
-      mix: .6,
-    },
-  }}
-/>;
-```
-
-## 子组件
-
-### 事件组件
-
-| prop name | Type       | Default | Description                               |
-| --------- | ---------- | ------- | ----------------------------------------- |
-| type      | `string`   | `null`  | 事件类型 [详情](../layer/layer/#鼠标事件) |
-| handler   | `Function` | `null`  | layer 回调函数                            |
-
-### 示例
-
-```jsx
-import { LayerEvent, PolygonLayer } from 'l7-react';
-<PolygonLayer>
-  <LayerEvent type="click" handler={() => {}} />
-  <LayerEvent type="mousemove" handler={() => {}} />
-</PolygonLayer>;
-```
diff --git a/packages/site/examples/react/layer/API.zh.md b/packages/site/examples/react/layer/API.zh.md
deleted file mode 100644
index 87b11f6443..0000000000
--- a/packages/site/examples/react/layer/API.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: API
----
-`markdown:docs/api/react/layer.zh.md`
diff --git a/packages/site/examples/react/layer/demo/Point_image.tsx b/packages/site/examples/react/layer/demo/Point_image.tsx
deleted file mode 100644
index 5e7381f6b5..0000000000
--- a/packages/site/examples/react/layer/demo/Point_image.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { AMapScene, LoadImage, PointLayer } from '@antv/l7-react';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-const World = React.memo(function Map() {
-  const [data, setData] = React.useState();
-  React.useEffect(() => {
-    const fetchData = async () => {
-      const response = await fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-      );
-      const data = await response.json();
-
-      setData(data);
-    };
-    fetchData();
-  }, []);
-  return (
-    <AMapScene
-      map={{
-        center: [0.19382669582967, 50.258134],
-        pitch: 0,
-        style: 'light',
-        zoom: 6,
-      }}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      }}
-    >
-      <LoadImage
-        name="00"
-        url="https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg"
-      />
-      <LoadImage
-        name="01"
-        url="https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg"
-      />
-      <LoadImage
-        name="02"
-        url="https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg"
-      />
-      {data && (
-        <PointLayer
-          key={'2'}
-          options={{
-            autoFit: true,
-          }}
-          source={{
-            data,
-            // @ts-ignore
-            parser: {
-              type: 'json',
-              x: 'longitude',
-              y: 'latitude',
-            },
-          }}
-          shape={{
-            field: 'name',
-            values: ['00', '01', '02'],
-          }}
-          size={{
-            values: 20,
-          }}
-          style={{
-            opacity: 1,
-          }}
-        />
-      )}
-    </AMapScene>
-  );
-});
-
-ReactDOM.render(<World />, document.getElementById('map'));
diff --git a/packages/site/examples/react/layer/demo/index.less b/packages/site/examples/react/layer/demo/index.less
deleted file mode 100644
index e2992d4dd5..0000000000
--- a/packages/site/examples/react/layer/demo/index.less
+++ /dev/null
@@ -1,32 +0,0 @@
-.markerContent {
-  z-index: 2;
-  font-size: 10px;
-  .info {
-    display: flex;
-    align-items: center;
-    height: 32px;
-    padding: 0.05rem;
-    background: #1677ff;
-    border-radius: 44px;
-    img {
-      width: 16px;
-      margin: 4px 10px 4px 4px;
-      background: #d8d8d8;
-      border: 1px solid #fff;
-      border-radius: 50%;
-    }
-    .text {
-      color: #fff;
-      font-size: 12px;
-      font-family: PingFangSC-Regular;
-    }
-  }
-  .marker-pin {
-    display: flex;
-    justify-content: center;
-    img {
-      width: 20px;
-      height: 30px;
-    }
-  }
-}
diff --git a/packages/site/examples/react/layer/demo/marker.tsx b/packages/site/examples/react/layer/demo/marker.tsx
deleted file mode 100644
index 367250cb66..0000000000
--- a/packages/site/examples/react/layer/demo/marker.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { AMapScene, Marker } from '@antv/l7-react';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import './index.less';
-
-const MarkerPinImg = {
-  green:
-    'https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*JhBbT4LvHpQAAAAAAAAAAAAAARQnAQ',
-  blue:
-    'https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*n6cXTb8R7iUAAAAAAAAAAAAAARQnAQ',
-};
-const MarkerInfo = ({ title }) => {
-  return (
-    <div className="markerContent">
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          height: '32px',
-          padding: '0.05rem',
-          background: '#1677ff',
-          borderRadius: '44px',
-        }}
-      >
-        <div
-          style={{
-            color: '#fff',
-            fontSize: '12px',
-          }}
-        >
-          {title}
-        </div>
-      </div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-        }}
-      >
-        <img
-          style={{
-            width: '20px',
-            height: '30px',
-          }}
-          alt="marker"
-          src={MarkerPinImg.blue}
-        />
-      </div>
-    </div>
-  );
-};
-
-const World = React.memo(function Map() {
-  const [data, setData] = React.useState();
-  React.useEffect(() => {
-    const fetchData = async () => {
-      const response = await fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-      );
-      const data = await response.json();
-      setData(data);
-    };
-    fetchData();
-  }, []);
-  return (
-    <AMapScene
-      map={{
-        center: [121.4316962, 31.26082325],
-        pitch: 0,
-        style: 'light',
-        zoom: 15,
-      }}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      }}
-    >
-      {data &&
-        data.map((item: any) => {
-          return (
-            <Marker key={item.id} lnglat={[item.longitude, item.latitude]}>
-              <MarkerInfo title={item.name} />
-            </Marker>
-          );
-        })}
-    </AMapScene>
-  );
-});
-
-ReactDOM.render(<World />, document.getElementById('map'));
diff --git a/packages/site/examples/react/layer/demo/meta.json b/packages/site/examples/react/layer/demo/meta.json
deleted file mode 100644
index 3c332e8333..0000000000
--- a/packages/site/examples/react/layer/demo/meta.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "title": {
-    "zh": "Layer 组件",
-    "en": "Layer Component"
-  },
-  "demos": [
-    {
-      "filename": "Point_image.tsx",
-      "title": "图片标注图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w8c5Tbu7HPIAAAAAAAAAAAAAARQnAQ"
-    },
-    {
-      "filename": "marker.tsx",
-      "title": "点标注图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CtjuQpCwuUEAAAAAAAAAAAAAARQnAQ"
-    },
-    {
-      "filename": "popup.tsx",
-      "title": "信息窗",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Sh8pQLLYfoIAAAAAAAAAAAAAARQnAQ"
-    }
-  ]
-}
diff --git a/packages/site/examples/react/layer/demo/popup.tsx b/packages/site/examples/react/layer/demo/popup.tsx
deleted file mode 100644
index f1a3ed3019..0000000000
--- a/packages/site/examples/react/layer/demo/popup.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import {
-  AMapScene,
-  LayerEvent,
-  LineLayer,
-  PolygonLayer,
-  Popup,
-} from '@antv/l7-react';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-const World = React.memo(function Map() {
-  const [popupInfo, setPopInfo] = React.useState();
-  const hoverHandle = (e) => {
-    console.log(e);
-    setPopInfo(e);
-  };
-  const hoverOutHandle = () => {
-    setPopInfo(undefined);
-  };
-  const data = {
-    type: 'FeatureCollection',
-    features: [
-      {
-        type: 'Feature',
-        properties: {},
-        geometry: {
-          type: 'Polygon',
-          coordinates: [
-            [
-              [111.9287109375, 28.22697003891834],
-              [115.6640625, 28.22697003891834],
-              [115.6640625, 31.015278981711266],
-              [111.9287109375, 31.015278981711266],
-              [111.9287109375, 28.22697003891834],
-            ],
-          ],
-        },
-      },
-    ],
-  };
-  return (
-    <AMapScene
-      map={{
-        center: [111.9287109375, 28.22697003891834],
-        pitch: 0,
-        style: 'dark',
-        zoom: 6,
-      }}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      }}
-    >
-      {data && [
-        <PolygonLayer
-          key={'2'}
-          options={{
-            autoFit: false,
-          }}
-          source={{
-            data,
-          }}
-          color={{
-            values: '#2E8AE6',
-          }}
-          shape={{
-            values: 'fill',
-          }}
-          style={{
-            opacity: 0.5,
-          }}
-        >
-          <LayerEvent type="mousemove" handler={hoverHandle} />
-          <LayerEvent type="mouseout" handler={hoverOutHandle} />
-        </PolygonLayer>,
-        <LineLayer
-          key={'21'}
-          source={{
-            data,
-          }}
-          color={{
-            values: '#2E8AE6',
-          }}
-          shape={{
-            values: 'line',
-          }}
-          style={{
-            opacity: 1,
-          }}
-        />,
-      ]}
-      {popupInfo && (
-        <Popup
-          key="popup"
-          // @ts-ignore
-          lnglat={popupInfo.lngLat}
-          option={{ closeButton: false, offsets: [0, 10] }}
-        >
-          <span>这是个信息框</span>
-        </Popup>
-      )}
-    </AMapScene>
-  );
-});
-
-ReactDOM.render(<World />, document.getElementById('map'));
diff --git a/packages/site/examples/react/layer/index.en.md b/packages/site/examples/react/layer/index.en.md
deleted file mode 100644
index 173e6117af..0000000000
--- a/packages/site/examples/react/layer/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Layer Component
-order: 2
----
diff --git a/packages/site/examples/react/layer/index.zh.md b/packages/site/examples/react/layer/index.zh.md
deleted file mode 100644
index 063bd53314..0000000000
--- a/packages/site/examples/react/layer/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Layer 组件
-order: 2
----
diff --git a/packages/site/examples/react/scene/API.en.md b/packages/site/examples/react/scene/API.en.md
deleted file mode 100644
index 7dfaf9a1cc..0000000000
--- a/packages/site/examples/react/scene/API.en.md
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: API
----
-`markdown:docs/common/style.md`
-
-## 使用
-
-在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
-
-```javascript
-import { MapboxScene, AmapScene } from '@antv/l7-react';
-```
-
-## Scene Props
-
-| prop name     | Type           | Default    | Description                            |
-| ------------- | -------------- | ---------- | -------------------------------------- |
-| style         | `Object`       | `null`     | scene css 样式                         |
-| className     | `string`       | `null`     | 样式名称                               |
-| map           | `map option`   | `Required` | map option [地图配置项]()              |
-| option        | `scene option` | `void`     | scene option 配置项 [详情](#map-props) |
-| onSceneLoaded | `Function`     | `void`     | scene 加载回调函数                     |
-
-### 高德地图场景
-
-```jsx
-import { AMapScene } from '@antv/l7-react';
-<AMapScene
-  option={{}}
-  map={{
-    style: 'light',
-    center: [112, 20],
-    token: '',
-  }}
-/>;
-```
-
-### Mapbox 地图场景
-
-```jsx
-import { MapboxScene } from '@antv/l7-react';
-<MapboxScene
-  option={{}}
-  map={{
-    style: 'light',
-    center: [112, 20],
-    token: '',
-  }}
-/>;
-```
-
-### map option
-
-地图配置项
-
-| option   | Type       | Default            | Description                                                                                                     |
-| -------- | ---------- | ------------------ | --------------------------------------------------------------------------------------------------------------- |
-| style    | `string`   | `light`            | 地图样式 `dark|light|normal|blank` L7 默认提供四种样式，同时也支持自定义样式                                    |
-| token    | `string`   | `Required`         | 地图密钥，需要平台申请                                                                                          |
-| plugin   | `string[]` | `null`             | 高德地图[API 插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']` |
-| center   | `number`   | null               | 地图中心点                                                                                                      |
-| pitch    | `number`   | 0                  | 地图倾角                                                                                                        |
-| rotation | `number`   | 0                  | 地图旋转角                                                                                                      |
-| zoom     | `number`   | null               | 地图缩放等级                                                                                                    |
-| maxZoom  | `number`   | 0                  | 最大缩放等级                                                                                                    |
-| minZoom  | `number`   | AMap 18 ,Mapbox 20 | 最小缩放等级                                                                                                    |
-
-其他配置项见地图文档
-高德地图 Map [配置项](https://lbs.amap.com/api/javascript-api/reference/map)
-
-Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/#map)
-
-其他配置项和底图一致
-
-### scene option
-
-| option                | Type      | Default      | Description                                         |
-| --------------------- | --------- | ------------ | --------------------------------------------------- |
-| logoPosition          | string    | `bottomleft` | logo 位置 `bottomright|topright|bottomleft|topleft` |
-| logoVisible           | `boolean` | `true`       | 是否显示 logo                                       |
-| antialias             | `boolean` | `true`       | 是否开启抗锯齿                                      |
-| preserveDrawingBuffer | `boolean` | `false`      | 是否保留缓冲区数据                                  |
-
-### 获取 scene 对象
-
-#### onSceneLoaded
-
-onSceneLoaded 回调函数能够取到 scene 对象
-
-#### Context API
-
-```jsx
-import { SceneContext } from '@antv/l7-react';
-<SceneContext.Consumer>
-  {(scene) => {
-    // use `scene` here
-  }}
-</SceneContext.Consumer>;
-```
-
-## 子组件
-
-### LoadImage
-
-| prop name | Type     | Default | Description |
-| --------- | -------- | ------- | ----------- |
-| name      | `string` | `null`  | 图标名称    |
-| url       | `string` | `null`  | 图标 url    |
-
-```jsx
-import LoadImage from '@antv/l7-react';
-<LoadImage name="marker" url="xxx.png" />;
-```
-
-### Layer 组件
-
-每个图层作为 scene 子组件添加
-
-###  事件组件
-
-| prop name | Type       | Default | Description                         |
-| --------- | ---------- | ------- | ----------------------------------- |
-| type      | `string`   | `null`  | 事件类型 [详情](../scene/#地图事件) |
-| handler   | `Function` | `null`  | scene 回调函数                      |
-
-```javascript
-import { SceneEvent, MapboxScene } from '@antv/l7-react';
-
-<MapboxScene>
-  <SceneEvent type="click" handler={() => {}} />
-</MapboxScene>;
-```
diff --git a/packages/site/examples/react/scene/API.zh.md b/packages/site/examples/react/scene/API.zh.md
deleted file mode 100644
index 7dfaf9a1cc..0000000000
--- a/packages/site/examples/react/scene/API.zh.md
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: API
----
-`markdown:docs/common/style.md`
-
-## 使用
-
-在 React 版本中 Mapbox 和高德地图作为两个组件封装的。
-
-```javascript
-import { MapboxScene, AmapScene } from '@antv/l7-react';
-```
-
-## Scene Props
-
-| prop name     | Type           | Default    | Description                            |
-| ------------- | -------------- | ---------- | -------------------------------------- |
-| style         | `Object`       | `null`     | scene css 样式                         |
-| className     | `string`       | `null`     | 样式名称                               |
-| map           | `map option`   | `Required` | map option [地图配置项]()              |
-| option        | `scene option` | `void`     | scene option 配置项 [详情](#map-props) |
-| onSceneLoaded | `Function`     | `void`     | scene 加载回调函数                     |
-
-### 高德地图场景
-
-```jsx
-import { AMapScene } from '@antv/l7-react';
-<AMapScene
-  option={{}}
-  map={{
-    style: 'light',
-    center: [112, 20],
-    token: '',
-  }}
-/>;
-```
-
-### Mapbox 地图场景
-
-```jsx
-import { MapboxScene } from '@antv/l7-react';
-<MapboxScene
-  option={{}}
-  map={{
-    style: 'light',
-    center: [112, 20],
-    token: '',
-  }}
-/>;
-```
-
-### map option
-
-地图配置项
-
-| option   | Type       | Default            | Description                                                                                                     |
-| -------- | ---------- | ------------------ | --------------------------------------------------------------------------------------------------------------- |
-| style    | `string`   | `light`            | 地图样式 `dark|light|normal|blank` L7 默认提供四种样式，同时也支持自定义样式                                    |
-| token    | `string`   | `Required`         | 地图密钥，需要平台申请                                                                                          |
-| plugin   | `string[]` | `null`             | 高德地图[API 插件](https://lbs.amap.com/api/javascript-api/guide/abc/plugins) `['AMap.ToolBar','AMap.Driving']` |
-| center   | `number`   | null               | 地图中心点                                                                                                      |
-| pitch    | `number`   | 0                  | 地图倾角                                                                                                        |
-| rotation | `number`   | 0                  | 地图旋转角                                                                                                      |
-| zoom     | `number`   | null               | 地图缩放等级                                                                                                    |
-| maxZoom  | `number`   | 0                  | 最大缩放等级                                                                                                    |
-| minZoom  | `number`   | AMap 18 ,Mapbox 20 | 最小缩放等级                                                                                                    |
-
-其他配置项见地图文档
-高德地图 Map [配置项](https://lbs.amap.com/api/javascript-api/reference/map)
-
-Mapbox Map 地图配置项 [配置项](https://docs.mapbox.com/mapbox-gl-js/api/#map)
-
-其他配置项和底图一致
-
-### scene option
-
-| option                | Type      | Default      | Description                                         |
-| --------------------- | --------- | ------------ | --------------------------------------------------- |
-| logoPosition          | string    | `bottomleft` | logo 位置 `bottomright|topright|bottomleft|topleft` |
-| logoVisible           | `boolean` | `true`       | 是否显示 logo                                       |
-| antialias             | `boolean` | `true`       | 是否开启抗锯齿                                      |
-| preserveDrawingBuffer | `boolean` | `false`      | 是否保留缓冲区数据                                  |
-
-### 获取 scene 对象
-
-#### onSceneLoaded
-
-onSceneLoaded 回调函数能够取到 scene 对象
-
-#### Context API
-
-```jsx
-import { SceneContext } from '@antv/l7-react';
-<SceneContext.Consumer>
-  {(scene) => {
-    // use `scene` here
-  }}
-</SceneContext.Consumer>;
-```
-
-## 子组件
-
-### LoadImage
-
-| prop name | Type     | Default | Description |
-| --------- | -------- | ------- | ----------- |
-| name      | `string` | `null`  | 图标名称    |
-| url       | `string` | `null`  | 图标 url    |
-
-```jsx
-import LoadImage from '@antv/l7-react';
-<LoadImage name="marker" url="xxx.png" />;
-```
-
-### Layer 组件
-
-每个图层作为 scene 子组件添加
-
-###  事件组件
-
-| prop name | Type       | Default | Description                         |
-| --------- | ---------- | ------- | ----------------------------------- |
-| type      | `string`   | `null`  | 事件类型 [详情](../scene/#地图事件) |
-| handler   | `Function` | `null`  | scene 回调函数                      |
-
-```javascript
-import { SceneEvent, MapboxScene } from '@antv/l7-react';
-
-<MapboxScene>
-  <SceneEvent type="click" handler={() => {}} />
-</MapboxScene>;
-```
diff --git a/packages/site/examples/react/scene/demo/amap.jsx b/packages/site/examples/react/scene/demo/amap.jsx
deleted file mode 100644
index e8e2cb805a..0000000000
--- a/packages/site/examples/react/scene/demo/amap.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { AMapScene, LineLayer } from '@antv/l7-react';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-const MapScene = React.memo(function Map() {
-  return (
-    <AMapScene
-      map={{
-        center: [ 110.19382669582967, 50.258134 ],
-        pitch: 0,
-        style: 'dark',
-        zoom: 1
-      }}
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0
-      }}
-    />
-  );
-});
-
-ReactDOM.render(<MapScene/>, document.getElementById('map'));
-
diff --git a/packages/site/examples/react/scene/demo/meta.json b/packages/site/examples/react/scene/demo/meta.json
deleted file mode 100644
index 3067b9ccb8..0000000000
--- a/packages/site/examples/react/scene/demo/meta.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "title": {
-    "zh": "Scene 组件",
-    "en": "Scene Component"
-  },
-  "demos": [
-
-    {
-      "filename": "amap.jsx",
-      "title": "高德地图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*TmYmT7t5fmQAAAAAAAAAAAAAARQnAQ"
-    }
-  ]
-}
diff --git a/packages/site/examples/react/scene/index.en.md b/packages/site/examples/react/scene/index.en.md
deleted file mode 100644
index 53e9fab54a..0000000000
--- a/packages/site/examples/react/scene/index.en.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Scene Component
-order: 1
----
diff --git a/packages/site/examples/react/scene/index.zh.md b/packages/site/examples/react/scene/index.zh.md
deleted file mode 100644
index 21ffe40b28..0000000000
--- a/packages/site/examples/react/scene/index.zh.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Scene 组件
-order: 1
----
diff --git a/packages/site/examples/tutorial/control/demo/amap.js b/packages/site/examples/tutorial/control/demo/amap.js
index 6bfe4d0b8b..6fa17bd458 100644
--- a/packages/site/examples/tutorial/control/demo/amap.js
+++ b/packages/site/examples/tutorial/control/demo/amap.js
@@ -4,7 +4,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'light',
-    pitch: 0,
     center: [ 121.4316962, 31.26082325 ],
     zoom: 15.056
   })
diff --git a/packages/site/examples/tutorial/layer/demo/layer_highlight.js b/packages/site/examples/tutorial/layer/demo/layer_highlight.js
index 72106ec454..829364e87f 100644
--- a/packages/site/examples/tutorial/layer/demo/layer_highlight.js
+++ b/packages/site/examples/tutorial/layer/demo/layer_highlight.js
@@ -4,7 +4,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'light',
-    pitch: 0,
     center: [ 118.7368, 32.0560 ],
     zoom: 9
   })
@@ -20,10 +19,7 @@ scene.on('loaded', () => {
       })
         .source(data)
         .shape('fill')
-        .color('unit_price', [ '#f0f9e8', '#ccebc5', '#a8ddb5', '#7bccc4', '#43a2ca', '#0868ac' ])
-        .style({
-          opacity: 1
-        });
+        .color('unit_price', [ '#f0f9e8', '#ccebc5', '#a8ddb5', '#7bccc4', '#43a2ca', '#0868ac' ]);
       const linelayer = new LineLayer({
         zIndex: 1,
         name: 'line'
@@ -45,10 +41,7 @@ scene.on('loaded', () => {
         })
         .shape('line')
         .size(2)
-        .color('red')
-        .style({
-          opacity: 1
-        });
+        .color('red');
       scene.addLayer(filllayer);
       scene.addLayer(linelayer);
       scene.addLayer(hightLayer);
diff --git a/packages/site/examples/tutorial/map/demo/amapInstance.js b/packages/site/examples/tutorial/map/demo/amapInstance.js
index 503c0be6d1..09b976b532 100644
--- a/packages/site/examples/tutorial/map/demo/amapInstance.js
+++ b/packages/site/examples/tutorial/map/demo/amapInstance.js
@@ -4,7 +4,6 @@ import { GaodeMap } from '@antv/l7-maps';
 window.onLoad = function() {
   const map = new AMap.Map('map', {
     viewMode: '3D',
-    pitch: 0,
     mapStyle: 'amap://styles/darkblue',
     center: [ 121.435159, 31.256971 ],
     zoom: 14.89,
diff --git a/packages/site/examples/tutorial/map/demo/gaodemap.js b/packages/site/examples/tutorial/map/demo/gaodemap.js
index de86a0fa73..fb46c64ef9 100644
--- a/packages/site/examples/tutorial/map/demo/gaodemap.js
+++ b/packages/site/examples/tutorial/map/demo/gaodemap.js
@@ -4,7 +4,6 @@ new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'light',
-    pitch: 0,
     center: [ 107.054293, 35.246265 ],
     zoom: 4.056
   })
diff --git a/packages/site/examples/tutorial/marker/demo/amap.js b/packages/site/examples/tutorial/marker/demo/amap.js
index ef833d5fe4..ca643fb70d 100644
--- a/packages/site/examples/tutorial/marker/demo/amap.js
+++ b/packages/site/examples/tutorial/marker/demo/amap.js
@@ -4,7 +4,6 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     style: 'light',
-    pitch: 0,
     center: [ 121.4316962, 31.26082325 ],
     zoom: 12.056
   })
diff --git a/packages/site/gatsby-config.js b/packages/site/gatsby-config.js
index 58f7364652..72e8bf9865 100644
--- a/packages/site/gatsby-config.js
+++ b/packages/site/gatsby-config.js
@@ -271,14 +271,6 @@ module.exports = {
         },
         order: 12,
       },
-      {
-        slug: 'api/react',
-        title: {
-          zh: 'React 组件',
-          en: 'React Component',
-        },
-        order: 13,
-      },
       {
         slug: 'api/mini/demos',
         title: {
diff --git a/packages/source/src/parser/image.ts b/packages/source/src/parser/image.ts
index f57c39f242..e37e926e31 100644
--- a/packages/source/src/parser/image.ts
+++ b/packages/source/src/parser/image.ts
@@ -7,7 +7,7 @@ export default function image(
   data: string | string[] | HTMLImageElement | ImageBitmap,
   cfg: IImageCfg,
 ): IParserData {
-  // TODO: 为 extent 赋默认值
+  // 为 extent 赋默认值
   const { extent = [121.168, 30.2828, 121.384, 30.4219] } = cfg;
   const images = new Promise((resolve) => {
     if (data instanceof HTMLImageElement || isImageBitmap(data)) {
diff --git a/packages/source/src/parser/mvt.ts b/packages/source/src/parser/mvt.ts
index 33bbb936d1..678def498e 100644
--- a/packages/source/src/parser/mvt.ts
+++ b/packages/source/src/parser/mvt.ts
@@ -7,7 +7,7 @@ import {
 } from '@antv/l7-utils';
 import {
   VectorTile,
-  VectorTileFeature,
+  // VectorTileFeature,
   VectorTileLayer,
 } from '@mapbox/vector-tile';
 import { Feature } from '@turf/helpers';
@@ -21,7 +21,7 @@ const DEFAULT_CONFIG: Partial<TilesetManagerOptions> = {
   zoomOffset: 0,
 };
 
-const TILE_SIZE = 512;
+// const TILE_SIZE = 512;
 
 export function osmTileXY2LonLat(x: number, y: number, zoom: number) {
   const lon = (x / Math.pow(2, zoom)) * 360 - 180;
@@ -30,123 +30,123 @@ export function osmTileXY2LonLat(x: number, y: number, zoom: number) {
   return [lon, lat];
 }
 
-function signedArea(ring: any[]) {
-  let sum = 0;
-  for (let i = 0, len = ring.length, j = len - 1, p1, p2; i < len; j = i++) {
-    p1 = ring[i];
-    p2 = ring[j];
-    sum += (p2.x - p1.x) * (p1.y + p2.y);
-  }
-  return sum;
-}
+// function signedArea(ring: any[]) {
+//   let sum = 0;
+//   for (let i = 0, len = ring.length, j = len - 1, p1, p2; i < len; j = i++) {
+//     p1 = ring[i];
+//     p2 = ring[j];
+//     sum += (p2.x - p1.x) * (p1.y + p2.y);
+//   }
+//   return sum;
+// }
 
-function classifyRings(rings: any[]) {
-  const len = rings.length;
+// function classifyRings(rings: any[]) {
+//   const len = rings.length;
 
-  if (len <= 1) {
-    return [rings];
-  }
+//   if (len <= 1) {
+//     return [rings];
+//   }
 
-  const polygons: any = [];
-  let polygon: any;
-  let ccw;
+//   const polygons: any = [];
+//   let polygon: any;
+//   let ccw;
 
-  for (let i = 0; i < len; i++) {
-    const area = signedArea(rings[i]);
-    if (area === 0) {
-      continue;
-    }
+//   for (let i = 0; i < len; i++) {
+//     const area = signedArea(rings[i]);
+//     if (area === 0) {
+//       continue;
+//     }
 
-    if (ccw === undefined) {
-      ccw = area < 0;
-    }
+//     if (ccw === undefined) {
+//       ccw = area < 0;
+//     }
 
-    if (ccw === area < 0) {
-      if (polygon) {
-        polygons.push(polygon);
-      }
-      polygon = [rings[i]];
-    } else {
-      polygon.push(rings[i]);
-    }
-  }
-  if (polygon) {
-    polygons.push(polygon);
-  }
+//     if (ccw === area < 0) {
+//       if (polygon) {
+//         polygons.push(polygon);
+//       }
+//       polygon = [rings[i]];
+//     } else {
+//       polygon.push(rings[i]);
+//     }
+//   }
+//   if (polygon) {
+//     polygons.push(polygon);
+//   }
 
-  return polygons;
-}
+//   return polygons;
+// }
 
-const VectorTileFeatureTypes = ['Unknown', 'Point', 'LineString', 'Polygon'];
-function GetGeoJSON(z: number, vectorTileFeature: VectorTileFeature) {
-  const extent = vectorTileFeature.extent;
-  let coords = vectorTileFeature.loadGeometry() as any;
-  const currenType = vectorTileFeature.type;
-  const currentProperties = vectorTileFeature.properties;
-  const currentId = vectorTileFeature.id;
+// const VectorTileFeatureTypes = ['Unknown', 'Point', 'LineString', 'Polygon'];
+// function GetGeoJSON(z: number, vectorTileFeature: VectorTileFeature) {
+//   const extent = vectorTileFeature.extent;
+//   let coords = vectorTileFeature.loadGeometry() as any;
+//   const currenType = vectorTileFeature.type;
+//   const currentProperties = vectorTileFeature.properties;
+//   const currentId = vectorTileFeature.id;
 
-  const size = extent * Math.pow(2, z);
+//   const size = extent * Math.pow(2, z);
 
-  let type = VectorTileFeatureTypes[currenType];
-  let i;
-  let j;
+//   let type = VectorTileFeatureTypes[currenType];
+//   let i;
+//   let j;
 
-  function project(line: any[]) {
-    for (let index = 0; index < line.length; index++) {
-      const point = line[index];
-      line[index] = [
-        (point.x / size) * TILE_SIZE,
-        (point.y / size) * TILE_SIZE,
-      ];
-    }
-  }
+//   function project(line: any[]) {
+//     for (let index = 0; index < line.length; index++) {
+//       const point = line[index];
+//       line[index] = [
+//         (point.x / size) * TILE_SIZE,
+//         (point.y / size) * TILE_SIZE,
+//       ];
+//     }
+//   }
 
-  switch (currenType) {
-    case 1:
-      const points = [];
-      for (i = 0; i < coords.length; i++) {
-        points[i] = coords[i][0];
-      }
-      coords = points;
-      project(coords);
-      break;
+//   switch (currenType) {
+//     case 1:
+//       const points = [];
+//       for (i = 0; i < coords.length; i++) {
+//         points[i] = coords[i][0];
+//       }
+//       coords = points;
+//       project(coords);
+//       break;
 
-    case 2:
-      for (i = 0; i < coords.length; i++) {
-        project(coords[i]);
-      }
-      break;
+//     case 2:
+//       for (i = 0; i < coords.length; i++) {
+//         project(coords[i]);
+//       }
+//       break;
 
-    case 3:
-      coords = classifyRings(coords);
-      for (i = 0; i < coords.length; i++) {
-        for (j = 0; j < coords[i].length; j++) {
-          project(coords[i][j]);
-        }
-      }
-      break;
-  }
+//     case 3:
+//       coords = classifyRings(coords);
+//       for (i = 0; i < coords.length; i++) {
+//         for (j = 0; j < coords[i].length; j++) {
+//           project(coords[i][j]);
+//         }
+//       }
+//       break;
+//   }
 
-  if (coords.length === 1) {
-    coords = coords[0];
-  } else {
-    type = 'Multi' + type;
-  }
+//   if (coords.length === 1) {
+//     coords = coords[0];
+//   } else {
+//     type = 'Multi' + type;
+//   }
 
-  const result = {
-    type: 'Feature',
-    geometry: {
-      type,
-      coordinates: coords,
-    },
-    properties: currentProperties,
-    id: currentId,
-    tileOrigin: [0, 0],
-    coord: '',
-  };
+//   const result = {
+//     type: 'Feature',
+//     geometry: {
+//       type,
+//       coordinates: coords,
+//     },
+//     properties: currentProperties,
+//     id: currentId,
+//     tileOrigin: [0, 0],
+//     coord: '',
+//   };
 
-  return result;
-}
+//   return result;
+// }
 
 export type MapboxVectorTile = {
   layers: { [_: string]: VectorTileLayer & { features: Feature[] } };
@@ -156,7 +156,7 @@ const getVectorTile = async (
   url: string | string[],
   tileParams: TileLoadParams,
   tile: Tile,
-  coord: string,
+  // coord: string,
 ): Promise<MapboxVectorTile> => {
   const tileUrl = getURLFromTemplate(url, tileParams);
 
@@ -172,32 +172,32 @@ const getVectorTile = async (
         // check tile source layer
         // console.log(vectorTile)
 
-        const tileOrigin = osmTileXY2LonLat(
-          tileParams.x,
-          tileParams.y,
-          tileParams.z,
-        );
-        const zoom = tileParams.z;
+        // const tileOrigin = osmTileXY2LonLat(
+        //   tileParams.x,
+        //   tileParams.y,
+        //   tileParams.z,
+        // );
+        // const zoom = tileParams.z;
 
         for (const sourceLayer of Object.keys(vectorTile.layers)) {
           const features = [];
           const vectorTileLayer = vectorTile.layers[sourceLayer];
           for (let i = 0; i < vectorTile.layers[sourceLayer].length; i++) {
             const vectorTileFeature = vectorTile.layers[sourceLayer].feature(i);
-            let feature;
-            if (coord === 'lnglat') {
-              feature = vectorTileFeature.toGeoJSON(
-                tileParams.x,
-                tileParams.y,
-                tileParams.z,
-              );
-            } else {
-              feature = GetGeoJSON(zoom, vectorTileFeature);
-              // @ts-ignore
-              vectorTileLayer.l7TileOrigin = tileOrigin;
-              // @ts-ignore
-              vectorTileLayer.l7TileCoord = coord;
-            }
+            // let feature;
+            // if (coord === 'lnglat') {
+            const feature = vectorTileFeature.toGeoJSON(
+              tileParams.x,
+              tileParams.y,
+              tileParams.z,
+            );
+            // } else {
+            //   feature = GetGeoJSON(zoom, vectorTileFeature);
+            //   // @ts-ignore
+            //   vectorTileLayer.l7TileOrigin = tileOrigin;
+            //   // @ts-ignore
+            //   vectorTileLayer.l7TileCoord = coord;
+            // }
 
             features.push(feature);
           }
@@ -216,9 +216,11 @@ export default function mapboxVectorTile(
   data: string | string[],
   cfg?: ITileParserCFG,
 ): IParserData {
-  const coord = cfg?.coord || 'lnglat'; // lnglat - offset
+  // const coord = cfg?.coord || 'lnglat'; // lnglat - offset
   const getTileData = (tileParams: TileLoadParams, tile: Tile) =>
-    getVectorTile(data, tileParams, tile, coord);
+    getVectorTile(data, tileParams, tile);
+  // getVectorTile(data, tileParams, tile, coord);
+
   const tilesetOptions = {
     ...DEFAULT_CONFIG,
     ...cfg,
diff --git a/packages/source/src/source.ts b/packages/source/src/source.ts
index 04d1300bfc..0d96c2a675 100644
--- a/packages/source/src/source.ts
+++ b/packages/source/src/source.ts
@@ -247,18 +247,22 @@ export default class Source extends EventEmitter implements ISource {
     //   c++
     // }
     // console.log('t', new Date().getTime() - t)
-
     const parser = this.parser;
     const type: string = parser.type || 'geojson';
     const sourceParser = getParser(type);
     this.data = sourceParser(this.originData, parser);
+
+    // 为瓦片图层的父图层创建数据瓦片金字塔管理器
+    this.tileset = this.initTileset();
+
+    // 判断当前 source 是否需要计算范围
+    if(parser.cancelExtent) return;
+
     // 计算范围
     this.extent = extent(this.data.dataArray);
     this.setCenter(this.extent);
     this.invalidExtent =
       this.extent[0] === this.extent[2] || this.extent[1] === this.extent[3];
-    // 瓦片数据
-    this.tileset = this.initTileset();
   }
 
   private setCenter(bbox: BBox) {
diff --git a/packages/three/src/core/baseLayer.ts b/packages/three/src/core/baseLayer.ts
index c2d7e8103e..b7f8e4e5d8 100644
--- a/packages/three/src/core/baseLayer.ts
+++ b/packages/three/src/core/baseLayer.ts
@@ -29,13 +29,25 @@ export default class ThreeJSLayer
   // 地图中点墨卡托坐标
   private center: IMercator;
   public defaultSourceConfig: {
-    data: any[];
+    data: any;
     options: ISourceCFG | undefined;
   } = {
-    data: [],
+    data: {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'Point',
+            coordinates: [0, 0],
+          },
+        },
+      ],
+    },
     options: {
       parser: {
-        type: 'json',
+        type: 'geojson',
       },
     },
   };
@@ -119,8 +131,8 @@ export default class ThreeJSLayer
    * @param object
    * @returns
    */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public getObjectLngLat(object: Object3D) {
-    const coord = [object.position.x, object.position.y];
     return [0, 0] as ILngLat;
   }
 
@@ -187,7 +199,6 @@ export default class ThreeJSLayer
 
     // 获取相机 （不同的地图获取对应的方式不同）
     const camera = this.threeRenderService.getRenderCamera();
-
     renderer.render(this.scene, camera);
 
     this.rendererService.setState();
diff --git a/packages/utils/src/mini-adapter/global.ts b/packages/utils/src/mini-adapter/global.ts
index 3e27cbb85b..e99e117c30 100644
--- a/packages/utils/src/mini-adapter/global.ts
+++ b/packages/utils/src/mini-adapter/global.ts
@@ -17,7 +17,7 @@ const getGlobalThis = (): any => {
 };
 l7globalThis = getGlobalThis();
 
-// TODO: 解决 gastby 服务端构建过程中没有 window 全局变量的问题
+// 解决 gastby 服务端构建过程中没有 window 全局变量的问题
 let globalWindow: Window & typeof l7globalThis;
 
 if (typeof window === 'undefined') {
diff --git a/packages/utils/src/stencli.ts b/packages/utils/src/stencli.ts
index ebd97906fc..eefb7ed79a 100644
--- a/packages/utils/src/stencli.ts
+++ b/packages/utils/src/stencli.ts
@@ -1,4 +1,4 @@
-// TODO: 提供模版配置
+// 提供模版配置
 export function getMask(mask: boolean, maskInside: boolean) {
   return {
     enable: mask,
diff --git a/packages/utils/src/tileset-manager/tile.ts b/packages/utils/src/tileset-manager/tile.ts
index cb07a79800..4780a15cae 100644
--- a/packages/utils/src/tileset-manager/tile.ts
+++ b/packages/utils/src/tileset-manager/tile.ts
@@ -6,12 +6,12 @@ import {
   TileOptions,
 } from './types';
 import { getTileWarpXY, tileToBounds } from './utils/lonlat-tile';
-
+import { EventEmitter } from 'eventemitter3';
 /**
  * 单个瓦片
  * 负责瓦片数据加载、缓存数据、缓存图层
  */
-export class Tile {
+export class Tile extends EventEmitter {
   // 瓦片索引
   public x: number;
   public y: number;
@@ -26,10 +26,13 @@ export class Tile {
   public isVisibleChange = false;
   public parentLayerIDList: string[] = [];
   public layerIDList: string[] = [];
+  public loadedLayers: number = 0;
+
   // 瓦片的父级瓦片
   public parent: Tile | null = null;
   // 瓦片的子级瓦片
   public children: Tile[] = [];
+  public loadedChilds: number = 0;
   // 瓦片数据
   public data: any = null;
   // 瓦片属性
@@ -44,6 +47,7 @@ export class Tile {
   private loadDataId = 0;
 
   constructor(options: TileOptions) {
+    super();
     const { x, y, z, tileSize } = options;
     this.x = x;
     this.y = y;
@@ -111,6 +115,10 @@ export class Tile {
     return key;
   }
 
+  public layerLoad() {
+    this.loadedLayers++;
+    this.emit('layerLoaded');
+  }
   // 请求瓦片数据
   public async loadData({ getData, onLoad, onError }: TileLoadDataOptions) {
     this.loadDataId++;
diff --git a/packages/utils/src/tileset-manager/tileset-manager.ts b/packages/utils/src/tileset-manager/tileset-manager.ts
index 831f55ed99..9c25a12040 100644
--- a/packages/utils/src/tileset-manager/tileset-manager.ts
+++ b/packages/utils/src/tileset-manager/tileset-manager.ts
@@ -267,7 +267,6 @@ export class TilesetManager extends EventEmitter {
   private getTile(x: number, y: number, z: number) {
     const tileId = this.getTileId(x, y, z);
     const tile = this.cacheTiles.get(tileId);
-
     return tile;
   }
 
diff --git a/packages/utils/src/workers/lineModel.ts b/packages/utils/src/workers/lineModel.ts
index 5f07c35d8b..ef6f32d290 100644
--- a/packages/utils/src/workers/lineModel.ts
+++ b/packages/utils/src/workers/lineModel.ts
@@ -20,7 +20,7 @@ export const lineModel = async ({
     a_Position,
     filter: a_filter,
     a_vertexId,
-    a_PickingColor: (feature: IEncodeFeature, featureIdx: number) => {
+    a_PickingColor: (feature: IEncodeFeature) => {
       const { id } = feature;
       return enablePicking ? encodePickingColor(id as number) : [0, 0, 0];
     },
@@ -46,12 +46,7 @@ export const lineModel = async ({
     ) => {
       return [vertex[5]];
     },
-    a_Size: (
-      feature: IEncodeFeature,
-      featureIdx: number,
-      vertex: number[],
-      attributeIdx: number,
-    ) => {
+    a_Size: (feature: IEncodeFeature) => {
       const { size: pointSize = 1 } = feature;
       return Array.isArray(pointSize)
         ? [pointSize[0], pointSize[1]]
@@ -70,16 +65,10 @@ export const lineModel = async ({
       feature: IEncodeFeature,
       featureIdx: number,
       vertex: number[],
-      attributeIdx: number,
     ) => {
       return [vertex[4]];
     },
-    a_iconMapUV: (
-      feature: IEncodeFeature,
-      featureIdx: number,
-      vertex: number[],
-      attributeIdx: number,
-    ) => {
+    a_iconMapUV: (feature: IEncodeFeature) => {
       const { texture } = feature;
       const { x, y } = iconMap[texture as string] || { x: 0, y: 0 };
       return [x, y];
@@ -147,7 +136,7 @@ export const lineModel = async ({
         vertexIndex = indexes[vertexIdx];
       }
 
-      descriptors.forEach((descriptor, attributeIdx: number) => {
+      descriptors.forEach((descriptor) => {
         // @ts-ignore
         if (descriptor && updateFuncs[descriptor.name]) {
           // @ts-ignore
diff --git a/packages/utils/src/workers/pointFillModel.ts b/packages/utils/src/workers/pointFillModel.ts
index d7d64a442e..0f6b6d4740 100644
--- a/packages/utils/src/workers/pointFillModel.ts
+++ b/packages/utils/src/workers/pointFillModel.ts
@@ -20,18 +20,13 @@ export const pointFillModel = async ({
     a_Position,
     filter: a_filter,
     a_vertexId,
-    a_PickingColor: (feature: IEncodeFeature, featureIdx: number) => {
+    a_PickingColor: (feature: IEncodeFeature) => {
       const { id } = feature;
       return enablePicking ? encodePickingColor(id as number) : [0, 0, 0];
     },
 
     // pointFill feature func
-    a_Shape: (
-      feature: IEncodeFeature,
-      featureIdx: number,
-      vertex: number[],
-      attributeIdx: number,
-    ) => {
+    a_Shape: (feature: IEncodeFeature) => {
       const { shape = 2 } = feature;
       const shapeIndex = shape2d.indexOf(shape as string);
       return [shapeIndex];
@@ -50,12 +45,7 @@ export const pointFillModel = async ({
         extrude[extrudeIndex + 2],
       ];
     },
-    a_Size: (
-      feature: IEncodeFeature,
-      featureIdx: number,
-      vertex: number,
-      attributeIdx: number[],
-    ) => {
+    a_Size: (feature: IEncodeFeature) => {
       const { size: pointSize = 5 } = feature;
       return Array.isArray(pointSize) ? [pointSize[0]] : [pointSize];
     },
@@ -122,7 +112,7 @@ export const pointFillModel = async ({
         vertexIndex = indexes[vertexIdx];
       }
 
-      descriptors.forEach((descriptor, attributeIdx: number) => {
+      descriptors.forEach((descriptor) => {
         // @ts-ignore
         if (descriptor && updateFuncs[descriptor.name]) {
           // @ts-ignore
diff --git a/packages/utils/src/workers/polygonFillModel.ts b/packages/utils/src/workers/polygonFillModel.ts
index 7a348e0e7e..ba464f6bd0 100644
--- a/packages/utils/src/workers/polygonFillModel.ts
+++ b/packages/utils/src/workers/polygonFillModel.ts
@@ -18,7 +18,7 @@ export const polygonFillModel = async ({
     a_Position,
     filter: a_filter,
     a_vertexId,
-    a_PickingColor: (feature: IEncodeFeature, featureIdx: number) => {
+    a_PickingColor: (feature: IEncodeFeature) => {
       const { id } = feature;
       return enablePicking ? encodePickingColor(id as number) : [0, 0, 0];
     },
@@ -88,7 +88,7 @@ export const polygonFillModel = async ({
         vertexIndex = indexes[vertexIdx];
       }
 
-      descriptors.forEach((descriptor, attributeIdx: number) => {
+      descriptors.forEach((descriptor) => {
         // @ts-ignore
         if (descriptor && updateFuncs[descriptor.name]) {
           // @ts-ignore
diff --git a/stories/3D_Model/Components/amap2_three.tsx b/stories/3D_Model/Components/amap2_three.tsx
deleted file mode 100644
index a8588b2cde..0000000000
--- a/stories/3D_Model/Components/amap2_three.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-// @ts-ignore
-import { Scene } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import { ThreeLayer, ThreeRender } from '@antv/l7-three';
-import * as React from 'react';
-// import { DirectionalLight, Scene as ThreeScene } from 'three';
-import * as THREE from 'three';
-// tslint:disable-next-line:no-submodule-imports
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-
-export default class GlTFThreeJSDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-    );
-    const pointsData = await response.json();
-
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMapV2({
-        center: [111.4453125, 32.84267363195431],
-        pitch: 45,
-        rotation: 30,
-        zoom: 13,
-      }),
-    });
-    this.scene = scene;
-    scene.registerRenderService(ThreeRender);
-    scene.on('loaded', () => {
-      const threeJSLayer = new ThreeLayer({
-        enableMultiPassRenderer: false,
-        // @ts-ignore
-        onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
-          threeScene.add(new THREE.AmbientLight(0xffffff));
-
-          const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
-          sunlight.position.set(0, 80000000, 100000000);
-          sunlight.matrixWorldNeedsUpdate = true;
-          threeScene.add(sunlight);
-
-          // 使用 Three.js glTFLoader 加载模型
-          const loader = new GLTFLoader();
-          loader.load(
-            // 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf',
-            // 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/AnimatedCube/glTF/AnimatedCube.gltf',
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/radar/34M_17.gltf',
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/duck/Duck.gltf', // duck
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/truck/CesiumMilkTruck.gltf', // Truck
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/man/CesiumMan.gltf',
-            'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
-            (gltf) => {
-              // @ts-ignore
-              const model = gltf.scene;
-
-              layer.getSource().data.dataArray.forEach(({ coordinates }) => {
-                layer.adjustMeshToMap(model);
-                // model.scale.set(100, 100, 100)
-                layer.setMeshScale(model, 100, 100, 100);
-
-                const animations = gltf.animations;
-                if (animations && animations.length) {
-                  const mixer = new THREE.AnimationMixer(model);
-                  // @ts-ignore
-                  // for (let i = 0; i < 1; i++) {
-                  const animation = animations[2];
-
-                  // There's .3333 seconds junk at the tail of the Monster animation that
-                  // keeps it from looping cleanly. Clip it at 3 seconds
-
-                  const action = mixer.clipAction(animation);
-
-                  action.play();
-                  // }
-                  layer.addAnimateMixer(mixer);
-                }
-              });
-              // 向场景中添加模型
-              threeScene.add(model);
-
-              let lnglat = [121.107, 30.267069] as [number, number];
-              let altitude = 0;
-              let center = scene.getCenter();
-              // layer.setObjectLngLat(model, lnglat, altitude)
-              // console.log()
-              // layer.setObjectLngLat(model, [center.lng + 0.05, center.lat] as ILngLat, 0)
-              // layer.setObjectLngLat(model, [center.lng + 0.05, center.lat] as ILngLat, 0)
-
-              layer.setObjectLngLat(model, [center.lng + 0.05, center.lat], 0);
-
-              let t = 0;
-              setInterval(() => {
-                t += 0.01;
-                layer.setObjectLngLat(
-                  model,
-                  [center.lng, center.lat + Math.sin(t) * 0.1],
-                  0,
-                );
-                // layer.setObjectLngLat(model, [center.lng + 0.2, center.lat], 0)
-              }, 16);
-
-              // 重绘图层
-              layer.render();
-            },
-          );
-        },
-      })
-        .source({
-          type: 'FeatureCollection',
-          features: [
-            {
-              type: 'Feature',
-              properties: {},
-              geometry: {
-                type: 'Point',
-                coordinates: [111.4453125, 32.84267363195431],
-                // coordinates: [121.107, 30.267069], // 该坐标点在钱塘江入海口附近
-              },
-            },
-          ],
-        })
-        .animate(true);
-      scene.addLayer(threeJSLayer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/3D_Model/Components/amap_car.tsx b/stories/3D_Model/Components/amap_car.tsx
deleted file mode 100644
index bf22fa01a3..0000000000
--- a/stories/3D_Model/Components/amap_car.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-// @ts-ignore
-import { Scene, PolygonLayer } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import { ThreeLayer, ThreeRender } from '@antv/l7-three';
-import * as React from 'react';
-// import { DirectionalLight, Scene as ThreeScene } from 'three';
-import * as THREE from 'three';
-// tslint:disable-next-line:no-submodule-imports
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { animate, easeInOut } from 'popmotion';
-
-let isTravel = false;
-// @ts-ignore
-function travel(
-  // @ts-ignore
-  mesh,
-  // @ts-ignore
-  path,
-  // @ts-ignore
-  duration,
-  // @ts-ignore
-  callback,
-) {
-  if (path.length < 2 || isTravel) return;
-  isTravel = true;
-  let startIndex = 0;
-  const len = path.length;
-  const currentP = path[0],
-    nextP = path[1];
-  const t = duration / len;
-  //@ts-ignore
-  move(currentP, nextP);
-  // @ts-ignore
-  function move(currentP, nextP) {
-    animate({
-      from: {
-        x: currentP.x,
-        y: currentP.y,
-        z: currentP.z,
-      },
-      to: {
-        x: nextP.x,
-        y: nextP.y,
-        z: nextP.z,
-      },
-      ease: easeInOut,
-      duration: t,
-      repeatType: 'loop',
-      onUpdate: (o) => {
-        mesh.position.set(o.x, o.y, o.z);
-      },
-      onComplete: () => {
-        startIndex++;
-        if (startIndex < len - 1) {
-          const currentP = path[startIndex],
-            nextP = path[startIndex + 1];
-          mesh.lookAt(nextP);
-
-          move(currentP, nextP);
-        } else {
-          isTravel = false;
-          callback && callback();
-        }
-      },
-    });
-  }
-}
-
-export default class GlTFThreeJSDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [112, 35.39847],
-        pitch: 45,
-        rotation: 30,
-        zoom: 5,
-      }),
-    });
-    this.scene = scene;
-    // scene.registerRenderService(ThreeRender);
-    scene.on('loaded', () => {
-      scene.registerRenderService(ThreeRender);
-
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-      )
-        .then((d) => d.json())
-        .then((data) => {
-          const polygonlayer = new PolygonLayer({
-            name: '01',
-            zIndex: -1,
-          })
-            .source(data)
-            .color('name', [
-              '#2E8AE6',
-              '#69D1AB',
-              '#DAF291',
-              '#FFD591',
-              '#FF7A45',
-              '#CF1D49',
-            ])
-            .shape('fill')
-            // .select(true)
-            .style({
-              opacity: 1.0,
-            });
-          scene.addLayer(polygonlayer);
-        });
-
-      const threeJSLayer = new ThreeLayer({
-        enableMultiPassRenderer: false,
-        onAddMeshes: (threeScene, layer) => {
-          // 添加光
-          threeScene.add(new THREE.AmbientLight(0xffffff));
-          const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
-          sunlight.position.set(0, 80000000, 100000000);
-          sunlight.matrixWorldNeedsUpdate = true;
-          threeScene.add(sunlight);
-
-          const lineData = [
-            [116.71874999999999, 26.745610382199022],
-            [117.3779296875, 28.8831596093235],
-            [115.75195312499999, 31.466153715024294],
-            [113.466796875, 33.32134852669881],
-            [113.9501953125, 35.85343961959182],
-            [115.400390625, 38.272688535980976],
-            [116.5869140625, 40.3130432088809],
-            [115.6201171875, 42.261049162113856],
-            [112.236328125, 42.94033923363181],
-            [109.3798828125, 41.04621681452063],
-            [103.84277343749999, 39.80853604144591],
-            [98.9208984375, 39.842286020743394],
-            [95.2294921875, 40.713955826286046],
-            [91.7138671875, 39.87601941962116],
-            [90.8349609375, 37.125286284966805],
-            [90.3076171875, 35.88905007936091],
-            [90.703125, 33.284619968887675],
-            [92.94433593749999, 31.98944183792288],
-            [96.2841796875, 32.21280106801518],
-            [98.87695312499999, 32.0639555946604],
-            [102.919921875, 28.459033019728043],
-            [107.9736328125, 28.497660832963472],
-            [108.10546875, 24.206889622398023],
-            [109.072265625, 23.039297747769726],
-            [112.763671875, 24.44714958973082],
-            [116.54296874999999, 25.958044673317843],
-          ];
-          // @ts-ignore
-          const lineCoordData = lineData.map((d) => {
-            // @ts-ignore
-            return layer.lnglatToCoord(d);
-          });
-
-          // @ts-ignore
-          const rawPoints = [];
-          // @ts-ignore
-          lineCoordData.map((d) => {
-            rawPoints.push(new THREE.Vector3(d[0], d[1], 0));
-            return '';
-          });
-          // @ts-ignore
-          const curve = new THREE.CatmullRomCurve3(rawPoints);
-          const points = curve.getPoints(200);
-          const geometry = new THREE.BufferGeometry().setFromPoints(points);
-
-          const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
-
-          const line = new THREE.LineLoop(geometry, material);
-          threeScene.add(line);
-
-          // 使用 Three.js glTFLoader 加载模型
-          // const loader = new GLTFLoader();
-          // loader.load(
-          //   'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/truck/CesiumMilkTruck.gltf', // Truck
-          //   gltf => {
-          //     // 根据 GeoJSON 数据放置模型
-          //     const gltfScene = gltf.scene.clone();
-          //     // setDouble(gltfScene);
-          //     layer.getSource().data.dataArray.forEach(() => {
-          //       layer.adjustMeshToMap(gltfScene);
-          //       gltfScene.scale.set(500000, 500000, 500000);
-
-          //       const animations = gltf.animations;
-          //       if (animations && animations.length) {
-          //         const mixer = new THREE.AnimationMixer(gltfScene);
-          //         // @ts-ignore
-          //         for (let i = 0; i < animations.length; i++) {
-          //           const animation = animations[i];
-
-          //           // There's .3333 seconds junk at the tail of the Monster animation that
-          //           // keeps it from looping cleanly. Clip it at 3 seconds
-
-          //           const action = mixer.clipAction(animation);
-
-          //           action.play();
-          //         }
-          //         layer.addAnimateMixer(mixer);
-          //       }
-
-          //       // 向场景中添加模型
-          //       threeScene.add(gltfScene);
-          //     });
-
-          //     travelLoop();
-          //     function travelLoop() {
-          //       travel(gltfScene, points, 5000, () => {
-          //         travelLoop();
-          //       });
-          //     }
-          //     // 重绘图层
-          //     // layer.render();
-          //   }
-          // );
-        },
-      }).source({
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'Point',
-              coordinates: [112, 35.39847],
-            },
-          },
-        ],
-      });
-      // .animate(true);
-      scene.addLayer(threeJSLayer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/3D_Model/Components/amap_three.tsx b/stories/3D_Model/Components/amap_three.tsx
deleted file mode 100644
index ab42b36399..0000000000
--- a/stories/3D_Model/Components/amap_three.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-// @ts-ignore
-import { Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import { ThreeLayer, ThreeRender } from '@antv/l7-three';
-import * as React from 'react';
-// import { DirectionalLight, Scene as ThreeScene } from 'three';
-import * as THREE from 'three';
-// tslint:disable-next-line:no-submodule-imports
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-
-export default class GlTFThreeJSDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-    );
-    const pointsData = await response.json();
-
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [111.4453125, 32.84267363195431],
-        pitch: 45,
-        rotation: 30,
-        zoom: 13,
-      }),
-    });
-    this.scene = scene;
-    scene.registerRenderService(ThreeRender);
-    scene.on('loaded', () => {
-      const threeJSLayer = new ThreeLayer({
-        enableMultiPassRenderer: false,
-        // @ts-ignore
-        onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
-          threeScene.add(new THREE.AmbientLight(0xffffff));
-          const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
-          sunlight.position.set(0, 80000000, 100000000);
-          sunlight.matrixWorldNeedsUpdate = true;
-          threeScene.add(sunlight);
-
-          let center = scene.getCenter();
-
-          let cubeGeometry = new THREE.BoxBufferGeometry(10000, 10000, 10000);
-          let cubeMaterial = new THREE.MeshNormalMaterial();
-          let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
-          layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
-          threeScene.add(cube);
-
-          // 使用 Three.js glTFLoader 加载模型
-          const loader = new GLTFLoader();
-          loader.load(
-            // 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf',
-            // 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/AnimatedCube/glTF/AnimatedCube.gltf',
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/radar/34M_17.gltf',
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/duck/Duck.gltf', // duck
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/truck/CesiumMilkTruck.gltf', // Truck
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/man/CesiumMan.gltf',
-            'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
-            (gltf) => {
-              // 根据 GeoJSON 数据放置模型
-              layer.getSource().data.dataArray.forEach(({ coordinates }) => {
-                const gltfScene = gltf.scene;
-
-                layer.adjustMeshToMap(gltfScene);
-                // gltfScene.scale.set(1000, 1000, 1000)
-                layer.setMeshScale(gltfScene, 1000, 1000, 1000);
-
-                layer.setObjectLngLat(
-                  gltfScene,
-                  [coordinates[0] + 0.02, coordinates[1]],
-                  0,
-                );
-
-                const animations = gltf.animations;
-                if (animations && animations.length) {
-                  const mixer = new THREE.AnimationMixer(gltfScene);
-                  // @ts-ignore
-                  // for (let i = 0; i < 1; i++) {
-                  const animation = animations[2];
-
-                  // There's .3333 seconds junk at the tail of the Monster animation that
-                  // keeps it from looping cleanly. Clip it at 3 seconds
-
-                  const action = mixer.clipAction(animation);
-
-                  action.play();
-                  // }
-                  layer.addAnimateMixer(mixer);
-                }
-                // layer.setObjectLngLat(gltfScene, [center.lng + 0.05, center.lat] as ILngLat, 0)
-                let t = 0;
-                setInterval(() => {
-                  t += 0.01;
-                  layer.setObjectLngLat(
-                    gltfScene,
-                    [center.lng, center.lat + Math.sin(t) * 0.1],
-                    0,
-                  );
-                }, 16);
-
-                // 向场景中添加模型
-                threeScene.add(gltfScene);
-              });
-              // 重绘图层
-              layer.render();
-            },
-          );
-        },
-      })
-        .source({
-          type: 'FeatureCollection',
-          features: [
-            {
-              type: 'Feature',
-              properties: {},
-              geometry: {
-                type: 'Point',
-                coordinates: [111.4453125, 32.84267363195431],
-              },
-            },
-          ],
-        })
-        .animate(true);
-      scene.addLayer(threeJSLayer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/3D_Model/Components/aspace.tsx b/stories/3D_Model/Components/aspace.tsx
deleted file mode 100644
index 3a8e63e8d3..0000000000
--- a/stories/3D_Model/Components/aspace.tsx
+++ /dev/null
@@ -1,440 +0,0 @@
-// @ts-ignore
-import { Scene, AMap } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import { ThreeLayer, ThreeRender } from '@antv/l7-three';
-import * as React from 'react';
-// import { DirectionalLight, Scene as ThreeScene } from 'three';
-import * as THREE from 'three';
-// tslint:disable-next-line:no-submodule-imports
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
-import { animate, easeInOut } from 'popmotion';
-interface IView {
-  lng: number;
-  lat: number;
-  pitch: number;
-  rotation: number;
-  zoom: number;
-}
-function changeValue(
-  startValue: number | IView,
-  endValue: number | IView,
-  duration: number = 500,
-  callback: any,
-  complete?: any,
-) {
-  if (typeof startValue === 'number') {
-    animate({
-      from: {
-        v: startValue,
-      },
-      to: {
-        v: endValue,
-      },
-      ease: easeInOut,
-      duration,
-      onUpdate: (o) => {
-        callback(o.v);
-      },
-      onComplete: () => {
-        complete && complete();
-      },
-    });
-  } else {
-    animate({
-      from: {
-        lng: startValue.lng,
-        lat: startValue.lat,
-        pitch: startValue.pitch,
-        rotation: startValue.rotation,
-        zoom: startValue.zoom,
-      },
-      to: {
-        lng: (endValue as IView).lng,
-        lat: (endValue as IView).lat,
-        pitch: (endValue as IView).pitch,
-        rotation: (endValue as IView).rotation,
-        zoom: (endValue as IView).zoom,
-      },
-      ease: easeInOut,
-      duration,
-      onUpdate: (o) => {
-        callback(o);
-      },
-      onComplete: () => {
-        complete && complete();
-      },
-    });
-  }
-}
-export default class Aspace extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const raycaster = new THREE.Raycaster();
-    let lng = 120.1;
-    let lat = 30.265;
-
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [lng, lat],
-        pitch: 70,
-        rotation: 220,
-        zoom: 16,
-      }),
-    });
-    this.scene = scene;
-    scene.registerRenderService(ThreeRender);
-
-    let mouse = new THREE.Vector2();
-    let zspace: THREE.Object3D,
-      aspace: THREE.Object3D,
-      ASpaceTextMesh: THREE.Object3D,
-      ZSpaceTextMesh: THREE.Object3D;
-    scene.on('loaded', () => {
-      const center = scene.getCenter();
-
-      const threeJSLayer = new ThreeLayer({
-        enableMultiPassRenderer: false,
-        // @ts-ignore
-        onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
-          threeScene.add(new THREE.AmbientLight(0xffffff));
-          const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
-          sunlight.position.set(0, 80000000, 100000000);
-          sunlight.matrixWorldNeedsUpdate = true;
-          threeScene.add(sunlight);
-
-          // map
-          // https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*gA0NRbuOF5cAAAAAAAAAAAAAARQnAQ
-
-          // height
-          // https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*eYFaRYlnnOUAAAAAAAAAAAAAARQnAQ
-
-          let image = new Image();
-          image.crossOrigin = '';
-          image.src =
-            'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*eYFaRYlnnOUAAAAAAAAAAAAAARQnAQ';
-          image.onload = () => {
-            let canvas: HTMLCanvasElement = document.createElement('canvas');
-            canvas.width = image.width;
-            canvas.height = image.height;
-            let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-            ctx.drawImage(image, 0, 0, image.width, image.height);
-            let heightData = ctx.getImageData(0, 0, image.width, image.height)
-              .data;
-
-            let s = 53000;
-
-            var geometry = new THREE.PlaneGeometry(s, s, 255, 255);
-
-            geometry.vertices.map((v, i) => {
-              let r = heightData[i * 4];
-              let g = heightData[i * 4 + 1];
-              let b = heightData[i * 4 + 2];
-              let h =
-                -10000.0 +
-                (r * 255.0 * 256.0 * 256.0 + g * 255.0 * 256.0 + b * 255.0) *
-                  0.1;
-              h = h / 20 - 127600;
-              h = Math.max(0, h);
-
-              v.z = h;
-            });
-            var material = new THREE.MeshPhongMaterial({
-              transparent: true,
-              // opacity: 0.6,
-              map: new THREE.TextureLoader().load(
-                'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*gA0NRbuOF5cAAAAAAAAAAAAAARQnAQ',
-              ),
-            });
-            var plane = new THREE.Mesh(geometry, material);
-            layer.setObjectLngLat(plane, [120.1008, 30.2573], 0);
-            plane.position.z = 10;
-            threeScene.add(plane);
-          };
-
-          // 使用 Three.js glTFLoader 加载模型
-          const loader = new GLTFLoader();
-          loader.load(
-            'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
-            (gltf) => {
-              const antModel = gltf.scene;
-              layer.adjustMeshToMap(antModel);
-              layer.setMeshScale(antModel, 20, 20, 20);
-              layer.setObjectLngLat(
-                antModel,
-                [center.lng - 0.002, center.lat],
-                0,
-              );
-
-              const animations = gltf.animations;
-              if (animations && animations.length) {
-                const mixer = new THREE.AnimationMixer(antModel);
-                const animation = animations[1];
-                const action = mixer.clipAction(animation);
-                action.play();
-                layer.addAnimateMixer(mixer);
-              }
-              antModel.rotation.y = Math.PI;
-              // 向场景中添加模型
-              threeScene.add(antModel);
-              // 重绘图层
-              layer.render();
-            },
-          );
-
-          let v = `
-          varying vec2 vUv;
-          varying vec4 worldPosition;
-          void main() {
-              vUv = uv;
-              worldPosition = modelMatrix * vec4(position, 1.0);
-              gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-          }`;
-          let f = `
-          varying vec2 vUv;
-          varying vec4 worldPosition;
-          uniform vec3 color;
-          void main() {
-            gl_FragColor = vec4(color, fract(worldPosition.z / 50.0));
-          }`;
-          let shadermaterial = new THREE.ShaderMaterial({
-            uniforms: {
-              color: {
-                value: new THREE.Vector3(0.21372549, 0.34705882, 0.56470588),
-              },
-            },
-            vertexShader: v,
-            fragmentShader: f,
-          });
-
-          let fbxLoaded = new FBXLoader();
-          // load ZSpace
-          fbxLoaded.load(
-            'https://gw.alipayobjects.com/os/bmw-prod/af1652c9-3c4f-4e73-ac4c-1f78fefbaf6a.fbx',
-            (gltf) => {
-              zspace = gltf;
-              layer.adjustMeshToMap(zspace);
-              // @ts-ignore
-              zspace.children[0].material = shadermaterial;
-              layer.setMeshScale(zspace, 10, 10, 10);
-
-              layer.setObjectLngLat(zspace, [120.1015, 30.2661], 0);
-              zspace.rotation.x = Math.PI * 2;
-              zspace.rotation.z = -Math.PI * (-2 / 15);
-              threeScene.add(zspace);
-            },
-          );
-
-          fbxLoaded.load(
-            'https://gw.alipayobjects.com/os/bmw-prod/11d6e4c1-bd5b-4dc1-bae5-ac51c14e9056.fbx',
-            (model) => {
-              aspace = model;
-              layer.adjustMeshToMap(aspace);
-              // @ts-ignore
-              aspace.children[0].material = shadermaterial;
-
-              layer.setMeshScale(aspace, 8, 8, 8);
-              layer.setObjectLngLat(aspace, [120.099, 30.261], 0);
-              aspace.rotation.x = Math.PI * 2;
-              aspace.rotation.z = -Math.PI * (3 / 15);
-              threeScene.add(aspace);
-            },
-          );
-
-          let textLoader = new THREE.FontLoader();
-          textLoader.load(
-            'https://gw.alipayobjects.com/os/bmw-prod/0a3f46eb-294e-4d95-87f2-052c26ad4bf1.json',
-            (font) => {
-              let aspaceGeo = new THREE.TextGeometry('ASpace', {
-                size: 360, //字号大小，一般为大写字母的高度
-                height: 50, //文字的厚度
-                font: font, //字体，默认是'helvetiker'，需对应引用的字体文件
-                bevelThickness: 10, //倒角厚度
-                bevelSize: 10, //倒角宽度
-                curveSegments: 30, //弧线分段数，使得文字的曲线更加光滑
-                bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
-              });
-              aspaceGeo.center();
-              let zspaceGeo = new THREE.TextGeometry('ZSpace', {
-                size: 360, //字号大小，一般为大写字母的高度
-                height: 50, //文字的厚度
-                font: font, //字体，默认是'helvetiker'，需对应引用的字体文件
-                bevelThickness: 10, //倒角厚度
-                bevelSize: 10, //倒角宽度
-                curveSegments: 30, //弧线分段数，使得文字的曲线更加光滑
-                bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
-              });
-              zspaceGeo.center();
-
-              let fontMat = new THREE.MeshPhongMaterial({
-                color: 0xcccccc,
-                shininess: 60,
-                specular: 0xcccccc,
-              });
-
-              const testHeight = 900;
-
-              ASpaceTextMesh = new THREE.Mesh(aspaceGeo, fontMat);
-              ASpaceTextMesh.rotation.x = Math.PI / 2;
-              ASpaceTextMesh.rotation.y = (-Math.PI * 3) / 4;
-              layer.setObjectLngLat(
-                ASpaceTextMesh,
-                [120.099, 30.261],
-                testHeight,
-              );
-              threeScene.add(ASpaceTextMesh);
-
-              ZSpaceTextMesh = new THREE.Mesh(zspaceGeo, fontMat);
-              ZSpaceTextMesh.rotation.x = Math.PI / 2;
-              ZSpaceTextMesh.rotation.y = (-Math.PI * 3) / 4;
-              layer.setObjectLngLat(
-                ZSpaceTextMesh,
-                [120.103, 30.2661],
-                testHeight,
-              );
-              threeScene.add(ZSpaceTextMesh);
-
-              getH(0, 200);
-              function getH(h1: number, h2: number) {
-                changeValue(
-                  h1,
-                  h2,
-                  1000,
-                  (h: number) => {
-                    ASpaceTextMesh.position.z = testHeight + h;
-                    ZSpaceTextMesh.position.z = testHeight + h;
-                  },
-                  () => {
-                    setTimeout(() => getH(h2, h1), 10);
-                  },
-                );
-              }
-            },
-          );
-        },
-      })
-        .source({
-          type: 'FeatureCollection',
-          features: [
-            {
-              type: 'Feature',
-              properties: {},
-              geometry: {
-                type: 'Point',
-                coordinates: [111.4453125, 32.84267363195431],
-              },
-            },
-          ],
-        })
-        .animate(true);
-      scene.addLayer(threeJSLayer);
-      // @ts-ignore
-      let currentCamera = threeJSLayer.threeRenderService.getRenderCamera();
-      let currentView: IView = {
-        lng: center.lng,
-        lat: center.lat,
-        pitch: 70,
-        rotation: 220,
-        zoom: 16,
-      };
-
-      scene.on('zoom', () => {
-        let cen = scene.getCenter();
-        currentView.lng = cen.lng;
-        currentView.lat = cen.lat;
-        currentView.pitch = scene.getPitch();
-        currentView.zoom = scene.getZoom();
-      });
-
-      scene.getMapService().on('mapchange', (e: any) => {
-        // @ts-ignore
-        currentCamera = threeJSLayer.getRenderCamera();
-        currentView.pitch = scene.getPitch();
-      });
-
-      let ASpaceView = {
-        lng: 120.108009,
-        lat: 30.251129,
-        pitch: 83,
-        rotation: 225,
-        zoom: 16,
-      };
-      let ZSpaceView = {
-        lng: 120.110726,
-        lat: 30.256481,
-        pitch: 80,
-        rotation: 220,
-        zoom: 16,
-      };
-
-      scene.on('click', (ev) => {
-        // @ts-ignore
-        let size = scene?.map?.getSize();
-        mouse.x = (ev.pixel.x / size.width) * 2 - 1;
-        mouse.y = -(ev.pixel.y / size.height) * 2 + 1;
-        raycaster.setFromCamera(mouse, currentCamera);
-        var intersects = raycaster.intersectObjects([zspace, aspace], true);
-        if (intersects.length > 0) {
-          let object = intersects[0].object;
-          if (object.name === 'Z空间') {
-            selectSpace(currentView, ZSpaceView, ZSpaceTextMesh);
-          } else {
-            selectSpace(currentView, ASpaceView, ASpaceTextMesh);
-          }
-        }
-      });
-
-      function selectSpace(
-        currentView: IView,
-        targetView: IView,
-        spaceText?: THREE.Object3D,
-      ) {
-        if (spaceText) {
-          changeValue(
-            spaceText.rotation.y,
-            spaceText.rotation.y + Math.PI * 2,
-            500,
-            (r: number) => {
-              spaceText.rotation.y = r;
-            },
-          );
-        }
-
-        changeValue(currentView, targetView, 500, (view: IView) => {
-          scene.setCenter([view.lng, view.lat]);
-          scene.setPitch(view.pitch);
-          scene.setRotation(view.rotation);
-          scene.setZoom(view.zoom);
-
-          currentView.lng = view.lng;
-          currentView.lat = view.lat;
-          currentView.pitch = view.pitch;
-          currentView.rotation = view.rotation;
-          currentView.zoom = view.zoom;
-        });
-      }
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/3D_Model/Components/mapbox_three.tsx b/stories/3D_Model/Components/mapbox_three.tsx
deleted file mode 100644
index 38c057d005..0000000000
--- a/stories/3D_Model/Components/mapbox_three.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-// @ts-ignore
-import { PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import { ThreeLayer, ThreeRender } from '@antv/l7-three';
-import * as React from 'react';
-// import { DirectionalLight, Scene as ThreeScene } from 'three';
-import * as THREE from 'three';
-// tslint:disable-next-line:no-submodule-imports
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { animate, easeInOut } from 'popmotion';
-import { Object3D, Vector3 } from 'three';
-
-type ILngLat = [number, number];
-let isTravel = false;
-
-function travel(
-  mesh: Object3D,
-  path: Vector3[],
-  duration: number,
-  callback?: () => any,
-) {
-  if (path.length < 2 || isTravel) return;
-  isTravel = true;
-  let startIndex = 0,
-    len = path.length;
-  let currentP = path[0],
-    nextP = path[1];
-  let t = duration / len;
-
-  move(currentP, nextP);
-  function move(currentP: Vector3, nextP: Vector3) {
-    animate({
-      from: {
-        x: currentP.x,
-        y: currentP.y,
-        z: currentP.z,
-      },
-      to: {
-        x: nextP.x,
-        y: nextP.y,
-        z: nextP.z,
-      },
-      ease: easeInOut,
-      duration: t,
-      repeatType: 'loop',
-      onUpdate: (o) => {
-        mesh.position.set(o.x, o.y, o.z);
-      },
-      onComplete: () => {
-        startIndex++;
-        if (startIndex < len - 1) {
-          let currentP = path[startIndex],
-            nextP = path[startIndex + 1];
-          mesh.lookAt(nextP);
-
-          move(currentP, nextP);
-        } else {
-          isTravel = false;
-          callback && callback();
-        }
-      },
-    });
-  }
-}
-
-export default class GlTFThreeJSDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [112, 35.39847],
-        pitch: 45,
-        rotation: 30,
-        zoom: 5,
-      }),
-    });
-    this.scene = scene;
-    scene.registerRenderService(ThreeRender);
-    scene.on('loaded', async () => {
-      const response = await fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-      );
-      const data = await response.json();
-      const polygonlayer = new PolygonLayer({
-        name: '01',
-      });
-
-      polygonlayer
-        .source(data)
-        .color('name', [
-          '#2E8AE6',
-          '#69D1AB',
-          '#DAF291',
-          '#FFD591',
-          '#FF7A45',
-          '#CF1D49',
-        ])
-        .shape('fill')
-        .select(true)
-        .style({
-          opacity: 1.0,
-        });
-      scene.addLayer(polygonlayer);
-      const threeJSLayer = new ThreeLayer({
-        enableMultiPassRenderer: false,
-        // @ts-ignore
-        onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
-          // 添加光
-          threeScene.add(new THREE.AmbientLight(0xffffff));
-          const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
-          sunlight.position.set(0, 80000000, 100000000);
-          sunlight.matrixWorldNeedsUpdate = true;
-          threeScene.add(sunlight);
-
-          let lineData: ILngLat[] = [
-            [116.71874999999999, 26.745610382199022],
-            [117.3779296875, 28.8831596093235],
-            [115.75195312499999, 31.466153715024294],
-            [113.466796875, 33.32134852669881],
-            [113.9501953125, 35.85343961959182],
-            [115.400390625, 38.272688535980976],
-            [116.5869140625, 40.3130432088809],
-            [115.6201171875, 42.261049162113856],
-            [112.236328125, 42.94033923363181],
-            [109.3798828125, 41.04621681452063],
-            [103.84277343749999, 39.80853604144591],
-            [98.9208984375, 39.842286020743394],
-            [95.2294921875, 40.713955826286046],
-            [91.7138671875, 39.87601941962116],
-            [90.8349609375, 37.125286284966805],
-            [90.3076171875, 35.88905007936091],
-            [90.703125, 33.284619968887675],
-            [92.94433593749999, 31.98944183792288],
-            [96.2841796875, 32.21280106801518],
-            [98.87695312499999, 32.0639555946604],
-            [102.919921875, 28.459033019728043],
-            [107.9736328125, 28.497660832963472],
-            [108.10546875, 24.206889622398023],
-            [109.072265625, 23.039297747769726],
-            [112.763671875, 24.44714958973082],
-            [116.54296874999999, 25.958044673317843],
-          ];
-
-          let lineCoordData = lineData.map((d: ILngLat) => {
-            return layer.lnglatToCoord(d);
-          });
-          // console.log(lineCoordData)
-
-          var material = new THREE.LineBasicMaterial({
-            color: 0x0000ff,
-          });
-
-          var rawPoints: THREE.Vector3[] = [];
-          lineCoordData.map((d) => {
-            rawPoints.push(new THREE.Vector3(d[0], d[1], 0));
-          });
-          var curve = new THREE.CatmullRomCurve3(rawPoints);
-          var points = curve.getPoints(200);
-          var geometry = new THREE.BufferGeometry().setFromPoints(points);
-
-          var material = new THREE.LineBasicMaterial({ color: 0xff0000 });
-
-          var line = new THREE.LineLoop(geometry, material);
-          threeScene.add(line);
-
-          // console.log(line)
-          // animate({
-          //   from: 0,
-          //   to: 100,
-          //   duration: 3000,
-          //   onUpdate: latest => console.log(latest)
-          // })
-
-          // 使用 Three.js glTFLoader 加载模型
-          const loader = new GLTFLoader();
-          loader.load(
-            // 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf',
-            // 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/AnimatedCube/glTF/AnimatedCube.gltf',
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/radar/34M_17.gltf',
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/duck/Duck.gltf', // duck
-            'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/truck/CesiumMilkTruck.gltf', // Truck
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/man/CesiumMan.gltf',
-            // 'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
-            (gltf) => {
-              // 根据 GeoJSON 数据放置模型
-              const gltfScene = gltf.scene.clone();
-              layer.getSource().data.dataArray.forEach(({ coordinates }) => {
-                layer.adjustMeshToMap(gltfScene);
-                gltfScene.scale.set(500000, 500000, 500000);
-
-                // gltfScene.rotation.y = Math.PI
-
-                const animations = gltf.animations;
-                if (animations && animations.length) {
-                  const mixer = new THREE.AnimationMixer(gltfScene);
-                  // @ts-ignore
-                  for (let i = 0; i < animations.length; i++) {
-                    const animation = animations[i];
-
-                    // There's .3333 seconds junk at the tail of the Monster animation that
-                    // keeps it from looping cleanly. Clip it at 3 seconds
-
-                    const action = mixer.clipAction(animation);
-
-                    action.play();
-                  }
-                  layer.addAnimateMixer(mixer);
-                }
-
-                // 向场景中添加模型
-                threeScene.add(gltfScene);
-              });
-
-              let center = scene.getCenter();
-              // layer.setObjectLngLat(gltfScene, [center.lng + 0.05, center.lat] as ILngLat, 0)
-
-              // let t = 0
-              // setInterval(() => {
-              //   t += 0.01
-              //   layer.setObjectLngLat(gltfScene, [center.lng, center.lat + Math.sin(t) * 10] as ILngLat, 0)
-              //   // layer.setObjectLngLat(model, [center.lng + 0.2, center.lat], 0)
-              // }, 16)
-
-              // travel(gltfScene, points, 5000)
-              travelLoop();
-              function travelLoop() {
-                travel(gltfScene, points, 5000, () => {
-                  travelLoop();
-                });
-              }
-              // 重绘图层
-              layer.render();
-            },
-          );
-        },
-      })
-        .source({
-          type: 'FeatureCollection',
-          features: [
-            {
-              type: 'Feature',
-              properties: {},
-              geometry: {
-                type: 'Point',
-                coordinates: [112, 35.39847],
-              },
-            },
-          ],
-        })
-        .animate(true);
-      scene.addLayer(threeJSLayer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/3D_Model/Components/threeRender.tsx b/stories/3D_Model/Components/threeRender.tsx
deleted file mode 100644
index 41d7dc7723..0000000000
--- a/stories/3D_Model/Components/threeRender.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-// @ts-ignore
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import { ThreeLayer, ThreeRender } from '@antv/l7-three';
-import * as React from 'react';
-// import { DirectionalLight, Scene as ThreeScene } from 'three';
-import * as THREE from 'three';
-// tslint:disable-next-line:no-submodule-imports
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-
-export default class GlTFThreeJSDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-    );
-    const pointsData = await response.json();
-
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        center: [121.4, 31.258134],
-        pitch: 45,
-        rotation: 30,
-        zoom: 15,
-      }),
-    });
-    scene.registerRenderService(ThreeRender);
-    this.scene = scene;
-    scene.on('loaded', async () => {
-      // scene.registerRenderService(ThreeRender);
-      const response = await fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-      );
-      const data = await response.json();
-      const imageLayer = new PointLayer()
-        .source(
-          // [{
-          //   longitude: 120,
-          //   latitude: 30
-          // }]
-          data,
-          {
-            parser: {
-              type: 'json',
-              x: 'longitude',
-              y: 'latitude',
-            },
-          },
-        )
-        .shape('triangle')
-        .color('red')
-        .active(true)
-        .size(20)
-        .animate(true);
-      // scene.addLayer(imageLayer);
-
-      const threeJSLayer = new ThreeLayer({
-        enableMultiPassRenderer: false,
-        // @ts-ignore
-        onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
-          threeScene.add(new THREE.AmbientLight(0xffffff));
-          const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
-          sunlight.position.set(0, 80000000, 100000000);
-          sunlight.matrixWorldNeedsUpdate = true;
-          threeScene.add(sunlight);
-          // 使用 Three.js glTFLoader 加载模型
-
-          let center = scene.getCenter();
-
-          const loader = new GLTFLoader();
-          loader.load(
-            // 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf',
-            // 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/AnimatedCube/glTF/AnimatedCube.gltf',
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/radar/34M_17.gltf',
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/duck/Duck.gltf', // duck
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/truck/CesiumMilkTruck.gltf', // Truck
-            // 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/man/CesiumMan.gltf',
-            'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
-            (gltf) => {
-              // 根据 GeoJSON 数据放置模型
-              layer.getSource().data.dataArray.forEach(({ coordinates }) => {
-                const gltfScene = gltf.scene;
-
-                layer.adjustMeshToMap(gltfScene);
-                layer.setMeshScale(gltfScene, 10, 10, 10);
-
-                const animations = gltf.animations;
-                if (animations && animations.length) {
-                  const mixer = new THREE.AnimationMixer(gltfScene);
-                  // @ts-ignore
-                  // for (let i = 0; i < 1; i++) {
-                  const animation = animations[2];
-
-                  // There's .3333 seconds junk at the tail of the Monster animation that
-                  // keeps it from looping cleanly. Clip it at 3 seconds
-
-                  const action = mixer.clipAction(animation);
-
-                  action.play();
-                  // }
-                  layer.addAnimateMixer(mixer);
-                }
-
-                // 向场景中添加模型
-                threeScene.add(gltfScene);
-
-                // layer.setObjectLngLat(gltfScene, [120, 30], 0)
-                // @ts-ignore
-                // console.log(layer.mapService.lngLatToCoord([121.4, 31.258134]))
-
-                // let t = 0
-                // setInterval(() => {
-                //   t += 0.01
-                //   layer.setObjectLngLat(gltfScene, [center.lng, center.lat + Math.sin(t) * 0.005] as ILngLat, 0)
-                //   // layer.setObjectLngLat(model, [center.lng + 0.2, center.lat], 0)
-                // }, 16)
-              });
-              // 重绘图层
-              layer.render();
-            },
-          );
-        },
-      })
-        .source({
-          type: 'FeatureCollection',
-          features: [
-            {
-              type: 'Feature',
-              properties: {},
-              geometry: {
-                type: 'Point',
-                coordinates: [121.4, 31.258134],
-              },
-            },
-          ],
-        })
-        .animate(true);
-      scene.addLayer(threeJSLayer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/3D_Model/Components/threejsmap.tsx b/stories/3D_Model/Components/threejsmap.tsx
deleted file mode 100644
index 36e5689524..0000000000
--- a/stories/3D_Model/Components/threejsmap.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-// @ts-ignore
-import { Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import { ThreeLayer, ThreeRender } from '@antv/l7-three';
-import * as React from 'react';
-import * as THREE from 'three';
-
-const points = [
-  [120.44353624, 22.44126139],
-  [120.64050836, 22.24136664],
-  [120.70155111, 21.92708306],
-  [120.87288601, 21.89738661],
-  [120.91492974, 22.30271186],
-  [121.03327772, 22.65070394],
-  [121.32468397, 22.94568359],
-  [121.47954183, 23.3223055],
-  [121.64384793, 24.09772976],
-  [121.80915717, 24.33907227],
-  [121.89250353, 24.6179267],
-  [121.84504259, 24.83625488],
-  [122.01220106, 25.00145101],
-  [121.91709391, 25.13789361],
-  [121.62302734, 25.29467556],
-  [121.02468424, 25.04048774],
-  [120.82376736, 24.68830973],
-  [120.68867757, 24.60069417],
-  [120.24576172, 23.84053168],
-  [120.10276177, 23.70096951],
-  [120.10784668, 23.34126356],
-  [120.02320774, 23.10765544],
-  [120.13473334, 22.99400635],
-  [120.29720052, 22.53133111],
-  [120.44353624, 22.44126139],
-];
-
-function iniCylinder(size: number, height: number) {
-  const geometry = new THREE.CylinderGeometry(size, size, height, 32);
-  const material = new THREE.MeshBasicMaterial({
-    color: '#0ff',
-    transparent: true,
-    opacity: 0.5,
-    depthTest: false,
-  });
-  const cylinder = new THREE.Mesh(geometry, material);
-  return cylinder;
-}
-
-async function initPlane(text: string, src: string) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.src = src;
-    image.crossOrigin = 'none';
-    image.onload = function() {
-      const width = image.width;
-      const height = image.height;
-      const canvas = document.createElement('canvas');
-      canvas.width = width * 10;
-      canvas.height = height * 10;
-      const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-      ctx.globalAlpha = 0.4;
-      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-      ctx.globalAlpha = 1;
-      ctx.fillStyle = 'rgb(30, 160, 30)';
-      ctx.font = `${canvas.height / 3}px bold PingFang-SC-Bold`;
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillText(text, canvas.width / 2, canvas.height / 2);
-
-      const texture = new THREE.CanvasTexture(canvas);
-      const size = 320000;
-      const planeGeometry = new THREE.PlaneBufferGeometry(
-        size,
-        (size * height) / width,
-        1,
-      );
-      const material = new THREE.MeshBasicMaterial({
-        color: 0xffff00,
-        side: THREE.DoubleSide,
-        map: texture,
-        blending: THREE.AdditiveBlending,
-      });
-
-      const plane = new THREE.Mesh(planeGeometry, material);
-      plane.renderOrder = 10;
-
-      resolve(plane);
-    };
-  });
-}
-
-const taiwancity = [
-  {
-    // 台北
-    lng: 121.5,
-    lat: 25.05,
-    population: 2602418,
-  },
-  {
-    // 台中
-    lng: 120.5804443359,
-    lat: 24.2,
-    population: 2820787,
-  },
-  {
-    // 台南
-    lng: 120.193176269531,
-    lat: 22.9963233068,
-    population: 1874917,
-  },
-  {
-    // 高雄
-    lng: 120.30578613281,
-    lat: 22.62415215809,
-    population: 2765932,
-  },
-  {
-    // 桃园
-    lng: 121.15,
-    lat: 24.9,
-    population: 2268807,
-  },
-];
-
-export default class Threemap extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120.5, 24],
-        pitch: 60,
-        rotation: 0,
-        zoom: 8.2,
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-
-    scene.registerRenderService(ThreeRender);
-
-    const img1 =
-      'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*zMw0T6gEIZYAAAAAAAAAAAAAARQnAQ';
-
-    let plane0 = (await initPlane('台北：260.24万', img1)) as THREE.Object3D;
-    let plane1 = (await initPlane('台中：282.07万', img1)) as THREE.Object3D;
-    let plane2 = (await initPlane('台南：187.49万', img1)) as THREE.Object3D;
-    let plane3 = (await initPlane('高雄：276.59万', img1)) as THREE.Object3D;
-    let plane4 = (await initPlane('桃园：266.88万', img1)) as THREE.Object3D;
-    scene.on('loaded', () => {
-      const threeJSLayer = new ThreeLayer({
-        enableMultiPassRenderer: false,
-        // @ts-ignore
-        onAddMeshes: (threeScene: THREE.Scene, layer: ThreeLayer) => {
-          threeScene.add(new THREE.AmbientLight(0xffffff));
-          const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
-          sunlight.position.set(0, 80000000, 100000000);
-          sunlight.matrixWorldNeedsUpdate = true;
-          threeScene.add(sunlight);
-
-          // @ts-ignore
-          let lnglatPoints = points.map((p) => layer.lnglatToCoord(p));
-
-          const shape = new THREE.Shape();
-
-          shape.moveTo(lnglatPoints[0][0], lnglatPoints[0][1]);
-          for (let i = 1; i < lnglatPoints.length; i++) {
-            shape.lineTo(lnglatPoints[i][0], lnglatPoints[i][1]);
-          }
-          shape.lineTo(lnglatPoints[0][0], lnglatPoints[0][1]);
-
-          const h = 100000;
-          const extrudeSettings = {
-            steps: 2,
-            depth: h,
-            bevelEnabled: true,
-            bevelThickness: 1,
-            bevelSize: 1,
-            bevelOffset: 0,
-            bevelSegments: 1,
-          };
-          const v0 = `
-          void main() {
-              gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-          }`;
-
-          const f0 = `
-          void main() {
-            gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
-          }`;
-
-          const v = `
-          varying vec2 vUv;
-          varying float h;
-          void main() {
-              vUv = uv;
-              h = position.z;
-              gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-          }`;
-
-          const f = `
-          varying vec2 vUv;
-          varying float h;
-          void main() {
-            gl_FragColor = vec4(0.92549, 1.0, 0.91372549, 1.0 - h/${h}.0);
-          }`;
-
-          const material = new THREE.ShaderMaterial({
-            transparent: true,
-            opacity: 0,
-            depthWrite: false,
-            vertexShader: v0,
-            fragmentShader: f0,
-          });
-          const shader_material = new THREE.ShaderMaterial({
-            transparent: true,
-            vertexShader: v,
-            fragmentShader: f,
-            side: THREE.DoubleSide, // 双面可见
-          });
-
-          const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
-          const mesh = new THREE.Mesh(geometry, [material, shader_material]);
-          mesh.renderOrder = -1;
-          threeScene.add(mesh);
-
-          let planes = [plane0, plane1, plane2, plane3, plane4];
-
-          taiwancity.map(
-            (item: { lng: number; lat: number; population: number }, index) => {
-              let cylinderSize = item.population / 50;
-              let cylinderHeight = item.population / 10;
-
-              planes[index].rotation.x = Math.PI / 2;
-              layer.setObjectLngLat(
-                planes[index],
-                [item.lng, item.lat],
-                cylinderHeight * 1.5,
-              );
-              threeScene.add(planes[index]);
-
-              let cylinder = iniCylinder(cylinderSize, cylinderHeight);
-              cylinder.rotation.x = Math.PI / 2;
-              layer.setObjectLngLat(
-                cylinder,
-                [item.lng, item.lat],
-                cylinderHeight / 2,
-              );
-              threeScene.add(cylinder);
-            },
-          );
-
-          layer.setUpdate(() => {
-            let z = layer.getRenderCamera().rotation.z;
-            planes.map((p) => (p.rotation.y = z));
-          });
-        },
-      })
-        .source({
-          type: 'FeatureCollection',
-          features: [
-            {
-              type: 'Feature',
-              properties: {},
-              geometry: {
-                type: 'Point',
-                coordinates: [111.4453125, 32.84267363195431],
-              },
-            },
-          ],
-        })
-        .animate(true);
-      scene.addLayer(threeJSLayer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/3D_Model/model.stories.tsx b/stories/3D_Model/model.stories.tsx
deleted file mode 100644
index 885b1977bb..0000000000
--- a/stories/3D_Model/model.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import AMapModel from './Components/amap_three';
-import AMap2Model from './Components/amap2_three';
-import MapboxModel from './Components/mapbox_three';
-import ThreeRender from './Components/threeRender';
-import Threemap from './Components/threejsmap';
-import Aspace from './Components/aspace';
-import Car from './Components/amap_car';
-
-storiesOf('3D 模型', module)
-  .add('ThreeJS Render', () => <ThreeRender />, {})
-  .add('高德模型1.x', () => <AMapModel />, {})
-  .add('高德模型2.x', () => <AMap2Model />, {})
-  .add('Mapbox模型', () => <MapboxModel />, {})
-  .add('Aspace', () => <Aspace />, {})
-  .add('Car', () => <Car />, {})
-  .add('Threemap', () => <Threemap />, {});
diff --git a/stories/Animation/Animation.stories.tsx b/stories/Animation/Animation.stories.tsx
deleted file mode 100644
index 44b1b9e505..0000000000
--- a/stories/Animation/Animation.stories.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import Polygon from './components/Polygon';
-// @ts-ignore
-storiesOf('动画', module).add('动态更新指定 feature(s)', () => <Polygon />);
diff --git a/stories/Animation/components/Polygon.tsx b/stories/Animation/components/Polygon.tsx
deleted file mode 100644
index a3591953a6..0000000000
--- a/stories/Animation/components/Polygon.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { PolygonLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-import * as dat from 'dat.gui';
-import * as React from 'react';
-
-function convertRGB2Hex(rgb: number[]) {
-  return (
-    '#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
-  );
-}
-
-export default class Polygon extends React.Component {
-  private gui: dat.GUI;
-  private $stats: Node;
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    if (this.gui) {
-      this.gui.destroy();
-    }
-    if (this.$stats) {
-      document.body.removeChild(this.$stats);
-    }
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-    );
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        style: 'mapbox://styles/mapbox/streets-v9',
-        center: [110.19382669582967, 50.258134],
-        pitch: 0,
-        zoom: 3,
-      }),
-    });
-    this.scene = scene;
-    const layer = new PolygonLayer({
-      enablePicking: false,
-    });
-
-    layer
-      .source(await response.json())
-      .size('name', [0, 10000, 50000, 30000, 100000])
-      .color('name', [
-        '#2E8AE6',
-        '#69D1AB',
-        '#DAF291',
-        '#FFD591',
-        '#FF7A45',
-        '#CF1D49',
-      ])
-      .shape('fill')
-      .style({
-        opacity: 0.3,
-      });
-    scene.addLayer(layer);
-    scene.render();
-    /*** 运行时修改样式属性 ***/
-    const gui = new dat.GUI();
-    this.gui = gui;
-    const styleOptions = {
-      color: [0, 0, 0],
-      featureRange: {
-        startIndex: 0,
-        endIndex: Infinity,
-      },
-    };
-    const pointFolder = gui.addFolder('精确更新 feature');
-    pointFolder.add(styleOptions.featureRange, 'startIndex', 0, 100, 1);
-    pointFolder.add(styleOptions.featureRange, 'endIndex', 0, 100, 1);
-    pointFolder.addColor(styleOptions, 'color').onChange((color: number[]) => {
-      layer.color('name', [convertRGB2Hex(color)], {
-        featureRange: {
-          startIndex: styleOptions.featureRange.startIndex,
-          endIndex: styleOptions.featureRange.endIndex,
-        },
-      });
-      scene.render();
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/Layers.stories.tsx b/stories/Layers/Layers.stories.tsx
index 8656d6c58b..223fcf8f7f 100644
--- a/stories/Layers/Layers.stories.tsx
+++ b/stories/Layers/Layers.stories.tsx
@@ -1,59 +1,23 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import AnimatePoint from './components/AnimatePoint';
-import Arc2DLineDemo from './components/Arc2DLine';
-import ArcLineDemo from './components/Arcline';
-import CityBuildingLayerDemo from './components/citybuilding';
 import ClusterDemo from './components/cluster';
 import ClusterDemo2 from './components/cluster2';
-import Column from './components/column';
-import DashLineDemo from './components/dash';
 import DataUpdate from './components/data_update';
 import GridTest from './components/gridtest';
-import HeatMapDemo from './components/HeatMap';
-import HeatMap3D_2 from './components/heatmap2';
-import HeatMapDemo3D from './components/heatmap3d';
 import HexagonLayerDemo from './components/hexagon';
 import HighLight from './components/highlight';
-import LineLayer from './components/Line';
-import LineAnimate from './components/lineAnimate';
 import OffsetTest from './components/offsetTest';
-import PointDemo from './components/Point';
-import Point3D from './components/Point3D';
-import PointImage from './components/PointImage';
-import PolygonDemo from './components/polygon';
-import Polygon3D from './components/Polygon3D';
 import WorldDemo from './components/polygon_line';
-import ImageLayerDemo from './components/RasterImage';
-import RasterLayerDemo from './components/RasterLayer';
-import TextLayerDemo from './components/Text';
 
 // @ts-ignore
 storiesOf('图层', module)
-  .add('点图层', () => <PointDemo />)
   .add('聚合图', () => <ClusterDemo />)
   .add('聚合图标注', () => <ClusterDemo2 />)
   .add('数据更新', () => <DataUpdate />)
   .add('点动画', () => <AnimatePoint />)
-  .add('3D点', () => <Point3D />)
-  .add('文字', () => <TextLayerDemo />)
-  .add('Column', () => <Column />)
-  .add('图片标注', () => <PointImage />)
-  .add('面3d图层', () => <Polygon3D />)
-  .add('面图层', () => <PolygonDemo />)
-  .add('点亮城市', () => <CityBuildingLayerDemo />)
-  .add('线图层', () => <LineLayer />)
-  .add('线图层2', () => <LineAnimate />)
-  .add('虚线', () => <DashLineDemo />)
-  .add('3D弧线', () => <ArcLineDemo />)
-  .add('2D弧线', () => <Arc2DLineDemo />)
-  .add('热力图', () => <HeatMapDemo />)
-  .add('热力图3D', () => <HeatMapDemo3D />)
-  .add('热力图2', () => <HeatMap3D_2 />)
   .add('网格热力图', () => <HexagonLayerDemo />)
   .add('网格热力图2', () => <GridTest />)
-  .add('栅格', () => <RasterLayerDemo />)
-  .add('图片', () => <ImageLayerDemo />)
   .add('网格测试', () => <OffsetTest />)
   .add('图层高亮', () => <HighLight />)
   .add('世界地图', () => <WorldDemo />);
diff --git a/stories/Layers/components/Arc2DLine.tsx b/stories/Layers/components/Arc2DLine.tsx
deleted file mode 100644
index 4f1c813bca..0000000000
--- a/stories/Layers/components/Arc2DLine.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Arc2DLineDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt',
-    );
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [116.2825, 39.9],
-        pitch: 0,
-        style: 'dark',
-        zoom: 2,
-      }),
-    });
-    const lineLayer = new LineLayer({
-      blend: 'normal',
-      pickingBuffer: 10,
-    })
-      .source(
-        [
-          {
-            lng1: 84.375,
-            lat1: 47.517200697839414,
-            lng2: 117.94921874999999,
-            lat2: 22.268764039073968,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x1: 'lng1',
-            y1: 'lat1',
-            x: 'lng2',
-            y: 'lat2',
-          },
-        },
-      )
-      .size(2)
-      .shape('arc')
-      .animate({
-        enable: false,
-        interval: 0.1,
-        trailLength: 0.5,
-        duration: 0.5,
-      })
-      .color('#8C1EB2')
-      .style({
-        opacity: 1,
-      });
-    scene.addLayer(lineLayer);
-    lineLayer.on('click', (e) => {
-      console.log(e);
-    });
-    scene.render();
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/Arcline.tsx b/stories/Layers/components/Arcline.tsx
deleted file mode 100644
index bec5607942..0000000000
--- a/stories/Layers/components/Arcline.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class ArcLineDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/bmw-prod/4ededeaa-f290-46b7-a042-08210433e8f9.csv',
-    );
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        center: [116.2825, 39.9],
-        pitch: 0,
-        style: 'dark',
-        zoom: 2,
-      }),
-    });
-    this.scene = scene;
-    const lineLayer = new LineLayer({
-      blend: 'normal',
-    })
-      .source(await response.text(), {
-        parser: {
-          type: 'csv',
-          x: 'lng1',
-          y: 'lat1',
-          x1: 'lng2',
-          y1: 'lat2',
-        },
-      })
-      .size(2)
-      .shape('arc3d')
-      .select({
-        color: 'red',
-      })
-      .active({
-        color: 'red',
-      })
-      .color('rgb(13,64,140)')
-      .style({
-        opacity: 1,
-      });
-    scene.addLayer(lineLayer);
-    scene.render();
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/HeatMap.tsx b/stories/Layers/components/HeatMap.tsx
deleted file mode 100644
index ae1ebba4c4..0000000000
--- a/stories/Layers/components/HeatMap.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { HeatmapLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-// @ts-ignore
-import * as React from 'react';
-
-export default class HeatMapLayerDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
-    );
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        center: [121.268, 30.3628],
-        pitch: 0,
-        style: 'dark',
-        zoom: 12,
-      }),
-    });
-    const data = await response.json();
-
-    const layer = new HeatmapLayer();
-    layer
-      .source(data)
-      .shape('heatmap3D')
-      .size('mag', [0, 1.0]) // weight映射通道
-      .style({
-        intensity: 2,
-        radius: 20,
-        opacity: 1.0,
-        rampColors: {
-          colors: [
-            'rgba(33,102,172,0)',
-            'rgb(103,169,207)',
-            'rgb(209,229,240)',
-            'rgb(253,219,199)',
-            'rgb(239,138,98)',
-            'rgb(178,24,43)',
-          ],
-          positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-        },
-      });
-    scene.addLayer(layer);
-    scene.on('zoom', () => {
-      console.log(scene.getZoom());
-    });
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/Line.tsx b/stories/Layers/components/Line.tsx
deleted file mode 100644
index c13b48295f..0000000000
--- a/stories/Layers/components/Line.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class LineDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw-office.alipayobjects.com/bmw-prod/037b4240-f9ee-4dd8-b90c-178af4e4c9b8.json',
-    );
-    const data = await response.json();
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120, 30.7128],
-        zoom: 11.5,
-        style: 'light',
-      }),
-    });
-    const polygonLayer = new PolygonLayer({
-      autoFit: true,
-    })
-      .source(data)
-      .size(1)
-      .shape('fill')
-      .color('rgb(254,153,41)')
-      .style({
-        opacity: 1.0,
-      });
-    const lineLayer = new PolygonLayer({
-      autoFit: true,
-    })
-      .source(data)
-      .size(1)
-      .shape('line')
-      .color('#f00')
-      .style({
-        opacity: 0.5,
-      });
-
-    scene.addLayer(polygonLayer);
-    scene.addLayer(lineLayer);
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx
deleted file mode 100644
index 59f417ea27..0000000000
--- a/stories/Layers/components/Point.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-// @ts-ignore
-import data from '../data/data.json';
-export default class Point3D extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      pickBufferScale: 1.0,
-      map: new GaodeMap({
-        style: 'light',
-        center: [-121.24357, 37.58264],
-        pitch: 0,
-        zoom: 6.45,
-      }),
-    });
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv',
-      )
-        .then((res) => res.text())
-        .then((data) => {
-          const pointLayer = new PointLayer({})
-            .source(data.slice(0, 1000), {
-              parser: {
-                type: 'csv',
-                x: 'Longitude',
-                y: 'Latitude',
-              },
-            })
-            .shape('circle')
-            .size(16)
-            .active(true)
-            .select({
-              color: 'red',
-            })
-            .color('Magnitude', [
-              '#0A3663',
-              '#1558AC',
-              '#3771D9',
-              '#4D89E5',
-              '#64A5D3',
-              '#72BED6',
-              '#83CED6',
-              '#A6E1E0',
-              '#B8EFE2',
-              '#D7F9F0',
-            ])
-            .style({
-              opacity: 1,
-              strokeWidth: 0,
-              stroke: '#fff',
-            });
-
-          scene.addLayer(pointLayer);
-          this.scene = scene;
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/Point3D.tsx b/stories/Layers/components/Point3D.tsx
deleted file mode 100644
index 92d2878a3c..0000000000
--- a/stories/Layers/components/Point3D.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-// @ts-ignore
-import data from '../data/data.json';
-export default class Point3D extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        center: [120.19382669582967, 30.258134],
-        pitch: 0,
-        style: 'mapbox://styles/mapbox/streets-v9',
-        zoom: 1,
-      }),
-    });
-    const pointLayer = new PointLayer();
-    scene.on('resize', () => {
-      console.log('resize');
-    });
-    pointLayer
-      .source(data, {
-        cluster: true,
-      })
-      .color('red')
-      .shape('cylinder')
-      .active({ color: 'blue' })
-      .size([15, 10]);
-    scene.addLayer(pointLayer);
-    setTimeout(() => {
-      pointLayer.size([20, 100]);
-      scene.render();
-    }, 2000);
-    scene.render();
-    this.scene = scene;
-  }
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/PointImage.tsx b/stories/Layers/components/PointImage.tsx
deleted file mode 100644
index 04f8f70123..0000000000
--- a/stories/Layers/components/PointImage.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-export default class PointImage extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-    );
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        center: [121.4, 31.258134],
-        zoom: 12,
-        pitch: 0,
-        style: 'normal',
-      }),
-    });
-    this.scene = scene;
-    scene.addImage(
-      '00',
-      'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*g8cUQ7pPT9YAAAAAAAAAAAAAARQnAQ',
-    );
-    scene.addImage(
-      '01',
-      'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*LTcXTLBM7kYAAAAAAAAAAAAAARQnAQ',
-    );
-    scene.addImage(
-      '02',
-      'https://gw.alipayobjects.com/mdn/rms_fcd5b3/afts/img/A*g8cUQ7pPT9YAAAAAAAAAAAAAARQnAQ',
-    );
-    const i = 0;
-    const data = await response.json();
-    const newData = data.map((item: any) => {
-      item.type = '00';
-      return item;
-    });
-    const imageLayer = new PointLayer({
-      blend: 'normal',
-    })
-      .source(newData, {
-        parser: {
-          type: 'json',
-          x: 'longitude',
-          y: 'latitude',
-        },
-      })
-      .shape('type', (v: any) => {
-        return v;
-      })
-      // .shape('triangle')
-      // .color('red')
-      .active(false)
-      .size(20);
-    scene.addLayer(imageLayer);
-    imageLayer.on('mousedown', (e) => {
-      console.log('mousedown', e);
-    });
-    imageLayer.on('click', (e) => {
-      console.log('click', e);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/Polygon3D.tsx b/stories/Layers/components/Polygon3D.tsx
deleted file mode 100644
index 7e254414fa..0000000000
--- a/stories/Layers/components/Polygon3D.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-function convertRGB2Hex(rgb: number[]) {
-  return (
-    '#' + rgb.map((r) => ('0' + Math.floor(r).toString(16)).slice(-2)).join('')
-  );
-}
-
-export default class Polygon3D extends React.Component {
-  private gui: dat.GUI;
-  private $stats: Node;
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    if (this.gui) {
-      this.gui.destroy();
-    }
-    if (this.$stats) {
-      document.body.removeChild(this.$stats);
-    }
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json',
-    );
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 0,
-        style: 'dark',
-        center: [114.050008, 22.529272],
-        zoom: 14.1,
-      }),
-    });
-
-    const layer = new PolygonLayer({})
-      .source(await response.json())
-      .shape('extrude')
-      .size('h20', [10, 12, 16, 20, 26, 50])
-      .active({ color: 'blue' })
-      .color('h20', [
-        '#816CAD',
-        '#A67FB5',
-        '#C997C7',
-        '#DEB8D4',
-        '#F5D4E6',
-        '#FAE4F1',
-        '#FFF3FC',
-      ])
-      .style({
-        opacity: 1.0,
-      });
-    scene.addLayer(layer);
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/RasterImage.tsx b/stories/Layers/components/RasterImage.tsx
deleted file mode 100644
index 3043995061..0000000000
--- a/stories/Layers/components/RasterImage.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ImageLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class ImageLayerDemo extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        center: [121.268, 30.3628],
-        pitch: 0,
-        style: 'dark',
-        zoom: 10,
-      }),
-    });
-    const layer = new ImageLayer({});
-    layer.source(
-      'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
-      {
-        parser: {
-          type: 'image',
-          extent: [121.168, 30.2828, 121.384, 30.4219],
-        },
-      },
-    );
-    scene.addLayer(layer);
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/RasterLayer.tsx b/stories/Layers/components/RasterLayer.tsx
deleted file mode 100644
index 4def75e13e..0000000000
--- a/stories/Layers/components/RasterLayer.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-// @ts-ignore
-import { RasterLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-import * as dat from 'dat.gui';
-// @ts-ignore
-// tslint:disable-next-line:no-submodule-imports
-import * as GeoTIFF from 'geotiff';
-import * as React from 'react';
-import { colorScales } from '../lib/colorscales';
-export default class ImageLayerDemo extends React.Component {
-  private scene: Scene;
-  private gui: dat.GUI;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-    if (this.gui) {
-      this.gui.destroy();
-    }
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        center: [121.268, 30.3628],
-        pitch: 0,
-        style: 'dark',
-        zoom: 2,
-      }),
-    });
-    const tiffdata = await this.getTiffData();
-    const layer = new RasterLayer({});
-    const mindata = -0;
-    const maxdata = 8000;
-    layer
-      .source(tiffdata.data, {
-        parser: {
-          type: 'raster',
-          width: tiffdata.width,
-          height: tiffdata.height,
-          extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
-          // extent: [
-          //   73.4766000000000048,
-          //   18.1054999999999993,
-          //   135.1066187,
-          //   57.630046,
-          // ],
-        },
-      })
-      .style({
-        opacity: 0.8,
-        domain: [mindata, maxdata],
-        clampLow: true,
-        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],
-        },
-      });
-    scene.addLayer(layer);
-
-    this.scene = scene;
-    /*** 运行时修改样式属性 ***/
-    const gui = new dat.GUI();
-    this.gui = gui;
-    const styleOptions = {
-      clampLow: true,
-      clampHigh: true,
-      noDataValue: -9999999,
-      min: mindata,
-      max: maxdata,
-      colorScales: 'jet',
-    };
-    const rasterFolder = gui.addFolder('栅格可视化');
-    rasterFolder.add(styleOptions, 'clampLow').onChange((clampLow: boolean) => {
-      layer.style({
-        clampLow,
-      });
-      scene.render();
-    });
-    rasterFolder
-      .add(styleOptions, 'clampHigh')
-      .onChange((clampHigh: boolean) => {
-        layer.style({
-          clampHigh,
-        });
-        scene.render();
-      });
-    rasterFolder
-      .add(styleOptions, 'min', mindata, maxdata)
-      .onChange((min: number) => {
-        layer.style({
-          domain: [min, styleOptions.max],
-        });
-        scene.render();
-      });
-    rasterFolder
-      .add(styleOptions, 'max', mindata, maxdata)
-      .onChange((max: number) => {
-        layer.style({
-          domain: [styleOptions.min, max],
-        });
-        scene.render();
-      });
-    rasterFolder
-      .add(styleOptions, 'colorScales', Object.keys(colorScales))
-      .onChange((color: string) => {
-        layer.style({
-          rampColors: colorScales[color],
-        });
-        scene.render();
-      });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-  private async getTiffData() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
-      // 'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff',
-    );
-    const arrayBuffer = await response.arrayBuffer();
-    const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
-    const image = await tiff.getImage();
-    const width = image.getWidth();
-    const height = image.getHeight();
-    const values = await image.readRasters();
-    return {
-      data: values[0],
-      width,
-      height,
-      min: 0,
-      max: 8000,
-    };
-  }
-}
diff --git a/stories/Layers/components/Text.tsx b/stories/Layers/components/Text.tsx
deleted file mode 100644
index 4abd188756..0000000000
--- a/stories/Layers/components/Text.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import * as dat from 'dat.gui';
-import * as React from 'react';
-// @ts-ignore
-import data from '../data/data.json';
-export default class TextLayerDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-  private gui: dat.GUI;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-    if (this.gui) {
-      this.gui.destroy();
-    }
-  }
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
-    );
-    const pointsData = await response.json();
-
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120.19382669582967, 30.258134],
-        pitch: 0,
-        style: 'dark',
-        zoom: 3,
-      }),
-    });
-    // scene.on('loaded', () => {
-    const pointLayer = new PointLayer({})
-      .source(pointsData.list, {
-        parser: {
-          type: 'json',
-          x: 'j',
-          y: 'w',
-        },
-      })
-      .shape(['s', 'm'], (...args) => args.map((i) => `${i}\n`).join(''))
-      // .shape('circle')
-      .size(18)
-      .filter('t', (t) => {
-        return t < 5;
-      })
-      .color('#f00')
-      .style({
-        textAllowOverlap: false,
-        // fontWeight: 200,
-        // textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-        // textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
-        // spacing: 2, // 字符间距
-        // padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-        stroke: '#fff', // 描边颜色
-        strokeWidth: 1, // 描边宽度
-        // strokeOpacity: 1.0,
-      });
-    scene.addLayer(pointLayer);
-    this.scene = scene;
-
-    const gui = new dat.GUI();
-    this.gui = gui;
-    const styleOptions = {
-      field: 'w',
-      strokeWidth: 0,
-      fontWeight: 500,
-      stroke: '#fff',
-      textAllowOverlap: false,
-      opacity: 1,
-      size: 8,
-      color: '#fff',
-      halo: 0.5,
-      gamma: 2.0,
-    };
-    const rasterFolder = gui.addFolder('文本可视化');
-    rasterFolder
-      .add(styleOptions, 'field', ['w', 's', 'l', 'm', 'j', 'h'])
-      .onChange((anchor: string) => {
-        pointLayer.shape(anchor, 'text');
-        scene.render();
-      });
-
-    rasterFolder
-      .add(styleOptions, 'strokeWidth', 0, 10)
-      .onChange((strokeWidth: number) => {
-        pointLayer.style({
-          strokeWidth,
-        });
-        // pointLayer.setData(pointsData.list.slice(0, strokeWidth));
-        scene.render();
-      });
-
-    rasterFolder.add(styleOptions, 'size', 5, 30).onChange((size: number) => {
-      pointLayer.size(size);
-      // pointLayer.setData(pointsData.list.slice(0, strokeWidth));
-      scene.render();
-    });
-
-    rasterFolder.add(styleOptions, 'gamma', 0, 10).onChange((gamma: number) => {
-      pointLayer.style({
-        gamma,
-      });
-      // pointLayer.setData(pointsData.list.slice(0, strokeWidth));
-      scene.render();
-    });
-
-    rasterFolder.add(styleOptions, 'halo', 0, 10).onChange((halo: number) => {
-      pointLayer.style({
-        halo,
-      });
-      // pointLayer.setData(pointsData.list.slice(0, strokeWidth));
-      scene.render();
-    });
-    rasterFolder
-      .add(styleOptions, 'textAllowOverlap', 0, 10)
-      .onChange((textAllowOverlap: boolean) => {
-        pointLayer.style({
-          textAllowOverlap,
-        });
-        scene.render();
-      });
-    rasterFolder
-      .add(styleOptions, 'opacity', 0, 1)
-      .onChange((opacity: number) => {
-        pointLayer.style({
-          opacity,
-        });
-        scene.render();
-        setTimeout(() => {
-          scene.render();
-        }, 10);
-      });
-    rasterFolder.addColor(styleOptions, 'color').onChange((color: string) => {
-      pointLayer.color(color);
-      scene.render();
-    });
-    // });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/citybuilding.tsx b/stories/Layers/components/citybuilding.tsx
deleted file mode 100644
index 718fcd6c8d..0000000000
--- a/stories/Layers/components/citybuilding.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { CityBuildingLayer, Scene } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-import * as dat from 'dat.gui';
-import * as React from 'react';
-export default class CityBuildingLayerDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/rmsportal/vmvAxgsEwbpoSWbSYvix.json',
-    );
-    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,
-      }),
-    });
-    const pointLayer = new CityBuildingLayer();
-    pointLayer
-      .source(await response.json())
-      .size('floor', [0, 500])
-      .color('rgba(242,246,250,1.0)')
-      .animate({
-        enable: false,
-      })
-      .style({
-        opacity: 0.7,
-        baseColor: 'rgb(16,16,16)',
-        windowColor: 'rgb(30,60,89)',
-        brightColor: 'rgb(255,176,38)',
-      });
-    scene.addLayer(pointLayer);
-
-    this.scene = scene;
-
-    const gui = new dat.GUI();
-    const styleOptions = {
-      time: 1,
-    };
-    const pointFolder = gui.addFolder('动画控制');
-    pointFolder.add(styleOptions, 'time', 0, 4000, 1).onChange((t: number) => {
-      pointLayer.setLight(t);
-      scene.render();
-    });
-  }
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/column.tsx b/stories/Layers/components/column.tsx
deleted file mode 100644
index 07823fca6c..0000000000
--- a/stories/Layers/components/column.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-// @ts-ignore
-import data from '../data/data.json';
-export default class Column extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 66.02383,
-        style: 'dark',
-        center: [121.400257, 31.25287],
-        zoom: 14.55,
-        rotation: 134.9507,
-      }),
-    });
-    this.scene = scene;
-    fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        const pointLayer = new PointLayer({})
-          .source(data, {
-            parser: {
-              type: 'json',
-              x: 'longitude',
-              y: 'latitude',
-            },
-          })
-          .shape('name', [
-            'cylinder',
-            'triangleColumn',
-            'hexagonColumn',
-            'squareColumn',
-          ])
-          .size('unit_price', (h) => {
-            return [6, 6, 100];
-          })
-          .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
-          .style({
-            opacity: 1.0,
-          });
-
-        scene.addLayer(pointLayer);
-      });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/dash.tsx b/stories/Layers/components/dash.tsx
deleted file mode 100644
index 73124514fc..0000000000
--- a/stories/Layers/components/dash.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class DashLineDemo extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
-    );
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [102.602992, 23.107329],
-        pitch: 0,
-        style: 'light',
-        zoom: 14,
-      }),
-    });
-    const lineLayer = new LineLayer({
-      pickingBuffer: 5,
-    })
-      .source(await response.json())
-      .size(1)
-      .shape('line')
-      .active({ color: 'red' })
-      .color(
-        'ELEV',
-        [
-          '#E8FCFF',
-          '#CFF6FF',
-          '#A1E9ff',
-          '#65CEF7',
-          '#3CB1F0',
-          '#2894E0',
-          '#1772c2',
-          '#105CB3',
-          '#0D408C',
-          '#002466',
-        ].reverse(),
-      )
-      .style({
-        // lineType: 'dash',
-        // dashArray: [4, 2, 2, 2],
-        opacity: 1.0,
-      });
-
-    scene.addLayer(lineLayer);
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/heatmap2.tsx b/stories/Layers/components/heatmap2.tsx
deleted file mode 100644
index 4fc3ce6a40..0000000000
--- a/stories/Layers/components/heatmap2.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { HeatmapLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-// @ts-ignore
-import * as React from 'react';
-
-export default class HeatMapLayerDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        style: 'dark',
-        pitch: 8.5,
-        center: [116.49434030056, 39.868073421167621],
-        zoom: 13,
-      }),
-    });
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const layer = new HeatmapLayer({
-            autoFit: true,
-          })
-            .source(data, {
-              parser: {
-                type: 'json',
-                x: 'lng',
-                y: 'lat',
-              },
-            })
-            .size('count', [0, 1])
-            .shape('heatmap')
-            // weight映射通道
-            .style({
-              intensity: 10,
-              radius: 20,
-              opacity: 1.0,
-              rampColors: {
-                colors: [
-                  '#2E8AE6',
-                  '#69D1AB',
-                  '#DAF291',
-                  '#FFD591',
-                  '#FF7A45',
-                  '#CF1D49',
-                ],
-                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-              },
-            });
-          scene.addLayer(layer);
-          setTimeout(() => {
-            layer.style({
-              rampColors: {
-                colors: [
-                  '#fee5d9',
-                  '#fcbba1',
-                  '#fc9272',
-                  '#fb6a4a',
-                  '#de2d26',
-                  '#a50f15',
-                ],
-                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-              },
-            });
-            scene.render();
-            console.log('更新完成');
-          }, 2000);
-        });
-    });
-
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/heatmap3d.tsx b/stories/Layers/components/heatmap3d.tsx
deleted file mode 100644
index bbf6a2cc32..0000000000
--- a/stories/Layers/components/heatmap3d.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { HeatmapLayer, Scene } from '@antv/l7';
-import { Mapbox, GaodeMap } from '@antv/l7-maps';
-// @ts-ignore
-import * as React from 'react';
-
-export default class HeatMapLayerDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
-    );
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        style: 'dark',
-        pitch: 58.5,
-        center: [111.8759, 30.6942],
-        rotation: 0.519,
-        zoom: 14,
-      }),
-    });
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const layer = new HeatmapLayer({})
-            .source(data)
-            .size('capacity', [0, 1])
-            .shape('heatmap3D')
-            // weight映射通道
-            .style({
-              intensity: 10,
-              radius: 5,
-              opacity: 1.0,
-              rampColors: {
-                colors: [
-                  '#2E8AE6',
-                  '#69D1AB',
-                  '#DAF291',
-                  '#FFD591',
-                  '#FF7A45',
-                  '#CF1D49',
-                ],
-                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-              },
-            });
-          scene.addLayer(layer);
-        });
-    });
-
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Layers/components/polygon.tsx b/stories/Layers/components/polygon.tsx
deleted file mode 100644
index c564352923..0000000000
--- a/stories/Layers/components/polygon.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import * as dat from 'dat.gui';
-import * as React from 'react';
-// @ts-ignore
-const Spectral: {
-  [key: string]: string[];
-} = {
-  3: ['rgb(252,141,89)', 'rgb(255,255,191)', 'rgb(153,213,148)'],
-  4: [
-    'rgb(215,25,28)',
-    'rgb(253,174,97)',
-    'rgb(171,221,164)',
-    'rgb(43,131,186)',
-  ],
-  5: [
-    'rgb(215,25,28)',
-    'rgb(253,174,97)',
-    'rgb(255,255,191)',
-    'rgb(171,221,164)',
-    'rgb(43,131,186)',
-  ],
-  6: [
-    'rgb(213,62,79)',
-    'rgb(252,141,89)',
-    'rgb(254,224,139)',
-    'rgb(230,245,152)',
-    'rgb(153,213,148)',
-    'rgb(50,136,189)',
-  ],
-  7: [
-    'rgb(213,62,79)',
-    'rgb(252,141,89)',
-    'rgb(254,224,139)',
-    'rgb(255,255,191)',
-    'rgb(230,245,152)',
-    'rgb(153,213,148)',
-    'rgb(50,136,189)',
-  ],
-  8: [
-    'rgb(213,62,79)',
-    'rgb(244,109,67)',
-    'rgb(253,174,97)',
-    'rgb(254,224,139)',
-    'rgb(230,245,152)',
-    'rgb(171,221,164)',
-    'rgb(102,194,165)',
-    'rgb(50,136,189)',
-  ],
-  9: [
-    'rgb(213,62,79)',
-    'rgb(244,109,67)',
-    'rgb(253,174,97)',
-    'rgb(254,224,139)',
-    'rgb(255,255,191)',
-    'rgb(230,245,152)',
-    'rgb(171,221,164)',
-    'rgb(102,194,165)',
-    'rgb(50,136,189)',
-  ],
-  10: [
-    'rgb(158,1,66)',
-    'rgb(213,62,79)',
-    'rgb(244,109,67)',
-    'rgb(253,174,97)',
-    'rgb(254,224,139)',
-    'rgb(230,245,152)',
-    'rgb(171,221,164)',
-    'rgb(102,194,165)',
-    'rgb(50,136,189)',
-    'rgb(94,79,162)',
-  ],
-  11: [
-    'rgb(158,1,66)',
-    'rgb(213,62,79)',
-    'rgb(244,109,67)',
-    'rgb(253,174,97)',
-    'rgb(254,224,139)',
-    'rgb(255,255,191)',
-    'rgb(230,245,152)',
-    'rgb(171,221,164)',
-    'rgb(102,194,165)',
-    'rgb(50,136,189)',
-    'rgb(94,79,162)',
-  ],
-};
-const RMBColor: { [key: string]: string[] } = {
-  '100元': ['#D92568', '#E3507E', '#FC7AAB', '#F1D3E5', '#A7B5E3', '#F2EEFF'],
-  '50元': ['#416D63', '#497A71', '#8FC1B1', '#7E80A7', '#D2C6DC', '#8B897B'],
-  '20元': ['#563F30', '#A08671', '#BE9577', '#E1BDA0', '#9BCEB8', '#EACDD6'],
-  '5元': ['#49315E', '#7C5E91', '#A38EAE', '#DCC4B2', '#CDD0B5', '#B3A895'],
-  '10元': ['#23324A', '#465C6B', '#A6B0BE', '#BA9FA2', '#B6B4A3', '#B89374'],
-  '1元': ['#343F24', '#717F63', '#BCCAAF', '#CEBD7E', '#B5B4A0', '#E9E4E1'],
-  '5角': ['#644353', '#8C5B66', '#916970', '#BEB4C6', '#B5C0C8', '#FFDEE3'],
-  '2角': ['#4D6256', '#5F6F63', '#648F96', '#A5AF9C', '#C4DAE2', '#8A9A8E'],
-  '1角': ['#653E40', '#6C4547', '#AC8486', '#D1A6A1', '#CAB8B8', '#D5C1A4'],
-};
-
-// earcut结果： [5, 0, 1, 1, 2, 3, 3, 4, 5, 5, 1, 3] 0
-const geoJSONhole = {
-  type: 'FeatureCollection',
-  features: [
-    {
-      type: 'Feature',
-      properties: {},
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [100.1953125, 42.5530802889558],
-            [111.533203125, 37.16031654673677],
-            [104.67773437499999, 34.88593094075317], //**
-            [108.4130859375, 28.14950321154457], ///
-            [127.529296875, 33.063924198120645],
-            [115.48828125000001, 47.45780853075031],
-            [100.1953125, 42.5530802889558], //
-          ],
-        ],
-      },
-    },
-  ],
-};
-
-export default class TextLayerDemo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-  private gui: dat.GUI;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-    if (this.gui) {
-      this.gui.destroy();
-    }
-  }
-  public async componentDidMount() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-    );
-    const data = await response.json();
-
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        center: [120.19382669582967, 30.258134],
-        pitch: 0,
-        style: 'blank',
-        zoom: 0,
-      }),
-    });
-    scene.on('loaded', () => {
-      const layer = new PolygonLayer({
-        blend: 'none',
-      })
-        .source(geoJSONhole)
-        .shape('fill')
-        .scale('childrenNum', {
-          type: 'quantile',
-        })
-        .color('#D92568')
-        .style({
-          opacity: 0.3,
-        });
-      scene.addLayer(layer);
-      this.scene = scene;
-      const gui = new dat.GUI();
-      this.gui = gui;
-      const styleOptions = {
-        textAnchor: 'center',
-        filter: 1,
-        textAllowOverlap: 4,
-        opacity: 0.3,
-        color: '100元',
-      };
-      const rasterFolder = gui.addFolder('面图层可视化');
-
-      rasterFolder
-        .add(styleOptions, 'filter', 0, 50)
-        .onChange((strokeWidth: number) => {
-          layer.filter('childrenNum', (t: number) => {
-            return t > strokeWidth;
-          });
-          scene.render();
-        });
-      rasterFolder
-        .add(styleOptions, 'textAllowOverlap', 3, 10, 1)
-        .onChange((v: string) => {
-          layer.color('childrenNum', Spectral[v]);
-          scene.render();
-        });
-      rasterFolder
-        .add(styleOptions, 'opacity', 0, 1)
-        .onChange((opacity: number) => {
-          layer.style({
-            opacity,
-          });
-          scene.render();
-          scene.exportPng();
-        });
-      rasterFolder
-        .add(styleOptions, 'color', [
-          '100元',
-          '50元',
-          '20元',
-          '10元',
-          '5元',
-          '1元',
-          '5角',
-          '2角',
-          '1角',
-        ])
-        .onChange((color: any) => {
-          layer.color('childrenNum', RMBColor[color] as string[]);
-          // layer.shape('fill');
-          scene.render();
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo.tsx b/stories/Map/components/amap2demo.tsx
deleted file mode 100644
index 56853caddf..0000000000
--- a/stories/Map/components/amap2demo.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { PointLayer, Scene, LineLayer } from '@antv/l7';
-import { GaodeMapV2 } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMapV2({
-        // center: [121.107846, 30.267069],
-        center: [120.692587367181758, 30.377451929339649],
-        pitch: 0,
-        style: 'normal',
-        zoom: 20,
-        animateEnable: false,
-        zooms: [0, 23],
-      }),
-    });
-    let data = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {},
-          geometry: {
-            type: 'Polygon',
-            coordinates: [
-              [
-                [122.692587367181758, 43.377451929339649],
-                [122.692587367181758, 43.377465856847415],
-                [122.692574277855613, 43.377465856847415],
-                [122.692574277855613, 43.377451929339649],
-                [122.692587367181758, 43.377451929339649],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-    // let cut = 0.0002;
-    let data2 = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {},
-          geometry: {
-            type: 'Polygon',
-            coordinates: [
-              [
-                [120.692587367181758, 30.377451929339649],
-                [120.692587367181758, 30.377465856847415],
-                [120.692574277855613, 30.377465856847415],
-                [120.692574277855613, 30.377451929339649],
-                [120.692587367181758, 30.377451929339649],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-    scene.on('loaded', () => {
-      let rect = new LineLayer()
-        .source(data)
-        .shape('line')
-        .size(2)
-        .color('#f00');
-      scene.addLayer(rect);
-      let rect2 = new LineLayer()
-        .source(data2)
-        .shape('line')
-        .size(2)
-        .color('#f00');
-      scene.addLayer(rect2);
-      const mapService = scene.getMapService();
-      // setTimeout(() => {
-      //     scene.setCenter([122.692587367181758, 43.377451929339649]);
-      //     // // @ts-ignore
-      //     // mapService.map.customCoords?.setCenter([
-      //     //   122.692587367181758,
-      //     //   43.377451929339649,
-      //     // ]);
-      //     // // @ts-ignore
-      //     // mapService.setCustomCoordCenter([
-      //     //   122.692587367181758,
-      //     //   43.377451929339649,
-      //     // ]);
-      //     // rect.dataState.dataSourceNeedUpdate = true;
-      //   }, 2000);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_arcLine3DTex.tsx b/stories/Map/components/amap2demo_arcLine3DTex.tsx
deleted file mode 100644
index dc2a79aeca..0000000000
--- a/stories/Map/components/amap2demo_arcLine3DTex.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_arcLine3DTex extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 40,
-        center: [100, 35.443286920228644],
-        zoom: 2.9142882493605033,
-        viewMode: '3D',
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      scene.addImage(
-        '02',
-        'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
-      );
-
-      let data = [
-        {
-          lng1: 75.76171875,
-          lat1: 36.31512514748051,
-          lng2: 46.23046874999999,
-          lat2: 52.802761415419674,
-          testOpacity: 0.3,
-        },
-      ];
-
-      // const layer = new LineLayer({
-      //   blend: 'normal',
-      // })
-      //   .source(data, {
-      //     parser: {
-      //       type: 'json',
-      //       x: 'lng1',
-      //       y: 'lat1',
-      //       x1: 'lng2',
-      //       y1: 'lat2',
-      //     },
-      //   })
-      //   .size(10)
-      //   .shape('arc3d')
-      //   .texture('02')
-      //   .color('#8C1EB2')
-      //   .style({
-      //     lineTexture: true, // 开启线的贴图功能
-      //     iconStep: 10, // 设置贴图纹理的间距
-      //     // opacity: 0,
-      //     // opacity: ['testOpacity', ((d: any) => d*2)],
-      //     opacity: 'testOpacity',
-      //     // opacity: 0.2,
-      //     // lineType: 'dash',
-      //     // dashArray: [5, 5],
-      //     textureBlend: 'replace',
-      //     // textureBlend: 'normal',
-      //     // sourceColor: '#f00',
-      //     // targetColor: '#0f0',
-      //   });
-
-      const layer = new LineLayer({
-        blend: 'normal',
-      })
-        .source(data, {
-          parser: {
-            type: 'json',
-            x: 'lng1',
-            y: 'lat1',
-            x1: 'lng2',
-            y1: 'lat2',
-          },
-        })
-        .size(10)
-        .shape('arc3d')
-        // .shape('greatcircle')
-        .texture('02')
-        .color('#8C1EB2')
-        .style({
-          lineTexture: true, // 开启线的贴图功能
-          iconStep: 4, // 设置贴图纹理的间距
-          // opacity: 0,
-          // opacity: ['testOpacity', ((d: any) => d*2)],
-          // opacity: 'testOpacity',
-          // opacity: 0.2,
-          // lineType: 'dash',
-          // dashArray: [5, 5],
-          textureBlend: 'replace',
-          // textureBlend: 'normal',
-          // sourceColor: '#f00',
-          // targetColor: '#0f0',
-        })
-        .animate({
-          duration: 0.2,
-          interval: 0.1,
-          trailLength: 0.5,
-        });
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_arcLine3dLinear.tsx b/stories/Map/components/amap2demo_arcLine3dLinear.tsx
deleted file mode 100644
index 22c993052e..0000000000
--- a/stories/Map/components/amap2demo_arcLine3dLinear.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { PointLayer, LineLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_arcLine3dLinear extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 40,
-        center: [3.438, 40.16797],
-        zoom: 0,
-        viewMode: '3D',
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      // scene.addImage(
-      //   'plane',
-      //   'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
-      // );
-      Promise.all([
-        fetch(
-          'https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.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);
-        // @ts-ignore
-        const flydata = eval(flyline).map((item) => {
-          // @ts-ignore
-          const latlng1 = item.from.split(',').map((e) => {
-            return e * 1;
-          });
-          // @ts-ignore
-          const latlng2 = item.to.split(',').map((e) => {
-            return e * 1;
-          });
-          return { coord: [latlng1, latlng2] };
-        });
-
-        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({ blend: 'normal' })
-          .source(flydata, {
-            parser: {
-              type: 'json',
-              coordinates: 'coord',
-            },
-          })
-          .color('#ff6b34')
-          // .texture('plane')
-          .shape('arc3d')
-          // .shape('arc')
-          .size(2)
-          // .active(true)
-          .animate({
-            duration: 2,
-            interval: 2,
-            trailLength: 2,
-          })
-          .style({
-            // textureBlend: 'replace',
-            // lineTexture: true, // 开启线的贴图功能
-            // iconStep: 10, // 设置贴图纹理的间距
-            sourceColor: '#f00',
-            targetColor: '#0f0',
-            opacity: 0.5,
-          });
-
-        // const flyLine2 = new LineLayer({blend: 'normal'})
-        // .source(flydata, {
-        //   parser: {
-        //     type: 'json',
-        //     coordinates: 'coord',
-        //   },
-        // })
-        // .color('#ff6b34')
-        // // .shape('arc3d')
-        // .shape('arc')
-        // .size(1)
-        // // .active(true)
-        // .style({
-        //   lineType: 'dash',
-        //   dashArray: [5, 5],
-        //   opacity: 0.5
-        // });
-        scene.addLayer(worldLine);
-        scene.addLayer(dotPoint);
-        // scene.addLayer(flyLine2)
-        scene.addLayer(flyLine);
-      });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_arcLineTex.tsx b/stories/Map/components/amap2demo_arcLineTex.tsx
deleted file mode 100644
index 0688a8ea6c..0000000000
--- a/stories/Map/components/amap2demo_arcLineTex.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_arcLineTex extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 40,
-        center: [65.6, 45],
-        zoom: 12.1,
-        viewMode: '3D',
-        // style: 'dark',
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      scene.addImage(
-        '02',
-        'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
-      );
-
-      let data = [
-        {
-          lng1: 75.76171875,
-          lat1: 36.31512514748051,
-          lng2: 46.23046874999999,
-          lat2: 52.802761415419674,
-        },
-      ];
-      // @ts-ignore
-      const layer = new LineLayer({
-        blend: 'normal',
-      })
-        .source(data, {
-          parser: {
-            type: 'json',
-            x: 'lng1',
-            y: 'lat1',
-            x1: 'lng2',
-            y1: 'lat2',
-          },
-        })
-        .size(25)
-        .shape('arc')
-        .texture('02')
-        .color('#8C1EB2')
-        .style({
-          forward: false,
-          lineTexture: true, // 开启线的贴图功能
-          iconStep: 30, // 设置贴图纹理的间距
-          // opacity: 0.5,
-          // opacity: 0.2,
-          // lineType: 'dash',
-          // dashArray: [5, 5],
-          // textureBlend: 'replace',
-          // textureBlend: 'normal',
-        });
-      // .animate({
-      //   duration: 50,
-      //   interval: 0.3,
-      //   trailLength: 0.1,
-      // })
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_citybuilding.tsx b/stories/Map/components/amap2demo_citybuilding.tsx
deleted file mode 100644
index 9e96d65da5..0000000000
--- a/stories/Map/components/amap2demo_citybuilding.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { CityBuildingLayer, Scene, LineLayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox, Map } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_citybuilding extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        style: 'dark',
-        center: [120.160514, 30.243209],
-        pitch: 45,
-        zoom: 14,
-        viewMode: '3D',
-      }),
-    });
-    fetch(
-      'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
-    ).then(async (res) => {
-      const pointLayer = new CityBuildingLayer();
-      pointLayer
-        .source(await res.json())
-        .size('floor', [0, 500])
-        .color('rgba(242,246,250,1.0)')
-        // .animate({
-        //   enable: true,
-        // })
-        .active({
-          color: '#0ff',
-          mix: 0.5,
-        })
-        .style({
-          // opacity: 0.7,
-          baseColor: 'rgb(16, 16, 16)',
-          windowColor: 'rgb(30, 60, 89)',
-          brightColor: 'rgb(255, 176, 38)',
-          // sweep: {
-          //   enable: true,
-          //   sweepRadius: 2,
-          //   sweepColor: '#1990FF',
-          //   sweepSpeed: 0.5,
-          // },
-        });
-      scene.addLayer(pointLayer);
-    });
-
-    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,
-          // depth: true
-        })
-          .source(data)
-          .size(1)
-          .shape('line')
-          .color('#1990FF')
-          .style({
-            depth: true,
-          })
-          .animate({
-            interval: 1, // 间隔
-            duration: 2, // 持续时间，延时
-            trailLength: 2, // 流线长度
-          });
-        scene.addLayer(layer);
-      });
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_extrude.tsx b/stories/Map/components/amap2demo_extrude.tsx
deleted file mode 100644
index f287649a13..0000000000
--- a/stories/Map/components/amap2demo_extrude.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox, Map } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amapdemo_extrude extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [121.107846, 30.267069],
-        pitch: 40,
-        style: 'normal',
-        zoom: 8,
-      }),
-    });
-
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      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('cylinder')
-            .size('t', function(level) {
-              // return [4000, 4000, level * 4000 + 20];
-              return [4, 4, level * 4 + 20];
-              // return [4000, 4000, level * 4000 + 20];
-            })
-            .active(true)
-            .color('t', [
-              '#094D4A',
-              '#146968',
-              '#1D7F7E',
-              '#289899',
-              '#34B6B7',
-              '#4AC5AF',
-              '#5FD3A6',
-              '#7BE39E',
-              '#A1EDB8',
-              '#CEF8D6',
-            ])
-            // .animate(true)
-            // .animate({
-            //   enable: false,
-            //   // speed: 0.1,
-            //   // repeat: Infinity
-            // })
-            .style({
-              opacity: 1.0,
-              // heightfixed: true
-            });
-          scene.addLayer(pointLayer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_heatmap.tsx b/stories/Map/components/amap2demo_heatmap.tsx
deleted file mode 100644
index 89d92807e1..0000000000
--- a/stories/Map/components/amap2demo_heatmap.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Scene, HeatmapLayer } from '@antv/l7';
-import { GaodeMap, Mapbox, Map } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_heatmap extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new Map({
-        // pitch: 0,
-        // center: [127.5671666579043, 7.445038892195569],
-        // zoom: 2.632456779444394,
-        style: 'dark',
-        pitch: 0,
-        center: [120, 30],
-        zoom: 4,
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      // fetch(
-      //   'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
-      // )
-      //   .then((res) => res.json())
-      //   .then((data) => {
-      //     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',
-      //             '#91EABC',
-      //             '#2EA9A1',
-      //             '#206C7C',
-      //           ].reverse(),
-      //           positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-      //         },
-      //       });
-      //     scene.addLayer(layer);
-      //   });
-
-      fetch(
-        'https://gw.alipayobjects.com/os/bmw-prod/95d5a2c3-f8fa-47f3-8664-ecb8459565ee.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const layer = new HeatmapLayer({})
-            .source(data)
-            .shape('heatmap')
-            .size('weight', [0, 1.0]) // weight映射通道
-            .style({
-              intensity: 3,
-              radius: 24,
-              opacity: 1.0,
-              rampColors: {
-                colors: ['#030EAB', '#0F41EB', '#40D785', '#F1D41A', '#FE0257'],
-                positions: [0, 0.25, 0.5, 0.75, 1.0],
-              },
-            });
-          scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_heatmap3D.tsx b/stories/Map/components/amap2demo_heatmap3D.tsx
deleted file mode 100644
index ea602fc584..0000000000
--- a/stories/Map/components/amap2demo_heatmap3D.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Scene, HeatmapLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_heatmap extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        // pitch: 58.5,
-        pitch: 0,
-        center: [111.8759, 30.6942],
-        rotation: 0.519,
-        zoom: 3.6116,
-        viewMode: '3D',
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const layer = new HeatmapLayer({})
-            .source(data)
-            .size('capacity', [0, 1])
-            .shape('heatmap3D')
-            // weight映射通道
-            .style({
-              intensity: 10,
-              radius: 5,
-              opacity: 1.0,
-              rampColors: {
-                colors: [
-                  '#2E8AE6',
-                  '#69D1AB',
-                  '#DAF291',
-                  '#FFD591',
-                  '#FF7A45',
-                  '#CF1D49',
-                ],
-                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-              },
-            });
-          scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_iconfont.tsx b/stories/Map/components/amap2demo_iconfont.tsx
deleted file mode 100644
index 3914ad7211..0000000000
--- a/stories/Map/components/amap2demo_iconfont.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo_iconfont extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 20,
-        style: 'light',
-        center: [120, 20],
-        zoom: 3,
-      }),
-    });
-    this.scene = scene;
-    const fontFamily = 'iconfont';
-    // 指定 iconfont 字体文件
-    const fontPath =
-      '//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140';
-    // 全局添加资源
-    scene.addFontFace(fontFamily, fontPath);
-    // 全局添加 iconfont 字段的映射;
-    scene.addIconFont('icon1', '&#xe6d4;');
-    scene.on('loaded', () => {
-      const imageLayer = new PointLayer()
-        .source(
-          [
-            {
-              j: 118.234433,
-              w: 35.007936,
-              icon: 'icon1',
-              value: 10,
-              name: 'AA',
-              type: 'dibiaoshui',
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'j',
-              y: 'w',
-            },
-          },
-        )
-        .color('#44ff00')
-        .shape('icon', 'text')
-        // .shape('circle')
-        // .size(30)
-        .size(30)
-        .style({
-          // textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-          // textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
-          padding: [0, 0], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-          stroke: '#ffffff', // 描边颜色
-          fontFamily,
-          iconfont: true,
-          textAllowOverlap: true,
-        });
-      scene.addLayer(imageLayer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_image.tsx b/stories/Map/components/amap2demo_image.tsx
deleted file mode 100644
index 787d79dd74..0000000000
--- a/stories/Map/components/amap2demo_image.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { PointLayer, Scene, LineLayer, PolygonLayer } from '@antv/l7';
-import { GaodeMap, Mapbox, Map } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo_image extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 0,
-        style: 'light',
-        center: [121.434765, 31.256735],
-        zoom: 12,
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          scene.addImage(
-            '00',
-            'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
-          );
-          scene.addImage(
-            '01',
-            'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
-          );
-          scene.addImage(
-            '02',
-            'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
-          );
-
-          const imageLayer = new PointLayer()
-            .source(data, {
-              parser: {
-                type: 'json',
-                x: 'longitude',
-                y: 'latitude',
-              },
-            })
-            .shape('name', ['00', '01', '02'])
-            // .rotate('name', () => Math.random() * Math.PI)
-            .rotate(Math.PI / 2)
-            .style({
-              layerType: 'fillImage',
-              // rotation: 90,
-            })
-            // .active({
-            //   color: '#00f',
-            //   mix: 0.6,
-            // })
-            // .size(30);
-            .size(25);
-          scene.addLayer(imageLayer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_imagelayer.tsx b/stories/Map/components/amap2demo_imagelayer.tsx
deleted file mode 100644
index 991bb39abd..0000000000
--- a/stories/Map/components/amap2demo_imagelayer.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ImageLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_imageLayer extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [121.268, 30.3628],
-        pitch: 0,
-        style: 'normal',
-        zoom: 10,
-        viewMode: '3D',
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      const layer = new ImageLayer({});
-      layer.source(
-        'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
-        {
-          parser: {
-            type: 'image',
-            extent: [121.168, 30.2828, 121.384, 30.4219],
-          },
-        },
-      );
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_lineHeight.tsx b/stories/Map/components/amap2demo_lineHeight.tsx
deleted file mode 100644
index 34e7e4e3f6..0000000000
--- a/stories/Map/components/amap2demo_lineHeight.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_lineHeight extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        pitch: 40,
-        style: 'light',
-        // center: [120, 23.114887],
-        center: [102.600579, 23.114887],
-        // zoom: 8,
-        zoom: 14.66,
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
-        // 'https://gw.alipayobjects.com/os/bmw-prod/65589ef3-7f1d-440f-ba5d-86b03ee6ba7e.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          // const layer = new LineLayer({})
-          //   .source(data)
-          //   .size(1)
-          //   .shape('line')
-          //   .style({
-          //     vertexHeightScale: 30,
-          //   })
-          //   .color('#ccc');
-
-          // scene.addLayer(layer);
-          // -----
-          const layer = new LineLayer({})
-            .source(data)
-            .size('ELEV', (h) => {
-              return [h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20]; // amap
-            })
-            .shape('line')
-            .scale('ELEV', {
-              type: 'quantize',
-            })
-            .style({
-              heightfixed: true,
-            })
-            .color(
-              'ELEV',
-              [
-                '#E4682F',
-                '#FF8752',
-                '#FFA783',
-                '#FFBEA8',
-                '#FFDCD6',
-                '#EEF3FF',
-                '#C8D7F5',
-                '#A5C1FC',
-                '#7FA7F9',
-                '#5F8AE5',
-              ].reverse(),
-            );
-          scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_lineLinear.tsx b/stories/Map/components/amap2demo_lineLinear.tsx
deleted file mode 100644
index 11a366c435..0000000000
--- a/stories/Map/components/amap2demo_lineLinear.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-// @ts-ignore
-import { LineLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_lineLinear extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [105, 30.258134],
-        zoom: 5,
-      }),
-    });
-    this.scene = scene;
-    const geoData = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {
-            testOpacity: 0.8,
-          },
-          geometry: {
-            type: 'Polygon',
-            coordinates: [
-              [
-                [99.228515625, 37.43997405227057],
-                [99.228515625, 35.02999636902566],
-                [101.337890625, 32.99023555965106],
-                [99.052734375, 30.29701788337205],
-                [100.72265625, 27.994401411046148],
-                [99.49218749999999, 26.352497858154024],
-                [100.634765625, 23.725011735951796],
-              ],
-              [
-                [108.544921875, 37.71859032558816],
-                [110.74218749999999, 34.66935854524543],
-                [110.21484375, 32.76880048488168],
-                [112.412109375, 32.84267363195431],
-                [112.1484375, 30.751277776257812],
-                [114.08203125, 31.42866311735861],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    scene.on('loaded', () => {
-      const layer = new LineLayer({})
-        .source(geoData)
-        .size(20)
-        .shape('line')
-        .color('#0f0')
-        .style({
-          linearDir: 'horizontal', // vertical horizontal
-          sourceColor: '#f00',
-          targetColor: '#0f0',
-          // sourceColor: 'rgba(0.0, 1.0, 0.0, 0.0)',
-          // targetColor: '#0f0',
-        });
-      scene.addLayer(layer);
-      // const layer = new LineLayer({})
-      //   .source(geoData)
-      //   .size(25)
-      //   .shape('linearline')
-      //   .style({
-      //     linearDir: 'horizontal', // vertical horizontal
-      //     rampColors: {
-      //       colors: [
-      //         '#FF4818',
-      //         '#F7B74A',
-      //         '#FFF598',
-      //         '#91EABC',
-      //         '#2EA9A1',
-      //         '#206C7C',
-      //       ],
-      //       positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-      //     },
-      //   });
-      // scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_lineStreet.tsx b/stories/Map/components/amap2demo_lineStreet.tsx
deleted file mode 100644
index 682017678b..0000000000
--- a/stories/Map/components/amap2demo_lineStreet.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import { PointLayer, PolygonLayer, LineLayer, Scene } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_lineStreet extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120.15, 30.246],
-        pitch: 0,
-        zoom: 13.5,
-        style: 'dark',
-        pitchEnable: false,
-        rotation: -90,
-      }),
-    });
-    this.scene = scene;
-
-    scene.addImage(
-      'westLakeBuilding',
-      'https://gw.alipayobjects.com/zos/bmw-prod/8c3f6415-c1ca-4f7e-8ac6-89571ac75309.svg',
-    );
-    scene.addImage(
-      'arrow',
-      'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
-    );
-    scene.addImage(
-      'shop',
-      'https://gw.alipayobjects.com/zos/bmw-prod/238e7c7c-c26c-454c-9341-35d466c4b991.svg',
-    );
-    scene.addImage(
-      'hospital',
-      'https://gw.alipayobjects.com/zos/bmw-prod/fd08bf28-f73e-4b9c-ba8d-2c73d4fca6dc.svg',
-    );
-    scene.addImage(
-      'westlake',
-      'https://gw.alipayobjects.com/zos/bmw-prod/7b011298-454d-431b-9637-ab23a752e731.svg',
-    );
-    scene.addImage(
-      'ship',
-      'https://gw.alipayobjects.com/zos/bmw-prod/104cfca2-f3c5-49e8-b084-d339f4ba1adc.svg',
-    );
-    scene.addImage(
-      'travel',
-      'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg',
-    );
-    scene.addImage(
-      'pavilion',
-      'https://gw.alipayobjects.com/zos/bmw-prod/8839795d-43d9-46c5-a5b1-95bf9a1146a0.svg',
-    );
-    scene.addImage(
-      'museum',
-      'https://gw.alipayobjects.com/zos/bmw-prod/5436a335-8ec3-40e4-9c93-16d0f844b0e7.svg',
-    );
-    scene.addImage(
-      'bridge',
-      'https://gw.alipayobjects.com/zos/bmw-prod/b88e6f2f-ad12-4980-969e-3849cbcd28c6.svg',
-    );
-    scene.addImage(
-      'school',
-      'https://gw.alipayobjects.com/zos/bmw-prod/948e665d-ab1e-4010-b75a-236057837bec.svg',
-    );
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
-      )
-        .then((data) => data.json())
-        .then(
-          ({
-            lakeBorderData,
-            lakeData,
-            landData,
-            westLakePoiData,
-            poiData,
-          }) => {
-            const lakeLayer = new PolygonLayer()
-              .source(lakeData)
-              .shape('fill')
-              .color('#1E90FF')
-              .style({
-                opacity: 0.4,
-                opacityLinear: {
-                  enable: true,
-                  dir: 'out', // in - out
-                },
-              });
-            const landLayer = new PolygonLayer()
-              .source(landData)
-              .shape('fill')
-              .color('#3CB371')
-              .style({
-                opacity: 0.4,
-                opacityLinear: {
-                  enable: true,
-                  dir: 'in', // in - out
-                },
-              });
-
-            const lakeBorderLayer = new PolygonLayer()
-              .source(lakeBorderData)
-              .shape('fill')
-              .color('#ccc')
-              .style({
-                opacity: 0.5,
-                opacityLinear: {
-                  enable: true,
-                  dir: 'in', // in - out
-                },
-              });
-
-            const westLakePoiLayer = new PointLayer({ zIndex: 1 })
-              .source(westLakePoiData, {
-                parser: {
-                  type: 'json',
-                  x: 'lng',
-                  y: 'lat',
-                },
-              })
-              .shape('type', (v) => v)
-              .size(40);
-
-            const poiLayer = new PointLayer({ zIndex: 1 })
-              .source(poiData, {
-                parser: {
-                  type: 'json',
-                  x: 'lng',
-                  y: 'lat',
-                },
-              })
-              .shape('type', (v) => v)
-              .size(10);
-
-            scene.addLayer(lakeLayer);
-            scene.addLayer(lakeBorderLayer);
-            scene.addLayer(landLayer);
-            scene.addLayer(westLakePoiLayer);
-            scene.addLayer(poiLayer);
-          },
-        );
-
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const colors = ['#66c2a4', '#2ca25f', '#006d2c'];
-          // @ts-ignore
-          const layer = new LineLayer({})
-            .source(data)
-            .size(2.5)
-            .shape('line')
-            .texture('arrow')
-            .color('', () => {
-              return colors[Math.floor(Math.random() * colors.length)];
-            })
-            .animate({
-              interval: 1, // 间隔
-              duration: 1, // 持续时间，延时
-              trailLength: 2, // 流线长度
-            })
-            .style({
-              opacity: 0.6,
-              lineTexture: true, // 开启线的贴图功能
-              iconStep: 20, // 设置贴图纹理的间距
-              borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
-              borderColor: '#fff', // 默认为 #ccc
-            });
-          scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_markerlayer.tsx b/stories/Map/components/amap2demo_markerlayer.tsx
deleted file mode 100644
index e7a2429bee..0000000000
--- a/stories/Map/components/amap2demo_markerlayer.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { MarkerLayer, Marker, Scene } from '@antv/l7';
-import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo_markerlayer extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    function getColor(v: number) {
-      return v > 50
-        ? '#800026'
-        : v > 40
-        ? '#BD0026'
-        : v > 30
-        ? '#E31A1C'
-        : v > 20
-        ? '#FC4E2A'
-        : v > 10
-        ? '#FD8D3C'
-        : v > 5
-        ? '#FEB24C'
-        : v > 0
-        ? '#FED976'
-        : '#FFEDA0';
-    }
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json',
-    );
-    const nodes = await response.json();
-    // const markerLayer = new MarkerLayer({ cluster: true });
-    const markerLayer = new MarkerLayer({});
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMapV2({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 3,
-      }),
-    });
-
-    // tslint:disable-next-line:prefer-for-of
-    for (let i = 0; i < nodes.length; i++) {
-      if (nodes[i].g !== '1' || nodes[i].v === '') {
-        continue;
-      }
-      const el = document.createElement('label');
-      el.className = 'labelclass';
-      el.textContent = nodes[i].v + '℃';
-      el.style.background = getColor(nodes[i].v);
-      el.style.borderColor = getColor(nodes[i].v);
-
-      // el.addEventListener('click', e =>{
-      //   console.log(e)
-      // })
-
-      const marker = new Marker({
-        element: el,
-      }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
-
-      marker.on('click', () => {
-        console.log('marker click');
-      });
-
-      markerLayer.addMarker(marker);
-    }
-    scene.addMarkerLayer(markerLayer);
-    // console.log('markerLayer', markerLayer);
-
-    // console.log(markerLayer.getClusterMarker())
-    // console.log('markerLayer', markerLayer.getMarkers());
-    scene.on('loaded', () => {
-      // markerLayer.hide()
-      // console.log('markerLayer', markerLayer.getMarkers());
-      // const markerList = markerLayer.getMarkers();
-      // markerList.map((m) => {
-      //   // @ts-ignore
-      //   const { lngLat } = m;
-      //   m.setLnglat({
-      //     lng: lngLat.lng,
-      //     lat: lngLat.lat + 10,
-      //   });
-      // });
-      // // @ts-ignore
-      // markerLayer.markers.map(m => {
-      //   // @ts-ignore
-      //   const { lngLat } = m;
-      //   console.log(m)
-      //   // m.setLnglat({
-      //   //   lng: lnglat.lng,
-      //   //   lat: +(lnglat.lat) + 10
-      //   // })
-      // })
-      // setTimeout(() => {
-      //   markerLayer.clear()
-      //   console.log('markerLayer', markerLayer.getMarkers());
-      // }, 2000)
-    });
-
-    let f = 0;
-    // setInterval(() => {
-    //   if (f === 0) {
-    //     markerLayer.hide();
-    //     f = 1;
-    //   } else {
-    //     markerLayer.show();
-    //     f = 0;
-    //   }
-    // }, 800);
-    this.scene = scene;
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_mesh.tsx b/stories/Map/components/amap2demo_mesh.tsx
deleted file mode 100644
index 9d7a5d0ec6..0000000000
--- a/stories/Map/components/amap2demo_mesh.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { PointLayer, Scene, PolygonLayer, LineLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo_mesh extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        style: 'dark',
-        pitch: 40,
-        center: [118.8, 32.056],
-        zoom: 12.5,
-      }),
-    });
-
-    this.scene = scene;
-    let fontFamily = 'iconfont';
-    let fontPath =
-      '//at.alicdn.com/t/font_2534097_x6rsov3i1g.woff2?t=1622107341225';
-    scene.addIconFont('icon', '&#xe69e;');
-    scene.addFontFace(fontFamily, fontPath);
-
-    let colors = [
-      '#87CEFA',
-      '#00BFFF',
-
-      '#7FFFAA',
-      '#00FF7F',
-      '#32CD32',
-
-      '#F0E68C',
-      '#FFD700',
-
-      '#FF7F50',
-      '#FF6347',
-      '#FF0000',
-    ];
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const filllayer = new PolygonLayer({
-            name: 'fill',
-            zIndex: 3,
-          })
-            .source(data)
-            .shape('fill')
-            .color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)'])
-            // .color('count', [
-            //   '#87CEFA',
-            //   '#00BFFF',
-
-            //   '#7FFFAA',
-            //   '#00FF7F',
-            //   '#32CD32',
-
-            //   '#F0E68C',
-            //   '#FFD700',
-
-            //   '#FF7F50',
-            //   '#FF6347',
-            //   '#FF0000'
-            // ])
-            .style({
-              opacity: 0.5,
-            });
-          scene.addLayer(filllayer);
-
-          const linelayer = new LineLayer({
-            zIndex: 5,
-            name: 'line2',
-          })
-            .source(data)
-            .shape('line')
-            .size(1)
-            .color('#fff')
-            .style({
-              opacity: 0.3,
-            });
-          scene.addLayer(linelayer);
-
-          const pointLayer = new PointLayer({
-            zIndex: 10,
-          })
-            .source(data)
-            .shape('icon', 'text')
-            .size(30)
-            .color('count', (t) => {
-              let c = Number(t.replace('℃', ''));
-              return colors[Math.floor(((c - 18) / 16) * 10)];
-            })
-            .style({
-              textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-              textOffset: [30, 5],
-              padding: [2, 2],
-              fontFamily,
-              iconfont: true,
-              // textAllowOverlap: true
-            });
-          scene.addLayer(pointLayer);
-
-          const tempertureLayer = new PointLayer({
-            zIndex: 10,
-          })
-            .source(data)
-            .shape('count', 'text')
-            .size(12)
-            // .color('count', [
-            //   '#87CEFA',
-            //   '#00BFFF',
-
-            //   '#7FFFAA',
-            //   '#00FF7F',
-            //   '#32CD32',
-
-            //   '#F0E68C',
-            //   '#FFD700',
-
-            //   '#FF7F50',
-            //   '#FF6347',
-            //   '#FF0000'
-            // ])
-            .color('count', (t) => {
-              let c = Number(t.replace('℃', ''));
-              return colors[Math.floor(((c - 18) / 16) * 10)];
-            })
-            .style({
-              textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-              textOffset: [35, 30],
-              padding: [1, 1],
-            });
-          scene.addLayer(tempertureLayer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_mesh2.tsx b/stories/Map/components/amap2demo_mesh2.tsx
deleted file mode 100644
index ebe350a698..0000000000
--- a/stories/Map/components/amap2demo_mesh2.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { PointLayer, Scene, PolygonLayer, LineLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo_mesh2 extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        style: 'dark',
-        pitch: 40,
-        center: [118.8, 32.056],
-        zoom: 12.5,
-      }),
-    });
-
-    this.scene = scene;
-    let fontFamily = 'iconfont';
-    let fontPath =
-      '//at.alicdn.com/t/font_2534097_bl34aphh10n.woff2?t=1622180820063';
-    scene.addIconFont('up', '&#xe61d;');
-    scene.addIconFont('down', '&#xe61e;');
-    scene.addFontFace(fontFamily, fontPath);
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/bmw-prod/41802695-0f7e-4a81-ab16-539c4e39df0d.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const filllayer = new PolygonLayer({
-            name: 'fill',
-            zIndex: 3,
-          })
-            .source(data)
-            .shape('fill')
-            .color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)'])
-            .style({
-              opacity: 0.5,
-            });
-          scene.addLayer(filllayer);
-
-          const linelayer = new LineLayer({
-            zIndex: 5,
-            name: 'line2',
-          })
-            .source(data)
-            .shape('line')
-            .size(1)
-            .color('#fff')
-            .style({
-              opacity: 0.3,
-            });
-          scene.addLayer(linelayer);
-
-          const pointLayer = new PointLayer({
-            zIndex: 10,
-          })
-            .source(data)
-            .shape('icon', 'text')
-            .size(15)
-            .color('count', (n) => (n > 0 ? '#0f0' : '#f00'))
-            .style({
-              textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-              textOffset: [30, 5],
-              padding: [2, 2],
-              fontFamily,
-              iconfont: true,
-              // textAllowOverlap: true
-            });
-          scene.addLayer(pointLayer);
-
-          const textLayer = new PointLayer({
-            zIndex: 10,
-          })
-            .source(data)
-            .shape('count', 'text')
-            .size(12)
-            .color('count', (n) => (n > 0 ? '#0f0' : '#f00'))
-            .style({
-              textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-              textOffset: [40, 10],
-              padding: [1, 1],
-            });
-          scene.addLayer(textLayer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_polygon.tsx b/stories/Map/components/amap2demo_polygon.tsx
deleted file mode 100644
index 4b1fdea338..0000000000
--- a/stories/Map/components/amap2demo_polygon.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { PolygonLayer, Scene, Source } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_polygon extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMapV2({
-        pitch: 40,
-        // center: [120, 30],
-        center: [113.8623046875, 30.031055426540206],
-        zoom: 8,
-      }),
-    });
-    this.scene = scene;
-    const emptyData = {
-      type: 'FeatureCollection',
-      features: [],
-    };
-    const data = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {
-            testOpacity: 0.8,
-          },
-          geometry: {
-            type: 'Polygon',
-            coordinates: [
-              [
-                [113.8623046875, 30.031055426540206],
-                [116.3232421875, 30.031055426540206],
-                [116.3232421875, 31.090574094954192],
-                [113.8623046875, 31.090574094954192],
-                [113.8623046875, 30.031055426540206],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    const data2 = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {
-            testOpacity: 0.8,
-          },
-          geometry: {
-            type: 'Polygon',
-            coordinates: [
-              [
-                [113.8623046875 + 1, 30.031055426540206],
-                [116.3232421875 + 1, 30.031055426540206],
-                [116.3232421875 + 1, 31.090574094954192],
-                [113.8623046875 + 1, 31.090574094954192],
-                [113.8623046875 + 1, 30.031055426540206],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    const source = new Source(emptyData);
-
-    const layer = new PolygonLayer({
-      // autoFit: true,
-    })
-      // .source(data)
-      .source(emptyData)
-      // .source(source)
-      .shape('fill')
-      .color('red')
-      .active(true)
-      .style({
-        // opacityLinear: {
-        //   enable: true,
-        //   dir: 'in',
-        // },
-      });
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-      scene.render();
-      setTimeout(() => {
-        layer.setData(data);
-        scene.render();
-      }, 3000);
-    });
-
-    // const layer2 = new PolygonLayer({
-    //   autoFit: true,
-    // })
-    //   .source(data2)
-    //   .shape('fill')
-    //   .color('#ff0')
-    //   .active(true)
-    //   .style({
-    //     // opacity: 0.4,
-    //     // opacityLinear: {
-    //     //   enable: true,
-    //     //   dir: 'out',
-    //     // },
-    //     // raisingHeight: 50000,
-    //   });
-    // scene.addLayer(layer2);
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_rasterlayer.tsx b/stories/Map/components/amap2demo_rasterlayer.tsx
deleted file mode 100644
index cc9c6c3960..0000000000
--- a/stories/Map/components/amap2demo_rasterlayer.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { RasterLayer, Scene, PointLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-// tslint:disable-next-line:no-submodule-imports
-// @ts-ignore
-import * as GeoTIFF from 'geotiff';
-
-export default class Amap2demo_rasterLayer extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  private async getTiffData() {
-    const response = await fetch(
-      'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
-      // 'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff',
-    );
-    const arrayBuffer = await response.arrayBuffer();
-    const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
-    const image = await tiff.getImage();
-    const width = image.getWidth();
-    const height = image.getHeight();
-    const values = await image.readRasters();
-    return {
-      data: values[0],
-      width,
-      height,
-      min: 0,
-      max: 8000,
-    };
-  }
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [121.268, 30.3628],
-        pitch: 0,
-        style: 'dark',
-        zoom: 2,
-      }),
-    });
-    this.scene = scene;
-
-    const point = new PointLayer()
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .shape('circle')
-      .size(10)
-      .color('#f00');
-
-    scene.addLayer(point);
-
-    const tiffdata = await this.getTiffData();
-
-    const layer = new RasterLayer({});
-    const mindata = -0;
-    const maxdata = 8000;
-
-    layer
-      .source(tiffdata.data, {
-        parser: {
-          type: 'raster',
-          width: tiffdata.width,
-          height: tiffdata.height,
-          extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
-        },
-      })
-      .style({
-        opacity: 0.8,
-        domain: [mindata, maxdata],
-        clampLow: true,
-        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],
-        },
-      });
-
-    scene.addLayer(layer);
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_road2.tsx b/stories/Map/components/amap2demo_road2.tsx
deleted file mode 100644
index 020c3fa3e3..0000000000
--- a/stories/Map/components/amap2demo_road2.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { LineLayer, Scene, PointLayer, PolygonLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_road2 extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120.165, 30.26],
-        pitch: 0,
-        zoom: 15,
-        viewMode: '3D',
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-    const data = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'MultiPolygon',
-            coordinates: [
-              [
-                [
-                  [120.16021728515624, 30.259660295442085],
-                  [120.15987396240234, 30.25313608393673],
-                  [120.16605377197266, 30.253729211980726],
-                  [120.1658821105957, 30.258474107402265],
-                ],
-              ],
-              [
-                [
-                  [120.1703453063965, 30.258474107402265],
-                  [120.17086029052733, 30.254174055663515],
-                  [120.17583847045898, 30.254915457324778],
-                  [120.17446517944336, 30.258474107402265],
-                ],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    const data2 = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'MultiPolygon',
-            coordinates: [
-              [
-                [
-                  [120.16536712646484, 30.26336704072365],
-                  [120.16777038574219, 30.2657392842738],
-                  [120.17086029052733, 30.26232916614846],
-                ],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    scene.on('loaded', () => {
-      const polygonlayer = new PolygonLayer({})
-        .source(data)
-        .shape('fill')
-        .color('red');
-      scene.addLayer(polygonlayer);
-
-      const polygonlayer2 = new PolygonLayer({})
-        .source(data2)
-        .shape('fill')
-        .color('#ff0');
-      scene.addLayer(polygonlayer2);
-
-      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(5)
-            .shape('line')
-            // .texture('02')
-            // .color('#ccc')
-            .color('rgb(20, 180, 90)')
-            // .animate({
-            //   interval: 1, // 间隔
-            //   duration: 1, // 持续时间，延时
-            //   trailLength: 2, // 流线长度
-            // })
-            .style({
-              borderWidth: 0.35,
-              borderColor: '#fff',
-              // opacity: 0.5,
-              // lineTexture: true, // 开启线的贴图功能
-              // iconStep: 80, // 设置贴图纹理的间距
-            })
-            .active(true);
-          scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_text.tsx b/stories/Map/components/amap2demo_text.tsx
deleted file mode 100644
index 40dce643dd..0000000000
--- a/stories/Map/components/amap2demo_text.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo_text extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    let fontFamily = 'iconfont';
-    let fontPath =
-      '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496';
-
-    // let style = document.createElement('style')
-    // style.type = "text/css"
-    // style.innerText = `
-    //     @font-face{
-    //         font-family: '${fontname}';
-    //         src: url('${fontpath}') format('woff2')
-    //     }`
-    // document.getElementsByTagName('head')[0].appendChild(style)
-    // var mask = [
-    //   [
-    //     [
-    //       [110, 40],
-    //       [130, 40],
-    //       [130, 20],
-    //       [110, 20],
-    //     ],
-    //   ],
-    // ];
-
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120, 30.258134],
-        pitch: 0,
-        style: 'light',
-        zoom: 3,
-        // viewMode: "3D",
-        // mask
-      }),
-    });
-    this.scene = scene;
-    // scene.addIconFont('icon1', '&#xe98c;');
-    // scene.addIconFont("icon2", "&#xe64c;")
-
-    // scene.addIconFonts([
-    //   ['icon1', '&#xe64b;'],
-    //   ['icon2', '&#xe64c;'],
-    // ]);
-
-    scene.addFontFace(fontFamily, fontPath);
-    scene.on('loaded', () => {
-      // fetch(
-      //   'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json',
-      // )
-      //   .then((res) => res.json())
-      //   .then((data) => {
-      //     const pointLayer = new PointLayer({})
-      //       .source(data.list, {
-      //         parser: {
-      //           type: 'json',
-      //           x: 'j',
-      //           y: 'w',
-      //         },
-      //       })
-      //       .shape('icon', 'text')
-      //       .size(12)
-      //       .color('w', ['#f00', '#f00', '#0f0'])
-      //       .style({
-      //         textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-      //         textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直]
-      //         spacing: 2, // 字符间距
-      //         padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-      //         stroke: '#ffffff', // 描边颜色
-      //         strokeWidth: 0.3, // 描边宽度
-      //         strokeOpacity: 1.0,
-      //         fontFamily,
-      //         // fontFamily: "Times New Roman",
-      //         iconfont: true,
-      //         // textAllowOverlap: true,
-      //       });
-      //     // scene.addLayer(pointLayer);
-      //   });
-
-      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: [10, 0], // 文本相对锚点的偏移量 [水平, 垂直]
-              spacing: 2, // 字符间距
-              padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-              stroke: '#ffffff', // 描边颜色
-              strokeWidth: 0.3, // 描边宽度
-              strokeOpacity: 1.0,
-              // textAllowOverlap: true
-            });
-          scene.addLayer(pointLayer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_textOffset.tsx b/stories/Map/components/amap2demo_textOffset.tsx
deleted file mode 100644
index 9eefda1fd3..0000000000
--- a/stories/Map/components/amap2demo_textOffset.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap, Map as customMap, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo_textOffset extends React.Component<
-  { navList?: any },
-  { originData?: any }
-> {
-  public pointIconFontLayer: any;
-  public textLayer: any;
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      originData: [
-        {
-          lng: 120.5,
-          lat: 31.3,
-          iconType: 'cloud',
-          iconColor: '#F0F8FF',
-          weather: '多云 - 今日适宜出门',
-          textOffset: [-40, 0],
-        },
-      ],
-    };
-  }
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        // hash: true,
-        center: [121, 30.5],
-        pitch: 0,
-        style: 'dark',
-        zoom: 9,
-        zooms: [8, 10],
-      }),
-    });
-    // let originData = [
-    //   {
-    //     lng: 120,
-    //     lat: 30,
-    //     iconType: 'sun',
-    //     iconColor: '#FFA500',
-    //     weather: '晴朗',
-    //     textOffset: [10, 0],
-    //   },
-    //   {
-    //     lng: 120.2,
-    //     lat: 30.5,
-    //     iconType: 'sun',
-    //     iconColor: '#FFA500',
-    //     weather: '晴朗 - 高温预警',
-    //     textOffset: [-25, 0],
-    //   },
-    //   {
-    //     lng: 121.5,
-    //     lat: 31.4,
-    //     iconType: 'cloud',
-    //     iconColor: '#F0F8FF',
-    //     weather: '多云',
-    //     textOffset: [10, 0],
-    //   },
-    //   {
-    //     lng: 120,
-    //     lat: 31,
-    //     iconType: 'cloud',
-    //     iconColor: '#F0F8FF',
-    //     weather: '多云 - 温度适宜',
-    //     textOffset: [-25, 0],
-    //   },
-    //   {
-    //     lng: 120.6,
-    //     lat: 30.8,
-    //     iconType: 'cloud',
-    //     iconColor: '#F0F8FF',
-    //     weather: '多云',
-    //     textOffset: [10, 0],
-    //   },
-    //   {
-    //     lng: 120.5,
-    //     lat: 31.3,
-    //     iconType: 'cloud',
-    //     iconColor: '#F0F8FF',
-    //     weather: '多云 - 今日适宜出门',
-    //     textOffset: [-40, 0],
-    //   },
-    //   {
-    //     lng: 121.3,
-    //     lat: 30.2,
-    //     iconType: 'smallRain',
-    //     iconColor: '#6EA0FF',
-    //     weather: '中雨转小雨',
-    //     textOffset: [-10, 0],
-    //   },
-    //   {
-    //     lng: 121,
-    //     lat: 30.5,
-    //     iconType: 'smallRain',
-    //     iconColor: '#6EA0FF',
-    //     weather: '小雨',
-    //     textOffset: [10, 0],
-    //   },
-    //   {
-    //     lng: 120.6,
-    //     lat: 30,
-    //     iconType: 'middleRain',
-    //     iconColor: '#6495ED',
-    //     weather: '中雨',
-    //     textOffset: [10, 0],
-    //   },
-    //   {
-    //     lng: 120.2,
-    //     lat: 29.7,
-    //     iconType: 'smallRain',
-    //     iconColor: '#6EA0FF',
-    //     weather: '小雨',
-    //     textOffset: [10, 0],
-    //   },
-    //   {
-    //     lng: 121.7,
-    //     lat: 29.8,
-    //     iconType: 'middleRain',
-    //     iconColor: '#6495ED',
-    //     weather: '大雨转中雨',
-    //     textOffset: [-15, 0],
-    //   },
-    //   {
-    //     lng: 121.5,
-    //     lat: 30,
-    //     iconType: 'hugeRain',
-    //     iconColor: '#4678D2',
-    //     weather: '大雨',
-    //     textOffset: [10, 0],
-    //   },
-    // ];
-
-    let fontFamily = 'iconfont';
-    let fontPath =
-      '//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
-    scene.addIconFonts([
-      ['smallRain', '&#xe6f7;'],
-      ['middleRain', '&#xe61c;'],
-      ['hugeRain', '&#xe6a6;'],
-      ['sun', '&#xe6da;'],
-      ['cloud', '&#xe8da;'],
-    ]);
-    scene.addFontFace(fontFamily, fontPath);
-    // console.log(this.state.originData)
-    this.scene = scene;
-    scene.on('loaded', () => {
-      this.pointIconFontLayer = new PointLayer({})
-        // @ts-ignore
-        .source(
-          [
-            {
-              lng: 120.5,
-              lat: 31.3,
-              iconType: 'cloud',
-              iconColor: '#F0F8FF',
-              weather: '多云 - 今日适宜出门',
-              textOffset: [-40, 0],
-            },
-            {
-              lng: 120.5,
-              lat: 31.1,
-              iconType: 'cloud',
-              iconColor: '#F0F8FF',
-              weather: '多云 - 今日适宜出门',
-              textOffset: [-40, 0],
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          },
-        )
-        .shape('iconType', 'text')
-        .size(30)
-        .color('iconColor')
-        .style({
-          textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-          textOffset: 'textOffset', // 文本相对锚点的偏移量 [水平, 垂直]
-          fontFamily,
-          iconfont: true,
-          textAllowOverlap: true,
-        });
-      scene.addLayer(this.pointIconFontLayer);
-
-      this.textLayer = new PointLayer({})
-        .source(
-          [
-            {
-              lng: 120.5,
-              lat: 31.3,
-              iconType: 'cloud',
-              iconColor: '#F0F8FF',
-              weather: '多云 - 今日适宜出门',
-              textOffset: [-40, 0],
-            },
-            {
-              lng: 120.5,
-              lat: 31.1,
-              iconType: 'cloud',
-              iconColor: '#F0F8FF',
-              weather: '多云 - 今日适宜出门',
-              textOffset: [-40, 0],
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          },
-        )
-        .shape('weather', 'text')
-        .size(16)
-        .color('#f00')
-        .style({
-          textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-          textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
-          spacing: 2, // 字符间距
-          padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-          fontFamily: 'Times New Roman',
-          textAllowOverlap: true,
-        });
-      scene.addLayer(this.textLayer);
-    });
-  }
-
-  changeData = () => {
-    console.log('changeData');
-
-    // this.textLayer.source([ {
-    //   lng: 120.5,
-    //   lat: 31.3,
-    //   iconType: 'cloud',
-    //   iconColor: '#F0F8FF',
-    //   weather: '多云 - 今日适宜出',
-    //   textOffset: [-40, 0],
-    // }], {
-    //   parser: {
-    //     type: 'json',
-    //     x: 'lng',
-    //     y: 'lat',
-    //   },
-    // })
-    this.textLayer.setData([
-      {
-        lng: 120.5,
-        lat: 31.3,
-        iconType: 'cloud',
-        iconColor: '#F0F8FF',
-        weather: '多云 - ' + Math.random(),
-        textOffset: [-40, 0],
-      },
-      {
-        lng: 120.5,
-        lat: 31.1,
-        iconType: 'cloud',
-        iconColor: '#F0F8FF',
-        weather: '多云2 - ' + Math.random(),
-        textOffset: [-40, 0],
-      },
-    ]);
-    // this.textLayer.render()
-    // this.scene.render()
-  };
-
-  public render() {
-    return (
-      <>
-        <button
-          style={{
-            position: 'absolute',
-            right: '100px',
-            top: '100px',
-            zIndex: 10,
-          }}
-          onClick={this.changeData}
-        >
-          123
-        </button>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_textSelect.tsx b/stories/Map/components/amap2demo_textSelect.tsx
deleted file mode 100644
index c071d514d8..0000000000
--- a/stories/Map/components/amap2demo_textSelect.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-export default class Amap2demo_textSelect extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    let fontFamily = 'iconfont';
-    let fontPath =
-      '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496';
-
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120, 30.258134],
-        pitch: 0,
-        style: 'light',
-        zoom: 3,
-        // viewMode: "3D",
-        // mask
-      }),
-    });
-    this.scene = scene;
-    scene.addIconFont('icon1', '&#xe98c;');
-    // scene.addIconFont("icon2", "&#xe64c;")
-
-    // scene.addIconFonts([
-    //   ['icon1', '&#xe64b;'],
-    //   ['icon2', '&#xe64c;'],
-    // ]);
-
-    scene.addFontFace(fontFamily, fontPath);
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          console.log(data.list[0]);
-          const pointLayer = new PointLayer({})
-            .source(data.list, {
-              parser: {
-                type: 'json',
-                x: 'j',
-                y: 'w',
-              },
-            })
-            .shape('icon', 'text')
-            .size(12)
-            .color('w', ['#f00', '#f00', '#0f0'])
-            .style({
-              textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-              textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直]
-              spacing: 2, // 字符间距
-              padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-              stroke: '#ffffff', // 描边颜色
-              strokeWidth: 0.3, // 描边宽度
-              strokeOpacity: 1.0,
-              fontFamily,
-              // fontFamily: "Times New Roman",
-              iconfont: true,
-              // textAllowOverlap: true,
-            });
-          scene.addLayer(pointLayer);
-          pointLayer.boxSelect([0, 0, 155, 278], (f) => {
-            console.log('======');
-            console.log(f);
-          });
-        });
-
-      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,
-              // textAllowOverlap: true
-            });
-          scene.addLayer(pointLayer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_wind.tsx b/stories/Map/components/amap2demo_wind.tsx
deleted file mode 100644
index 8f82860f55..0000000000
--- a/stories/Map/components/amap2demo_wind.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-// @ts-ignore
-import { Scene, WindLayer, PointLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-import * as dat from 'dat.gui';
-
-export default class WindMap extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-  private gui: any;
-
-  public componentWillUnmount() {
-    if (this.gui) {
-      this.gui.destroy();
-    }
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        center: [105, 35],
-        pitch: 0,
-        style: 'normal',
-        zoom: 4,
-      }),
-    });
-    this.scene = scene;
-
-    const styleOptions = {
-      uMin: -21.32,
-      uMax: 26.8,
-      vMin: -21.57,
-      vMax: 21.42,
-      numParticles: 65535 / 2,
-      fadeOpacity: 0.996,
-      rampColors: {
-        0.0: '#3288bd',
-        0.1: '#66c2a5',
-        0.2: '#abdda4',
-        0.3: '#e6f598',
-        0.4: '#fee08b',
-        0.5: '#fdae61',
-        0.6: '#f46d43', // f46d43
-        1.0: '#d53e4f',
-      },
-      sizeScale: 1,
-    };
-
-    // const pointLayer = new PointLayer({ zIndex: 1 })
-    //   .source(
-    //     [
-    //       {
-    //         lng: 121.107846,
-    //         lat: 30.267069,
-    //       },
-    //     ],
-    //     {
-    //       parser: {
-    //         type: 'json',
-    //         x: 'lng',
-    //         y: 'lat',
-    //       },
-    //     },
-    //   )
-    //   .shape('circle')
-    //   .color('#f00')
-    //   .active(true)
-    //   .size(40)
-    //   .style({
-    //     stroke: '#fff',
-    //     storkeWidth: 2,
-    //   });
-
-    scene.on('loaded', () => {
-      // scene.addLayer(pointLayer);
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-      )
-        .then((res) => res.json())
-        .then((maskData) => {
-          const layer = new WindLayer({
-            mask: true,
-            maskfence: maskData,
-            // maskColor: '#fff',
-            // maskOpacity: 0.5,
-          });
-          layer
-            .source(
-              'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ',
-              {
-                parser: {
-                  type: 'image',
-                  // extent: [-180, -85, 180, 85],
-                  extent: [70, 16, 136, 54],
-                },
-              },
-            )
-            .animate(true)
-            .style({
-              uMin: styleOptions.uMin,
-              uMax: styleOptions.uMax,
-              vMin: styleOptions.vMin,
-              vMax: styleOptions.vMax,
-              fadeOpacity: styleOptions.fadeOpacity,
-              numParticles: styleOptions.numParticles,
-              rampColors: styleOptions.rampColors,
-              sizeScale: styleOptions.sizeScale,
-            });
-          scene.addLayer(layer);
-
-          /*** 运行时修改样式属性 ***/
-          const gui = new dat.GUI();
-          this.gui = gui;
-
-          const pointFolder = gui.addFolder('风场数据');
-          pointFolder
-            .add(styleOptions, 'numParticles', 0, 65535, 1)
-            .onChange((num: number) => {
-              layer.style({
-                numParticles: num,
-              });
-            });
-
-          pointFolder
-            .add(styleOptions, 'uMin', -100, 100, 1)
-            .onChange((num: number) => {
-              layer.style({
-                uMin: num,
-              });
-            });
-
-          pointFolder
-            .add(styleOptions, 'uMax', -100, 100, 1)
-            .onChange((num: number) => {
-              layer.style({
-                uMax: num,
-              });
-            });
-
-          pointFolder
-            .add(styleOptions, 'vMin', -100, 100, 1)
-            .onChange((num: number) => {
-              layer.style({
-                vMin: num,
-              });
-            });
-
-          pointFolder
-            .add(styleOptions, 'vMax', -100, 100, 1)
-            .onChange((num: number) => {
-              layer.style({
-                vMax: num,
-              });
-            });
-
-          pointFolder
-            .add(styleOptions, 'fadeOpacity', 0.9, 1, 0.01)
-            .onChange((num: number) => {
-              layer.style({
-                fadeOpacity: num,
-              });
-            });
-
-          pointFolder
-            .add(styleOptions, 'sizeScale', 0, 2, 0.01)
-            .onChange((num: number) => {
-              layer.style({
-                sizeScale: num,
-              });
-            });
-
-          pointFolder
-            .addColor(styleOptions.rampColors, '0.6')
-            .onChange((color: string) => {
-              layer.style({
-                rampColors: {
-                  0.0: '#3288bd',
-                  0.1: '#66c2a5',
-                  0.2: '#abdda4',
-                  0.3: '#e6f598',
-                  0.4: '#fee08b',
-                  0.5: '#fdae61',
-                  0.6: color,
-                  1.0: '#d53e4f',
-                },
-              });
-            });
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amap2demo_winds.tsx b/stories/Map/components/amap2demo_winds.tsx
deleted file mode 100644
index c8a58d1edf..0000000000
--- a/stories/Map/components/amap2demo_winds.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_winds extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 0,
-        style: 'light',
-        center: [-74.006, 40.7128],
-        zoom: 2,
-        viewMode: '3D',
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/bmw-prod/7455fead-1dc0-458d-b91a-fb4cf99e701e.txt',
-      )
-        .then((res) => res.text())
-        .then((data) => {
-          const layer = new LineLayer({ blend: 'normal' })
-            .source(data, {
-              parser: {
-                type: 'csv',
-                x: 'lng1',
-                y: 'lat1',
-                x1: 'lng2',
-                y1: 'lat2',
-              },
-            })
-            .size(1)
-            .shape('arc')
-            .color('#6495ED')
-            .animate({
-              duration: 4,
-              interval: 0.2,
-              trailLength: 0.6,
-            });
-          // .forward(false)
-          scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/amapdemo_extrude.tsx b/stories/Map/components/amapdemo_extrude.tsx
deleted file mode 100644
index f75433da9e..0000000000
--- a/stories/Map/components/amapdemo_extrude.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amapdemo_extrude extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [121.107846, 30.267069],
-        pitch: 35.210526315789465,
-        style: 'dark',
-        zoom: 8,
-        animateEnable: false,
-      }),
-    });
-
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const pointLayer = new PointLayer({ depth: false })
-            .source(data.list, {
-              parser: {
-                type: 'json',
-                x: 'j',
-                y: 'w',
-              },
-            })
-            // .shape('squareColumn') // cylinder triangleColumn hexagonColumn squareColumn
-            .shape('cylinder') // cylinder triangleColumn hexagonColumn squareColumn
-            .size('t', function(level) {
-              return [1, 1, level * 2 + 20];
-              // return [10, 10, level * 2 + 20];
-            })
-            .active(true)
-            .color('#0ff')
-            .style({
-              // opacity: 0.8,
-              opacityLinear: {
-                enable: true, // true - false
-                dir: 'up', // up - down
-              },
-              lightEnable: false,
-              // sourceColor: '#f00',
-              // targetColor: "#0f0"
-            });
-          scene.addLayer(pointLayer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/bugfix.tsx b/stories/Map/components/bugfix.tsx
deleted file mode 100644
index e3aee87f41..0000000000
--- a/stories/Map/components/bugfix.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import {
-  Scene,
-  GaodeMap,
-  GaodeMapV2,
-  Mapbox,
-  Map,
-  PointLayer,
-  Marker,
-  MarkerLayer,
-  Popup,
-  HeatmapLayer,
-  LineLayer,
-  Source,
-  PolygonLayer,
-} from '@antv/l7';
-
-export default class Amap2demo extends React.Component {
-  public async componentDidMount() {
-    const source = new Source(
-      [
-        {
-          lng: 120,
-          lat: 30,
-        },
-      ],
-      {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-      },
-    );
-
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        pitch: 0,
-        style: 'light',
-        center: [-96, 37.8],
-        zoom: 3,
-      }),
-    });
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          // console.log(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)
-            .scale('density', {
-              type: 'quantile',
-            })
-            .color('density', color)
-            .shape('fill')
-            .active(true)
-            .style({
-              opacity: 1.0,
-            });
-
-          scene.addLayer(layer);
-          console.log(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        ></div>
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/busline.tsx b/stories/Map/components/busline.tsx
deleted file mode 100644
index cb34162344..0000000000
--- a/stories/Map/components/busline.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-// @ts-ignore
-import { PointLayer, Scene, LineLayer, PolygonLayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-import * as turf from '@turf/turf';
-
-const aspaceLnglat = [120.1019811630249, 30.264701434772807] as [
-  number,
-  number,
-];
-export default class BusLine extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        center: [103.83735604457024, 1.360253881403068],
-        pitch: 4.00000000000001,
-        zoom: 10.210275860702593,
-        rotation: 19.313180925794313,
-      }),
-    });
-
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const layer = new LineLayer({})
-            .source(data, {
-              parser: {
-                type: 'json',
-                coordinates: 'path',
-              },
-            })
-            .size('level', (level) => {
-              return [0.8, level * 1];
-            })
-            .style({
-              // vertexHeightScale: 0.01
-            })
-            .shape('line')
-            .active(true)
-            .color(
-              'level',
-              [
-                '#0A3663',
-                '#1558AC',
-                '#3771D9',
-                '#4D89E5',
-                '#64A5D3',
-                '#72BED6',
-                '#83CED6',
-                '#A6E1E0',
-                '#B8EFE2',
-                '#D7F9F0',
-              ]
-                .reverse()
-                .slice(0, 8),
-            );
-          scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/gridTile.tsx b/stories/Map/components/gridTile.tsx
deleted file mode 100644
index 4047c2bc8f..0000000000
--- a/stories/Map/components/gridTile.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { LineLayer, Scene, PointLayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map } from '@antv/l7-maps';
-import * as React from 'react';
-
-function getImageData(img: HTMLImageElement) {
-  let canvas: HTMLCanvasElement = document.createElement('canvas');
-  let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-  const { width, height } = img;
-  canvas.width = width;
-  canvas.height = height;
-
-  ctx.drawImage(img, 0, 0, width, height);
-  const imageData = ctx.getImageData(0, 0, width, height);
-
-  return imageData;
-}
-
-function getLatData(data: number[]) {
-  const size = Math.floor(Math.sqrt(data.length));
-
-  const arr = [];
-  let startLng = 110,
-    lngStep = 5 / (size - 1);
-  let startLat = 30,
-    latStep = -5 / (size - 1);
-  for (let i = 0; i < size; i++) {
-    let arr2 = [];
-    for (let j = 0; j < size; j++) {
-      let index = i + j * size;
-      let x = startLng + lngStep * i;
-      let y = startLat + latStep * j;
-
-      arr2.push([x, y, data[index]]);
-    }
-    arr.push(arr2);
-  }
-  return arr;
-}
-
-function getLngData(data: number[]) {
-  const size = Math.floor(Math.sqrt(data.length));
-  const arr = [];
-  let startLng = 110,
-    lngStep = 5 / (size - 1);
-  let startLat = 30,
-    latStep = -5 / (size - 1);
-
-  for (let i = 0; i < size; i++) {
-    let arr2 = [];
-    for (let j = 0; j < size; j++) {
-      let index = i * size + j;
-      let x = startLng + lngStep * j;
-      let y = startLat + latStep * i;
-
-      arr2.push([x, y, data[index]]);
-    }
-    arr.push(arr2);
-  }
-  return arr;
-}
-
-function getR(data: Uint8ClampedArray) {
-  const arr = [];
-  for (let i = 0; i < data.length; i += 4) {
-    arr.push(data[i]);
-  }
-  return arr;
-}
-
-export default class GridTile extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [113, 29],
-        pitch: 70,
-        zoom: 9,
-        rotation: 180,
-        style: 'blank',
-        // style: 'dark',
-      }),
-    });
-    this.scene = scene;
-
-    const img: HTMLImageElement = new Image();
-    img.crossOrigin = 'none';
-    img.src =
-      'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*UkvYRYS5jTAAAAAAAAAAAAAAARQnAQ';
-    img.onload = function() {
-      const data = getImageData(img);
-      const rData = getR(data.data);
-      let d1 = getLngData(rData);
-
-      let d2 = getLatData(rData);
-      const geoData = {
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'MultiLineString',
-              coordinates: d1,
-            },
-          },
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'MultiLineString',
-              coordinates: d2,
-            },
-          },
-        ],
-      };
-      const layer = new LineLayer({})
-        .source(geoData)
-        .size(1)
-        .shape('simple')
-        // .shape('line')
-        // .color('rgb(22, 119, 255)')
-        .color('#f00')
-        .style({
-          vertexHeightScale: 2000,
-          opacity: 0.4,
-        });
-      scene.addLayer(layer);
-    };
-
-    scene.on('loaded', () => {});
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/lineBlur.tsx b/stories/Map/components/lineBlur.tsx
deleted file mode 100644
index c8ab65a61e..0000000000
--- a/stories/Map/components/lineBlur.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-// @ts-ignore
-import { LineLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_lineLinear extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [105, 30.258134],
-        zoom: 5,
-      }),
-    });
-    this.scene = scene;
-    const geoData = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          properties: {
-            testOpacity: 0.8,
-          },
-          geometry: {
-            type: 'Polygon',
-            coordinates: [
-              [
-                [99.228515625, 37.43997405227057],
-                [99.228515625, 35.02999636902566],
-                [101.337890625, 32.99023555965106],
-                [99.052734375, 30.29701788337205],
-                [100.72265625, 27.994401411046148],
-                [99.49218749999999, 26.352497858154024],
-                [100.634765625, 23.725011735951796],
-              ],
-              [
-                [108.544921875, 37.71859032558816],
-                [110.74218749999999, 34.66935854524543],
-                [110.21484375, 32.76880048488168],
-                [112.412109375, 32.84267363195431],
-                [112.1484375, 30.751277776257812],
-                [114.08203125, 31.42866311735861],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    scene.on('loaded', () => {
-      const layer = new LineLayer({})
-        .source(geoData)
-        .size(20)
-        .shape('line')
-        .color('#0f0')
-        .style({
-          opacity: 0.5,
-          blur: [0, 1, 0],
-        });
-      scene.addLayer(layer);
-
-      const layer2 = new LineLayer({})
-        .source(geoData)
-        .size(5)
-        .shape('line')
-        .color('#0f0')
-        .style({});
-      scene.addLayer(layer2);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx
deleted file mode 100644
index 8c37d47edc..0000000000
--- a/stories/Map/components/mapCenter.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-// @ts-ignore
-import { PointLayer, Scene, LineLayer, PolygonLayer, ILayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox, Map } from '@antv/l7-maps';
-import * as React from 'react';
-import * as turf from '@turf/turf';
-export default class GaodeMapComponent extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120.11, 30.264701434772807],
-        zoom: 14,
-      }),
-    });
-    // normal = 'normal',
-    // additive = 'additive',
-    // cylinder circle
-    // blend: 'additive'
-    // let line = new LineLayer({ zIndex: 3 })
-    //   .source(
-    //     [
-    //       {
-    //         lng: aspaceLnglat[0],
-    //         lat: aspaceLnglat[1],
-    //         lng2: aspaceLnglat[0] + 0.00104,
-    //         lat2: aspaceLnglat[1],
-    //       },
-    //     ],
-    //     {
-    //       parser: {
-    //         type: 'json',
-    //         x: 'lng',
-    //         y: 'lat',
-    //         x1: 'lng2',
-    //         y1: 'lat2',
-    //       },
-    //     },
-    //   )
-    //   .shape('line')
-    //   .size(2)
-    //   .color('#000');
-
-    let layer0 = new PointLayer({ zIndex: 2 })
-      .source(
-        [
-          {
-            lng: 120.11,
-            lat: 30.27,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .color('#ff0')
-      .shape('circle')
-      .size(30);
-
-    let layer01 = new PointLayer({ zIndex: 2 })
-      .source(
-        [
-          {
-            lng: 120.11,
-            lat: 30.27,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .color('#ff0')
-      .shape('circle')
-      .size(30)
-      .style({
-        // raisingHeight: 50
-        raisingHeight: 5000,
-      });
-
-    layer0.on('click', () => {});
-
-    let layer2 = new PointLayer({}) // blend: 'additive'
-      .source(
-        [
-          {
-            lng: 120.11,
-            lat: 30.264701434772807,
-            name: 'n3',
-          },
-          {
-            lng: 120.111,
-            lat: 30.264701434772807,
-            name: 'n3',
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      );
-
-    let layer = new PointLayer({}) // blend: 'additive'
-      .source(
-        [
-          {
-            lng: 120.11,
-            lat: 30.264701434772807,
-            name: 'n3',
-          },
-          {
-            lng: 120.111,
-            lat: 30.264701434772807,
-            name: 'n3',
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-
-      // - cylinder
-      // - triangleColumn
-      // - hexagonColumn
-      // - squareColumn,
-      .shape('circle')
-      // .shape('cylinder')
-      // .color('#0f9')
-      // .color('#4169E1')
-      // .color('#66CCFF')
-      .color('#f00')
-      // .color('name', ['#f00', '#ff0'])
-      // .size([100, 100, 1000])
-      // .size([20, 20, 200])
-      .size(50)
-      // .size('name', [20, 40])
-      // .animate({
-      //   // enable: true,
-      //   enable: false,
-      //   // type: 'www'
-      // })
-      .animate(true)
-      .active(true)
-      // .active({
-      //   color: '#f00',
-      //   mix: 0
-      // })
-      .select(true)
-      // .active({ color: '#ff0' })
-      .style({
-        // heightfixed: true,
-        // pickLight: false,
-        // pickLight: true,
-        // lightEnable: true,
-        // blur: 0.2,
-        // opacity: 0.3,
-        stroke: '#ff0',
-        strokeWidth: 10,
-        // strokeWidth: 0,
-        // strokeOpacity: 1,
-        // unit: 'meter',
-      });
-
-    layer2
-      .shape('circle')
-      .color('#f00')
-      .size(50)
-      .animate(true)
-      .active(true)
-      .style({
-        raisingHeight: 5000,
-      });
-
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer0);
-      scene.addLayer(layer01);
-      scene.addLayer(layer);
-      scene.addLayer(layer2);
-
-      scene.on('click', (e) => {
-        console.log(scene.getPickedLayer());
-      });
-      // let scale = layer.getScale('size');
-      // console.log('scale n2', scale('n2'));
-      // console.log('scale n3', scale('n3'));
-
-      // let text = new PointLayer({ zIndex: 2 })
-      //   .source(
-      //     [
-      //       {
-      //         lng: aspaceLnglat[0] + 0.0002,
-      //         lat: aspaceLnglat[1],
-      //         name: '00',
-      //       },
-      //     ],
-      //     {
-      //       parser: {
-      //         type: 'json',
-      //         x: 'lng',
-      //         y: 'lat',
-      //       },
-      //     },
-      //   )
-      //   // .shape('100m', 'text')
-      //   // .shape('circle')
-      //   .shape('name', ['00'])
-      //   .size(25)
-      //   // .color('#0f0')
-      //   // .select(true)
-      //   .style({
-      //     // textOffset: [50, 20],
-      //   });
-
-      // text.on('click', () => {
-      //   alert('***');
-      // });
-
-      // scene.addLayer(text);
-      // scene.addLayer(line);
-
-      // scene.addLayer(layer2);
-      // scene.addLayer(trufCircle);
-      // scene.on('movestart', e => console.log('e', e))
-      // scene.on('mapmove', e => console.log('e', e))
-      // scene.on('moveend', e => console.log('e', e))
-
-      // scene.on('zoomstart', e => console.log('e', e))
-      // scene.on('zoomchange', e => console.log('e', e))
-      // scene.on('zoomend', e => console.log('e', e))
-      // scene.on('mousedown', e => console.log('e', e))
-    });
-    // let c = 1;
-    // layer.on('click', () => {
-    //   // @ts-ignore
-    //   c == 1 ? scene.setEnableRender(false) : scene.setEnableRender(true);
-    //   c = 0;
-    // });
-    // layer.on('contextmenu', () => console.log('contextmenu'));
-    // layer.on('destroy', (e) => console.log('destroy', e));
-    // layer.on('remove', (e) => {
-    //   console.log('remove', e);
-    //   console.log(scene.getLayers());
-    // });
-
-    // layer.on('unclick', (e) => {
-    //   console.log('unclick');
-    // });
-
-    // layer.on('dbclick', () => {
-    //   console.log('dbclick')
-    // })
-
-    // setTimeout(() => {
-    //   layer.destroy();
-    // }, 2000);
-    // layer.on('mousemove', (e) => {
-    //   console.log(e.feature);
-    // });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/mask.tsx b/stories/Map/components/mask.tsx
deleted file mode 100644
index f98050692f..0000000000
--- a/stories/Map/components/mask.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  PolygonLayer,
-  PointLayer,
-  RasterLayer,
-} from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-// tslint:disable-next-line:no-submodule-imports
-// @ts-ignore
-import * as GeoTIFF from 'geotiff';
-export default class Amap2demo_road2 extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        center: [105, 30.26],
-        pitch: 0,
-        zoom: 2,
-        viewMode: '3D',
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const layer = new MaskLayer({}).source(data);
-
-          scene.addLayer(layer);
-        });
-      addLayer();
-    });
-    async function getTiffData() {
-      const response = await fetch(
-        'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
-      );
-      const arrayBuffer = await response.arrayBuffer();
-      const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
-      const image = await tiff.getImage();
-      const width = image.getWidth();
-      const height = image.getHeight();
-      const values = await image.readRasters();
-      return {
-        data: values[0],
-        width,
-        height,
-        min: 0,
-        max: 8000,
-      };
-    }
-
-    async function addLayer() {
-      const tiffdata = await getTiffData();
-
-      // const layer = new RasterLayer({ mask: true });
-      const layer = new RasterLayer({ mask: true });
-      layer
-        .source(tiffdata.data, {
-          parser: {
-            type: 'raster',
-            width: tiffdata.width,
-            height: tiffdata.height,
-            extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
-          },
-        })
-        .style({
-          clampLow: false,
-          clampHigh: false,
-          opacity: 0.8,
-          domain: [0, 8000],
-          rampColors: {
-            colors: [
-              '#FF4818',
-              '#F7B74A',
-              '#FFF598',
-              '#91EABC',
-              '#2EA9A1',
-              '#206C7C',
-            ].reverse(),
-            positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-          },
-        });
-
-      scene.addLayer(layer);
-    }
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/planeLine.tsx b/stories/Map/components/planeLine.tsx
deleted file mode 100644
index 263eab2149..0000000000
--- a/stories/Map/components/planeLine.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { LineLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class PlaneLine extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 40,
-        center: [110, 35.443],
-        zoom: 5,
-        viewMode: '3D',
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-    scene.addImage(
-      'plane',
-      'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
-    );
-    // 106.6400729259405 29.72018042111331 重庆
-    // 116.5883553580003 40.07680509701226 北京
-    let originData = {
-      lng1: 106.6400729259405,
-      lat1: 29.72018042111331,
-      lng2: 116.5883553580003,
-      lat2: 40.07680509701226,
-    };
-    scene.on('loaded', () => {
-      let data = [];
-      for (let i = 0; i < 11; i++) {
-        data.push({
-          thetaOffset: -0.5 + i * 0.1,
-          ...originData,
-        });
-      }
-
-      const layer = new LineLayer({
-        blend: 'normal',
-      })
-        .source(data, {
-          parser: {
-            type: 'json',
-            x: 'lng1',
-            y: 'lat1',
-            x1: 'lng2',
-            y1: 'lat2',
-          },
-        })
-        .size(1)
-        .shape('arc')
-        .color('#ccc')
-        .style({
-          opacity: 1,
-          thetaOffset: 'thetaOffset',
-        });
-      scene.addLayer(layer);
-
-      const layer2 = new LineLayer({
-        blend: 'normal',
-      })
-        .source(data, {
-          parser: {
-            type: 'json',
-            x: 'lng1',
-            y: 'lat1',
-            x1: 'lng2',
-            y1: 'lat2',
-          },
-        })
-        .size(15)
-        .texture('plane')
-        .shape('arc')
-        .color('#8C1EB2')
-        .style({
-          opacity: 1,
-          thetaOffset: 'thetaOffset',
-          lineTexture: true, // 开启线的贴图功能
-          iconStep: 20, // 设置贴图纹理的间距
-          textureBlend: 'replace',
-        })
-        .animate({
-          duration: 0.2,
-          interval: 0.5,
-          trailLength: 1,
-        });
-      scene.addLayer(layer2);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/simpleLine.tsx b/stories/Map/components/simpleLine.tsx
deleted file mode 100644
index 9c8528fe50..0000000000
--- a/stories/Map/components/simpleLine.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { LineLayer, Scene, PointLayer, Marker, MarkerLayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox, Map } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class SimpleLine extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMapV2({
-        center: [96.328125, 38.685509760012],
-        // pitch: 75,
-        zoom: 4,
-        // rotation: -30,
-        // style: 'blank',
-      }),
-    });
-    this.scene = scene;
-
-    const layer = new LineLayer({})
-      .source({
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'LineString',
-              coordinates: [
-                [90.791015625, 38.75408327579141],
-                [90.87890625, 33.797408767572485],
-                [95.185546875, 32.76880048488168],
-                [95.537109375, 34.08906131584994],
-                [96.328125, 38.685509760012],
-                [100.107421875, 38.34165619279595],
-                [101.953125, 36.80928470205937],
-                [100.107421875, 34.95799531086792],
-              ],
-            },
-          },
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'LineString',
-              coordinates: [
-                [90.791015625, 38.75408327579141],
-                [95, 45],
-              ],
-            },
-          },
-        ],
-      })
-      .size(1)
-      .shape('simple')
-      .color('rgb(22, 119, 255)')
-      .style({
-        sourceColor: '#f00',
-        targetColor: '#0f0',
-      });
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/simplePoint.tsx b/stories/Map/components/simplePoint.tsx
deleted file mode 100644
index f4c181b35a..0000000000
--- a/stories/Map/components/simplePoint.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-// @ts-ignore
-import { PointLayer, Scene, LineLayer, PolygonLayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class SimplePoint extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [121.107846, 30.267069],
-        pitch: 0,
-        // style: 'dark',
-        zoom: 15,
-      }),
-    });
-    // normal = 'normal',
-    // additive = 'additive',
-    // subtractive = 'subtractive',
-    // min = 'min',
-    // max = 'max',
-    // none = 'none',
-    // blend: 'additive'
-
-    let layer = new PointLayer({ blend: 'additive' })
-      .source(
-        [
-          {
-            lng: 121.107846,
-            lat: 30.267069,
-          },
-          {
-            lng: 121.1,
-            lat: 30.267069,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .shape('simple')
-      .color('#800')
-      .size(15)
-      .style({
-        stroke: '#f00',
-        strokeOpacity: 0.5,
-        // strokeWidth: 10,
-        // opacity: 0.5,
-      })
-      .active({ color: '#00f' });
-
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-      console.log(scene.getPointSizeRange());
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Map/components/slider.tsx b/stories/Map/components/slider.tsx
deleted file mode 100644
index cfb5a9e101..0000000000
--- a/stories/Map/components/slider.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-// @ts-ignore
-import { PointLayer, Scene, ILayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2 } from '@antv/l7-maps';
-import * as React from 'react';
-import '../index.css';
-import { animate, easeInOut } from 'popmotion';
-
-const mapCenter = [121.107846, 30.267069] as [number, number];
-
-export default class Slider extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-  public pointLayer: ILayer;
-  public isShow: boolean = false;
-  public slider: HTMLElement;
-  public sliderWidth: number;
-  public sliderRight: number = 20;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.slider = document.getElementById('sliderwrap') as HTMLElement;
-
-    this.sliderWidth = this.slider.getBoundingClientRect().width;
-
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMapV2({
-        center: mapCenter,
-        pitch: 0,
-        style: 'normal',
-        zoom: 20,
-        animateEnable: false,
-      }),
-    });
-
-    this.pointLayer = new PointLayer()
-      .source(
-        [
-          {
-            lng: 121.107846,
-            lat: 30.267069,
-          },
-          {
-            lng: 121.107,
-            lat: 30.267069,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .shape('circle')
-      .color('blue')
-      .size(10);
-    scene.on('loaded', () => {
-      scene.addLayer(this.pointLayer);
-
-      scene.setCenter(mapCenter, {
-        padding: [0, this.sliderWidth + this.sliderRight, 0, 0],
-      });
-
-      scene.render();
-    });
-
-    this.scene = scene;
-  }
-
-  public triggle() {
-    const lastPaddingRight = this.sliderWidth + this.sliderRight;
-    this.isShow = !this.isShow;
-    if (this.slider) {
-      this.slider.style.right = this.isShow ? '20px' : `-${this.sliderWidth}px`;
-      this.sliderRight = this.isShow ? 20 : -this.sliderWidth;
-
-      const currentPaddingRight = this.sliderWidth + this.sliderRight;
-
-      animate({
-        from: {
-          v: lastPaddingRight,
-        },
-        to: {
-          v: currentPaddingRight,
-        },
-        ease: easeInOut,
-        duration: 500,
-        onUpdate: (o) => {
-          this.scene.setCenter(mapCenter, { padding: [0, o.v, 0, 0] });
-        },
-      });
-    }
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            overflowX: 'hidden',
-          }}
-        />
-        <div
-          id="sliderwrap"
-          style={{
-            position: 'absolute',
-            top: '50px',
-            right: `20px`,
-            bottom: '50px',
-            width: '350px',
-            border: '1px solid',
-            borderRadius: '10px',
-            background: '#fff',
-            transition: '0.5s',
-          }}
-        >
-          <div
-            style={{
-              position: 'absolute',
-              top: '50%',
-              left: '-50px',
-              height: '0px',
-              width: '0px',
-              cursor: 'pointer',
-            }}
-            onClick={() => this.triggle()}
-          >
-            {'<<'}
-          </div>
-        </div>
-      </>
-    );
-  }
-}
diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx
index b611156d64..bf99cd335c 100644
--- a/stories/Map/map.stories.tsx
+++ b/stories/Map/map.stories.tsx
@@ -1,51 +1,19 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import MapCenter from './components/mapCenter';
-import Amap2demo from './components/amap2demo'
 import Amap2demo_destroy from './components/amap2demo_destroy';
-import Amap2demo_extrude from './components/amap2demo_extrude'
-import Amapdemo_extrude from './components/amapdemo_extrude'
-import Amap2demo_text from './components/amap2demo_text'
-import Amap2demo_textSelect from './components/amap2demo_textSelect'
-import Amap2demo_iconfont from './components/amap2demo_iconfont';
-import Amap2demo_image from './components/amap2demo_image'
-
-import Amap2demo_winds from "./components/amap2demo_winds"
-
-import Amap2demo_polygon from './components/amap2demo_polygon'
-import Amap2demo_polygon_extrude from './components/amap2demo_polygon_extrude'
 
 import Amap2demo_arcLine from "./components/amap2demo_arcLine"
-import Amap2demo_arcLine3d from "./components/amap2demo_arcLine3d"
-import Amap2demo_arcLine3dLinear from './components/amap2demo_arcLine3dLinear';
 import Amap2demo_arcLine_greatCircle from "./components/amap2demo_arcLine_greatCircle"
 import Amap2demo_arcLine_greatCircleTex from "./components/amap2demo_arcLine_greatCircleTex"
-import Amap2demo_lineHeight from "./components/amap2demo_lineHeight"
-import Amap2demo_lineDash from "./components/amap2demo_lineDash"
 import Amap2demo_arcLineDir from "./components/amap2demo_arcLineDir"
-import Amap2demo_arcLineTex from './components/amap2demo_arcLineTex';
 import Amap2demo_arcLineLinear from './components/amap2demo_arcLineLinear';
-import Amap2demo_arcLine3DTex from './components/amap2demo_arcLine3DTex';
-import Amap2demo_lineStreet from './components/amap2demo_lineStreet';
-import Amap2demo_lineLinear from './components/amap2demo_lineLinear';
-import Amap2demo_road2 from './components/amap2demo_road2';
-import LineBlur from './components/lineBlur';
 
-import Amap2demo_heatmap from "./components/amap2demo_heatmap"
-import Amap2demo_heatmap3D from "./components/amap2demo_heatmap3D"
 import Amap2demo_heatmap_hexagon from "./components/amap2demo_heatmap_hexagon"
 import Amap2demo_heatmap_hexagon_world from './components/amap2demo_heatmap_hexagon_world';
 import Amap2demo_heatmap_grid from "./components/amap2demo_heatmap_grid"
 
-import Amap2demo_imageLayer from "./components/amap2demo_imagelayer"
-
-import Amap2demo_rasterLayer from "./components/amap2demo_rasterlayer"
-
-import Amap2demo_citybuilding from "./components/amap2demo_citybuilding"
-
 import Amap2demo_drilldown from "./components/amap2demo_drilldown"
 
-import Amap2demo_markerlayer from "./components/amap2demo_markerlayer"
 import Amap2demo_markerPopup from './components/amap2demo_markerPopup';
 import Amap2demo_clustermarker from './components/amap2demo_clustermarker';
 
@@ -53,78 +21,33 @@ import Amap2demo_instance from "./components/amap2demo_instance"
 
 import Amap2demo_drawControl from "./components/amap2demo_drawControl"
 
-import Amap2demo_mesh from "./components/amap2demo_mesh"
-import Amap2demo_mesh2 from "./components/amap2demo_mesh2"
 import Amap2demo_meshStyleMap from './components/amap2demo_meshStyleMap';
 
 import Amap2demo_styleMap from "./components/amap2demo_styleMap" 
 
-import Amap2demo_textOffset from "./components/amap2demo_textOffset"
-
 import ShapeUpdate from './components/shapeUpdate'
-import BusLine from './components/busline'
 import AmapPlugin from './components/plugin'
 import DestroyClear from './components/destroyClear'
-import PlaneLine from './components/planeLine'
-import Slider from './components/slider'
-import WindMap from './components/amap2demo_wind'
-import SimplePoint from './components/simplePoint';
-import LineWall from './components/linewall'
-import GridTile from './components/gridTile'
-import SimpleLine from './components/simpleLine'
 import Cluster from './components/cluster'
-import Mask from './components/mask'
 import PolygonExteudeTex from './components/polygon_extrudeTex';
 import DataImagelayer from './components/dataImagelayer';
-import BugFix from './components/bugfix'
 
 // @ts-ignore
 storiesOf('地图方法', module)
-        .add('高德地图 point/demo', () => <MapCenter />)
-        .add('高德地图2.0 point/demo', () => <Amap2demo />)
-        .add('高德地图 point/extrude', () => <Amapdemo_extrude />)
-        .add('高德地图2.0 point/extrude', () => <Amap2demo_extrude />)
-        .add('高德地图2.0 point/text', () => <Amap2demo_text />)
-        .add('高德地图2.0 point/textSelect', () => <Amap2demo_textSelect />)
-        .add('高德地图2.0 point/iconfont', () => <Amap2demo_iconfont />)
-        .add('高德地图2.0 point/image', () => <Amap2demo_image />)
-
-        .add('高德地图2.0 polygon', () => <Amap2demo_polygon />)
-        .add('高德地图2.0 polygon_extrude', () => <Amap2demo_polygon_extrude />)
 
         .add('高德地图2.0 line_arc', () => <Amap2demo_arcLine />)
-        .add('高德地图2.0 line_arc3d_demo', () => <Amap2demo_arcLine3d />)
-        .add('高德地图2.0 line_arc3d_linear_demo', () => <Amap2demo_arcLine3dLinear />)
         .add('高德地图2.0 line_arc_greatCircle', () => <Amap2demo_arcLine_greatCircle />)
         .add('高德地图2.0 line_arc_greatCircleTex', () => <Amap2demo_arcLine_greatCircleTex />)
-        .add('高德地图2.0 lineHeight', () => <Amap2demo_lineHeight />)
-        .add('高德地图2.0 lineDash', () => <Amap2demo_lineDash />)
 
         .add('高德地图2.0 line_arcDir', () => <Amap2demo_arcLineDir />)
-        .add('高德地图2.0 line_arcTex', () => <Amap2demo_arcLineTex />)
         .add('高德地图2.0 line_arcLinear', () => <Amap2demo_arcLineLinear />)
-        .add('高德地图2.0 line_arc3DTex', () => <Amap2demo_arcLine3DTex />)
 
-        .add('高德地图2.0 line_winds', () => <Amap2demo_winds />)
-        .add('高德地图2.0 line_Street', () => <Amap2demo_lineStreet />)
-        .add('高德地图2.0 line_Linear', () => <Amap2demo_lineLinear />)
-        .add('高德地图2.0 road2', () => <Amap2demo_road2 />)
-        .add('LineBlur', () => <LineBlur />)
-
-        .add('高德地图2.0 heatmap', () => <Amap2demo_heatmap />)
-        .add('高德地图2.0 heatmap3D', () => <Amap2demo_heatmap3D />)
         .add('高德地图2.0 heatmap3D/hexagon', () => <Amap2demo_heatmap_hexagon />)
         .add('高德地图2.0 heatmap/hexagon/world', () => <Amap2demo_heatmap_hexagon_world />)
         .add('高德地图2.0 heatmap3D/grid', () => <Amap2demo_heatmap_grid />)
 
-        .add('高德地图2.0 imageLayer', () => <Amap2demo_imageLayer />)
-
-        .add('高德地图2.0 rasterLayer', () => <Amap2demo_rasterLayer />)
-        .add('高德地图2.0 citybuildLayer', () => <Amap2demo_citybuilding />)
-
         .add('高德地图2.0 点击下钻', () => <Amap2demo_drilldown />)
 
-        .add('高德地图2.0 Marker图层', () => <Amap2demo_markerlayer />)
         .add('marker popup', () => <Amap2demo_markerPopup/>)
         .add('高德地图2.0 clusterMarker图层', () => <Amap2demo_clustermarker />)
 
@@ -132,29 +55,17 @@ storiesOf('地图方法', module)
 
         .add('高德地图2.0 drawControl实例', () => <Amap2demo_drawControl />)
 
-        .add('高德地图2.0 mesh实例', () => <Amap2demo_mesh />)
-        .add('高德地图2.0 mesh实例2', () => <Amap2demo_mesh2 />)
         .add('高德地图 mesh 样式数据映射', () => <Amap2demo_meshStyleMap/>)
 
         .add('高德地图 样式数据映射', () => <Amap2demo_styleMap/>)
-        .add('高德地图 样式映射 文字偏移', () => <Amap2demo_textOffset/>)
 
         .add('测试销毁', () => <Amap2demo_destroy/>)
 
         .add('ShapeUpdate', () => <ShapeUpdate/>)
 
-        .add('WindMap', () => <WindMap/>)
         .add('AmapPlugin', () => <AmapPlugin/>)
         .add('DestroyClear', () => <DestroyClear/>)
-        .add('PlaneLine', () => <PlaneLine/>)
-        .add('Slider', () => <Slider/>)
-        .add('SimplePoint', () => <SimplePoint/>)
-        .add('LineWall', () => <LineWall/>)
-        .add('BusLine', () => <BusLine/>)
-        .add('GridTile', () => <GridTile/>)
-        .add('SimpleLine', () => <SimpleLine/>)
         .add('Cluster', () => <Cluster/>)
-        .add('Mask', () => <Mask/>)
         .add('PolygonExteudeTex', () => <PolygonExteudeTex/>)
         .add('DataImagelayer', () => <DataImagelayer/>)
-        .add('BugFix', () => <BugFix/>)
+        
diff --git a/stories/MapPerformance/components/updateAttrAndEleShenZhen.tsx b/stories/MapPerformance/components/updateAttrAndEleShenZhen.tsx
index 96f6ecc9c3..4da61fd046 100644
--- a/stories/MapPerformance/components/updateAttrAndEleShenZhen.tsx
+++ b/stories/MapPerformance/components/updateAttrAndEleShenZhen.tsx
@@ -82,23 +82,7 @@ export default class Demo extends React.Component {
               y: 'lat',
             },
           };
-          // const layer = new PointLayer({  })
-          // .source(data0, parser)
-          // .size('v', v => Math.pow(v, 2))
-          // .color('v', [
-          //   '#ffffb2',
-          //   '#fed976',
-          //   '#feb24c',
-          //   '#fd8d3c',
-          //   '#f03b20',
-          //   '#bd0026',
-          // ])
-          // // .shape('circle')
-          // .shape('simple')
-          // .style({
-          //   opacity: 0.2
-          // })
-          // .shape('dot')
+     
           const layer = new HeatmapLayer()
             .source(data0, parser)
             .size('v', [0, 0.2, 0.4, 0.6, 0.8, 1])
diff --git a/stories/Object/components/billboard.tsx b/stories/Object/components/billboard.tsx
deleted file mode 100644
index 8fda77f427..0000000000
--- a/stories/Object/components/billboard.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { GeometryLayer, Scene, IMapService, PointLayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        // map: new GaodeMapV2({
-        // map: new Mapbox({
-        pitch: 80,
-        style: 'dark',
-        center: [120, 30],
-        zoom: 5,
-      }),
-    });
-    this.scene = scene;
-
-    let point = new PointLayer()
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .shape('circle')
-      .size(80)
-      .animate(true)
-      .color('#0ff');
-
-    let pointBar = new PointLayer({ depth: false })
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .shape('cylinder')
-      .size([5, 5, 60])
-      .color('#0ff')
-      .style({
-        opacityLinear: {
-          enable: true,
-          dir: 'up',
-        },
-        opacity: 0.6,
-        heightFixed: true,
-      });
-
-    scene.on('loaded', () => {
-      scene.addLayer(point);
-      scene.addLayer(pointBar);
-
-      const img = new Image();
-      img.crossOrigin = '';
-      img.onload = () => {
-        let billboard = new GeometryLayer().shape('billboard').style({
-          width: 90,
-          height: 30,
-          canvasWidth: 360,
-          canvasHeight: 120,
-          center: [120, 30],
-          drawCanvas: (canvas: HTMLCanvasElement) => {
-            let { width, height } = canvas;
-            let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-            ctx.globalAlpha = 0.5;
-            ctx.drawImage(
-              img,
-              0,
-              0,
-              img.width,
-              img.height,
-              0,
-              0,
-              width,
-              height,
-            );
-            ctx.globalAlpha = 1;
-            ctx.fillStyle = '#0ff';
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.font = '36px Georgia';
-            ctx.fillText('Hello World! 蚂蚁', width / 2, height / 2);
-          },
-          raisingHeight: 100,
-        });
-        billboard.active({
-          color: '#0ff',
-          mix: 0.5,
-        });
-        scene.addLayer(billboard);
-      };
-      img.src =
-        'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*zMw0T6gEIZYAAAAAAAAAAAAAARQnAQ';
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Object/components/canvas.tsx b/stories/Object/components/canvas.tsx
deleted file mode 100644
index a1d1546194..0000000000
--- a/stories/Object/components/canvas.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { CanvasLayer, Scene, IMapService } from '@antv/l7';
-import { GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-let x = 0;
-export default class Demo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  /**
-   * draw water ball
-   */
-  public draw(option: any) {
-    const { size, ctx, mapService } = option;
-    const [width, height] = size;
-
-    let radius = 30,
-      rectWidth = radius * 2;
-    const rectHeight = rectWidth;
-
-    ctx.clearRect(0, 0, width, height);
-
-    const points = [
-      {
-        lng: 108.544921875,
-        lat: 30.977609093348686,
-        level: 85,
-        color: 'rgba(	220,20,60, 0.4)',
-      },
-      {
-        lng: 110.654296875,
-        lat: 31.090574094954192,
-        level: 75,
-        color: 'rgba(	255,140,0, 0.4)',
-      },
-      {
-        lng: 112.5,
-        lat: 29.80251790576445,
-        level: 65,
-        color: 'rgba(255,165,0, 0.4)',
-      },
-      {
-        lng: 114.78515624999999,
-        lat: 30.44867367928756,
-        level: 40,
-        color: 'rgba(30,144,255, 0.4)',
-      },
-      {
-        lng: 116.49902343749999,
-        lat: 29.84064389983441,
-        level: 50,
-        color: 'rgba(30,144,255, 0.4)',
-      },
-      {
-        lng: 118.21289062499999,
-        lat: 31.16580958786196,
-        level: 20,
-        color: 'rgba(	127,255,0, 0.4)',
-      },
-      {
-        lng: 119.091796875,
-        lat: 32.509761735919426,
-        level: 50,
-        color: 'rgba(30,144,255, 0.4)',
-      },
-      {
-        lng: 121.0693359374999,
-        lat: 31.80289258670676,
-        level: 45,
-        color: 'rgba(30,144,255, 0.4)',
-      },
-    ];
-    ctx.fillStyle = '#fff';
-    ctx.font = '14px YouYuan';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-
-    points.map((point) => {
-      let pixelCenter = mapService.lngLatToContainer([point.lng, point.lat]);
-      pixelCenter.x *= window.devicePixelRatio;
-      pixelCenter.y *= window.devicePixelRatio;
-      let rectStartX = pixelCenter.x - radius;
-      const rectStartY = pixelCenter.y - radius;
-
-      ctx.save();
-
-      ctx.fillText(point.level + '%', pixelCenter.x, pixelCenter.y);
-
-      ctx.beginPath();
-      ctx.arc(pixelCenter.x, pixelCenter.y, radius, 0, Math.PI * 2);
-      ctx.fillStyle = 'rgba(135,206,250,0.2)';
-      ctx.closePath();
-      ctx.fill();
-      ctx.clip();
-
-      ctx.beginPath();
-      ctx.fillStyle = point.color;
-      ctx.moveTo(rectStartX, pixelCenter.y);
-
-      let waterheight = rectStartY + ((100 - point.level) / 100) * rectHeight;
-      for (let i = 0; i <= rectWidth; i += 10) {
-        ctx.lineTo(
-          rectStartX + i,
-          waterheight + Math.sin(Math.PI * 2 * (i / rectWidth) + x) * 3 + 1,
-        );
-      }
-
-      ctx.lineTo(pixelCenter.x + radius, pixelCenter.y + radius);
-      ctx.lineTo(rectStartX, pixelCenter.y + radius);
-      ctx.lineTo(rectStartX, pixelCenter.y);
-      ctx.closePath();
-
-      ctx.fill();
-
-      ctx.restore();
-    });
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMapV2({
-        pitch: 0,
-        style: 'amap://styles/8aa66692b2a7790b101f88dd35b89bb5',
-        center: [115, 30],
-        zoom: 5.5,
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      const layer = new CanvasLayer({})
-        .style({
-          zIndex: 10,
-          update: 'always',
-          // update: 'dragend',
-          drawingOnCanvas: this.draw,
-        })
-        .animate({
-          enable: true,
-        });
-      scene.addLayer(layer);
-
-      setInterval(() => {
-        x += 0.1;
-      }, 30);
-
-      setTimeout(() => {
-        console.log('time out hide');
-        layer.hide();
-      }, 2000);
-
-      setTimeout(() => {
-        console.log('show');
-        layer.show();
-      }, 3000);
-
-      // setTimeout(() => {
-      //   scene.removeLayer(layer)
-      // }, 2000)
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Object/components/ocean.tsx b/stories/Object/components/ocean.tsx
deleted file mode 100644
index 0cad72706e..0000000000
--- a/stories/Object/components/ocean.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_polygon extends React.Component {
-  private scene: Scene;
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 0,
-        center: [-44.40673828125, -18.375379094031825],
-        zoom: 13,
-      }),
-    });
-    this.scene = scene;
-
-    fetch(
-      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
-    )
-      .then((data) => data.json())
-      .then(({ lakeData }) => {
-        const lakeLayer = new PolygonLayer({ autoFit: true })
-          .source(lakeData)
-          .shape('ocean')
-          .color('#f00')
-          .style({
-            watercolor: '#6D99A8',
-            // watercolor: '#0f0',
-          })
-          .animate(true);
-
-        scene.addLayer(lakeLayer);
-      });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Object/components/radar.tsx b/stories/Object/components/radar.tsx
deleted file mode 100644
index a79a4b630b..0000000000
--- a/stories/Object/components/radar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { PointLayer, Scene } from '@antv/l7';
-import { GaodeMap, Mapbox, Map } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_polygon extends React.Component {
-  private scene: Scene;
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        pitch: 0,
-        center: [120, 30],
-        zoom: 13,
-      }),
-    });
-    this.scene = scene;
-
-    const layer = new PointLayer()
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .shape('radar')
-      .size(100)
-      .color('#d00')
-      .active(true)
-      .style({
-        // rotation: 90
-        speed: 5,
-      })
-      .animate(true);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Object/components/sprite.tsx b/stories/Object/components/sprite.tsx
deleted file mode 100644
index 587922377c..0000000000
--- a/stories/Object/components/sprite.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { GeometryLayer, Scene, IMapService } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        // map: new GaodeMapV2({
-        // map: new Mapbox({
-        pitch: 40,
-        style: 'dark',
-        center: [120, 30],
-        zoom: 6,
-      }),
-    });
-    this.scene = scene;
-
-    let layer = new GeometryLayer()
-      // .source([{ lng: 120, lat: 30 }], {
-      //   parser: {
-      //     type: 'json',
-      //     x: 'lng',
-      //     y: 'lat',
-      //   },
-      // })
-      .shape('sprite')
-      .size(20)
-      .style({
-        // opacity: 0.3,
-        mapTexture:
-          'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*zLQwQKBSagYAAAAAAAAAAAAAARQnAQ', // snow
-        // mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ', // rain
-        // mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bq1cS7ADjR4AAAAAAAAAAAAAARQnAQ', // blub
-        center: [120, 30],
-        // spriteAnimate: 'up',
-        spriteCount: 60,
-        spriteRadius: 10,
-        spriteTop: 2500000,
-        spriteUpdate: 10000,
-        spriteScale: 0.8,
-
-        // spriteTop: 1000,
-        // spriteUpdate: 5,
-        // spriteBottom: -10,
-        // spriteScale: 0.6,
-      })
-      .active(true)
-      .color('#f00');
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/Object/components/taifeng.tsx b/stories/Object/components/taifeng.tsx
deleted file mode 100644
index 6947c04ac6..0000000000
--- a/stories/Object/components/taifeng.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-// @ts-ignore
-import { PointLayer, Scene, ILayer, LineLayer } from '@antv/l7';
-import { GaodeMap, Mapbox, Map } from '@antv/l7-maps';
-import * as React from 'react';
-import { animate, easeInOut, linear } from 'popmotion';
-
-const path = [
-  {
-    lng: 168.3984375,
-    lat: -4.565473550710278,
-    img: 'img',
-  },
-  {
-    lng: 165.05859375,
-    lat: -5.7908968128719565,
-    img: 'img',
-  },
-  {
-    lng: 160.3125,
-    lat: -5.7908968128719565,
-    img: 'img',
-  },
-  {
-    lng: 157.32421875,
-    lat: -3.688855143147035,
-    img: 'img',
-  },
-  {
-    lng: 153.80859375,
-    lat: -2.284550660236957,
-    img: 'img',
-  },
-  {
-    lng: 148.88671874999997,
-    lat: -2.108898659243126,
-    img: 'img',
-  },
-  {
-    lng: 145.1953125,
-    lat: -0.7031073524364783,
-    img: 'img',
-  },
-  {
-    lng: 140.44921875,
-    lat: 0,
-    img: 'img',
-  },
-  {
-    lng: 135,
-    lat: 1.4061088354351594,
-    img: 'img',
-  },
-  {
-    lng: 131.8359375,
-    lat: 2.986927393334876,
-    img: 'img',
-  },
-  {
-    lng: 130.078125,
-    lat: 5.965753671065536,
-    img: 'img',
-  },
-  {
-    lng: 128.49609375,
-    lat: 9.102096738726456,
-    img: 'img',
-  },
-  {
-    lng: 127.265625,
-    lat: 12.211180191503997,
-    img: 'img',
-  },
-  {
-    lng: 125.859375,
-    lat: 15.453680224345835,
-    img: 'img',
-  },
-  {
-    lng: 123.92578125,
-    lat: 18.312810846425442,
-    img: 'img',
-  },
-  {
-    lng: 121.11328124999999,
-    lat: 19.80805412808859,
-    img: 'img',
-  },
-  {
-    lng: 117.94921874999999,
-    lat: 20.96143961409684,
-    img: 'img',
-  },
-  {
-    lng: 115.31249999999999,
-    lat: 22.917922936146045,
-    img: 'img',
-  },
-];
-export default class Amap2demo_polygon extends React.Component {
-  private scene: Scene;
-  private imageLayer: ILayer;
-  private imageData: {
-    lng: number;
-    lat: number;
-    img: string;
-  };
-  private lineLayer: ILayer;
-  private lineData: any[] = [];
-  private timer: any;
-  private timer2: any;
-  private pathCount: any = 0;
-  private rotation: any = 0;
-
-  public componentWillUnmount() {
-    cancelAnimationFrame(this.timer);
-    clearTimeout(this.timer2);
-    this.scene.destroy();
-  }
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 0,
-        center: [120, 10],
-        zoom: 2,
-      }),
-    });
-    this.scene = scene;
-
-    scene.addImage(
-      'img',
-      'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*rd3kTp1VFxIAAAAAAAAAAAAAARQnAQ',
-    );
-    this.imageData = {
-      lng: 168.3984375,
-      lat: -4.565473550710278,
-      img: 'img',
-    };
-    scene.on('loaded', () => {
-      this.imageLayer = new PointLayer({ layerType: 'fillImage', zIndex: 2 })
-        .source([this.imageData], {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('img', (img) => img)
-        .size(60)
-        .active({
-          color: '#f00',
-          mix: 0.5,
-        })
-        .style({
-          opacity: 0.8,
-          rotation: this.rotation,
-        });
-
-      scene.addLayer(this.imageLayer);
-
-      const data = [
-        {
-          id: '1',
-          coord: this.lineData,
-        },
-      ];
-      this.lineLayer = new LineLayer()
-        .source(data, {
-          parser: {
-            type: 'json',
-            coordinates: 'coord',
-          },
-        })
-        .shape('line')
-        .size(2)
-        .color('#f00')
-        .style({
-          opacity: 0.8,
-          targetColor: '#0DCCFF',
-          sourceColor: 'rbga(255,255,255, 0)',
-        });
-
-      scene.addLayer(this.lineLayer);
-
-      const rotate = () => {
-        this.rotation -= 2;
-        this.imageLayer.style({
-          rotation: this.rotation,
-        });
-        scene.render();
-        this.timer = requestAnimationFrame(rotate);
-      };
-      rotate();
-
-      this.updateLocation();
-    });
-  }
-
-  updateLocation() {
-    clearTimeout(this.timer2);
-
-    if (this.pathCount < path.length) {
-      this.timer2 = setTimeout(() => {
-        const data = path[this.pathCount];
-
-        let t = animate({
-          from: {
-            lng: this.imageData.lng,
-            lat: this.imageData.lat,
-          },
-          to: {
-            lng: data.lng,
-            lat: data.lat,
-          },
-          ease: linear,
-          duration: 500,
-          onUpdate: (o) => {
-            if (this.pathCount > 1) {
-              this.imageData.lng = o.lng;
-              this.imageData.lat = o.lat;
-              this.imageLayer.setData([this.imageData]);
-
-              this.lineData.push([o.lng, o.lat]);
-              this.lineLayer.setData([
-                {
-                  id: '1',
-                  coord: this.lineData,
-                },
-              ]);
-            }
-          },
-          onComplete: () => {
-            t.stop();
-            if (this.pathCount === path.length - 1) {
-              this.lineData = [];
-              this.lineLayer.setData([
-                {
-                  id: '1',
-                  coord: this.lineData,
-                },
-              ]);
-            }
-          },
-        });
-
-        this.pathCount++;
-        this.updateLocation();
-      }, 500);
-    } else {
-      this.lineData = [];
-      this.imageData = {
-        lng: 168.3984375,
-        lat: -4.565473550710278,
-        img: 'img',
-      };
-      this.pathCount = 0;
-      this.updateLocation();
-    }
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Object/components/water.tsx b/stories/Object/components/water.tsx
deleted file mode 100644
index 4e8283311e..0000000000
--- a/stories/Object/components/water.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { PolygonLayer, Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_polygon extends React.Component {
-  private scene: Scene;
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 0,
-        center: [-44.40673828125, -18.375379094031825],
-        zoom: 13,
-      }),
-    });
-    this.scene = scene;
-
-    fetch(
-      'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
-    )
-      .then((data) => data.json())
-      .then(({ lakeData }) => {
-        const lakeLayer = new PolygonLayer({ autoFit: true })
-          .source(lakeData)
-          .shape('water')
-          .color('#1E90FF')
-          .style({
-            speed: 0.4,
-            // waterTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ'
-          })
-          .animate(true);
-
-        scene.addLayer(lakeLayer);
-      });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      />
-    );
-  }
-}
diff --git a/stories/Object/map.stories.tsx b/stories/Object/map.stories.tsx
index 9129baf0f3..8be50cd4b7 100644
--- a/stories/Object/map.stories.tsx
+++ b/stories/Object/map.stories.tsx
@@ -1,26 +1,13 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import Water from './components/water';
-import Ocean from './components/ocean';
-import Taifong from './components/taifeng'
-import Radar from './components/radar';
-import CanvasDemo from './components/canvas';
+
 import Plane from './components/plane';
-import Sprite from './components/sprite';
 import PlaneTerrain from './components/planeTerrain';
 import Cursor from './components/cursor';
 import Arrow from './components/arrow';
-import BillBoard from './components/billboard';
 
 storiesOf('Object', module)
-        .add('water', () => <Water />)
-        .add('Ocean', () => <Ocean />)
-        .add('Taifong', () => <Taifong />)
-        .add('Radar', () => <Radar/>)
-        .add('CanvasDemo', () => <CanvasDemo/>)
         .add('Plane', () => <Plane/>)
-        .add('BillBoard', () => <BillBoard/>)
-        .add('Sprite', () => <Sprite/>)
         .add('PlaneTerrain', () => <PlaneTerrain/>)
         .add('Cursor', () => <Cursor/>)
         .add('Arrow', () => <Arrow/>)
\ No newline at end of file
diff --git a/stories/layerbuild/components/CityBuilding.tsx b/stories/layerbuild/components/CityBuilding.tsx
deleted file mode 100644
index 5fe3fc6f52..0000000000
--- a/stories/layerbuild/components/CityBuilding.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { CityBuildingLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120.145, 30.238915],
-        pitch: 60,
-        zoom: 13.2,
-      }),
-    });
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json',
-      ).then(async (res) => {
-        const pointLayer = new CityBuildingLayer();
-        pointLayer
-          .source(await res.json())
-          .size('floor', [0, 500])
-          .color('rgba(242,246,250,1.0)')
-          .animate({
-            enable: true,
-          })
-          .active({
-            color: '#0ff',
-            mix: 0.5,
-          })
-          .style({
-            opacity: 0.7,
-            baseColor: 'rgb(16, 16, 16)',
-            windowColor: 'rgb(30, 60, 89)',
-            brightColor: 'rgb(255, 176, 38)',
-            sweep: {
-              enable: true,
-              sweepRadius: 2,
-              sweepColor: '#1990FF',
-              sweepSpeed: 0.5,
-              sweepCenter: [120.145319, 30.238915],
-            },
-          });
-        scene.addLayer(pointLayer);
-      });
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/Heatmap.tsx b/stories/layerbuild/components/Heatmap.tsx
deleted file mode 100644
index bfcc725cca..0000000000
--- a/stories/layerbuild/components/Heatmap.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { HeatmapLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120, 30],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          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],
-              },
-            });
-          scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/ImageLayer.tsx b/stories/layerbuild/components/ImageLayer.tsx
deleted file mode 100644
index 3c8b2fa484..0000000000
--- a/stories/layerbuild/components/ImageLayer.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { ImageLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [121.168, 30.2828],
-        zoom: 8,
-      }),
-    });
-
-    const layer = new ImageLayer({});
-    layer.source(
-      'https://gw.alipayobjects.com/zos/rmsportal/FnHFeFklTzKDdUESRNDv.jpg',
-      {
-        parser: {
-          type: 'image',
-          extent: [121.168, 30.2828, 121.384, 30.4219],
-        },
-      },
-    );
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/LineArc3d.tsx b/stories/layerbuild/components/LineArc3d.tsx
deleted file mode 100644
index 9aee212a54..0000000000
--- a/stories/layerbuild/components/LineArc3d.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { LineLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120, 30],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-    const layer = new LineLayer()
-      .source({
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'LineString',
-              coordinates: [
-                [95.625, 38.47939467327645],
-                [115.48828125000001, 28.92163128242129],
-              ],
-            },
-          },
-        ],
-      })
-      .shape('arc3d')
-      .color('#f00')
-      .size(5);
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/LineGreatCircle.tsx b/stories/layerbuild/components/LineGreatCircle.tsx
deleted file mode 100644
index 101185762c..0000000000
--- a/stories/layerbuild/components/LineGreatCircle.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { LineLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120, 30],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-    const layer = new LineLayer()
-      .source({
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'LineString',
-              coordinates: [
-                [95.625, 38.47939467327645],
-                [115.48828125000001, 28.92163128242129],
-              ],
-            },
-          },
-        ],
-      })
-      .shape('greatcircle')
-      .color('#f00')
-      .size(5);
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/LineLinear.tsx b/stories/layerbuild/components/LineLinear.tsx
deleted file mode 100644
index 94ab34e074..0000000000
--- a/stories/layerbuild/components/LineLinear.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { LineLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120, 30],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-    const layer = new LineLayer()
-      .source({
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'LineString',
-              coordinates: [
-                [95.625, 38.47939467327645],
-                [115.48828125000001, 28.92163128242129],
-              ],
-            },
-          },
-        ],
-      })
-      .shape('linearline')
-      .color('#f00')
-      .size(5)
-      .style({
-        rampColors: {
-          colors: [
-            '#FF4818',
-            '#F7B74A',
-            '#FFF598',
-            '#91EABC',
-            '#2EA9A1',
-            '#206C7C',
-          ],
-          positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-        },
-      });
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/LineSimple.tsx b/stories/layerbuild/components/LineSimple.tsx
deleted file mode 100644
index 2103e2c3ac..0000000000
--- a/stories/layerbuild/components/LineSimple.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { LineLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120, 30],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-    const layer = new LineLayer()
-      .source({
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'LineString',
-              coordinates: [
-                [95.625, 38.47939467327645],
-                [115.48828125000001, 28.92163128242129],
-              ],
-            },
-          },
-        ],
-      })
-      .shape('simple')
-      .color('#f00')
-      .size(5);
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/LineTile.tsx b/stories/layerbuild/components/LineTile.tsx
deleted file mode 100644
index 36466af6f3..0000000000
--- a/stories/layerbuild/components/LineTile.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { LineLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 4,
-      }),
-    });
-
-    const layer = new LineLayer({
-      featureId: 'COLOR',
-      sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city
-      workerEnabled: true,
-    });
-    layer
-      .source(
-        'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
-        {
-          parser: {
-            type: 'mvt',
-            tileSize: 256,
-            zoomOffset: 0,
-            maxZoom: 9,
-            extent: [-180, -85.051129, 179, 85.051129],
-          },
-        },
-      )
-      .color('COLOR')
-      .size(2)
-      .select(true);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/LineWall.tsx b/stories/layerbuild/components/LineWall.tsx
deleted file mode 100644
index c2dd0be401..0000000000
--- a/stories/layerbuild/components/LineWall.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { LineLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [105, 30],
-        pitch: 40,
-        zoom: 4,
-      }),
-    });
-    const layer = new LineLayer()
-      .source({
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'LineString',
-              coordinates: [
-                [95.625, 38.47939467327645],
-                [115.48828125000001, 28.92163128242129],
-              ],
-            },
-          },
-        ],
-      })
-      .shape('wall')
-      .color('#f00')
-      .size(40);
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/Points.tsx b/stories/layerbuild/components/Points.tsx
deleted file mode 100644
index dcfcf22e9e..0000000000
--- a/stories/layerbuild/components/Points.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-
-    // let address = 'https://gw.alipayobjects.com/os/bmw-prod/e76d89f4-aa69-4974-90b7-b236904a43b1.json' // 100
-    // let address = 'https://gw.alipayobjects.com/os/bmw-prod/edc8219a-b095-4451-98e9-3e387e290087.json' // 10000
-    // let address = 'https://gw.alipayobjects.com/os/bmw-prod/2c37f08b-3fe6-4c68-a699-dc15cfc217f1.json' // 50000
-    let address =
-      'https://gw.alipayobjects.com/os/bmw-prod/8adff753-64e6-4ffa-9e7b-1f3dc6f4fd76.json'; // 100000
-    // let address =
-    //   'https://gw.alipayobjects.com/os/bmw-prod/577a70fb-fc19-4582-83ed-7cddb7b77645.json'; // 20 0000
-    fetch(address)
-      .then((res) => res.json())
-      .then((data) => {
-        const source = new Source(
-          [
-            {
-              lng: 120,
-              lat: 30,
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          },
-        );
-
-        const layer = new PointLayer({ workerEnabled: true })
-          .source(data, {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          })
-          // .source(source)
-          .size(10)
-          .color('#f00')
-          .shape('circle')
-          .active(true);
-
-        scene.on('loaded', () => {
-          let t = new Date().getTime();
-          scene.addLayer(layer);
-          console.log(new Date().getTime() - t);
-
-          // setTimeout(() => {
-          //   layer.setData([{
-          //     lng: 120, lat: 30
-          //   }])
-          // }, 2000)
-
-          // layer.on('inited', () => {
-          // console.log('inited ***')
-          // layer.setData([
-          //   { lng: 120, lat: 30 },
-          //   { lng: 130, lat: 30 },
-          // ]);
-          // })
-        });
-      });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PointsExtrude.tsx b/stories/layerbuild/components/PointsExtrude.tsx
deleted file mode 100644
index f9cf1ae82e..0000000000
--- a/stories/layerbuild/components/PointsExtrude.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-
-    const layer = new PointLayer()
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .size([10, 10, 100])
-      .color('#f00')
-      .shape('cylinder')
-      .active(true);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PointsFillImage.tsx b/stories/layerbuild/components/PointsFillImage.tsx
deleted file mode 100644
index 1e0cd8d4bc..0000000000
--- a/stories/layerbuild/components/PointsFillImage.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-
-    scene.addImage(
-      'img',
-      'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*rd3kTp1VFxIAAAAAAAAAAAAAARQnAQ',
-    );
-    const imageData = [
-      {
-        lng: 120,
-        lat: 30,
-        img: 'img',
-      },
-    ];
-
-    const layer = new PointLayer({ layerType: 'fillImage' })
-      .source(imageData, {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-      })
-      .size(15)
-      .shape('img', ['img'])
-      .active({
-        color: '#f00',
-        mix: 0.5,
-      });
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PointsIconFont.tsx b/stories/layerbuild/components/PointsIconFont.tsx
deleted file mode 100644
index 7cb9942d91..0000000000
--- a/stories/layerbuild/components/PointsIconFont.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-
-    const fontFamily = 'iconfont';
-    // 指定 iconfont 字体文件
-    const fontPath =
-      '//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140';
-    // 全局添加资源
-    scene.addFontFace(fontFamily, fontPath);
-    // 全局添加 iconfont 字段的映射;
-    scene.addIconFont('icon1', '&#xe6d4;');
-
-    scene.on('loaded', () => {
-      const imageLayer = new PointLayer()
-        .source(
-          [
-            {
-              lng: 120,
-              lat: 30,
-              icon: 'icon1',
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          },
-        )
-        .color('#44ff00')
-        .shape('icon', 'text')
-        .size(30)
-        .style({
-          padding: [0, 0], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-          stroke: '#ffffff', // 描边颜色
-          fontFamily,
-          iconfont: true,
-          textAllowOverlap: true,
-        });
-      scene.addLayer(imageLayer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PointsImage.tsx b/stories/layerbuild/components/PointsImage.tsx
deleted file mode 100644
index 863dd249df..0000000000
--- a/stories/layerbuild/components/PointsImage.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-
-    scene.addImage(
-      'img',
-      'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*rd3kTp1VFxIAAAAAAAAAAAAAARQnAQ',
-    );
-    const imageData = [
-      {
-        lng: 120,
-        lat: 30,
-        img: 'img',
-      },
-    ];
-
-    const layer = new PointLayer({})
-      .source(imageData, {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-      })
-      .size(15)
-      .shape('img', ['img'])
-      .active({
-        color: '#f00',
-        mix: 0.5,
-      });
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PointsNormal.tsx b/stories/layerbuild/components/PointsNormal.tsx
deleted file mode 100644
index f371a1ade6..0000000000
--- a/stories/layerbuild/components/PointsNormal.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 40,
-        zoom: 2,
-      }),
-    });
-
-    const layer = new PointLayer()
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-            t: 'text1',
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .size(15)
-      .color('#f00')
-      .shape('dot')
-      .active(true);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PointsRadar.tsx b/stories/layerbuild/components/PointsRadar.tsx
deleted file mode 100644
index 47acfb60a7..0000000000
--- a/stories/layerbuild/components/PointsRadar.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-
-    const layer = new PointLayer()
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-            t: 'text1',
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .size(15)
-      .color('#f00')
-      .shape('radar')
-      .animate(true)
-      .active(true);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PointsSimple.tsx b/stories/layerbuild/components/PointsSimple.tsx
deleted file mode 100644
index 4651ed0910..0000000000
--- a/stories/layerbuild/components/PointsSimple.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 40,
-        zoom: 2,
-      }),
-    });
-
-    const layer = new PointLayer()
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-            t: 'text1',
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .size(15)
-      .color('#f00')
-      .shape('simple')
-      .active(true);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PointsText.tsx b/stories/layerbuild/components/PointsText.tsx
deleted file mode 100644
index cca5da7d79..0000000000
--- a/stories/layerbuild/components/PointsText.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-
-    const layer = new PointLayer()
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-            t: 'text1',
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .size(15)
-      .color('#f00')
-      .shape('t', 'text')
-      .active(true);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PointsTextTile.tsx b/stories/layerbuild/components/PointsTextTile.tsx
deleted file mode 100644
index 55de24e84b..0000000000
--- a/stories/layerbuild/components/PointsTextTile.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 4,
-      }),
-    });
-
-    const layer = new PointLayer({
-      featureId: 'COLOR',
-      sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city
-    });
-    layer
-      .source(
-        'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
-        {
-          parser: {
-            type: 'mvt',
-            tileSize: 256,
-            zoomOffset: 0,
-            maxZoom: 9,
-            extent: [-180, -85.051129, 179, 85.051129],
-          },
-        },
-      )
-      .shape('NNH_NAME', 'text')
-      .color('COLOR')
-      .size(12)
-      .style({
-        stroke: '#00f',
-        strokeWidth: 1,
-        textAllowOverlap: false,
-      });
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PointsTile.tsx b/stories/layerbuild/components/PointsTile.tsx
deleted file mode 100644
index c1aec4536e..0000000000
--- a/stories/layerbuild/components/PointsTile.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PointLayer } from '@antv/l7-layers';
-import { GaodeMap, Map } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new Map({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 4,
-      }),
-    });
-
-    const layer = new PointLayer({
-      featureId: 'COLOR',
-      sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city
-      workerEnabled: true,
-    });
-    layer
-      .source(
-        'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
-        {
-          parser: {
-            type: 'mvt',
-            tileSize: 256,
-            zoomOffset: 0,
-            maxZoom: 9,
-            extent: [-180, -85.051129, 179, 85.051129],
-          },
-        },
-      )
-      .color('COLOR')
-      .size(10)
-      .select(true);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/Polygon.tsx b/stories/layerbuild/components/Polygon.tsx
deleted file mode 100644
index db67ed4900..0000000000
--- a/stories/layerbuild/components/Polygon.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PolygonLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120, 30],
-        pitch: 0,
-        zoom: 2,
-      }),
-    });
-    const layer = new PolygonLayer({ workerEnabled: true })
-      .source({
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'Polygon',
-              coordinates: [
-                [
-                  [104.4140625, 35.460669951495305],
-                  [98.7890625, 24.206889622398023],
-                  [111.796875, 27.371767300523047],
-                  [104.4140625, 35.460669951495305],
-                ],
-              ],
-            },
-          },
-        ],
-      })
-      .shape('fill')
-      .color('#f00');
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PolygonExtrude.tsx b/stories/layerbuild/components/PolygonExtrude.tsx
deleted file mode 100644
index 166bd9220f..0000000000
--- a/stories/layerbuild/components/PolygonExtrude.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PolygonLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [105, 30],
-        pitch: 40,
-        zoom: 5,
-      }),
-    });
-    const layer = new PolygonLayer()
-      .source({
-        type: 'FeatureCollection',
-        features: [
-          {
-            type: 'Feature',
-            properties: {},
-            geometry: {
-              type: 'Polygon',
-              coordinates: [
-                [
-                  [104.4140625, 35.460669951495305],
-                  [98.7890625, 24.206889622398023],
-                  [111.796875, 27.371767300523047],
-                  [104.4140625, 35.460669951495305],
-                ],
-              ],
-            },
-          },
-        ],
-      })
-      .shape('extrude')
-      .color('#f00')
-      .size(1000000000);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/PolygonTile.tsx b/stories/layerbuild/components/PolygonTile.tsx
deleted file mode 100644
index d2c34fbacf..0000000000
--- a/stories/layerbuild/components/PolygonTile.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { PolygonLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        center: [110.19382669582967, 30.258134],
-        pitch: 0,
-        zoom: 4,
-      }),
-    });
-
-    const layer = new PolygonLayer({
-      featureId: 'COLOR',
-      sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city
-      workerEnabled: true,
-    });
-    layer
-      .source(
-        'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
-        {
-          parser: {
-            type: 'mvt',
-            tileSize: 256,
-            zoomOffset: 0,
-            maxZoom: 9,
-            extent: [-180, -85.051129, 179, 85.051129],
-          },
-        },
-      )
-      .color('COLOR')
-      .active(true);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/RasterImageTile.tsx b/stories/layerbuild/components/RasterImageTile.tsx
deleted file mode 100644
index 8c39c149f8..0000000000
--- a/stories/layerbuild/components/RasterImageTile.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { RasterLayer } from '@antv/l7-layers';
-import { Map } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new Map({
-        center: [105.732421875, 32.24997445586331],
-        pitch: 0,
-        style: 'dark',
-        zoom: 2,
-      }),
-    });
-
-    scene.on('loaded', () => {
-      const layer = new RasterLayer({}).source(
-        'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-        {
-          parser: {
-            type: 'rasterTile',
-            tileSize: 256,
-            zoomOffset: 0,
-            updateStrategy: 'overlap',
-          },
-        },
-      );
-
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/RasterLayer.tsx b/stories/layerbuild/components/RasterLayer.tsx
deleted file mode 100644
index dcb61e481c..0000000000
--- a/stories/layerbuild/components/RasterLayer.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { ImageLayer, RasterLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-import * as GeoTIFF from 'geotiff';
-
-async function getTiffData() {
-  const response = await fetch(
-    'https://gw.alipayobjects.com/os/rmsportal/XKgkjjGaAzRyKupCBiYW.dat',
-  );
-  const arrayBuffer = await response.arrayBuffer();
-  const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
-  const image = await tiff.getImage();
-  const width = image.getWidth();
-  const height = image.getHeight();
-  const values = await image.readRasters();
-  return {
-    data: values[0],
-    width,
-    height,
-    min: 0,
-    max: 8000,
-  };
-}
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [121.268, 30.3628],
-        zoom: 3,
-      }),
-    });
-
-    async function addLayer() {
-      const tiffdata = await getTiffData();
-
-      const layer = new RasterLayer({});
-      layer
-        .source(tiffdata.data, {
-          parser: {
-            type: 'raster',
-            width: tiffdata.width,
-            height: tiffdata.height,
-            min: 0,
-            max: 80,
-            extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
-          },
-        })
-        .style({
-          heightRatio: 100,
-          opacity: 0.8,
-          rampColors: {
-            colors: [
-              '#FF4818',
-              '#F7B74A',
-              '#FFF598',
-              '#91EABC',
-              '#2EA9A1',
-              '#206C7C',
-            ].reverse(),
-            positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-          },
-        });
-      return layer;
-    }
-
-    const layer = await addLayer();
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/components/Sprite.tsx b/stories/layerbuild/components/Sprite.tsx
deleted file mode 100644
index d655b1e8e4..0000000000
--- a/stories/layerbuild/components/Sprite.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene, Source } from '@antv/l7';
-import { GeometryLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 90,
-        style: 'dark',
-        center: [120, 30],
-        zoom: 6,
-      }),
-    });
-
-    scene.on('loaded', () => {
-      const layer = new GeometryLayer()
-        .shape('sprite')
-        .size(10)
-        .style({
-          opacity: 0.3,
-          mapTexture:
-            'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ', // rain
-          center: [120, 30],
-          spriteCount: 120,
-          spriteRadius: 10,
-          spriteTop: 2500000,
-          spriteUpdate: 20000,
-          spriteScale: 0.6,
-        });
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      ></div>
-    );
-  }
-}
diff --git a/stories/layerbuild/map.stories.tsx b/stories/layerbuild/map.stories.tsx
index c1f6713b52..e53e318567 100644
--- a/stories/layerbuild/map.stories.tsx
+++ b/stories/layerbuild/map.stories.tsx
@@ -1,111 +1,32 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
-import PointFill from './components/Points';
-import PointExtrue from './components/PointsExtrude';
-import PointText from './components/PointsText';
-import PointSimple from './components/PointsSimple';
-import PointsNormal from './components/PointsNormal';
-import PointsFillImage from './components/PointsFillImage';
-import PointImage from './components/PointsImage';
-import PointIconFont from './components/PointsIconFont';
-import PointRader from './components/PointsRadar';
-import PointTile from './components/PointsTile';
-import PointsTextTile from './components/PointsTextTile';
 import PointEarthFill from './components/PointsEarthFill';
 import PointEarthExtrude from './components/PointsEarthExtrude';
 
 import Line from './components/Line';
-import LineArc from './components/LineArc';
-import LineArc3d from './components/LineArc3d';
-import LineLinear from './components/LineLinear';
-import LineSimple from './components/LineSimple';
-import LineHalf from './components/LineHalf';
-import LineGreatCircle from './components/LineGreatCircle';
-import LineWall from './components/LineWall';
 import LineEarthArc3D from './components/LineEarthArc3D';
-import LineTile from './components/LineTile';
 
-import PolygonFill from './components/Polygon';
-import PolygonExtrude from './components/PolygonExtrude';
-import PolygonOcean from './components/PolygonOcean';
-import PolygonWater from './components/PolygonWater';
-import PolygonTile from './components/PolygonTile';
-
-import Heatmap from './components/Heatmap';
-import Heatmap3d from './components/Heatmap3d';
 import HeatmapGrid from './components/HeatmapGrid';
 import HeatmapGrid3d from './components/HeatmapGrid3d';
 import HeatmapHexagon from './components/HeatmapHexagon';
 
-import CityBuilding from './components/CityBuilding';
-
-import ImageLayer from './components/ImageLayer';
-
-import RasterLayer from './components/RasterLayer';
-
-import Billboard from './components/Billboard';
-import Sprite from './components/Sprite';
 import Plane from './components/Plane';
 
-import Wind from './components/Wind';
-
-import RasterImageTile from './components/RasterImageTile';
-import RasterDataTile from './components/RasterDataTile';
-
 import SourceTest from './components/SourceTest';
 
 storiesOf('图层渲染流程改造', module)
-  .add('pointFill', () => <PointFill />)
-  .add('PointExtrue', () => <PointExtrue />)
-  .add('PointText', () => <PointText />)
-  .add('PointSimple', () => <PointSimple />)
-  .add('PointsNormal', () => <PointsNormal />)
-  .add('PointsFillImage', () => <PointsFillImage />)
-  .add('PointImage', () => <PointImage />)
-  .add('PointIconFont', () => <PointIconFont />)
-  .add('PointRader', () => <PointRader />)
   .add('PointEarthFill', () => <PointEarthFill />)
   .add('PointEarthExtrude', () => <PointEarthExtrude />)
 
   .add('Line', () => <Line />)
-  .add('LineArc', () => <LineArc />)
-  .add('LineArc3d', () => <LineArc3d />)
-  .add('LineLinear', () => <LineLinear />)
-  .add('LineSimple', () => <LineSimple />)
-  .add('LineHalf', () => <LineHalf />)
-  .add('LineGreatCircle', () => <LineGreatCircle />)
-  .add('LineWall', () => <LineWall />)
+
   .add('LineEarthArc3D', () => <LineEarthArc3D />)
 
-  .add('PolygonFill', () => <PolygonFill />)
-  .add('PolygonExtrude', () => <PolygonExtrude />)
-  .add('PolygonOcean', () => <PolygonOcean />)
-  .add('PolygonWater', () => <PolygonWater />)
-
-  .add('Heatmap', () => <Heatmap />)
-  .add('Heatmap3d', () => <Heatmap3d />)
   .add('HeatmapGrid', () => <HeatmapGrid />)
   .add('HeatmapGrid3d', () => <HeatmapGrid3d />)
   .add('HeatmapHexagon', () => <HeatmapHexagon />)
 
-  .add('CityBuilding', () => <CityBuilding />)
-
-  .add('ImageLayer', () => <ImageLayer />)
-
-  .add('RasterLayer', () => <RasterLayer />)
-
-  .add('Billboard', () => <Billboard />)
-  .add('Sprite', () => <Sprite />)
   .add('Plane', () => <Plane />)
 
-  .add('Wind', () => <Wind />)
-
-  .add('TilePoint', () => <PointTile />)
-  .add('TileLine', () => <LineTile />)
-  .add('TilePolygon', () => <PolygonTile />)
-  .add('TilePointText', () => <PointsTextTile />)
-  .add('TileRasterImage', () => <RasterImageTile />)
-  .add('TileRasterData', () => <RasterDataTile />)
-
   .add('SourceTest', () => <SourceTest />)
diff --git a/stories/mask/components/line.tsx b/stories/mask/components/line.tsx
deleted file mode 100644
index b8c983b408..0000000000
--- a/stories/mask/components/line.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  PolygonLayer,
-  PointLayer,
-} from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Amap2demo_road2 extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        center: [120.165, 30.26],
-        pitch: 0,
-        zoom: 15,
-        viewMode: '3D',
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-    const maskData = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'MultiPolygon',
-            coordinates: [
-              [
-                [
-                  [120.16021728515624, 30.259660295442085],
-                  [120.15987396240234, 30.25313608393673],
-                  [120.16605377197266, 30.253729211980726],
-                  [120.1658821105957, 30.258474107402265],
-                ],
-              ],
-              [
-                [
-                  [120.1703453063965, 30.258474107402265],
-                  [120.17086029052733, 30.254174055663515],
-                  [120.17583847045898, 30.254915457324778],
-                  [120.17446517944336, 30.258474107402265],
-                ],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-    scene.on('loaded', () => {
-      let points = new PointLayer({
-        zIndex: 2,
-        mask: true,
-        maskfence: maskData,
-      })
-        .source(
-          [
-            {
-              lng: 120.14871597290039,
-              lat: 30.268407989758884,
-            },
-            {
-              lng: 120.15352249145508,
-              lat: 30.271669642392517,
-            },
-            {
-              lng: 120.16502380371092,
-              lat: 30.26944580007901,
-            },
-            {
-              lng: 120.16485214233397,
-              lat: 30.26425663877134,
-            },
-            {
-              lng: 120.16073226928711,
-              lat: 30.259067203213018,
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          },
-        )
-        .shape('circle')
-        .size(25)
-        .color('#0ff')
-        .style({
-          opacity: 0.3,
-        })
-        .active(true);
-      scene.addLayer(points);
-
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          // const layer = new LineLayer({ mask: true, maskInside: false }) // mask: true maskInside: true
-          const layer = new LineLayer({
-            mask: true,
-            maskInside: true,
-            maskfence: maskData,
-          }) // mask: true maskInside: true
-            .source(data)
-            .size(5)
-            .shape('arc3d') // line arc greatcircle simple
-            .color('rgb(20, 180, 90)')
-            .style({
-              borderWidth: 0.35,
-              borderColor: '#fff',
-            })
-            .active(true);
-          scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/mask/components/point.tsx b/stories/mask/components/point.tsx
deleted file mode 100644
index cb19b43488..0000000000
--- a/stories/mask/components/point.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  PolygonLayer,
-  PointLayer,
-} from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class MaskPoints extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        center: [120.165, 30.26],
-        pitch: 0,
-        zoom: 15,
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-    scene.addImage(
-      '00',
-      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
-    );
-    const maskData = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'MultiPolygon',
-            coordinates: [
-              [
-                [
-                  [120.16, 30.259660295442085],
-                  [120.16, 30.25313608393673],
-                  [120.17, 30.253729211980726],
-                  [120.17, 30.258474107402265],
-                ],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    const maskData2 = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'MultiPolygon',
-            coordinates: [
-              [
-                [
-                  [120.17, 30.258474107402265],
-                  [120.17, 30.254174055663515],
-                  [120.175, 30.254915457324778],
-                  [120.175, 30.258474107402265],
-                ],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    scene.on('loaded', () => {
-      // let points = new PointLayer({ zIndex: 2, mask: true, maskInside: false }) // maskInside: true
-      let points = new PointLayer({
-        zIndex: 1,
-        mask: true,
-        maskInside: true,
-        maskfence: maskData,
-        maskOpacity: 0.2,
-        maskColor: '#f00',
-      })
-        .source(
-          [
-            {
-              name: 'n5',
-              lng: 120.17,
-              lat: 30.255,
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          },
-        )
-        .shape('simple')
-        .size(30)
-        .style({
-          opacity: 0.6,
-        })
-        .active(true);
-
-      let point2 = new PointLayer({
-        zIndex: 3,
-        mask: true,
-        maskInside: true,
-        // maskOpacity: 0.1,
-        maskColor: '#ff0',
-        maskfence: maskData2,
-      })
-        .source(
-          [
-            {
-              name: 'n4',
-              lng: 120.17,
-              lat: 30.2565,
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          },
-        )
-        .shape('simple')
-        .size(30)
-        .color('#0f0')
-        .active(true);
-
-      scene.addLayer(points);
-      scene.addLayer(point2);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/mask/components/polygon.tsx b/stories/mask/components/polygon.tsx
deleted file mode 100644
index 603478fb53..0000000000
--- a/stories/mask/components/polygon.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  PolygonLayer,
-  PointLayer,
-} from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class MaskPoints extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        center: [120.165, 30.26],
-        pitch: 0,
-        zoom: 15,
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-    scene.addImage(
-      '00',
-      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
-    );
-    const maskData = {
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'MultiPolygon',
-            coordinates: [
-              [
-                [
-                  [120.16021728515624, 30.259660295442085],
-                  [120.15987396240234, 30.25313608393673],
-                  [120.16605377197266, 30.253729211980726],
-                  [120.1658821105957, 30.258474107402265],
-                ],
-              ],
-              [
-                [
-                  [120.1703453063965, 30.258474107402265],
-                  [120.17086029052733, 30.254174055663515],
-                  [120.17583847045898, 30.254915457324778],
-                  [120.17446517944336, 30.258474107402265],
-                ],
-              ],
-            ],
-          },
-        },
-      ],
-    };
-
-    scene.on('loaded', () => {
-      // let points = new PointLayer({ zIndex: 2, mask: true, maskInside: false }) // maskInside: true
-      let points = new PolygonLayer({
-        mask: true,
-        maskfence: maskData,
-        maskOpacity: 0.3,
-      })
-        // let points = new PolygonLayer({ mask: true, maskInside: false })
-        .source({
-          type: 'FeatureCollection',
-          features: [
-            {
-              type: 'Feature',
-              properties: {},
-              geometry: {
-                type: 'Polygon',
-                coordinates: [
-                  [
-                    [120.13429641723633, 30.22836979266676],
-                    [120.19214630126953, 30.22836979266676],
-                    [120.19214630126953, 30.276265423522855],
-                    [120.13429641723633, 30.276265423522855],
-                    [120.13429641723633, 30.22836979266676],
-                  ],
-                ],
-              },
-            },
-          ],
-        })
-        // .shape('circle')
-        // .shape('text', 'test')
-        // .shape('00')
-        // .shape('extrude') // fill
-        .shape('fill') // fill
-        .size(10)
-        .color('#0ff')
-        .active(true);
-      scene.addLayer(points);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/mask/map.stories.tsx b/stories/mask/map.stories.tsx
deleted file mode 100644
index 98ca39fc7d..0000000000
--- a/stories/mask/map.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-
-import Line from './components/line'
-import Polygon from './components/polygon'
-import Point from './components/point'
-import Image from './components/image'
-import Heatmap from './components/heatmap'
-import HeatmapGrid from './components/heatmapgrid'
-import HeatmapGrid3D from './components/heatmapgrid3d'
-import Hexgon from './components/hexgon'
-import Raster from './components/raster'
-import Text from './components/text'
-import SingleMask from './components/singleMask';
-
-storiesOf('Mask 方法', module)
-        .add('SingleMask', () => <SingleMask/>)
-        .add('Point', () => <Point/>)
-        .add('Polygon', () => <Polygon/>)
-        .add('Line', () => <Line/>)
-        .add('Image', () => <Image/>)
-        .add('Heatmap', () => <Heatmap/>)
-        .add('HeatmapGrid', () => <HeatmapGrid/>)
-        .add('HeatmapGrid3D', () => <HeatmapGrid3D/>)
-        .add('Hexgon', () => <Hexgon/>)
-        .add('Raster', () => <Raster/>)
-        .add('Text', () => <Text/>)
diff --git a/stories/template/components/CustomPointLayer.ts b/stories/template/components/CustomPointLayer.ts
deleted file mode 100644
index eb8e664647..0000000000
--- a/stories/template/components/CustomPointLayer.ts
+++ /dev/null
@@ -1,272 +0,0 @@
-import { BaseLayer, BaseModel, IModelUniform, ILayerService, IModel, ILayer, PointFillTriangulation, IStyleAttributeService, IEncodeFeature, gl, AttributeType } from '@antv/l7';
-
-const pointFillFrag = `
-uniform float u_opacity : 1.0;
-uniform float u_stroke_opacity : 1;
-uniform float u_stroke_width : 2;
-uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
-
-varying vec4 v_data;
-varying vec4 v_color;
-varying float v_radius;
-
-#pragma include "sdf_2d"
-#pragma include "picking"
-
-void main() {
-    int shape = int(floor(v_data.w + 0.5));
-
-    lowp float antialiasblur = v_data.z;
-    float r = v_radius / (v_radius + u_stroke_width);
-
-    float outer_df;
-    float inner_df;
-    // 'circle', 'triangle', 'square', 'pentagon', 'hexagon', 'octogon', 'hexagram', 'rhombus', 'vesica'
-    if (shape == 0) {
-        outer_df = sdCircle(v_data.xy, 1.0);
-        inner_df = sdCircle(v_data.xy, r);
-    } else if (shape == 1) {
-        outer_df = sdEquilateralTriangle(1.1 * v_data.xy);
-        inner_df = sdEquilateralTriangle(1.1 / r * v_data.xy);
-    } else if (shape == 2) {
-        outer_df = sdBox(v_data.xy, vec2(1.));
-        inner_df = sdBox(v_data.xy, vec2(r));
-    } else if (shape == 3) {
-        outer_df = sdPentagon(v_data.xy, 0.8);
-        inner_df = sdPentagon(v_data.xy, r * 0.8);
-    } else if (shape == 4) {
-        outer_df = sdHexagon(v_data.xy, 0.8);
-        inner_df = sdHexagon(v_data.xy, r * 0.8);
-    } else if (shape == 5) {
-        outer_df = sdOctogon(v_data.xy, 1.0);
-        inner_df = sdOctogon(v_data.xy, r);
-    } else if (shape == 6) {
-        outer_df = sdHexagram(v_data.xy, 0.52);
-        inner_df = sdHexagram(v_data.xy, r * 0.52);
-    } else if (shape == 7) {
-        outer_df = sdRhombus(v_data.xy, vec2(1.0));
-        inner_df = sdRhombus(v_data.xy, vec2(r));
-    } else if (shape == 8) {
-        outer_df = sdVesica(v_data.xy, 1.1, 0.8);
-        inner_df = sdVesica(v_data.xy, r * 1.1, r * 0.8);
-    }
-
-    float opacity_t = smoothstep(0.0, antialiasblur, outer_df);
-
-    float color_t = u_stroke_width < 0.01 ? 0.0 : smoothstep(
-        antialiasblur,
-        0.0,
-        inner_df
-    );
-
-    if(u_stroke_width < 0.01) {
-        gl_FragColor = vec4(v_color.rgb, v_color.a * u_opacity);
-    } else {
-        gl_FragColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), u_stroke_color * u_stroke_opacity, color_t);
-    }
-
-    gl_FragColor.a *= opacity_t;
-    gl_FragColor = filterColor(gl_FragColor);
-}
-`
-const pointFillVert = `
-attribute vec4 a_Color;
-attribute vec3 a_Position;
-attribute vec3 a_Extrude;
-attribute float a_Size;
-attribute float a_Shape;
-
-uniform mat4 u_ModelMatrix;
-uniform mat4 u_Mvp;
-
-varying vec4 v_data;
-varying vec4 v_color;
-varying float v_radius;
-
-uniform float u_stroke_width : 2;
-
-
-#pragma include "projection"
-#pragma include "picking"
-
-
-void main() {
-    vec3 extrude = a_Extrude;
-    float shape_type = a_Shape;
-
-    float newSize = setPickingSize(a_Size);
-
-    v_color = a_Color;
-
-    v_radius = newSize;
-
-
-    float antialiasblur = -max(2.0 / u_DevicePixelRatio / newSize, 0.0);
-
-    vec2 offset = project_pixel(extrude.xy * (newSize + u_stroke_width));
-
-    v_data = vec4(extrude.x, extrude.y, antialiasblur, shape_type);
-
-    vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
-    if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
-        gl_Position = u_Mvp * vec4(project_pos.xy + offset, 0.0, 1.0);
-    } else {
-        gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0));
-    }
-
-    setPickingColor(a_PickingColor);
-}
-`
-
-interface ICustomPointLayerStyleOptions {
-    opacity: number;
-    strokeOpacity: number;
-    strokeWidth: number;
-    stroke: string;
-}
-
-class CustomModel extends BaseModel {
-    constructor(layer: ILayer) {
-        super(layer)
-    }
-
-    public layer: ILayer
-    public styleAttributeService: IStyleAttributeService
-    public getUninforms(): IModelUniform {
-        const { opacity, stroke = [1.0, 0.0, 0.0, 1.0], strokeOpacity = 1.0, strokeWidth = 0 } = this.layer.getLayerConfig() as ICustomPointLayerStyleOptions;
-        
-        return {
-            u_opacity: opacity,
-            u_stroke_opacity: strokeOpacity,
-            u_stroke_width: strokeWidth,
-            u_stroke_color: stroke as number[],
-        };
-    }
-  
-    public initModels(callbackModel: (models: IModel[]) => void) {
-      this.buildModels(callbackModel);
-    }
-  
-    public async buildModels(callbackModel: (models: IModel[]) => void) {
-      this.layer
-        .buildLayerModel({
-          moduleName: "customPoint",
-          vertexShader: pointFillVert,
-          fragmentShader: pointFillFrag,
-          triangulation: PointFillTriangulation,
-          depth: { enable: false },
-        })
-        .then((model) => {
-          callbackModel([model]);
-        })
-        .catch((err) => {
-          console.warn(err);
-          callbackModel([]);
-        });
-    }
-  
-    protected registerBuiltinAttributes() {
-      const shape2d = this.layer.getLayerConfig().shape2d as string[];
-  
-      this.styleAttributeService.registerStyleAttribute({
-        name: 'extrude',
-        type: AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Extrude',
-          buffer: {
-            // give the WebGL driver a hint that this buffer may change
-            usage: gl.DYNAMIC_DRAW,
-            data: [],
-            type: gl.FLOAT,
-          },
-          size: 3,
-          update: (
-            feature: IEncodeFeature,
-            featureIdx: number,
-            vertex: number[],
-            attributeIdx: number,
-          ) => {
-            const extrude = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0];
-            const extrudeIndex = (attributeIdx % 4) * 3;
-            return [
-              extrude[extrudeIndex],
-              extrude[extrudeIndex + 1],
-              extrude[extrudeIndex + 2],
-            ];
-          },
-        },
-      });
-  
-      // 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 = 5 } = feature;
-            return Array.isArray(size) ? [size[0]] : [size];
-          },
-        },
-      });
-  
-      // point layer size;
-      this.styleAttributeService.registerStyleAttribute({
-        name: 'shape',
-        type: AttributeType.Attribute,
-        descriptor: {
-          name: 'a_Shape',
-          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 { shape = 2 } = feature;
-            const shapeIndex = shape2d.indexOf(shape as string);
-            return [shapeIndex];
-          },
-        },
-      });
-    }
-}
-
-export default class CustomPoint extends BaseLayer {
-    public type: string = 'PointLayer';
-    public layerModel: CustomModel;
-    public layerService: ILayerService
-    public models: any
-    public rendering: boolean;
-  
-    public buildModels() {
-        this.layerModel = new CustomModel(this);
-        this.layerModel.initModels((models) => {
-          this.models = models;
-          this.layerService.updateLayerRenderList();
-
-          // renderLayers
-          this.rendering = true;
-          this.layerService.renderLayers();
-          this.rendering = false;
-        });
-      }
-}
\ No newline at end of file
diff --git a/stories/template/components/point.tsx b/stories/template/components/point.tsx
deleted file mode 100644
index 8b0a350d38..0000000000
--- a/stories/template/components/point.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  LineLayer,
-  Scene,
-  MaskLayer,
-  PolygonLayer,
-  PointLayer,
-} from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-
-import CustomPoint from './CustomPointLayer';
-
-export default class Demo extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        center: [120, 30],
-        pitch: 0,
-        zoom: 15,
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-    let layer = new CustomPoint()
-      // @ts-ignore
-      .source(
-        [
-          {
-            lng: 120,
-            lat: 30,
-          },
-        ],
-        {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        },
-      )
-      .shape('circle')
-      .color('#ff0')
-      .size(30)
-      .style({
-        opacity: 0.3,
-      })
-      .active(true);
-
-    scene.on('loaded', () => {
-      scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/template/map.stories.tsx b/stories/template/map.stories.tsx
deleted file mode 100644
index 94ecc7bde7..0000000000
--- a/stories/template/map.stories.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-
-
-import Point from './components/point'
-
-storiesOf('自定义模版', module)
-        .add('Point', () => <Point/>)
\ No newline at end of file
diff --git a/stories/tile/components/OsmRasterTile.tsx b/stories/tile/components/OsmRasterTile.tsx
deleted file mode 100644
index 04529c3c00..0000000000
--- a/stories/tile/components/OsmRasterTile.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import { RasterLayer, Scene, LineLayer, ILayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class OsmRasterTile extends React.Component {
-  private scene: Scene;
-  private gridLayer: ILayer;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  private updateGridLayer = () => {
-    const bounds = this.scene['mapService'].getBounds();
-    const bbox = [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
-    // console.log('bbox: ', bbox);
-    const poly = turf.bboxPolygon(bbox as [number, number, number, number]);
-    const data = { type: 'FeatureCollection', features: [poly] };
-
-    if (this.gridLayer) {
-      this.gridLayer.setData(data);
-      return;
-    }
-    this.gridLayer = new LineLayer({ autoFit: false, zIndex: 10 })
-      .source(data)
-      .size(2)
-      .color('red')
-      .shape('line');
-    this.scene.addLayer(this.gridLayer);
-  };
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      map: new Map({
-        center: [130, 30],
-        pitch: 0,
-        style: 'normal',
-        zoom: 1.5,
-      }),
-    });
-
-    // this.scene.on('mapchange', this.updateGridLayer);
-
-    this.scene.on('loaded', () => {
-      const layer = new RasterLayer({}).source(
-        // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-        'http://t1.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd',
-        // 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
-        // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-        // 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
-        // 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-        // 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
-        // 'https://a.tile.osm.org/{z}/{x}/{y}.png',
-        // 'https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd',
-        // 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
-        {
-          parser: {
-            type: 'rasterTile',
-            tileSize: 256,
-
-            zoomOffset: 0,
-            updateStrategy: 'overlap',
-          },
-        },
-      );
-
-      this.scene.addLayer(layer);
-
-      // 注记服务
-      const annotionLayer = new RasterLayer({
-        zIndex: 2,
-      });
-      annotionLayer.source(
-        'https://t1.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd',
-        {
-          parser: {
-            type: 'rasterTile',
-          },
-        },
-      );
-
-      this.scene.addLayer(annotionLayer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/QuXian.tsx b/stories/tile/components/QuXian.tsx
deleted file mode 100644
index ecd00b6cc1..0000000000
--- a/stories/tile/components/QuXian.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-  Source,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class QuXian extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      // map: new GaodeMap({
-      map: new Mapbox({
-        // center: [121.268, 30.3628],
-        // center: [122.76391708791607, 43.343389123718815],
-        // center: [120, 30],
-        // style: 'normal',
-        // zoom: 6,
-        // zooms: [0, 25],
-        // maxZoom: 25,
-        center: [120, 30],
-        style: 'blank',
-        zoom: 2,
-        // zoom: 13,
-        // center: [-122.447303, 37.753574],
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      const tileSource = new Source(
-        'http://localhost:3000/district.mbtiles/{z}/{x}/{y}.pbf',
-        {
-          parser: {
-            type: 'mvt',
-            tileSize: 256,
-            zoomOffset: -1,
-            maxZoom: 7,
-          },
-        },
-      );
-      const layer = new PolygonLayer({
-        featureId: 'adcode',
-        sourceLayer: 'district',
-      });
-      layer
-        .source(tileSource)
-        .shape('fill')
-        .color('blue')
-        .style({
-          opacity: 0.6,
-        });
-
-      layer.on('click', () => {
-        console.log(this.scene.getZoom());
-      });
-
-      this.scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/RasterArrayBuffer.tsx b/stories/tile/components/RasterArrayBuffer.tsx
deleted file mode 100644
index dbda16fe50..0000000000
--- a/stories/tile/components/RasterArrayBuffer.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  MaskLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-// @ts-ignore
-import * as GeoTIFF from 'geotiff';
-
-export default class RasterTile extends React.Component<
-  any,
-  { colorList: string[]; positions: number[] }
-> {
-  private scene: Scene;
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      colorList: [
-        '#f7fcf5',
-        '#e5f5e0',
-        '#c7e9c0',
-        '#a1d99b',
-        '#74c476',
-        '#41ab5d',
-        '#238b45',
-        '#006d2c',
-        '#00441b',
-      ],
-      positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-    };
-  }
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [105, 60],
-        pitch: 0,
-        // style: 'normal',
-        style: 'blank',
-        zoom: 4,
-      }),
-    });
-    const canvas = document.createElement('canvas');
-    canvas.width = 256;
-    canvas.height = 256;
-    const ctx = canvas.getContext('2d');
-    this.scene.on('loaded', () => {
-      const layer = new RasterLayer();
-      layer
-        .source(
-          // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-          // 'https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{zoom}/{x}/{y}.pngraw?sku=YOUR_MAPBOX_SKU_TOKEN&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // 'https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/{z}/{y}/{x}.tif',
-          // 'http://rd1yhmrzc.hn-bkt.clouddn.com/Mapnik/{z}/{x}/{y}.png',
-          {
-            parser: {
-              type: 'rasterTile',
-              dataType: 'arraybuffer',
-              tileSize: 256,
-              zoomOffset: 0,
-              extent: [-180, -85.051129, 179, 85.051129],
-              minZoom: 0,
-              // maxZoom: 0,
-              // maxZoom: 10,
-              format: async (data: any) => {
-                const blob: Blob = new Blob([new Uint8Array(data)], {
-                  type: 'image/png',
-                });
-                const img = await createImageBitmap(blob);
-                // @ts-ignore
-                ctx.clearRect(0, 0, 256, 256);
-                // @ts-ignore
-                ctx.drawImage(img, 0, 0, 256, 256);
-
-                // 'https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/{z}/{y}/{x}.tif',
-                // const tiff = await GeoTIFF.fromArrayBuffer(data);
-                // const image = await tiff.getImage();
-                // const width = image.getWidth();
-                // const height = image.getHeight();
-                // const values = await image.readRasters();
-                // return { rasterData: values[0], width, height };
-
-                // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-                // @ts-ignore
-                let imgData = ctx.getImageData(0, 0, 256, 256).data;
-                let arr = [];
-                for (let i = 0; i < imgData.length; i += 4) {
-                  const R = imgData[i];
-                  const G = imgData[i + 1];
-                  const B = imgData[i + 2];
-                  const d = -10000 + (R * 256 * 256 + G * 256 + B) * 0.1;
-                  arr.push(d);
-                }
-                // console.log(arr)
-                return {
-                  rasterData: arr,
-                  width: 256,
-                  height: 256,
-                };
-              },
-            },
-          },
-        )
-        .style({
-          domain: [0, 1014],
-          clampLow: true,
-          rampColors: {
-            colors: [
-              '#f7fcf5',
-              '#e5f5e0',
-              '#c7e9c0',
-              '#a1d99b',
-              '#74c476',
-              '#41ab5d',
-              '#238b45',
-              '#006d2c',
-              '#00441b',
-            ],
-            positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-          },
-        })
-        .select(true);
-
-      this.scene.addLayer(layer);
-
-      let count = 0;
-      let colors = [
-        [
-          '#f7fcf5',
-          '#e5f5e0',
-          '#c7e9c0',
-          '#a1d99b',
-          '#74c476',
-          '#41ab5d',
-          '#238b45',
-          '#006d2c',
-          '#00441b',
-        ],
-        [
-          '#fff5f0',
-          '#fee0d2',
-          '#fcbba1',
-          '#fc9272',
-          '#fb6a4a',
-          '#ef3b2c',
-          '#cb181d',
-          '#a50f15',
-          '#67000d',
-        ],
-        [
-          '#f7fbff',
-          '#deebf7',
-          '#c6dbef',
-          '#9ecae1',
-          '#6baed6',
-          '#4292c6',
-          '#2171b5',
-          '#08519c',
-          '#08306b',
-        ],
-      ];
-      setInterval(() => {
-        const colorList = colors[count];
-        this.setState({
-          colorList: colorList,
-        });
-        layer.style({
-          rampColors: {
-            colors: colorList,
-            positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-          },
-        });
-        this.scene.render();
-        count++;
-        if (count > colors.length - 1) {
-          count = 0;
-        }
-      }, 2000);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <Legent
-          colorList={this.state.colorList}
-          positions={this.state.positions}
-        />
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
-
-function Legent(props: { colorList: string[]; positions: number[] }) {
-  const { colorList, positions } = props;
-
-  let data: any[] = [];
-
-  colorList.map((color, index) => {
-    data.push({
-      color: color,
-      text: positions[index],
-    });
-  });
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: '10px',
-        bottom: '30px',
-        zIndex: 10,
-      }}
-    >
-      {data.map(({ color, text }) => {
-        return (
-          <div
-            style={{
-              display: 'inline-block',
-              background: '#fff',
-              padding: '5px',
-            }}
-          >
-            <div
-              style={{
-                fontSize: '12px',
-                lineHeight: '12px',
-              }}
-            >
-              {text}
-            </div>
-            <div
-              style={{
-                width: '30px',
-                height: '8px',
-                background: color,
-              }}
-            ></div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/stories/tile/components/RasterArrayBuffer2.tsx b/stories/tile/components/RasterArrayBuffer2.tsx
deleted file mode 100644
index 4a970f4a1a..0000000000
--- a/stories/tile/components/RasterArrayBuffer2.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  MaskLayer,
-  Popup,
-  PolygonLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-// @ts-ignore
-import * as GeoTIFF from 'geotiff';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      // stencil: true,
-      map: new GaodeMap({
-        center: [121, 29.4],
-        // pitch: 60,
-        // style: 'normal',
-        zoom: 6.5,
-
-        // center: [105, 60],
-        // pitch: 0,
-        // style: 'dark',
-        style: 'blank',
-        // zoom: 5,
-      }),
-    });
-    const canvas = document.createElement('canvas');
-    canvas.width = 256;
-    canvas.height = 256;
-    const ctx = canvas.getContext('2d');
-    this.scene.on('loaded', () => {
-      fetch(
-        // 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-        'https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          // const provincelayer = new LineLayer({})
-          //   .source(data)
-          //   .size(-300000)
-          //   .shape('wall')
-          //   .color('#0DCCFF')
-          //   .style({
-          //     // opacity: 0.8,
-          //     heightfixed: true,
-          //     sourceColor: 'rgb(0,109,44)',
-          //     targetColor: 'rgb(229,245,224)',
-          //   });
-          // this.scene.addLayer(provincelayer);
-
-          const layer = new RasterLayer({
-            mask: true,
-            maskfence: data,
-          });
-          layer
-            .source(
-              // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-              // 'https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{zoom}/{x}/{y}.pngraw?sku=YOUR_MAPBOX_SKU_TOKEN&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-              'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-              // 'https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/{z}/{y}/{x}.tif',
-              // 'http://rd1yhmrzc.hn-bkt.clouddn.com/Mapnik/{z}/{x}/{y}.png',
-              {
-                parser: {
-                  type: 'rasterTile',
-                  dataType: 'arraybuffer',
-                  tileSize: 256,
-                  zoomOffset: 0,
-                  extent: [-180, -85.051129, 179, 85.051129],
-                  minZoom: 0,
-                  // maxZoom: 0,
-                  // maxZoom: 10,
-                  format: async (data: any) => {
-                    const blob: Blob = new Blob([new Uint8Array(data)], {
-                      type: 'image/png',
-                    });
-                    const img = await createImageBitmap(blob);
-                    // @ts-ignore
-                    ctx.clearRect(0, 0, 256, 256);
-                    // @ts-ignore
-                    ctx.drawImage(img, 0, 0, 256, 256);
-
-                    // @ts-ignore
-                    let imgData = ctx.getImageData(0, 0, 256, 256).data;
-                    let arr = [];
-                    for (let i = 0; i < imgData.length; i += 4) {
-                      const R = imgData[i];
-                      const G = imgData[i + 1];
-                      const B = imgData[i + 2];
-                      const d = -10000 + (R * 256 * 256 + G * 256 + B) * 0.1;
-                      arr.push(d);
-                    }
-                    // console.log(arr)
-                    return {
-                      rasterData: arr,
-                      width: 256,
-                      height: 256,
-                    };
-                  },
-                },
-              },
-            )
-            .style({
-              domain: [0, 512],
-              clampLow: true,
-              rampColors: {
-                colors: [
-                  '#f7fcf5',
-                  '#e5f5e0',
-                  '#c7e9c0',
-                  '#a1d99b',
-                  '#74c476',
-                  '#41ab5d',
-                  '#238b45',
-                  '#006d2c',
-                  '#00441b',
-                ],
-                positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-              },
-            })
-            .select(true);
-
-          this.scene.addLayer(layer);
-
-          layer.on('mousemove', (e) => {
-            const popup = new Popup({
-              offsets: [0, 0],
-              closeButton: false,
-            });
-            popup
-              .setLnglat(e.lngLat)
-              .setHTML(` <span>$当前海拔为 ${e.value} 米</span> `);
-
-            this.scene.addPopup(popup);
-          });
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        >
-          {/* <div style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100px',
-            height: '100px',
-            background: '#fff',
-            zIndex: 10
-            // @ts-ignore
-          }}>{this.state.text}</div> */}
-        </div>
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/RasterArrayBufferMask.tsx b/stories/tile/components/RasterArrayBufferMask.tsx
deleted file mode 100644
index 9b55ec2348..0000000000
--- a/stories/tile/components/RasterArrayBufferMask.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  MaskLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-// @ts-ignore
-import * as GeoTIFF from 'geotiff';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new Mapbox({
-        center: [100, 30],
-        pitch: 0,
-        // style: 'normal',
-        style: 'blank',
-        zoom: 4,
-      }),
-    });
-    const canvas = document.createElement('canvas');
-    canvas.width = 256;
-    canvas.height = 256;
-    const ctx = canvas.getContext('2d');
-    this.scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          const layer = new RasterLayer({
-            mask: true,
-            maskfence: data,
-          });
-          layer
-            .source(
-              'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-              // 'https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/{z}/{y}/{x}.tif',
-              // 'http://rd1yhmrzc.hn-bkt.clouddn.com/Mapnik/{z}/{x}/{y}.png',
-              {
-                parser: {
-                  type: 'rasterTile',
-                  dataType: 'arraybuffer',
-                  tileSize: 256,
-                  zoomOffset: 0,
-                  extent: [-180, -85.051129, 179, 85.051129],
-                  minZoom: 0,
-                  // maxZoom: 0,
-                  // maxZoom: 10,
-                  format: async (data: any) => {
-                    const blob: Blob = new Blob([new Uint8Array(data)], {
-                      type: 'image/png',
-                    });
-                    const img = await createImageBitmap(blob);
-                    // @ts-ignore
-                    ctx.clearRect(0, 0, 256, 256);
-                    // @ts-ignore
-                    ctx.drawImage(img, 0, 0, 256, 256);
-
-                    // 'https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/{z}/{y}/{x}.tif',
-                    // const tiff = await GeoTIFF.fromArrayBuffer(data);
-                    // const image = await tiff.getImage();
-                    // const width = image.getWidth();
-                    // const height = image.getHeight();
-                    // const values = await image.readRasters();
-                    // return { rasterData: values[0], width, height };
-
-                    // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-                    // @ts-ignore
-                    let imgData = ctx.getImageData(0, 0, 256, 256).data;
-                    let arr = [];
-                    for (let i = 0; i < imgData.length; i += 4) {
-                      arr.push(imgData[i]);
-                    }
-                    return {
-                      rasterData: arr,
-                      width: 256,
-                      height: 256,
-                    };
-                  },
-                },
-              },
-            )
-            .style({
-              opacity: 1,
-              domain: [0, 256],
-              clampLow: true,
-              rampColors: {
-                colors: [
-                  // 'rgb(166,97,26)',
-                  // 'rgb(223,194,125)',
-                  // 'rgb(245,245,245)',
-                  // 'rgb(128,205,193)',
-                  // 'rgb(1,133,113)',
-
-                  'rgb(0,0,255)',
-                  'rgb(0,0,0)',
-                  'rgb(0,255,0)',
-                  'rgb(255,0,0)',
-                  'rgb(255,0,0)',
-                ],
-                positions: [0, 0.25, 0.5, 0.75, 1.0],
-              },
-            })
-            .select(true);
-
-          this.scene.addLayer(layer);
-
-          layer.on('click', (e) => {
-            console.log('click');
-            // console.log(e.pickedColors)
-            console.log(e);
-          });
-          // layer.on('mousemove', (e) => console.log(e.value));
-
-          // setTimeout(() => {
-          //   layer.style({
-          //     rampColors: {
-          //       colors: [
-          //         // 'rgb(166,97,26)',
-          //         // 'rgb(223,194,125)',
-          //         // 'rgb(245,245,245)',
-          //         // 'rgb(128,205,193)',
-          //         // 'rgb(1,133,113)',
-
-          //         'rgb(0,0,0)',
-          //         'rgb(0,0,0)',
-          //         'rgb(0,245,0)',
-          //         'rgb(255,0,0)',
-          //         'rgb(255,0,0)',
-          //       ],
-          //       positions: [0, 0.25, 0.5, 0.75, 1.0],
-          //     },
-          //   });
-          //   this.scene.render();
-          // }, 3000);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/RasterTile.tsx b/stories/tile/components/RasterTile.tsx
deleted file mode 100644
index acd832f715..0000000000
--- a/stories/tile/components/RasterTile.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      // stencil: true,
-      map: new GaodeMap({
-        center: [121, 29.4],
-        // pitch: 60,
-        // style: 'normal',
-        zoom: 6.5,
-        style: 'blank',
-      }),
-    });
-
-    // this.scene.on('mapchange', this.updateGridLayer);
-
-    this.scene.on('loaded', () => {
-      fetch(
-        // 'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
-        'https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json',
-      )
-        .then((res) => res.json())
-        .then((data) => {
-          // const provincelayer = new PolygonLayer({})
-          //   .source(data)
-          //   .size(-150000)
-          //   .shape('extrude')
-          //   .color('#0DCCFF')
-          //   // .active({
-          //   //   color: 'rgb(100,230,255)'
-          //   // })
-          //   .style({
-          //     heightfixed: true,
-          //     // pickLight: true,
-          //     // raisingHeight: 200000,
-          //     opacity: 0.8,
-          //     topsurface: false,
-          //     targetColor: '#a1d99b',
-          //     sourceColor: '#00441b',
-          //   });
-
-          // this.scene.addLayer(provincelayer);
-
-          const layer = new RasterLayer({
-            zIndex: 1,
-            mask: true,
-            maskfence: data,
-          });
-          layer
-            .source(
-              [
-                'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-                'http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-                'http://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-                'http://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-              ],
-              {
-                parser: {
-                  type: 'rasterTile',
-                  tileSize: 256,
-                  zoomOffset: 0,
-                  extent: [-180, -85.051129, 179, 85.051129],
-                },
-              },
-            )
-            .style({
-              // opacity: 0.5,
-            });
-
-          this.scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/TiffRasterTile.tsx b/stories/tile/components/TiffRasterTile.tsx
deleted file mode 100644
index 23f28e55cc..0000000000
--- a/stories/tile/components/TiffRasterTile.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import { RasterLayer, Scene, LineLayer, ILayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class OsmRasterTile extends React.Component {
-  private scene: Scene;
-  private gridLayer: ILayer;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      map: new Map({
-        center: [121.268, 30.3628],
-        pitch: 0,
-        style: 'normal',
-        zoom: 3,
-        viewMode: '3D',
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      const layer = new RasterLayer({
-        zIndex: 9,
-      });
-      layer.source('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        parser: {
-          type: 'rasterTile',
-          tileSize: 256,
-          minZoom: 0,
-          maxZoom: 19,
-          zoomOffset: 0,
-          updateStrategy: 'overlap',
-          // extent: [-180, -85.051129, 175, 85.051129],
-        },
-      });
-      // layer.on('tiles-loaded', (tiles) => {
-      //   console.log('tiles-loaded', tiles.length);
-      // });
-
-      this.scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/VectorLineTile.tsx b/stories/tile/components/VectorLineTile.tsx
deleted file mode 100644
index 8a57bf55f9..0000000000
--- a/stories/tile/components/VectorLineTile.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      // map: new GaodeMap({
-      map: new Mapbox({
-        // center: [121.268, 30.3628],
-        // center: [122.76391708791607, 43.343389123718815],
-        // center: [120, 30],
-        // style: 'normal',
-        // zoom: 6,
-        // zooms: [0, 25],
-        // maxZoom: 25,
-        center: [120, 30],
-        style: 'blank',
-        zoom: 2,
-        // zoom: 13,
-        // center: [-122.447303, 37.753574],
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      // const point = new PointLayer({ zIndex: 7 })
-      //   .source(
-      //     [
-      //       {
-      //         lng: 120,
-      //         lat: 30,
-      //       },
-      //     ],
-      //     {
-      //       parser: {
-      //         type: 'json',
-      //         x: 'lng',
-      //         y: 'lat',
-      //       },
-      //     },
-      //   )
-      //   .shape('circle')
-      //   .color('#ff0')
-      //   // .active(true)
-      //   .select(true)
-      //   .size(10);
-
-      // this.scene.addLayer(point);
-
-      // this.scene.on('zoom', () => console.log(this.scene.getZoom()));
-
-      const layer = new LineLayer({
-        featureId: 'COLOR',
-        sourceLayer: 'ecoregions2', // woods hillshade contour ecoregions ecoregions2 city
-        // coord: 'offset'
-      });
-      layer
-        .source(
-          // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-          // 'http://localhost:3000/file3.mbtiles/{z}/{x}/{y}.pbf',
-          'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3000/woods.mbtiles/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3000/zhoushan.mbtiles/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3000/woods.mbtiles/14/13779/5999.pbf'
-          // 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // 'https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?sku=101lazXpJZeM7&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          {
-            parser: {
-              type: 'mvt',
-              tileSize: 256,
-              zoomOffset: 0,
-              maxZoom: 9,
-              extent: [-180, -85.051129, 179, 85.051129],
-            },
-          },
-        )
-        .color('COLOR')
-        .size(2)
-        // .size('v', v => 5)
-        // .color('#f00')
-        // .color('v', v => '#ff0')
-        // .color('COLOR', ['#f00', '#ff0', '#00f', '#0ff'])
-        .style({
-          // color: "#ff0"
-          // opacity: 0.4,
-        })
-        .select(true);
-      // .active(true)
-
-      // layer.on('click', e => { console.log(e) })
-      // layer.on('mousemove', e => console.log(e))
-      // layer.on('mouseup', e => console.log(e))
-      // layer.on('unmousemove', e => console.log(e))
-      // layer.on('mouseenter', e => console.log(e))
-      // layer.on('mouseout', e => console.log(e))
-      // layer.on('mousedown', e => console.log(e))
-      // layer.on('contextmenu', e => console.log(e))
-
-      // layer.on('unclick', e => { console.log(e) })
-      // layer.on('unmousemove', e => { console.log(e) })
-      // layer.on('unmouseup', e => { console.log(e) })
-      // layer.on('unmousedown', e => { console.log(e) })
-      // layer.on('uncontextmenu', e => console.log(e))
-
-      this.scene.addLayer(layer);
-
-      layer.on('click', () => {
-        // @ts-ignore
-        layer.tileLayer.children.map((l) => {
-          console.log(l.isVisible());
-        });
-      });
-
-      // setTimeout(() => {
-      //   layer.size(5);
-      //   this.scene.render();
-      // }, 4000);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/VectorOffsetLineTile.tsx b/stories/tile/components/VectorOffsetLineTile.tsx
deleted file mode 100644
index b00dde9abc..0000000000
--- a/stories/tile/components/VectorOffsetLineTile.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      // map: new GaodeMap({
-      map: new Mapbox({
-        center: [122.77, 43.333172],
-        // center: [121.268, 30.3628],
-        // style: 'normal',
-        style: 'blank',
-        zoom: 19,
-        zooms: [0, 25],
-        maxZoom: 25,
-        // zoom: 13,
-        // center: [-122.447303, 37.753574],
-      }),
-    });
-
-    this.scene.on('zoom', () => console.log(this.scene.getZoom()));
-
-    this.scene.on('loaded', () => {
-      const layer = new LineLayer({
-        featureId: 'COLOR',
-        sourceLayer: 'woods', // contour ecoregions city ecoregions2
-        coord: 'offset',
-      });
-      layer
-        .source(
-          // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-          // 'http://localhost:3000/file3.mbtiles/{z}/{x}/{y}.pbf',
-          'http://localhost:3000/woods.mbtiles/{z}/{x}/{y}.pbf',
-          // 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // 'https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?sku=101lazXpJZeM7&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          {
-            parser: {
-              type: 'mvt',
-              tileSize: 256,
-              zoomOffset: 0,
-              maxZoom: 20,
-              extent: [-180, -85.051129, 179, 85.051129],
-            },
-          },
-        )
-        .color('#f00')
-        // .color('v', v => '#ff0')
-        // .color('COLOR')
-        .style({
-          // color: "#ff0"
-          // opacity: 0.4,
-        })
-        .active(true);
-
-      this.scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/VectorOffsetPolygonTile.tsx b/stories/tile/components/VectorOffsetPolygonTile.tsx
deleted file mode 100644
index 751c5a9747..0000000000
--- a/stories/tile/components/VectorOffsetPolygonTile.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      // map: new GaodeMap({
-      map: new Mapbox({
-        // center: [121.268, 30.3628],
-        // center: [122.76391708791607, 43.343389123718815],
-        center: [122.77, 43.333172],
-        style: 'normal',
-        zoom: 19,
-        zooms: [0, 25],
-        maxZoom: 25,
-        // zoom: 13,
-        // center: [-122.447303, 37.753574],
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      const point = new PointLayer({ zIndex: 7 })
-        .source(
-          [
-            {
-              lng: 120,
-              lat: 30,
-            },
-          ],
-          {
-            parser: {
-              type: 'json',
-              x: 'lng',
-              y: 'lat',
-            },
-          },
-        )
-        .shape('circle')
-        .color('#ff0')
-        .active(true)
-        .size(10);
-
-      this.scene.addLayer(point);
-
-      this.scene.on('zoom', () => console.log(this.scene.getZoom()));
-
-      const layer = new PolygonLayer({
-        featureId: 'COLOR',
-        sourceLayer: 'woods', // woods hillshade contour ecoregions ecoregions2 city
-        coord: 'offset',
-      });
-      layer
-        .source(
-          // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-          // 'http://localhost:3000/file3.mbtiles/{z}/{x}/{y}.pbf',
-          'http://localhost:3000/woods.mbtiles/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3000/zhoushan.mbtiles/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3000/woods.mbtiles/14/13779/5999.pbf'
-          // 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // 'https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?sku=101lazXpJZeM7&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          {
-            parser: {
-              type: 'mvt',
-              tileSize: 256,
-              zoomOffset: 0,
-              maxZoom: 20,
-              extent: [-180, -85.051129, 179, 85.051129],
-            },
-          },
-        )
-        .color('#f00')
-        // .color('v', v => '#ff0')
-        // .color('COLOR', ['#f00', '#ff0', '#00f', '#0ff'])
-        .style({
-          // color: "#ff0"
-          // opacity: 0.4,
-        })
-        .active(true);
-
-      this.scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/VectorOffssetPointTile.tsx b/stories/tile/components/VectorOffssetPointTile.tsx
deleted file mode 100644
index 50431697be..0000000000
--- a/stories/tile/components/VectorOffssetPointTile.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      // map: new GaodeMap({
-      map: new Mapbox({
-        // map: new Map({
-        // center: [121.268, 30.3628],
-        center: [122.77, 43.333172],
-        style: 'normal',
-        // zoom: 5,
-        zoom: 19,
-        zooms: [0, 25],
-        maxZoom: 25,
-        // zoom: 13,
-        // center: [-122.447303, 37.753574],
-      }),
-    });
-
-    // this.scene.on('mapchange', this.updateGridLayer);
-    this.scene.on('zoom', () => console.log(this.scene.getZoom()));
-
-    this.scene.on('loaded', () => {
-      const layer = new PointLayer({
-        featureId: 'COLOR',
-        sourceLayer: 'woods',
-        coord: 'offset',
-      });
-      layer
-        .source(
-          // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-          // 'http://localhost:3000/file3.mbtiles/{z}/{x}/{y}.pbf',
-          'http://localhost:3000/woods.mbtiles/{z}/{x}/{y}.pbf',
-          // 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // 'https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?sku=101lazXpJZeM7&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          {
-            parser: {
-              type: 'mvt',
-              tileSize: 256,
-              zoomOffset: 0,
-              maxZoom: 20,
-              extent: [-180, -85.051129, 179, 85.051129],
-            },
-          },
-        )
-        .color('#f00')
-        // .color('v', v => '#ff0')
-        // .color('COLOR')
-        .size(10)
-        .style({
-          // color: "#ff0"
-          // opacity: 0.4,
-        });
-      // .select(true);
-      // .active(true);
-
-      this.scene.addLayer(layer);
-
-      // setTimeout(() => {
-      //   layer.style({
-      //     opacity: 0.4
-      //   })
-      //   layer.color('#f00')
-      //   // layer.color('v', v => '#ff0')
-      //   this.scene.render()
-      // }, 2000)
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/VectorPointTextTile.tsx b/stories/tile/components/VectorPointTextTile.tsx
deleted file mode 100644
index 1fff905094..0000000000
--- a/stories/tile/components/VectorPointTextTile.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      // map: new GaodeMap({
-      // map: new GaodeMapV2({
-      map: new Mapbox({
-        // map: new Map({
-        // center: [121.268, 30.3628],
-        // center: [122.77, 43.333172],
-        // style: 'normal',
-        // center: [120, 30],
-        // style: 'normal',
-        // zoom: 6,
-        // // zoom: 5,
-        // // zoom: 19,
-        // zooms: [0, 22],
-        // maxZoom: 22,
-        center: [120, 30],
-        style: 'blank',
-        zoom: 2,
-        // zoom: 13,
-        // center: [-122.447303, 37.753574],
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      // this.scene.on('zoom', () => console.log(this.scene.getZoom()));
-      const layer = new PointLayer({
-        featureId: 'COLOR',
-        sourceLayer: 'ecoregions2',
-      });
-      layer
-        .source(
-          // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-          // 'http://localhost:3000/file3.mbtiles/{z}/{x}/{y}.pbf',
-          'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3000/woods.mbtiles/{z}/{x}/{y}.pbf',
-          // 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // 'https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?sku=101lazXpJZeM7&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          {
-            parser: {
-              type: 'mvt',
-              tileSize: 256,
-              zoomOffset: 0,
-              maxZoom: 20,
-              extent: [-180, -85.051129, 179, 85.051129],
-
-              // coord: 'offset'
-            },
-          },
-        )
-        .shape('NNH_NAME', 'text')
-        // .color('#f00')
-        // .color('v', v => '#ff0')
-        .color('COLOR')
-        .size(12)
-        .style({
-          stroke: '#00f',
-          strokeWidth: 1,
-          textAllowOverlap: false,
-          // color: "#ff0"
-          // opacity: 0.4,
-        });
-      // .select(true);
-      // .active(true);
-
-      this.scene.addLayer(layer);
-
-      // setTimeout(() => {
-      //   layer.shape('circle');
-
-      //   layer.size(20);
-      //   // layer.style({
-      //   //   // opacity: 0.4
-      //   //   strokeWidth: 2
-      //   // })
-      //   // layer.select(true)
-      //   layer.color('#f00');
-      //   //   // layer.color('v', v => '#ff0')
-      //   this.scene.render();
-      // }, 2000);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/VectorPointTile.tsx b/stories/tile/components/VectorPointTile.tsx
deleted file mode 100644
index 221ed3d675..0000000000
--- a/stories/tile/components/VectorPointTile.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      // map: new GaodeMap({
-      // map: new GaodeMapV2({
-      map: new Mapbox({
-        // map: new Map({
-        // center: [121.268, 30.3628],
-        // center: [122.77, 43.333172],
-        // style: 'normal',
-        // center: [120, 30],
-        // style: 'normal',
-        // zoom: 6,
-        // // zoom: 5,
-        // // zoom: 19,
-        // zooms: [0, 22],
-        // maxZoom: 22,
-        center: [120, 30],
-        style: 'blank',
-        zoom: 2,
-        // zoom: 13,
-        // center: [-122.447303, 37.753574],
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      // this.scene.on('zoom', () => console.log(this.scene.getZoom()));
-      const layer = new PointLayer({
-        featureId: 'COLOR',
-        sourceLayer: 'ecoregions2',
-      });
-      layer
-        .source(
-          // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-          // 'http://localhost:3000/file3.mbtiles/{z}/{x}/{y}.pbf',
-          'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3000/woods.mbtiles/{z}/{x}/{y}.pbf',
-          // 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // 'https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?sku=101lazXpJZeM7&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          {
-            parser: {
-              type: 'mvt',
-              tileSize: 256,
-              zoomOffset: 0,
-              maxZoom: 20,
-              extent: [-180, -85.051129, 179, 85.051129],
-            },
-          },
-        )
-        .shape('triangle')
-        // .color('#f00')
-        // .color('v', v => '#ff0')
-        .color('COLOR')
-        .size(8)
-        .style({
-          // color: "#ff0"
-          // opacity: 0.4,
-        })
-        .select(true);
-      // .active(true);
-
-      this.scene.addLayer(layer);
-
-      // setTimeout(() => {
-      //   layer.shape('circle');
-      //   // layer.shape('triangle');
-
-      //   layer.size(20);
-      //   // layer.style({
-      //   //   opacity: 0.4
-      //   //   // strokeWidth: 2
-      //   // })
-      //   // layer.select(true)
-      //   // layer.color('#f00');
-      //   layer.color('v', (v) => '#ff0');
-      //   this.scene.render();
-      // }, 4000);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/VectorPolygonTile.tsx b/stories/tile/components/VectorPolygonTile.tsx
deleted file mode 100644
index 67eefae142..0000000000
--- a/stories/tile/components/VectorPolygonTile.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-  Source,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-const cacheColors = {};
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        // map: new Mapbox({
-        // center: [121.268, 30.3628],
-        // center: [122.76391708791607, 43.343389123718815],
-        center: [-95, 37],
-        // style: 'dark',
-        zoom: 4.2,
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      const tileSource = new Source(
-        // 'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/rs_l7/{z}/{x}/{y}.pbf',
-        'http://localhost:3000/a.mbtiles/{z}/{x}/{y}.pbf',
-        // http://localhost:3000/a.mbtiles/5/8/12.pbf
-        {
-          parser: {
-            type: 'mvt',
-            tileSize: 256,
-            zoomOffset: -1,
-            maxZoom: 8,
-            // extent: [-180, -85.051129, 179, 85.051129],
-          },
-        },
-      );
-
-      // const line = new LineLayer({
-      //   featureId: 'ALAND10',
-      //   sourceLayer: 'a',
-      // })
-      //   .source(tileSource)
-      //   // .size(0.4)
-      //   .size(1)
-      //   .color('#f00');
-      // this.scene.addLayer(line);
-
-      const layer = new PolygonLayer({
-        featureId: 'ALAND10',
-        sourceLayer: 'a',
-      })
-        .source(tileSource)
-        .style({
-          // opacity: 0.6,
-        })
-        .color(
-          'ALAND10',
-          // [
-          //   '#ffffd9',
-          //   '#edf8b1',
-          //   '#c7e9b4',
-          //   '#7fcdbb',
-          //   '#41b6c4',
-          //   '#1d91c0',
-          //   '#225ea8',
-          //   '#253494',
-          //   '#081d58',
-          // ].reverse(),
-          // [ '#fee5d9', '#fcae91', '#fb6a4a', '#de2d26', '#a50f15' ]
-          [
-            '#227BA2',
-            '#1B9CD0',
-            '#22BAED',
-            '#61C9FF',
-            '#8AD4FF',
-            '#ABDFFF',
-            '#C9E9FF',
-            '#F2EAEA',
-            '#FFC5AC',
-            '#FF895D',
-            '#FFA884',
-            '#FF6836',
-            '#F3470D',
-            '#D13808',
-            '#A4300C',
-          ],
-        )
-        .scale('ALAND10', {
-          type: 'quantize',
-          domain: [0, 2000000000],
-        });
-
-      this.scene.addLayer(layer);
-    });
-  }
-
-  getColor() {
-    const colors = ['#fdbe85', '#fd8d3c', '#e6550d', '#a63603'];
-    return colors[Math.floor(Math.random() * 4)];
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/VectorProvince.tsx b/stories/tile/components/VectorProvince.tsx
deleted file mode 100644
index fbb8b88125..0000000000
--- a/stories/tile/components/VectorProvince.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      // map: new GaodeMap({
-      map: new Mapbox({
-        // center: [121.268, 30.3628],
-        // center: [122.76391708791607, 43.343389123718815],
-        center: [120, 30],
-        style: 'normal',
-        zoom: 6,
-        zooms: [0, 25],
-        maxZoom: 25,
-        // zoom: 13,
-        // center: [-122.447303, 37.753574],
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      // const point = new PointLayer({ zIndex: 7 })
-      //   .source(
-      //     [
-      //       {
-      //         lng: 120,
-      //         lat: 30,
-      //       },
-      //     ],
-      //     {
-      //       parser: {
-      //         type: 'json',
-      //         x: 'lng',
-      //         y: 'lat',
-      //       },
-      //     },
-      //   )
-      //   .shape('circle')
-      //   .color('#ff0')
-      //   // .active(true)
-      //   // .animate(true)
-      //   .select(true)
-      //   .size(10);
-
-      // this.scene.addLayer(point);
-
-      // this.scene.on('zoom', () => console.log(this.scene.getZoom()));
-
-      function getRandomColor() {
-        let r = Math.floor(Math.random() * 10);
-        let g = Math.floor(Math.random() * 10);
-        let b = Math.floor(Math.random() * 10);
-        return '#' + r + g + b;
-      }
-      const colors = {};
-
-      const layer = new PolygonLayer({
-        featureId: 'NAME_CHN',
-        sourceLayer: 'city', // woods hillshade contour ecoregions ecoregions2 city
-        // coord: 'offset'
-      });
-      layer
-        .source(
-          // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-          'http://localhost:3000/file.mbtiles/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3333/tilesource/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3000/woods.mbtiles/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3000/zhoushan.mbtiles/{z}/{x}/{y}.pbf',
-          // 'http://localhost:3000/woods.mbtiles/14/13779/5999.pbf'
-          // 'https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // 'https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2/{z}/{x}/{y}.vector.pbf?sku=101lazXpJZeM7&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          {
-            parser: {
-              type: 'mvt',
-              tileSize: 256,
-              zoomOffset: 0,
-              maxZoom: 9,
-              extent: [-180, -85.051129, 179, 85.051129],
-              // updateStrategy: 'replace', //  'overlap' | 'replace';
-            },
-          },
-        )
-        // .color('citycode', (v: string) => {
-        //   // @ts-ignore
-        //   if (colors[v]) {
-        //     // @ts-ignore
-        //     return colors[v];
-        //   } else {
-        //     let color = getRandomColor();
-        //     // @ts-ignore
-        //     colors[v] = color;
-        //     return color;
-        //   }
-        // })
-        .color('#BED1E4')
-        // .color('v', v => '#ff0')
-        // .color('COLOR', ['#f00', '#ff0', '#00f', '#0ff'])
-        .style({
-          // color: "#ff0"
-          // opacity: 0.6,
-        })
-        .select(true);
-      // .active(true);
-
-      // layer.on('click', e => { console.log(e) })
-      // layer.on('mousemove', e => console.log(e))
-      // layer.on('mouseup', e => console.log(e))
-      // layer.on('unmousemove', e => console.log(e))
-      // layer.on('mouseenter', e => console.log(e))
-      // layer.on('mouseout', e => console.log(e))
-      // layer.on('mousedown', e => console.log(e))
-      // layer.on('contextmenu', e => console.log(e))
-
-      // layer.on('unclick', e => { console.log(e) })
-      // layer.on('unmousemove', e => { console.log(e) })
-      // layer.on('unmouseup', e => { console.log(e) })
-      // layer.on('unmousedown', e => { console.log(e) })
-      // layer.on('uncontextmenu', e => console.log(e))
-
-      this.scene.addLayer(layer);
-
-      const line = new LineLayer({
-        featureId: 'NAME_CHN',
-        sourceLayer: 'city', // woods hillshade contour ecoregions ecoregions2 city
-        // coord: 'offset'
-      });
-      line
-        .source('http://localhost:3000/file.mbtiles/{z}/{x}/{y}.pbf', {
-          parser: {
-            type: 'mvt',
-            tileSize: 256,
-            zoomOffset: 0,
-            maxZoom: 9,
-            extent: [-180, -85.051129, 179, 85.051129],
-            // updateStrategy: 'replace', //  'overlap' | 'replace';
-          },
-        })
-        .size(1)
-        .color('#fff');
-
-      this.scene.addLayer(line);
-      // setTimeout(() => {
-      //   layer.style({
-      //     opacity: 0.3,
-      //   });
-      //   this.scene.render();
-      // }, 3000);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/VectorProvinceAllTile.tsx b/stories/tile/components/VectorProvinceAllTile.tsx
deleted file mode 100644
index b9ac36aa41..0000000000
--- a/stories/tile/components/VectorProvinceAllTile.tsx
+++ /dev/null
@@ -1,521 +0,0 @@
-import * as React from 'react';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-  Source,
-  Popup,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-let GDP = {
-  上海市: '43214.85',
-  北京市: '40269.6',
-  深圳市: '30664.85',
-  广州市: '28200',
-  重庆市: '27894.02',
-  苏州市: '22718.3',
-  成都市: '19917',
-  杭州市: '18109',
-  武汉市: '17716.76',
-  南京市: '16355.32',
-  天津市: '15695.05',
-  宁波市: '14594.9',
-  青岛市: '14136.46',
-  无锡市: '14003.24',
-  长沙市: '13270.7',
-  郑州市: '12691',
-  佛山市: '12156.54',
-  济南市: '11432.2',
-  合肥市: '11412.8',
-  福州市: '11324.48',
-  泉州市: '11304.17',
-  南通市: '11026.9',
-  东莞市: '10855.35',
-  西安市: '10688.28',
-  常州市: '8807.6',
-  烟台市: '8711.75',
-  唐山市: '8230.6',
-  徐州市: '8117.44',
-  温州市: '7585',
-  沈阳市: '7249.7',
-  厦门市: '7033.89',
-  大连市: '7030.4',
-  潍坊市: '7010.6',
-  绍兴市: '6795',
-  昆明市: '6733.79',
-  扬州市: '6696.43',
-  南昌市: '6650.53',
-  长春市: '6638.03',
-  盐城市: '6617.4',
-  石家庄市: '6490.3',
-  嘉兴市: '6355.28',
-  泰州市: '6025.26',
-  台州市: '5786.19',
-  临沂市: '5465.5',
-  洛阳市: '5447.1',
-  榆林市: '5435.18',
-  金华市: '5355.44',
-  哈尔滨市: '5351.7',
-  襄阳市: '5309.43',
-  太原市: '5121.61',
-  南宁市: '5120.94',
-  济宁市: '5070',
-  漳州市: '5025.4',
-  宜昌市: '5022.69',
-  惠州市: '4977.36',
-  镇江市: '4763.42',
-  鄂尔多斯市: '4715.7',
-  贵阳市: '4711.04',
-  淮安市: '4550.13',
-  岳阳市: '4402.98',
-  南阳市: '4342.22',
-  芜湖市: '4302.63',
-  淄博市: '4200.6',
-  遵义市: '4169.9',
-  赣州市: '4169.37',
-  沧州市: '4163.4',
-  邯郸市: '4114.8',
-  常德市: '4054.1',
-  菏泽市: '3976.67',
-  珠海市: '3881.75',
-  衡阳市: '3840.31',
-  九江市: '3735.68',
-  连云港市: '3727.92',
-  宿迁市: '3719.01',
-  茂名市: '3698.1',
-  许昌市: '3655.4',
-  湖州市: '3644.9',
-  江门市: '3601.28',
-  中山市: '3566.17',
-  湛江市: '3559.93',
-  廊坊市: '3553.1',
-  周口市: '3496.23',
-  德州市: '3488.72',
-  威海市: '3463.93',
-  东营市: '3441.72',
-  株洲市: '3420.3',
-  新疆生产建设兵团: '3395.61',
-  曲靖市: '3393.91',
-  滁州市: '3362.1',
-  保定市: '3353.3',
-  绵阳市: '3350.29',
-  乌鲁木齐市: '3337.32',
-  包头市: '3293',
-  新乡市: '3232.53',
-  兰州市: '3231.29',
-  宜春市: '3191.28',
-  宁德市: '3151.08',
-  宜宾市: '3148.08',
-  呼和浩特市: '3121.4',
-  驻马店市: '3082.82',
-  龙岩市: '3081.78',
-  阜阳市: '3071.5',
-  信阳市: '3064.96',
-  柳州市: '3057.24',
-  上饶市: '3043.5',
-  泰安市: '2996.7',
-  三明市: '2953.47',
-  汕头市: '2929.87',
-  商丘市: '2925.33',
-  莆田市: '2882.96',
-  滨州市: '2872.11',
-  郴州市: '2770.08',
-  荆州市: '2715.52',
-  平顶山市: '2694.16',
-  伊犁哈萨克自治州: '2667.18',
-  安庆市: '2656.88',
-  德阳市: '2656.56',
-  肇庆市: '2649.99',
-  聊城市: '2642.52',
-  大庆市: '2620',
-  南充市: '2601.98',
-  咸阳市: '2581.32',
-  开封市: '2557.03',
-  宝鸡市: '2548.71',
-  湘潭市: '2548.3',
-  黄冈市: '2541.31',
-  吉安市: '2525.65',
-  邵阳市: '2461.5',
-  马鞍山市: '2439.33',
-  安阳市: '2435.5',
-  红河哈尼族彝族自治州: '2417.48',
-  泸州市: '2406.08',
-  玉溪市: '2352.3',
-  达州市: '2351.7',
-  长治市: '2311.1',
-  桂林市: '2311.06',
-  揭阳市: '2265.43',
-  银川市: '2262.95',
-  永州市: '2261.08',
-  日照市: '2211.96',
-  乐山市: '2205.15',
-  邢台市: '2200.4',
-  孝感市: '2193.55',
-  毕节市: '2181.48',
-  宿州市: '2167.67',
-  十堰市: '2163.98',
-  焦作市: '2123.6',
-  荆门市: '2120.86',
-  南平市: '2117.58',
-  渭南市: '2087.21',
-  吕梁市: '2071.37',
-  玉林市: '2070.61',
-  益阳市: '2019.27',
-  清远市: '2007.4',
-  延安市: '2004.58',
-  蚌埠市: '1988.97',
-  赤峰市: '1975.1',
-  亳州市: '1972.7',
-  枣庄市: '1951.57',
-  六安市: '1923.5',
-  临汾市: '1909.5',
-  凉山彝族自治州: '1901.18',
-  鞍山市: '1888.1',
-  衢州市: '1875.61',
-  秦皇岛市: '1843.76',
-  晋中市: '1843.4',
-  宣城市: '1833.9',
-  娄底市: '1825.76',
-  怀化市: '1817.8',
-  抚州市: '1794.55',
-  海口市: '1791.58',
-  濮阳市: '1771.54',
-  汉中市: '1768.72',
-  咸宁市: '1751.82',
-  黔南布依族苗族自治州: '1747.41',
-  张家口市: '1727.8',
-  漯河市: '1721.1',
-  丽水市: '1710.03',
-  衡水市: '1703.1',
-  昌吉回族自治州: '1698.21',
-  承德市: '1697',
-  大同市: '1686',
-  运城市: '1643.6485',
-  黄石市: '1641.32',
-  大理白族自治州: '1633',
-  楚雄彝族自治州: '1608.12',
-  自贡市: '1601.31',
-  三门峡市: '1582.54',
-  百色市: '1568.71',
-  阿克苏地区: '1564.54',
-  韶关市: '1553.93',
-  眉山市: '1547.87',
-  遂宁市: '1519.87',
-  阳江市: '1515.86',
-  舟山市: '1512.1',
-  六盘水市: '1473.65',
-  内江市: '1465.88',
-  铜仁市: '1462.65',
-  昭通市: '1462.06',
-  淮南市: '1457.1',
-  吉林市: '1452.6',
-  晋城市: '1425.7166',
-  广安市: '1417.8',
-  通辽市: '1411.44',
-  营口市: '1403.2',
-  钦州市: '1387.96',
-  盘锦市: '1383.2',
-  西宁市: '1373',
-  呼伦贝尔市: '1354.8',
-  黔西南布依族苗族自治州: '1353.4',
-  贵港市: '1352.73',
-  忻州市: '1344.4',
-  梅州市: '1308.01',
-  恩施土家族苗族自治州: '1302.36',
-  喀什地区: '1298.98',
-  文山壮族苗族自治州: '1298.77',
-  汕尾市: '1288.04',
-  北海市: '1276.91',
-  河源市: '1273.99',
-  黔东南苗族侗族自治州: '1255.03',
-  潮州市: '1244.85',
-  随州市: '1241.45',
-  齐齐哈尔市: '1224.5',
-  淮北市: '1223',
-  安康市: '1209.49',
-  绥化市: '1177.7',
-  铜陵市: '1165.6',
-  保山市: '1165.5',
-  鄂州市: '1162.3',
-  新余市: '1154.6',
-  锦州市: '1148.3',
-  鹰潭市: '1143.92',
-  云浮市: '1138.97',
-  广元市: '1116.25',
-  萍乡市: '1108.3',
-  巴音郭楞蒙古自治州: '1106.29',
-  朔州市: '1100.4929',
-  梧州市: '1081.34',
-  安顺市: '1078.91',
-  克拉玛依市: '1072.1',
-  鹤壁市: '1064.64',
-  河池市: '1041.97',
-  攀枝花市: '1040.82',
-  普洱市: '1029.15',
-  锡林郭勒盟: '1014.74',
-  池州市: '1004.2',
-  巴彦淖尔市: '982.7',
-  黄山市: '957.4',
-  景德镇市: '957.1364',
-  朝阳市: '944.8',
-  阳泉市: '916.6',
-  临沧市: '908.48',
-  乌兰察布市: '903.6',
-  庆阳市: '885.27',
-  牡丹江市: '875',
-  抚顺市: '870.1',
-  丹东市: '854.4',
-  商洛市: '852.29',
-  葫芦岛市: '841.7',
-  雅安市: '840.56',
-  辽阳市: '837.7',
-  三亚市: '835.37',
-  来宾市: '832.88',
-  塔城地区: '825.31',
-  佳木斯市: '816.2',
-  防城港市: '815.88',
-  本溪市: '810.4',
-  崇左市: '809',
-  资阳市: '807.5',
-  湘西土家族苗族自治州: '792.11',
-  酒泉市: '762.7',
-  吴忠市: '762.47',
-  贺州市: '753.95',
-  松原市: '752.88',
-  天水市: '750.33',
-  巴中市: '742.51',
-  哈密市: '727.14',
-  延边朝鲜族自治州: '726.86',
-  乌海市: '718.66',
-  铁岭市: '716',
-  海西蒙古族藏族自治州: '713.78',
-  拉萨市: '678.16',
-  西双版纳傣族自治州: '676.1528',
-  黑河市: '637.1',
-  石嘴山市: '617.03',
-  兴安盟: '601.79',
-  武威市: '600.2',
-  张家界市: '580.3',
-  德宏傣族景颇族自治州: '575.54',
-  鸡西市: '572.4',
-  白银市: '571.02',
-  丽江市: '570.49',
-  平凉市: '553.97',
-  白山市: '541.41',
-  通化市: '531.7',
-  四平市: '526.6',
-  张掖市: '526.23',
-  海东市: '514.6',
-  白城市: '510.18',
-  中卫市: '504.73',
-  阜新市: '504.6',
-  陇南市: '502.5',
-  定西市: '500.76',
-  双鸭山市: '493.9',
-  和田地区: '456.72',
-  阿坝藏族羌族自治州: '449.63',
-  博尔塔拉蒙古自治州: '448.03',
-  甘孜藏族自治州: '447.04',
-  铜川市: '439.41',
-  吐鲁番市: '433.35',
-  辽源市: '429.9',
-  金昌市: '428.61',
-  儋州市: '395.33',
-  固原市: '375.13',
-  临夏回族自治州: '373.8',
-  阿拉善盟: '363.6',
-  日喀则市: '348.26',
-  鹤岗市: '340.2',
-  阿勒泰地区: '334.53',
-  嘉峪关市: '326.5',
-  伊春市: '318.6933',
-  迪庆藏族自治州: '293.2715',
-  昌都市: '252.89',
-  山南市: '237.27',
-  怒江傈僳族自治州: '234.11',
-  甘南藏族自治州: '230.04',
-  林芝市: '209.01',
-  七台河市: '206.4',
-  海南藏族自治州: '181.6',
-  那曲市: '171.41',
-  克孜勒苏柯尔克孜自治州: '169.24',
-  大兴安岭地区: '153.1',
-  黄南藏族自治州: '110.45',
-  海北藏族自治州: '100.4',
-  阿里地区: '70.67',
-  玉树藏族自治州: '63.6',
-  果洛藏族自治州: '48.9',
-  台湾省: '49583',
-  澳门特别行政区: '1929',
-  香港特别行政区: '23740',
-  天门市: '718.89',
-  仙桃市: '929.9',
-  潜江市: '930',
-  济源市: '762.23',
-  神农架林区: '35',
-  昌江黎族自治县: '143.74',
-  东方市: '215.03',
-  乐东黎族自治县: '174.25',
-  白沙黎族自治县: '62.57',
-  五指山市: '36.76',
-  保亭黎族苗族自治县: '63.16',
-  临高县: '222.91',
-  澄迈县: '400.81',
-  屯昌县: '96.79',
-  定安县: '117.64',
-  文昌市: '308.73',
-  琼中黎族苗族自治县: '66.32',
-  万宁市: '276.03',
-  陵水黎族自治县: '223.39',
-  琼海市: '337.87',
-  三沙市: '18',
-  可克达拉市: '210.6',
-  双河市: '82.9',
-  北屯市: '73',
-  胡杨河市: '213.9',
-  石河子市: '562',
-  铁门关市: '135.4',
-  五家渠市: '320',
-  阿拉尔市: '332',
-  图木舒克市: '196.6',
-  昆玉市: '31.4',
-};
-
-function getColor(num: number) {
-  if (num > 20000) {
-    return '#67001f';
-  } else if (num > 10000) {
-    return '#980043';
-  } else if (num > 8000) {
-    return '#ce1256';
-  } else if (num > 6000) {
-    return '#e7298a';
-  } else if (num > 4000) {
-    return '#df65b0';
-  } else if (num > 2000) {
-    return '#c994c7';
-  } else if (num > 1000) {
-    return '#d4b9da';
-  } else if (num > 500) {
-    return '#e7e1ef';
-  } else {
-    return ' #f7f4f9';
-  }
-}
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        // map: new Mapbox({
-        // center: [121.268, 30.3628],
-        // center: [122.76391708791607, 43.343389123718815],
-        center: [120, 29],
-        // style: 'normal',
-        style: 'light',
-        zoom: 5,
-        zooms: [4, 19],
-        // zoom: 13,
-        // center: [-122.447303, 37.753574],
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      const tileSource = new Source(
-        'http://localhost:3000/file.mbtiles/{z}/{x}/{y}.pbf',
-        // 'http://localhost:3000/zhejiang.mbtiles/{z}/{x}/{y}.pbf',
-        {
-          parser: {
-            type: 'mvt',
-            tileSize: 256,
-            zoomOffset: 0,
-            maxZoom: 9,
-            extent: [-180, -85.051129, 179, 85.051129],
-          },
-        },
-      );
-
-      const linelayer = new LineLayer({
-        zIndex: 1,
-        featureId: 'NAME_CHN',
-        sourceLayer: 'city', // woods hillshade contour ecoregions ecoregions2 city
-      })
-        .source(tileSource)
-        .color('#f00')
-        .size(0.5);
-      this.scene.addLayer(linelayer);
-
-      const polygonlayer = new PolygonLayer({
-        featureId: 'NAME_CHN',
-        sourceLayer: 'city', // woods hillshade contour ecoregions ecoregions2 city
-      })
-        .source(tileSource)
-        .color('NAME_CHN', (v: any) => {
-          let c = '#000';
-          // @ts-ignore
-          if (GDP[v]) {
-            // @ts-ignore
-            c = getColor(+GDP[v]);
-          } else {
-            console.log('**** not exist', v);
-          }
-          return c;
-        })
-        .style({
-          opacity: 0.8,
-        })
-        .active(true);
-      this.scene.addLayer(polygonlayer);
-
-      polygonlayer.on('mousemove', (e) => {
-        const { feature, lngLat } = e;
-
-        if (lngLat && feature.properties?.NAME_CHN) {
-          const popup = new Popup({
-            offsets: [0, 0],
-            closeButton: false,
-          });
-          popup
-            .setLnglat(lngLat)
-            // @ts-ignore
-            .setHTML(
-              `<span>${feature.properties.NAME_CHN} 2021 GDP</span></br><span>${
-                // @ts-ignore
-                GDP[feature.properties.NAME_CHN]
-              } 亿</span>`,
-            );
-
-          this.scene.addPopup(popup);
-        }
-      });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/america.tsx b/stories/tile/components/america.tsx
deleted file mode 100644
index 4517129e50..0000000000
--- a/stories/tile/components/america.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  MaskLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-// @ts-ignore
-import * as GeoTIFF from 'geotiff';
-
-export default class RasterTile extends React.Component<
-  any,
-  { colorList: string[]; positions: number[] }
-> {
-  private scene: Scene;
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      colorList: [
-        '#f7fcf5',
-        '#e5f5e0',
-        '#c7e9c0',
-        '#a1d99b',
-        '#74c476',
-        '#41ab5d',
-        '#238b45',
-        '#006d2c',
-        '#00441b',
-      ],
-      positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-    };
-  }
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [105, 60],
-        pitch: 0,
-        style: 'normal',
-        // style: 'blank',
-        zoom: 4,
-      }),
-    });
-    const canvas = document.createElement('canvas');
-    canvas.width = 256;
-    canvas.height = 256;
-    const ctx = canvas.getContext('2d');
-    this.scene.on('loaded', () => {
-      const layer = new RasterLayer();
-      layer
-        .source(
-          // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-          // 'https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{zoom}/{x}/{y}.pngraw?sku=YOUR_MAPBOX_SKU_TOKEN&access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          // https://tiledimageservices.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Esri_2020_Land_Cover_V2/ImageServer/tile/7/28/193
-          // self
-          'https://alipay-cognition-dev.cn-hangzhou-alipay-b.oss-cdn.aliyun-inc.com/tile/tiff/landcover/{z}/{x}/{y}.tiff',
-          // 'https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/{z}/{y}/{x}.tif',
-          // 'http://rd1yhmrzc.hn-bkt.clouddn.com/Mapnik/{z}/{x}/{y}.png',
-          {
-            parser: {
-              type: 'rasterTile',
-              dataType: 'arraybuffer',
-              tileSize: 256,
-              zoomOffset: 0,
-              extent: [-180, -85.051129, 179, 85.051129],
-              minZoom: 0,
-              // maxZoom: 0,
-              // maxZoom: 10,
-              format: async (data: any) => {
-                // const blob: Blob = new Blob([new Uint8Array(data)], {
-                //   type: 'image/png',
-                // });
-                // const img = await createImageBitmap(blob);
-                // // @ts-ignore
-                // ctx.clearRect(0, 0, 256, 256);
-                // // @ts-ignore
-                // ctx.drawImage(img, 0, 0, 256, 256);
-
-                // 'https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/{z}/{y}/{x}.tif',
-                const tiff = await GeoTIFF.fromArrayBuffer(data);
-                const image = await tiff.getImage();
-                const width = image.getWidth();
-                const height = image.getHeight();
-                const values = await image.readRasters();
-                return { rasterData: values[0], width, height };
-
-                // // 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
-                // // @ts-ignore
-                // let imgData = ctx.getImageData(0, 0, 256, 256).data;
-                // let arr = [];
-                // for (let i = 0; i < imgData.length; i += 4) {
-                //   const R = imgData[i];
-                //   const G = imgData[i + 1];
-                //   const B = imgData[i + 2];
-                //   const d = -10000 + (R * 256 * 256 + G * 256 + B) * 0.1;
-                //   arr.push(d);
-                // }
-                // // console.log(arr)
-                // return {
-                //   rasterData: arr,
-                //   width: 256,
-                //   height: 256,
-                // };
-              },
-            },
-          },
-        )
-        .style({
-          domain: [0, 1014],
-          clampLow: true,
-          rampColors: {
-            colors: [
-              '#f7fcf5',
-              '#e5f5e0',
-              '#c7e9c0',
-              '#a1d99b',
-              '#74c476',
-              '#41ab5d',
-              '#238b45',
-              '#006d2c',
-              '#00441b',
-            ],
-            positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-          },
-        })
-        .select(true);
-
-      this.scene.addLayer(layer);
-
-      // let count = 0;
-      // let colors = [
-      //   [
-      //     '#f7fcf5',
-      //     '#e5f5e0',
-      //     '#c7e9c0',
-      //     '#a1d99b',
-      //     '#74c476',
-      //     '#41ab5d',
-      //     '#238b45',
-      //     '#006d2c',
-      //     '#00441b',
-      //   ],
-      //   [
-      //     '#fff5f0',
-      //     '#fee0d2',
-      //     '#fcbba1',
-      //     '#fc9272',
-      //     '#fb6a4a',
-      //     '#ef3b2c',
-      //     '#cb181d',
-      //     '#a50f15',
-      //     '#67000d'
-      //   ],
-      //   [
-      //     '#f7fbff',
-      //     '#deebf7',
-      //     '#c6dbef',
-      //     '#9ecae1',
-      //     '#6baed6',
-      //     '#4292c6',
-      //     '#2171b5',
-      //     '#08519c',
-      //     '#08306b'
-      //   ]
-      // ]
-      // setInterval(() => {
-      //   const colorList = colors[count]
-      //   this.setState({
-      //     colorList: colorList
-      //   })
-      //   layer.style({
-      //     rampColors: {
-      //       colors: colorList,
-      //       positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-      //     },
-      //   })
-      //   this.scene.render()
-      //   count++;
-      //   if(count > colors.length - 1) {
-      //     count = 0;
-      //   }
-
-      // }, 2000)
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <Legent
-          colorList={this.state.colorList}
-          positions={this.state.positions}
-        />
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
-
-function Legent(props: { colorList: string[]; positions: number[] }) {
-  const { colorList, positions } = props;
-
-  let data: any[] = [];
-
-  colorList.map((color, index) => {
-    data.push({
-      color: color,
-      text: positions[index],
-    });
-  });
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: '10px',
-        bottom: '30px',
-        zIndex: 10,
-      }}
-    >
-      {data.map(({ color, text }) => {
-        return (
-          <div
-            style={{
-              display: 'inline-block',
-              background: '#fff',
-              padding: '5px',
-            }}
-          >
-            <div
-              style={{
-                fontSize: '12px',
-                lineHeight: '12px',
-              }}
-            >
-              {text}
-            </div>
-            <div
-              style={{
-                width: '30px',
-                height: '8px',
-                background: color,
-              }}
-            ></div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/stories/tile/components/billboard.tsx b/stories/tile/components/billboard.tsx
deleted file mode 100644
index 3e44c626c0..0000000000
--- a/stories/tile/components/billboard.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import { GeometryLayer, Scene, IMapService, PointLayer } from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        // map: new GaodeMapV2({
-        // map: new Mapbox({
-        pitch: 70,
-        style: 'dark',
-        center: [117.05374047387, 36.692219],
-        zoom: 13.5,
-      }),
-    });
-    this.scene = scene;
-    let data = [
-      {
-        n: '花园路',
-        p: '17880元/平米',
-        t: '商品房',
-        lng: 117.057231,
-        lat: 36.692219,
-      },
-      {
-        n: '文化东路',
-        p: '24170元/平米',
-        t: '商品房',
-        lng: 117.05374047387,
-        lat: 36.659859151524,
-      },
-      {
-        n: '文化东路',
-        p: '24189元/平米',
-        t: '商品房',
-        lng: 117.05374047387,
-        lat: 36.659859151524,
-      },
-      {
-        n: '花园路',
-        p: '17485元/平米',
-        t: '商品房',
-        lng: 117.05901528524,
-        lat: 36.688836686429,
-      },
-
-      {
-        n: '青后',
-        p: '25728元/平米',
-        t: '商品房',
-        lng: 117.044914,
-        lat: 36.676432,
-      },
-      {
-        n: '甸柳',
-        p: '26843元/平米',
-        t: '商品房',
-        lng: 117.07374708214,
-        lat: 36.66121860246,
-      },
-
-      {
-        n: '明湖区',
-        p: '17627元/平米',
-        t: '已购公房',
-        lng: 117.03814,
-        lat: 36.675152,
-      },
-
-      {
-        n: '文化东路',
-        p: '28418元/平米',
-        t: '商品房',
-        lng: 117.05374047387,
-        lat: 36.659859151524,
-      },
-      {
-        n: '花园路',
-        p: '20931元/平米',
-        t: '商品房',
-        lng: 117.05901528524,
-        lat: 36.688836686429,
-      },
-      {
-        n: '东关',
-        p: '19706元/平米',
-        t: '商品房',
-        lng: 117.045219,
-        lat: 36.683106,
-      },
-      {
-        n: '东关',
-        p: '31429元/平米',
-        t: '商品房',
-        lng: 117.04655219619,
-        lat: 36.678624581227,
-      },
-      {
-        n: '文化东路',
-        p: '25000元/平米',
-        t: '商品房',
-        lng: 117.05374047387,
-        lat: 36.659859151524,
-      },
-      {
-        n: '文化西路',
-        p: '25766元/平米',
-        t: '已购公房',
-        lng: 117.030757,
-        lat: 36.656219,
-      },
-      {
-        n: '文化西路',
-        p: '27778元/平米',
-        t: '已购公房',
-        lng: 117.029247,
-        lat: 36.657826,
-      },
-      {
-        n: '东关',
-        p: '21438元/平米',
-        t: '商品房',
-        lng: 117.04974161336,
-        lat: 36.679520836289,
-      },
-      {
-        n: '东关',
-        p: '21317元/平米',
-        t: '经济适用房',
-        lng: 117.046917,
-        lat: 36.684377,
-      },
-      {
-        n: '青后',
-        p: '30216元/平米',
-        t: '已购公房',
-        lng: 117.041383,
-        lat: 36.670455,
-      },
-      {
-        n: '文化西路',
-        p: '22945元/平米',
-        t: '商品房',
-        lng: 117.041344,
-        lat: 36.656366,
-      },
-      {
-        n: '文化东路',
-        p: '27237元/平米',
-        t: '商品房',
-        lng: 117.05374047387,
-        lat: 36.659859151524,
-      },
-      {
-        n: '青后',
-        p: '30226元/平米',
-        t: '已购公房',
-        lng: 117.042484,
-        lat: 36.668182,
-      },
-      {
-        n: '山大路',
-        p: '34716元/平米',
-        t: '已购公房',
-        lng: 117.064218,
-        lat: 36.675139,
-      },
-      {
-        n: '东关',
-        p: '17819元/平米',
-        t: '商品房',
-        lng: 117.045219,
-        lat: 36.683106,
-      },
-      {
-        n: '文化东路',
-        p: '19545元/平米',
-        t: '商品房',
-        lng: 117.05226870326,
-        lat: 36.666563657761,
-      },
-    ];
-
-    let point = new PointLayer()
-      .source(data, {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-      })
-      .shape('circle')
-      .size(60)
-      .animate(true)
-      .style({
-        opacity: 0.6,
-      })
-      .color('#0ff');
-
-    let pointBar = new PointLayer({ depth: false })
-      .source(data, {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-      })
-      .shape('cylinder')
-      .size([3, 3, 40])
-      .color('#0ff')
-      .style({
-        opacityLinear: {
-          enable: true,
-          dir: 'up',
-        },
-        opacity: 0.6,
-        heightFixed: true,
-      });
-
-    scene.on('loaded', () => {
-      scene.addLayer(point);
-      scene.addLayer(pointBar);
-
-      const img = new Image();
-      img.crossOrigin = '';
-      img.onload = () => {
-        data.map((d) => {
-          let billboard = new GeometryLayer().shape('billboard').style({
-            width: 60,
-            height: 20,
-            canvasWidth: 360,
-            canvasHeight: 120,
-            center: [d.lng, d.lat],
-            drawCanvas: (canvas: HTMLCanvasElement) => {
-              let { width, height } = canvas;
-              let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-              ctx.globalAlpha = 0.5;
-              ctx.drawImage(
-                img,
-                0,
-                0,
-                img.width,
-                img.height,
-                0,
-                0,
-                width,
-                height,
-              );
-              ctx.globalAlpha = 1;
-              ctx.fillStyle = '#0ff';
-              ctx.textAlign = 'center';
-              ctx.textBaseline = 'middle';
-              ctx.font = '24px Georgia';
-              ctx.fillText(d.n + ' ' + d.p, width / 2, height / 2);
-            },
-            raisingHeight: 60,
-          });
-          scene.addLayer(billboard);
-        });
-      };
-      img.src =
-        'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*zMw0T6gEIZYAAAAAAAAAAAAAARQnAQ';
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/demFilter.tsx b/stories/tile/components/demFilter.tsx
deleted file mode 100644
index aa3ccc29b9..0000000000
--- a/stories/tile/components/demFilter.tsx
+++ /dev/null
@@ -1,263 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  MaskLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-// @ts-ignore
-import * as GeoTIFF from 'geotiff';
-import { animate, easeInOut } from 'popmotion';
-import { styled, withStyles } from '@material-ui/core/styles';
-import Slider from '@material-ui/core/Slider';
-
-export default class RasterTile extends React.Component<
-  any,
-  { colorList: string[]; positions: any[]; lowClip: number }
-> {
-  private scene: Scene;
-  private layer: any;
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      colorList: [
-        '#fcfbfd',
-        '#efedf5',
-        '#dadaeb',
-        '#bcbddc',
-        '#9e9ac8',
-        '#807dba',
-        '#6a51a3',
-        '#54278f',
-        '#3f007d',
-      ],
-      positions: [
-        '0m',
-        '200m',
-        '300m',
-        '400m',
-        '500m',
-        '600m',
-        '700m',
-        '800m',
-        '1000m',
-      ],
-      lowClip: 0,
-    };
-  }
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      map: new Map({
-        center: [105, 60],
-        pitch: 0,
-        zoom: 4,
-      }),
-    });
-    const canvas = document.createElement('canvas');
-    canvas.width = 256;
-    canvas.height = 256;
-    const ctx = canvas.getContext('2d');
-    this.scene.on('loaded', () => {
-      const highClip = 1024;
-      const layer = new RasterLayer();
-      this.layer = layer;
-      layer
-        .source(
-          'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoiMTg5Njk5NDg2MTkiLCJhIjoiY2s5OXVzdHlzMDVneDNscDVjdzVmeXl0dyJ9.81SQ5qaJS0xExYLbDZAGpQ',
-          {
-            parser: {
-              type: 'rasterTile',
-              dataType: 'arraybuffer',
-              tileSize: 256,
-              format: async (data: any) => {
-                const blob: Blob = new Blob([new Uint8Array(data)], {
-                  type: 'image/png',
-                });
-                const img = await createImageBitmap(blob);
-                // @ts-ignore
-                ctx.clearRect(0, 0, 256, 256);
-                // @ts-ignore
-                ctx.drawImage(img, 0, 0, 256, 256);
-                // @ts-ignore
-                let imgData = ctx.getImageData(0, 0, 256, 256).data;
-                let arr = [];
-                for (let i = 0; i < imgData.length; i += 4) {
-                  const R = imgData[i];
-                  const G = imgData[i + 1];
-                  const B = imgData[i + 2];
-                  const d = -10000 + (R * 256 * 256 + G * 256 + B) * 0.1;
-                  arr.push(d);
-                }
-                return {
-                  rasterData: arr,
-                  width: 256,
-                  height: 256,
-                };
-              },
-            },
-          },
-        )
-        .style({
-          domain: [0, highClip],
-          clampLow: false,
-          rampColors: {
-            colors: [
-              '#fcfbfd',
-              '#efedf5',
-              '#dadaeb',
-              '#bcbddc',
-              '#9e9ac8',
-              '#807dba',
-              '#6a51a3',
-              '#54278f',
-              '#3f007d',
-            ],
-            positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-          },
-        });
-      // .select(true);
-
-      this.scene.addLayer(layer);
-    });
-  }
-
-  public timelinechange(e: number) {
-    if (e !== this.state.lowClip) {
-      this.layer.style({
-        domain: [e, 1024],
-      });
-      this.scene.render();
-      this.setState({
-        lowClip: e,
-      });
-    }
-  }
-
-  public render() {
-    return (
-      <>
-        <Legent
-          colorList={this.state.colorList}
-          positions={this.state.positions}
-        />
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-        <RangeInput
-          min={0}
-          max={1024}
-          value={this?.state?.lowClip || 0}
-          // @ts-ignore
-          onChange={(e) => this.timelinechange(e)}
-        />
-      </>
-    );
-  }
-}
-
-function Legent(props: { colorList: string[]; positions: number[] }) {
-  const { colorList, positions } = props;
-
-  let data: any[] = [];
-
-  colorList.map((color, index) => {
-    data.push({
-      color: color,
-      text: positions[index],
-    });
-  });
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: '100px',
-        bottom: '5px',
-        zIndex: 10,
-      }}
-    >
-      {data.map(({ color, text }) => {
-        return (
-          <div
-            style={{
-              display: 'inline-block',
-              background: '#fff',
-              padding: '5px',
-            }}
-          >
-            <div
-              style={{
-                fontSize: '12px',
-                lineHeight: '12px',
-              }}
-            >
-              {text}
-            </div>
-            <div
-              style={{
-                width: '30px',
-                height: '8px',
-                background: color,
-              }}
-            ></div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-const PositionContainer = styled('div')({
-  position: 'absolute',
-  zIndex: 9,
-  bottom: '40px',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-const SliderInput = withStyles({
-  root: {
-    marginLeft: 12,
-    width: '60%',
-  },
-  valueLabel: {
-    '& span': {
-      background: 'none',
-      color: '#fff',
-    },
-  },
-})(Slider);
-// @ts-ignore
-function RangeInput({ min, max, value, onChange }) {
-  return (
-    <PositionContainer>
-      <SliderInput
-        min={min}
-        max={max}
-        value={value}
-        onChange={(event, newValue) => onChange(newValue)}
-        valueLabelDisplay="auto"
-        valueLabelFormat={(t) => t}
-      />
-    </PositionContainer>
-  );
-}
diff --git a/stories/tile/components/germany.tsx b/stories/tile/components/germany.tsx
deleted file mode 100644
index 635861adbd..0000000000
--- a/stories/tile/components/germany.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as React from 'react';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-  Source,
-  Popup,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class RasterTile extends React.Component {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        // map: new Mapbox({
-        // center: [121.268, 30.3628],
-        // center: [122.76391708791607, 43.343389123718815],
-        center: [105, 30],
-        // style: 'normal',
-        style: 'dark',
-        zoom: 5,
-        zooms: [4, 19],
-        // zoom: 13,
-        // center: [-122.447303, 37.753574],
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      const tileSource = new Source(
-        'http://localhost:3000/file.mbtiles/{z}/{x}/{y}.pbf',
-        // 'http://localhost:3000/germany.mbtiles/{z}/{x}/{y}.pbf',
-        {
-          parser: {
-            type: 'mvt',
-            tileSize: 256,
-            zoomOffset: 0,
-            maxZoom: 8,
-            // extent: [-180, -85.051129, 179, 85.051129],
-          },
-        },
-      );
-
-      const linelayer = new LineLayer({
-        zIndex: 1,
-        featureId: 'NAME_CHN',
-        sourceLayer: 'city', // woods hillshade contour ecoregions ecoregions2 city
-      })
-        .source(tileSource)
-        .color('#00f')
-        .size(0.5)
-        .style({
-          opacity: 0.6,
-        });
-      this.scene.addLayer(linelayer);
-
-      const polygonlayer = new PolygonLayer({
-        featureId: 'NAME_CHN',
-        sourceLayer: 'city', // woods hillshade contour ecoregions ecoregions2 city
-      })
-        .source(tileSource)
-        .color('#0ff')
-
-        .style({
-          opacity: 0.4,
-        })
-        .active(true);
-      this.scene.addLayer(polygonlayer);
-      const popup = new Popup({
-        offsets: [0, 0],
-        closeButton: false,
-      }).setHTML(`<span></span>`);
-
-      polygonlayer.on('mousemove', (e) => {
-        console.log(e);
-        const { feature, lngLat } = e;
-        if (lngLat && feature.properties?.osm_id) {
-          popup.setLnglat(lngLat);
-          let context = `
-          <span> OSM ID: ${feature.properties?.NAME_CHN}</span>
-          `;
-          if (feature.properties?.name) {
-            context += `</br><span> Name: ${feature.properties?.name}</span>`;
-          }
-          popup.setHTML(context);
-          this.scene.addPopup(popup);
-        }
-      });
-      polygonlayer.on('mouseout', () => {
-        popup.setLnglat([0, 0]);
-        popup.setHTML(`<span></span>`);
-      });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/heightline.tsx b/stories/tile/components/heightline.tsx
deleted file mode 100644
index 2025903cb7..0000000000
--- a/stories/tile/components/heightline.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  PolygonLayer,
-  Source,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-/**
-#f7fcf0
-#e0f3db
-#ccebc5
-#a8ddb5
-#7bccc4
-#4eb3d3
-#2b8cbe
-#0868ac
-#084081
-
-['#fff7f3','#fde0dd','#fcc5c0','#fa9fb5','#f768a1','#dd3497','#ae017e','#7a0177','#49006a']
- */
-
-function getColor(num: number) {
-  // if (num > 2000) {
-  //   return '#f7fcf0';
-  // } else if (num > 1000) {
-  //   return '#e0f3db';
-  // } else if (num > 800) {
-  //   return '#ccebc5';
-  // } else if (num > 600) {
-  //   return '#a8ddb5';
-  // } else if (num > 400) {
-  //   return '#7bccc4';
-  // } else if (num > 200) {
-  //   return '#4eb3d3';
-  // } else if (num > 100) {
-  //   return '#2b8cbe';
-  // } else if (num > 50) {
-  //   return '#0868ac';
-  // } else {
-  //   return ' #084081';
-  // }
-
-  if (num > 2000) {
-    return '#f7fcf0';
-  } else if (num > 1000) {
-    return '#e0f3db';
-  } else if (num > 800) {
-    return '#ccebc5';
-  } else if (num > 600) {
-    return '#a8ddb5';
-  } else if (num > 400) {
-    return '#7bccc4';
-  } else if (num > 200) {
-    return '#4eb3d3';
-  } else if (num > 100) {
-    return '#2b8cbe';
-  } else if (num > 50) {
-    return '#0868ac';
-  } else {
-    return ' #084081';
-  }
-}
-
-export default class RasterTile extends React.Component<
-  any,
-  { colorList: string[]; positions: any[] }
-> {
-  private scene: Scene;
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      colorList: [
-        '#146968',
-        '#1D7F7E',
-        '#289899',
-        '#34B6B7',
-        '#4AC5AF',
-        '#5FD3A6',
-        '#7BE39E',
-        '#A1EDB8',
-        '#CEF8D6',
-      ],
-      positions: [
-        '0m',
-        '50m',
-        '100m',
-        '200m',
-        '400m',
-        '600m',
-        '800m',
-        '1000m',
-        '2000m',
-      ],
-    };
-  }
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      // map: new GaodeMap({
-      map: new GaodeMap({
-        center: [119.48, 30.38],
-        // style: 'blank',
-        style: 'dark',
-        zoom: 15,
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      const tileServe1 = 'http://localhost:3000/zjline.mbtiles/{z}/{x}/{y}.pbf'; // 10 - 11
-      const tileServe2 =
-        'http://localhost:3000/zjline2.mbtiles/{z}/{x}/{y}.pbf'; // 11.1 -14
-      const tileSource = new Source(tileServe2, {
-        parser: {
-          type: 'mvt',
-          tileSize: 256,
-          zoomOffset: 0,
-          // maxZoom: 10,
-          // minZoom: 11,
-          // extent: [-180, -85.051129, 179, 85.051129],
-          minZoom: 11.1,
-          maxZoom: 14,
-        },
-      });
-
-      // const tileSource2 = new Source('http://localhost:3000/zjline.mbtiles/{z}/{x}/{y}.pbf',
-      // {
-      //   parser: {
-      //     type: 'mvt',
-      //     tileSize: 256,
-      //     zoomOffset: -2,
-      //     maxZoom: 10,
-      //     minZoom: 11,
-      //     // extent: [-180, -85.051129, 179, 85.051129],
-      //   },
-      // })
-      const layer = new LineLayer({
-        featureId: 'COLOR',
-        sourceLayer: 'zhejiang', // woods hillshade contour ecoregions ecoregions2 city
-      })
-        .source(tileSource)
-        // .color('ELEV', (v) => getColor(v))
-        .color(
-          'ELEV',
-          [
-            '#146968',
-            '#1D7F7E',
-            '#289899',
-            '#34B6B7',
-            '#4AC5AF',
-            '#5FD3A6',
-            '#7BE39E',
-            '#A1EDB8',
-            '#CEF8D6',
-          ].reverse(),
-        )
-        .size(0.4)
-        .scale('ELEV', {
-          type: 'quantize',
-          domain: [0, 2000],
-        })
-        .style({
-          // color: "#ff0"
-          // opacity: 0.4,
-        });
-      this.scene.addLayer(layer);
-
-      // const layer2 = new LineLayer({
-      //   featureId: 'COLOR',
-      //   sourceLayer: 'zhejiang', // woods hillshade contour ecoregions ecoregions2 city
-
-      // })
-      //   .source(tileSource2)
-      //   .color('#f00')
-      //   .size(0.4)
-      //   .style({
-      //     // color: "#ff0"
-      //     // opacity: 0.4,
-      //   })
-      // this.scene.addLayer(layer2);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <Legent
-          colorList={this.state.colorList}
-          positions={this.state.positions}
-        />
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
-
-function Legent(props: { colorList: string[]; positions: number[] }) {
-  const { colorList, positions } = props;
-
-  let data: any[] = [];
-
-  colorList.map((color, index) => {
-    data.push({
-      color: color,
-      text: positions[index],
-    });
-  });
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: '10px',
-        bottom: '30px',
-        zIndex: 10,
-      }}
-    >
-      {data.map(({ color, text }) => {
-        return (
-          <div
-            style={{
-              display: 'inline-block',
-              background: '#fff',
-              padding: '5px',
-            }}
-          >
-            <div
-              style={{
-                fontSize: '12px',
-                lineHeight: '12px',
-              }}
-            >
-              {text}
-            </div>
-            <div
-              style={{
-                marginTop: '5px',
-                width: '48px',
-                height: '8px',
-                background: color,
-                border: '1px solid',
-              }}
-            ></div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/stories/tile/components/landCover.tsx b/stories/tile/components/landCover.tsx
deleted file mode 100644
index 0d7e5b2236..0000000000
--- a/stories/tile/components/landCover.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  MaskLayer,
-  Popup,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-// @ts-ignore
-import * as GeoTIFF from 'geotiff';
-
-export default class RasterTile extends React.Component<
-  any,
-  { colorList: string[]; positions: any[] }
-> {
-  private scene: Scene;
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      colorList: [
-        '#419bdf',
-        '#397d49',
-        '#88b053',
-        '#7a87c6',
-        '#e49635',
-        '#dfc35a',
-        '#c4281b',
-        '#a59b8f',
-        '#a8ebff',
-        '616161',
-      ],
-      positions: [
-        'Water',
-        'Trees',
-        'Grass',
-        'Vegetation',
-        'Crops',
-        'Shrub',
-        'Built Area',
-        'Bare ground',
-        'Snow',
-        'Clouds',
-      ],
-    };
-  }
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      stencil: true,
-      map: new GaodeMap({
-        center: [116, 27],
-        zoom: 6.5,
-        // center: [117, 35],
-        // zoom: 5,
-        // style: 'normal',
-        style: 'dark',
-        // style: 'blank',
-      }),
-    });
-    this.scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/bmw-prod/fccd80c0-2611-49f9-9a9f-e2a4dd12226f.json',
-      )
-        .then((res) => res.json())
-        .then((maskData) => {
-          const layer = new RasterLayer({
-            mask: true,
-            maskfence: maskData,
-          });
-          layer
-            .source(
-              // 'http://localhost:3333/tiles/{z}/{x}/{y}.tiff',
-              'http://ganos.oss-cn-hangzhou.aliyuncs.com/m2/l7/tiff_jx/{z}/{x}/{y}.tiff',
-              // 'http://30.230.85.41:8081/tiles/{z}/{x}/{y}.tiff',
-              // 'http://30.230.85.41:8080/tiles/{z}/{x}/{y}.tiff',
-              {
-                parser: {
-                  type: 'rasterTile',
-                  dataType: 'arraybuffer',
-                  tileSize: 256,
-                  // zoomOffset: 1,
-                  // extent: [-180, -85.051129, 179, 85.051129],
-                  // minZoom: 10,
-                  // maxZoom: 0,
-                  maxZoom: 13.1,
-                  format: async (data: any) => {
-                    const tiff = await GeoTIFF.fromArrayBuffer(data);
-                    const image = await tiff.getImage();
-                    const width = image.getWidth();
-                    const height = image.getHeight();
-                    const values = await image.readRasters();
-                    // console.log(values[0]);
-                    return { rasterData: values[0], width, height };
-                  },
-                },
-              },
-            )
-            .style({
-              // opacity: 0.6,
-              domain: [0.001, 11.001],
-              clampLow: false,
-              // clampHigh: false,
-              rampColors: {
-                colors: [
-                  '#419bdf', // Water
-                  '#419bdf',
-
-                  '#397d49', // Tree
-                  '#397d49',
-
-                  '#88b053', // Grass
-                  '#88b053',
-
-                  '#7a87c6', // vegetation
-                  '#7a87c6',
-
-                  '#e49635', // Crops
-                  '#e49635',
-
-                  '#dfc35a', // shrub
-                  '#dfc35a',
-
-                  '#c4281b', // Built Area
-                  '#c4281b',
-
-                  '#a59b8f', // Bare ground
-                  '#a59b8f',
-
-                  '#a8ebff', // Snow
-                  '#a8ebff',
-
-                  '#616161', // Clouds
-                  '#616161',
-                ],
-                positions: [
-                  0.0,
-                  0.1, // Water
-                  0.1,
-                  0.2, // Tree
-                  0.2,
-                  0.3, // Grass
-                  0.3,
-                  0.4, // vegetation
-                  0.4,
-                  0.5,
-                  0.5,
-                  0.6,
-                  0.6,
-                  0.7,
-                  0.7,
-                  0.8,
-                  0.8,
-                  0.9,
-                  0.9,
-                  1.0,
-                ],
-              },
-            })
-            .select(true);
-
-          this.scene.addLayer(layer);
-          const land = [
-            'Water',
-            'Trees',
-            'Grass',
-            'Vegetation',
-            'Crops',
-            'Shrub',
-            'Built Area',
-            'Bare ground',
-            'Snow',
-            'Clouds',
-          ];
-
-          // layer.on('mousemove', (e) => {
-          //   const popup = new Popup({
-          //     offsets: [0, 0],
-          //     closeButton: false,
-          //   });
-          //   popup
-          //     .setLnglat(e.lngLat)
-          //     .setHTML(` <span>${land[e.value - 1]} </span> `);
-
-          //   this.scene.addPopup(popup);
-          // });
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <Legent
-          colorList={this.state.colorList}
-          positions={this.state.positions}
-        />
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
-
-function Legent(props: { colorList: string[]; positions: number[] }) {
-  const { colorList, positions } = props;
-
-  let data: any[] = [];
-
-  colorList.map((color, index) => {
-    data.push({
-      color: color,
-      text: positions[index],
-    });
-  });
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: '10px',
-        bottom: '30px',
-        zIndex: 10,
-      }}
-    >
-      {data.map(({ color, text }) => {
-        return (
-          <div
-            style={{
-              display: 'inline-block',
-              background: '#fff',
-              padding: '5px',
-            }}
-          >
-            <div
-              style={{
-                fontSize: '12px',
-                lineHeight: '12px',
-              }}
-            >
-              {text}
-            </div>
-            <div
-              style={{
-                marginTop: '5px',
-                width: '48px',
-                height: '8px',
-                background: color,
-                border: '1px solid',
-              }}
-            ></div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/stories/tile/components/lerc.tsx b/stories/tile/components/lerc.tsx
deleted file mode 100644
index a0362908bf..0000000000
--- a/stories/tile/components/lerc.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  MaskLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-// @ts-ignore
-import * as GeoTIFF from 'geotiff';
-// @ts-ignore
-import * as Lerc from 'lerc';
-
-export default class RasterTile extends React.Component<
-  any,
-  { colorList: string[]; positions: number[] }
-> {
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      map: new Map({
-        center: [120, 30],
-        pitch: 0,
-        // style: 'normal',
-        style: 'blank',
-        zoom: 3,
-        // zooms: [4, 19]
-      }),
-    });
-
-    this.scene.on('loaded', () => {
-      const layer = new RasterLayer();
-      layer
-        .source(
-          // 'https://alipay-cognition-dev.cn-hangzhou-alipay-b.oss-cdn.aliyun-inc.com/tile/tiff/landcover/{z}/{x}/{y}.tiff',
-          // 'https://tiledimageservices.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Esri_2020_Land_Cover_V2/ImageServer/tile/{z}/{y}/{x}',
-          'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer/tile/{z}/{y}/{x}',
-
-          {
-            parser: {
-              type: 'rasterTile',
-              dataType: 'arraybuffer',
-              tileSize: 256,
-              zoomOffset: 0,
-              // extent: [-180, -85.051129, 179, 85.051129],
-              // minZoom: 5,
-              // maxZoom: 10,
-              // maxZoom: 10,
-              format: async (data: any) => {
-                // console.log(data);
-                // 'https://s2downloads.eox.at/demo/EOxCloudless/2019/rgb/{z}/{y}/{x}.tif',
-                // const tiff = await GeoTIFF.fromArrayBuffer(data);
-                // const image = await tiff.getImage();
-                // const width = image.getWidth();
-                // const height = image.getHeight();
-                // const values = await image.readRasters();
-                // return { rasterData: values[0], width, height };
-                // Lerc.decode(data, {
-                //   // inputOffset: 10, // start from the 10th byte (default is 0)
-                //   // pixelType: "U8", // only needed for lerc1 (default is F32)
-                //   // returnPixelInterleavedDims: false // only applicable to n-dim lerc2 blobs (default is false)
-                // });
-                const image = Lerc.decode(data);
-                return {
-                  rasterData: image.pixels[0],
-                  width: image.width,
-                  height: image.height,
-                };
-              },
-            },
-          },
-        )
-        .style({
-          // opacity: 0.5,
-          domain: [0, 1024],
-          // domain: [0, 10],
-          // clampLow: true,
-          rampColors: {
-            colors: [
-              '#f7fcf5',
-              '#e5f5e0',
-              '#c7e9c0',
-              '#a1d99b',
-              '#74c476',
-              '#41ab5d',
-              '#238b45',
-              '#006d2c',
-              '#00441b',
-            ],
-            positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-          },
-        })
-        .select(true);
-
-      this.scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        {/* <Legent colorList = {this.state.colorList} positions = {this.state.positions}/> */}
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
-
-function Legent(props: { colorList: string[]; positions: number[] }) {
-  const { colorList, positions } = props;
-
-  let data: any[] = [];
-
-  colorList.map((color, index) => {
-    data.push({
-      color: color,
-      text: positions[index],
-    });
-  });
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: '10px',
-        bottom: '30px',
-        zIndex: 10,
-      }}
-    >
-      {data.map(({ color, text }) => {
-        return (
-          <div
-            style={{
-              display: 'inline-block',
-              background: '#fff',
-              padding: '5px',
-            }}
-          >
-            <div
-              style={{
-                fontSize: '12px',
-                lineHeight: '12px',
-              }}
-            >
-              {text}
-            </div>
-            <div
-              style={{
-                width: '30px',
-                height: '8px',
-                background: color,
-              }}
-            ></div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/stories/tile/components/light.tsx b/stories/tile/components/light.tsx
deleted file mode 100644
index ac01f9e5c8..0000000000
--- a/stories/tile/components/light.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import * as React from 'react';
-import * as turf from '@turf/turf';
-import {
-  RasterLayer,
-  Scene,
-  LineLayer,
-  ILayer,
-  PointLayer,
-  MaskLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Map, Mapbox } from '@antv/l7-maps';
-
-export default class RasterTile extends React.Component<
-  any,
-  { colorList: string[]; positions: number[] }
-> {
-  private scene: Scene;
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      colorList: [
-        '#2b9348',
-        '#55a630',
-        '#80b918',
-        '#aacc00',
-        '#bfd200',
-        '#d4d700',
-        '#dddf00',
-        '#eeef20',
-        '#ffff3f',
-      ],
-      positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-    };
-  }
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    this.scene = new Scene({
-      id: 'map',
-      map: new Mapbox({
-        center: [130, 25],
-        pitch: 0,
-        // style: 'normal',
-        style: 'dark',
-        // style: 'blank',
-        zoom: 2,
-      }),
-    });
-    const canvas = document.createElement('canvas');
-    canvas.width = 256;
-    canvas.height = 256;
-    const ctx = canvas.getContext('2d');
-    this.scene.on('loaded', () => {
-      const layer = new RasterLayer();
-      layer
-        .source('http://localhost:3333/Mapnik/{z}/{x}/{y}.png', {
-          parser: {
-            type: 'rasterTile',
-            dataType: 'arraybuffer',
-            tileSize: 256,
-            zoomOffset: 1,
-            minZoom: 1,
-            // maxZoom: 0,
-            maxZoom: 7,
-            format: async (data: any) => {
-              const blob: Blob = new Blob([new Uint8Array(data)], {
-                type: 'image/png',
-              });
-              const img = await createImageBitmap(blob);
-              // @ts-ignore
-              ctx.clearRect(0, 0, 256, 256);
-              // @ts-ignore
-              ctx.drawImage(img, 0, 0, 256, 256);
-
-              // @ts-ignore
-              let imgData = ctx.getImageData(0, 0, 256, 256).data;
-              let arr = [];
-              for (let i = 0; i < imgData.length; i += 4) {
-                const R = imgData[i];
-                arr.push(R);
-              }
-              return {
-                rasterData: arr,
-                width: 256,
-                height: 256,
-              };
-            },
-          },
-        })
-        .style({
-          // opacity: 0.6,
-          domain: [25, 160],
-          clampLow: false,
-          // clampHigh: false,
-          rampColors: {
-            colors: [
-              '#2b9348',
-              '#55a630',
-              '#80b918',
-              '#aacc00',
-              '#bfd200',
-              '#d4d700',
-              '#dddf00',
-              '#eeef20',
-              '#ffff3f',
-            ],
-            positions: [0, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 1.0],
-          },
-        })
-        .select(true);
-
-      this.scene.addLayer(layer);
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <Legent
-          colorList={this.state.colorList}
-          positions={this.state.positions}
-        />
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
-
-function Legent(props: { colorList: string[]; positions: number[] }) {
-  const { colorList, positions } = props;
-
-  let data: any[] = [];
-
-  colorList.map((color, index) => {
-    data.push({
-      color: color,
-      text: positions[index],
-    });
-  });
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: '10px',
-        bottom: '30px',
-        zIndex: 10,
-      }}
-    >
-      {data.map(({ color, text }) => {
-        return (
-          <div
-            style={{
-              display: 'inline-block',
-              background: '#fff',
-              padding: '5px',
-            }}
-          >
-            <div
-              style={{
-                fontSize: '12px',
-                lineHeight: '12px',
-              }}
-            >
-              {text}
-            </div>
-            <div
-              style={{
-                width: '30px',
-                height: '8px',
-                background: color,
-              }}
-            ></div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/stories/tile/components/linearLine.tsx b/stories/tile/components/linearLine.tsx
deleted file mode 100644
index 8fd5e6ca30..0000000000
--- a/stories/tile/components/linearLine.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import {
-  GeometryLayer,
-  Scene,
-  IMapService,
-  PointLayer,
-  LineLayer,
-} from '@antv/l7';
-import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
-import * as React from 'react';
-
-export default class Demo extends React.Component {
-  // @ts-ignore
-  private scene: Scene;
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        pitch: 0,
-        style: 'dark',
-        center: [114.1, 22.44],
-        zoom: 10.5,
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/bmw-prod/2a27d9d2-e137-47de-9814-792b004d7742.json',
-      )
-        .then((res) => res.json())
-        .then((res) => {
-          const layer = new LineLayer()
-            .source(res)
-            .shape('linearline')
-            .size(0.6)
-            .style({
-              rampColors: {
-                colors: [
-                  '#FF4818',
-                  '#F7B74A',
-                  '#FFF598',
-                  '#91EABC',
-                  '#2EA9A1',
-                  '#206C7C',
-                ],
-                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-              },
-            });
-
-          scene.addLayer(layer);
-        });
-    });
-  }
-
-  public render() {
-    return (
-      <>
-        <div
-          id="map"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        />
-      </>
-    );
-  }
-}
diff --git a/stories/tile/components/timeline.tsx b/stories/tile/components/timeline.tsx
deleted file mode 100644
index ff10d4a9fa..0000000000
--- a/stories/tile/components/timeline.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-// @ts-nocheck
-// @ts-ignore
-import { Scene } from '@antv/l7';
-import { PointLayer, HeatmapLayer } from '@antv/l7-layers';
-import { GaodeMap } from '@antv/l7-maps';
-import * as React from 'react';
-import { styled, withStyles } from '@material-ui/core/styles';
-import Slider from '@material-ui/core/Slider';
-
-let currentTimeKey = '0000';
-let timeKeys = [];
-let layer = null;
-const modelDatas = {};
-const parser = {
-  parser: {
-    type: 'json',
-    x: 'o',
-    y: 'a',
-  },
-};
-
-export default class Demo extends React.Component {
-  private scene: Scene;
-  private layer: any;
-
-  constructor() {
-    this.state = {
-      currentTimeKey: 0,
-      modelDatas: {},
-    };
-  }
-
-  public componentWillUnmount() {
-    this.scene.destroy();
-  }
-
-  public async componentDidMount() {
-    const scene = new Scene({
-      id: 'map',
-      map: new GaodeMap({
-        center: [120.2, 36.1],
-        zoom: 10,
-        style: 'dark',
-      }),
-    });
-    this.scene = scene;
-
-    scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/bmw-prod/82d85bb6-db7c-4583-af26-35b11c7b2d0d.json',
-      )
-        .then((res) => res.json())
-        .then((originData) => {
-          timeKeys = Object.keys(originData);
-
-          this.layer = new HeatmapLayer()
-            .source(originData[currentTimeKey], parser)
-            .size('v', [0, 0.2, 0.4, 0.6, 0.8, 1])
-            .shape('heatmap')
-            .style({
-              intensity: 10,
-              radius: 25,
-              opacity: 1.0,
-              rampColors: {
-                colors: [
-                  '#2E8AE6',
-                  '#69D1AB',
-                  '#DAF291',
-                  '#FFD591',
-                  '#FF7A45',
-                  '#CF1D49',
-                ],
-                positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-              },
-            });
-          scene.addLayer(this.layer);
-
-          timeKeys.map((timeKey) => {
-            modelDatas[timeKey] = this.layer.createModelData(
-              originData[timeKey],
-              parser,
-            );
-          });
-
-          let c = 0;
-          let t = setInterval(() => {
-            if (c > 47) {
-              clearInterval(t);
-            } else {
-              this.timelinechange(c);
-              c++;
-            }
-          }, 100);
-        });
-    });
-  }
-
-  public timelinechange(time) {
-    if (time !== this.state.currentTimeKey) {
-      if (this.layer) {
-        let currentTimeKey = this.getTimeKey(time, '');
-
-        this.layer.updateModelData(modelDatas[currentTimeKey + '']);
-        this.scene.render();
-      }
-      this.setState({
-        currentTimeKey: time,
-      });
-    }
-  }
-
-  public getTimeKey(time, text) {
-    const half = Math.floor(time / 2);
-    let res = '';
-    if (half < 10) {
-      res += '0';
-    }
-    if (time / 2 > half) {
-      res += half + text + '30';
-    } else {
-      res += half + text + '00';
-    }
-    return res;
-  }
-
-  public render() {
-    return (
-      <div
-        id="map"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      >
-        <div
-          style={{
-            position: 'absolute',
-            top: '100px',
-            left: '100px',
-            color: '#fff',
-            zIndex: 10,
-            fontSize: '36px',
-            fontFamily: 'STLiti',
-          }}
-        >
-          {'当前时间 ' + this.getTimeKey(this?.state?.currentTimeKey, ' : ')}
-        </div>
-        {this.state.modelDatas !== undefined && (
-          <RangeInput
-            min={0}
-            max={47}
-            value={this?.state?.currentTimeKey || 0}
-            onChange={(e) => this.timelinechange(e)}
-          />
-        )}
-      </div>
-    );
-  }
-}
-
-const PositionContainer = styled('div')({
-  position: 'absolute',
-  zIndex: 9,
-  bottom: '40px',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-const SliderInput = withStyles({
-  root: {
-    marginLeft: 12,
-    width: '60%',
-  },
-  valueLabel: {
-    '& span': {
-      background: 'none',
-      color: '#fff',
-    },
-  },
-})(Slider);
-
-function RangeInput({ min, max, value, onChange }) {
-  return (
-    <PositionContainer>
-      <SliderInput
-        min={min}
-        max={max}
-        value={value}
-        onChange={(event, newValue) => onChange(newValue)}
-        valueLabelDisplay="auto"
-        valueLabelFormat={(t) => t}
-      />
-    </PositionContainer>
-  );
-}
diff --git a/stories/tile/map.stories.tsx b/stories/tile/map.stories.tsx
deleted file mode 100644
index f117fa63df..0000000000
--- a/stories/tile/map.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-
-import RasterTile from './components/RasterTile';
-import OsmRasterTile from './components/OsmRasterTile';
-import RasterImageDataTile from './components/RasterImageDataTile';
-
-import RasterArrayBuffer from './components/RasterArrayBuffer';
-import DemFilter from './components/demFilter';
-import RasterArrayBuffer2 from './components/RasterArrayBuffer2';
-import RasterArrayBufferMask from './components/RasterArrayBufferMask';
-import America from './components/america';
-import Lerc from './components/lerc';
-
-import TiffRasterTile from './components/TiffRasterTile';
-import VectorOffsetPolygonTile from './components/VectorOffsetPolygonTile';
-import VectorOffsetLineTile from './components/VectorOffsetLineTile';
-import VectorOffssetPointTile from './components/VectorOffssetPointTile';
-import VectorPointTile from './components/VectorPointTile';
-import VectorPointTextTile from './components/VectorPointTextTile';
-import VectorPolygonTile from './components/VectorPolygonTile';
-import VectorLineTile from './components/VectorLineTile';
-
-import VectorProvince from './components/VectorProvince';
-import VectorProvinceAllTile from './components/VectorProvinceAllTile';
-
-import Germany from './components/germany';
-import Billboard from './components/billboard';
-import LinearLine from './components/linearLine';
-import TimeLine from './components/timeline';
-import Light from './components/light';
-import LandCover from './components/landCover';
-import HeightLine from './components/heightline';
-import Quxian from './components/QuXian';
-
-storiesOf('瓦片', module)
-  .add('RasterTile', () => <RasterTile />)
-  .add('OsmRasterTile', () => <OsmRasterTile />)
-  .add('RasterImageDataTile', () => <RasterImageDataTile />)
-
-  .add('America', () => <America />)
-  .add('Lerc', () => <Lerc />)
-  .add('DemColor', () => <RasterArrayBuffer />)
-  .add('DemFilter', () => <DemFilter />)
-  .add('RasterArrayBuffer2', () => <RasterArrayBuffer2 />)
-  .add('RasterArrayBufferMask', () => <RasterArrayBufferMask />)
-
-  .add('TiffRasterTile', () => <TiffRasterTile />)
-  .add('VectorOffsetPolygonTile', () => <VectorOffsetPolygonTile />)
-  .add('VectorOffsetLineTile', () => <VectorOffsetLineTile />)
-  .add('VectorOffssetPointTile', () => <VectorOffssetPointTile />)
-  .add('VectorPointTile', () => <VectorPointTile />)
-  .add('VectorPointTextTile', () => <VectorPointTextTile />)
-  .add('VectorPolygonTile', () => <VectorPolygonTile />)
-  .add('VectorLineTile', () => <VectorLineTile />)
-
-  .add('VectorProvince', () => <VectorProvince />)
-  .add('VectorProvinceAllTile', () => <VectorProvinceAllTile />)
-
-  .add('Germany', () => <Germany />)
-  .add('Billboard', () => <Billboard />)
-  .add('LinearLine', () => <LinearLine />)
-  .add('TimeLine', () => <TimeLine />)
-  .add('Light', () => <Light />)
-  .add('LandCover', () => <LandCover />)
-  .add('HeightLine', () => <HeightLine />)
-  .add('Quxian', () => <Quxian />)