diff --git a/__tests__/e2e/snapshots/Tile_vector.png b/__tests__/e2e/snapshots/Tile_vector.png
new file mode 100644
index 0000000000..9936bb8c8a
Binary files /dev/null and b/__tests__/e2e/snapshots/Tile_vector.png differ
diff --git a/__tests__/e2e/snapshots/mask-single-mask.png b/__tests__/e2e/snapshots/mask-single-mask.png
deleted file mode 100644
index d4d232f5b8..0000000000
Binary files a/__tests__/e2e/snapshots/mask-single-mask.png and /dev/null differ
diff --git a/__tests__/e2e/tests.ts b/__tests__/e2e/tests.ts
index 87510a5174..6221c272bd 100644
--- a/__tests__/e2e/tests.ts
+++ b/__tests__/e2e/tests.ts
@@ -1,124 +1,134 @@
 export const TestDemoList: Array<{
-    type: string,
-    snapshots?:boolean
-    demos: Array<{
-        name: string;
-        sleepTime?: number;
-        snapshots?:boolean
-    }>
+  type: string;
+  snapshots?: boolean;
+  demos: Array<{
+    name: string;
+    sleepTime?: number;
+    snapshots?: boolean;
+  }>;
 }> = [
-        {
-            type: 'Point',
-            demos: [
-                {
-                    name:'billboard'
-                },{
-                    name:'column'
-                },
-                {
-                    name:'fill_image'
-                },
-                {
-                name: "fill",
-                sleepTime: 1
+  {
+    type: 'Point',
+    demos: [
+      {
+        name: 'billboard',
+      },
+      {
+        name: 'column',
+      },
+      {
+        name: 'fill_image',
+      },
+      {
+        name: 'fill',
+        sleepTime: 1,
+      },
+      {
+        name: 'image',
+        snapshots: false,
+        sleepTime: 1,
+      },
+    ],
+  },
+  {
+    type: 'Line',
+    snapshots: false,
+    demos: [
+      {
+        name: 'arc',
+      },
+      {
+        name: 'arc_plane',
+      },
 
-            }, {
-                name: "image",
-                snapshots: false,
-                sleepTime: 1
-            }]
-        },
-        {
-            type: 'Line',
-            snapshots: false,
-            demos: [
-                {
-                    name: 'arc'
-                },
-                {
-                    name: 'arc_plane'
-                },
-
-                {
-                    name: 'flow'
-                }
-                ,
-                {
-                    name: 'arc'
-                }
-                ,
-                {
-                    name: 'dash'
-                }
-            ]
-
-        },
-        {
-            type: 'Polygon',
-            demos: [
-                {
-                    name: 'extrude'
-                },
-                {
-                    name: 'fill'
-                }
-                ,
-                {
-                    name: 'ocean',
-                    snapshots:false
-                }
-                ,
-                {
-                    name: 'texture',
-                    snapshots:false
-                }
-                ,
-                {
-                    name: 'water',
-                    snapshots:false
-                }
-            ]
-        },
-        {
-            type: 'HeatMap',
-            snapshots: false,
-            demos: [
-                {
-                    name: 'grid',
-                    sleepTime: 2
-                },
-                {
-                    name: 'hexagon',
-                    sleepTime: 2
-                },
-                {
-                    name: 'normal',
-                    sleepTime: 2
-                }
-            ]
-        },
-        {
-            type: 'Raster',
-            snapshots: false,
-            demos: [{
-                name: "tiff",
-                sleepTime: 2
-            },
-            {
-                name: "image",
-            }
-        ]
-        },{
-            type:'Mask',
-            demos:[{
-                name:'single'
-            }]
-        },
-        {
-            type: 'Gallery',
-            demos: [{
-                name: "fujian",
-                sleepTime: 2
-            }]
-        }
-    ]
+      {
+        name: 'flow',
+      },
+      {
+        name: 'arc',
+      },
+      {
+        name: 'dash',
+      },
+    ],
+  },
+  {
+    type: 'Polygon',
+    demos: [
+      {
+        name: 'extrude',
+      },
+      {
+        name: 'fill',
+      },
+      {
+        name: 'ocean',
+        snapshots: false,
+      },
+      {
+        name: 'texture',
+        snapshots: false,
+      },
+      {
+        name: 'water',
+        snapshots: false,
+      },
+    ],
+  },
+  {
+    type: 'HeatMap',
+    snapshots: false,
+    demos: [
+      {
+        name: 'grid',
+        sleepTime: 2,
+      },
+      {
+        name: 'hexagon',
+        sleepTime: 2,
+      },
+      {
+        name: 'normal',
+        sleepTime: 2,
+      },
+    ],
+  },
+  {
+    type: 'Raster',
+    snapshots: false,
+    demos: [
+      {
+        name: 'tiff',
+        sleepTime: 2,
+      },
+      {
+        name: 'image',
+      },
+    ],
+  },
+  {
+    type: 'Mask',
+    demos: [
+      {
+        name: 'single',
+      },
+    ],
+  },
+  {
+    type: 'Tile',
+    demos: [
+      {
+        name: 'vector',
+      },
+    ],
+  },
+  {
+    type: 'Gallery',
+    demos: [
+      {
+        name: 'fujian',
+        sleepTime: 2,
+      },
+    ],
+  },
+];
diff --git a/examples/demos/bugfix/color.ts b/examples/demos/bugfix/color.ts
index a8fba2c9d2..c2b151ca98 100644
--- a/examples/demos/bugfix/color.ts
+++ b/examples/demos/bugfix/color.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-    renderer: string
+    renderer: 'regl' | 'device'
 }) {
     const scene = new Scene({
         id: 'map',
diff --git a/examples/demos/gallery/fujian.ts b/examples/demos/gallery/fujian.ts
index 14fbb257d3..87cb815b47 100644
--- a/examples/demos/gallery/fujian.ts
+++ b/examples/demos/gallery/fujian.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-    renderer: string
+    renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/heatmap/grid.ts b/examples/demos/heatmap/grid.ts
index d18e4a153e..0b597ffb3e 100644
--- a/examples/demos/heatmap/grid.ts
+++ b/examples/demos/heatmap/grid.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/heatmap/hexagon.ts b/examples/demos/heatmap/hexagon.ts
index 6d0c64d9b6..b905652351 100644
--- a/examples/demos/heatmap/hexagon.ts
+++ b/examples/demos/heatmap/hexagon.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/heatmap/normal.ts b/examples/demos/heatmap/normal.ts
index 6edf287545..d17c5d02be 100644
--- a/examples/demos/heatmap/normal.ts
+++ b/examples/demos/heatmap/normal.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/line/arc.ts b/examples/demos/line/arc.ts
index 8710097350..49f0e7c134 100644
--- a/examples/demos/line/arc.ts
+++ b/examples/demos/line/arc.ts
@@ -9,7 +9,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/line/arc_plane.ts b/examples/demos/line/arc_plane.ts
index f03cc1271d..8edcc1f21a 100644
--- a/examples/demos/line/arc_plane.ts
+++ b/examples/demos/line/arc_plane.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-    renderer: string,
+    renderer: 'regl' | 'device',
     animate:boolean
 }) {
     console.log(option)
diff --git a/examples/demos/line/dash.ts b/examples/demos/line/dash.ts
index a037fb85fa..ed8476195c 100644
--- a/examples/demos/line/dash.ts
+++ b/examples/demos/line/dash.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/line/flow.ts b/examples/demos/line/flow.ts
index 61e727de57..be469b4de8 100644
--- a/examples/demos/line/flow.ts
+++ b/examples/demos/line/flow.ts
@@ -11,7 +11,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
     const scene = new Scene({
         id: 'map',
diff --git a/examples/demos/line/normal.ts b/examples/demos/line/normal.ts
index 1a0efae544..3623335eb3 100644
--- a/examples/demos/line/normal.ts
+++ b/examples/demos/line/normal.ts
@@ -10,7 +10,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
     const scene = new Scene({
         id: 'map',
diff --git a/examples/demos/mask/index.ts b/examples/demos/mask/index.ts
index 18fea92533..6fba5f87c0 100644
--- a/examples/demos/mask/index.ts
+++ b/examples/demos/mask/index.ts
@@ -1 +1,2 @@
-export { MapRender as single } from "./single";
\ No newline at end of file
+export { MapRender as single } from "./single";
+export { MapRender as raster_tile } from "./raster_tile";
\ No newline at end of file
diff --git a/examples/demos/mask/raster_tile.ts b/examples/demos/mask/raster_tile.ts
new file mode 100644
index 0000000000..23c58b516a
--- /dev/null
+++ b/examples/demos/mask/raster_tile.ts
@@ -0,0 +1,98 @@
+import { Scene, RasterLayer, PolygonLayer, Source } from '@antv/l7';
+import * as GeoTIFF from 'geotiff';
+import * as allMap from '@antv/l7-maps';
+
+const colorList = [
+    '#419bdf', // Water
+  
+    '#358221', // Tree
+  
+    '#88b053', // Grass
+  
+  
+    '#7a87c6', // vegetation
+  
+  
+    '#e49635', // Crops
+  
+  
+    '#dfc35a', // shrub
+  
+  
+    '#ED022A', // Built Area
+  
+  
+    '#EDE9E4', // Bare ground
+   
+  
+    '#F2FAFF', // Snow
+  
+    '#C8C8C8', // Clouds
+  ];
+  const positions = [
+    1,2,3,4,5,6,7,8,9,10,11,
+  ];
+  
+export function MapRender(option: {
+    map: string
+    renderer: 'regl' | 'device'
+}) {
+
+    const scene = new Scene({
+        id: 'map',
+      renderer: option.renderer,
+        map: new allMap[option.map || 'Map']({
+            style: 'light',
+            center: [121.434765, 31.256735],
+            zoom: 14.83
+        })
+    });
+
+    scene.on('loaded', () => {
+        fetch(
+          'https://gw.alipayobjects.com/os/bmw-prod/fccd80c0-2611-49f9-9a9f-e2a4dd12226f.json'
+        )
+          .then(res => res.json())
+          .then(maskData => {
+            const maskPolygon = new PolygonLayer({
+              visible: false,// 隐藏maskPolygon
+              autoFit: true,
+              
+            }).source(maskData)
+            .shape('fill')
+            .color('#f00')
+            .style({
+              opacity: 0.5
+            });
+            const layer = new RasterLayer({
+              maskLayers:[maskPolygon]
+            })
+            .source(
+                'https://tiles{1-3}.geovisearth.com/base/v1/terrain_rgb/{z}/{x}/{y}?format=png&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788',
+                {
+                    parser: {
+                        type: 'rasterTile',
+                        dataType: 'terrainRGB',
+                        tileSize: 256,
+                        zoomOffset: 0,
+                    },
+                },
+            )
+            .style({
+                clampLow: false,
+                clampHigh: false,
+                domain: [0, 7000],
+                rampColors: {
+                    type: 'linear',
+                    colors: ['#d73027', '#fc8d59', '#fee08b', '#d9ef8b', '#91cf60', '#1a9850'],
+                    positions: [0, 200, 500, 1000, 2000, 7000], // '#1a9850'
+                }
+            });
+      
+            scene.addLayer(layer);
+            scene.addLayer(maskPolygon);
+          });
+      });
+      
+
+}
diff --git a/examples/demos/mask/single.ts b/examples/demos/mask/single.ts
index 39ccce0dfb..6e86f5a201 100644
--- a/examples/demos/mask/single.ts
+++ b/examples/demos/mask/single.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-    renderer: string
+    renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/point/billboard.ts b/examples/demos/point/billboard.ts
index 27fca2ccf9..c0dfdae2cc 100644
--- a/examples/demos/point/billboard.ts
+++ b/examples/demos/point/billboard.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-    renderer: string
+    renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/point/column.ts b/examples/demos/point/column.ts
index 27d511749f..35df32855e 100644
--- a/examples/demos/point/column.ts
+++ b/examples/demos/point/column.ts
@@ -3,12 +3,12 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
         id: 'map',
-      renderer: option.renderer,
+        renderer: option.renderer,
         map: new allMap[option.map || 'Map']({
             style: 'light',
             center: [121.400257, 31.25287],
diff --git a/examples/demos/point/fill_image.ts b/examples/demos/point/fill_image.ts
index fbbdbab590..07c3a18df5 100644
--- a/examples/demos/point/fill_image.ts
+++ b/examples/demos/point/fill_image.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-    renderer: string
+    renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/polygon/extrude.ts b/examples/demos/polygon/extrude.ts
index 545136ceb4..f9096a45f0 100644
--- a/examples/demos/polygon/extrude.ts
+++ b/examples/demos/polygon/extrude.ts
@@ -7,7 +7,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-    renderer: string
+    renderer: 'regl' | 'device'
 }) {
     console.log(option)
     const scene = new Scene({
diff --git a/examples/demos/polygon/fill.ts b/examples/demos/polygon/fill.ts
index 7fdacf390a..d6522445e2 100644
--- a/examples/demos/polygon/fill.ts
+++ b/examples/demos/polygon/fill.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/polygon/ocean.ts b/examples/demos/polygon/ocean.ts
index c534860341..8bdf59c0be 100644
--- a/examples/demos/polygon/ocean.ts
+++ b/examples/demos/polygon/ocean.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/polygon/texture.ts b/examples/demos/polygon/texture.ts
index 3e64ed9fc8..28c0ee2c6e 100644
--- a/examples/demos/polygon/texture.ts
+++ b/examples/demos/polygon/texture.ts
@@ -7,7 +7,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/polygon/water.ts b/examples/demos/polygon/water.ts
index 62f3d6eba3..3fcf33a0f7 100644
--- a/examples/demos/polygon/water.ts
+++ b/examples/demos/polygon/water.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/raster/dem.ts b/examples/demos/raster/dem.ts
index f901a1d44b..12f02111f7 100644
--- a/examples/demos/raster/dem.ts
+++ b/examples/demos/raster/dem.ts
@@ -2,7 +2,7 @@ import { RasterLayer, Scene } from '@antv/l7';
 import * as allMap from '@antv/l7-maps';
 import * as GeoTIFF from 'geotiff';
 
-export function MapRender(option: { map: string; renderer: string }) {
+export function MapRender(option: { map: string; renderer: 'regl' | 'device' }) {
   const scene = new Scene({
     id: 'map',
     renderer: option.renderer,
diff --git a/examples/demos/raster/image.ts b/examples/demos/raster/image.ts
index f4853721b9..7cdc57e16f 100644
--- a/examples/demos/raster/image.ts
+++ b/examples/demos/raster/image.ts
@@ -1,7 +1,7 @@
 import { ImageLayer, Scene } from '@antv/l7';
 import * as allMap from '@antv/l7-maps';
 
-export function MapRender(option: { map: string; renderer: string }) {
+export function MapRender(option: { map: string; renderer: 'regl' | 'device' }) {
   const scene = new Scene({
     id: 'map',
     renderer: option.renderer,
diff --git a/examples/demos/template.ts b/examples/demos/template.ts
index 94c1d6d622..43cea016d1 100644
--- a/examples/demos/template.ts
+++ b/examples/demos/template.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+    renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/examples/demos/tile/index.ts b/examples/demos/tile/index.ts
index f00be15625..767a79955d 100644
--- a/examples/demos/tile/index.ts
+++ b/examples/demos/tile/index.ts
@@ -1,2 +1,3 @@
-export { MapRender as  normal } from './normal';
-export { MapRender as rgb } from  './rgb'
\ No newline at end of file
+export { MapRender as  image } from './normal';
+export { MapRender as rgb } from  './rgb'
+export { MapRender as vector } from  './vector'
\ No newline at end of file
diff --git a/examples/demos/tile/normal.ts b/examples/demos/tile/normal.ts
index 92bf84ade9..d758226cb7 100644
--- a/examples/demos/tile/normal.ts
+++ b/examples/demos/tile/normal.ts
@@ -3,12 +3,12 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
     console.log(option)
     const scene = new Scene({
         id: 'map',
-      renderer: option.renderer,
+        renderer: option.renderer,
         map: new allMap[option.map || 'Map']({
             style: 'light',
             center: [121.434765, 31.256735],
@@ -32,20 +32,11 @@ export function MapRender(option: {
         },
     });
 
-    const layer2 = new RasterLayer({
-        zIndex: 1,
-    }).source(url2, {
-        parser: {
-            type: 'rasterTile',
-            tileSize: 256,
-            zoomOffset: 0,
-        },
-    });
 
 
     scene.on('loaded', () => {
         scene.addLayer(layer1);
-        scene.addLayer(layer2);
+        // scene.startAnimate()
 
     });
 
diff --git a/examples/demos/tile/rgb.ts b/examples/demos/tile/rgb.ts
index d79e46a233..532955b3a7 100644
--- a/examples/demos/tile/rgb.ts
+++ b/examples/demos/tile/rgb.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
    console.log(option)
     const scene = new Scene({
diff --git a/examples/demos/tile/vector.ts b/examples/demos/tile/vector.ts
new file mode 100644
index 0000000000..eb37832aab
--- /dev/null
+++ b/examples/demos/tile/vector.ts
@@ -0,0 +1,137 @@
+import { PointLayer, PolygonLayer, Scene, Source } from '@antv/l7';
+// @ts-ignore
+import * as allMap from '@antv/l7-maps';
+import { Protocol } from 'pmtiles';
+const protocol = new Protocol();
+Scene.addProtocol('pmtiles', protocol.tile);
+
+export function MapRender(option: {
+  map: string;
+  renderer: 'regl' | 'device';
+}) {
+  const scene = new Scene({
+    id: 'map',
+    renderer: option.renderer,
+    map: new allMap[option.map || 'Map']({
+      style: 'light',
+      center: [11.2438, 43.7799],
+      zoom: 12.83,
+    }),
+  });
+
+  const source = new Source(
+    'pmtiles://https://mdn.alipayobjects.com/afts/file/A*HYvHSZ-wQmIAAAAAAAAAAAAADrd2AQ/protomaps(vector)ODbL_firenze.bin',
+    {
+      parser: {
+        type: 'mvt',
+        tileSize: 256,
+        maxZoom: 14,
+        extent: [-180, -85.051129, 179, 85.051129],
+      },
+    },
+  );
+
+  const layer = new PolygonLayer({
+    //   featureId: 'COLOR',
+    sourceLayer: 'earth', // woods hillshade contour ecoregions ecoregions2 city
+  });
+  layer
+    .source(source)
+    .color('#f00')
+
+    .style({
+      opacity: 0.5,
+    });
+  const boundaries = new PolygonLayer({
+    //   featureId: 'COLOR',
+    sourceLayer: 'boundaries', // woods hillshade contour ecoregions ecoregions2 city
+  })
+    .source(source)
+    .color('#ffffbf')
+    .shape('line')
+    .size(1)
+    .style({
+      opacity: 1,
+    });
+
+  const buildings = new PolygonLayer({
+    //   featureId: 'COLOR',
+    sourceLayer: 'buildings', // woods hillshade contour ecoregions ecoregions2 city
+  })
+    .source(source)
+    .color('#f1b6da')
+    .shape('fill')
+    .style({
+      opacity: 1,
+    });
+
+  const natural = new PolygonLayer({
+    //   featureId: 'COLOR',
+    sourceLayer: 'natural', // woods hillshade contour ecoregions ecoregions2 city
+  })
+    .source(source)
+    .color('#e6f5d0')
+    .shape('fill')
+
+    .style({
+      opacity: 1,
+    });
+
+  const water = new PolygonLayer({
+    //   featureId: 'COLOR',
+    sourceLayer: 'water', // woods hillshade contour ecoregions ecoregions2 city
+  })
+    .source(source)
+    .color('#92c5de')
+    .shape('fill')
+
+    .style({
+      opacity: 1,
+    });
+  const roads = new PolygonLayer({
+    //   featureId: 'COLOR',
+    sourceLayer: 'roads', // woods hillshade contour ecoregions ecoregions2 city
+  })
+    .source(source)
+    .color('#bababa')
+    .shape('line')
+    .size(0.5)
+    .style({
+      opacity: 1,
+    });
+  const transit = new PolygonLayer({
+    //   featureId: 'COLOR',
+    sourceLayer: 'transit', // woods hillshade contour ecoregions ecoregions2 city
+  })
+    .source(source)
+    .color('#542788')
+    .shape('line')
+    .size(0.5)
+    .style({
+      opacity: 1,
+    });
+
+  const point = new PointLayer({
+    //   featureId: 'COLOR',
+    sourceLayer: 'places', // woods hillshade contour ecoregions ecoregions2 city
+  })
+    .source(source)
+    .color('#542788')
+    .shape('circle')
+    .size(5)
+    .style({
+      opacity: 1,
+    });
+
+  scene.on('loaded', () => {
+    scene.addLayer(layer);
+    scene.startAnimate();
+    // scene.addLayer(boundaries);
+    // scene.addLayer(natural);
+    // scene.addLayer(buildings);
+    // scene.addLayer(transit);
+    // scene.addLayer(roads);
+    // scene.addLayer(water);
+    // scene.addLayer(point);
+  });
+}
diff --git a/examples/demos/webgpu/boids.ts b/examples/demos/webgpu/boids.ts
index 8598bf1837..af6a400df2 100644
--- a/examples/demos/webgpu/boids.ts
+++ b/examples/demos/webgpu/boids.ts
@@ -22,7 +22,7 @@ import {
 import { generateTexture } from './utils/common'
 export async function MapRender(option: {
   map: string
-  renderer: string
+  renderer: 'regl' | 'device'
 }) {
   const dom = document.getElementById('map') as HTMLDivElement;
   // 创建 canvas
diff --git a/examples/demos/webgpu/compute_texture.ts b/examples/demos/webgpu/compute_texture.ts
index eb320abeaa..4d86a24841 100644
--- a/examples/demos/webgpu/compute_texture.ts
+++ b/examples/demos/webgpu/compute_texture.ts
@@ -23,7 +23,7 @@ import {
 import { createTexture, generateTexture } from './utils/common';
 export async function MapRender(option: {
   map: string
-  renderer: string
+  renderer: 'regl' | 'device'
 }) {
   const dom = document.getElementById('map') as HTMLDivElement;
   // 创建 canvas
diff --git a/examples/demos/webgpu/raster_image.ts b/examples/demos/webgpu/raster_image.ts
new file mode 100644
index 0000000000..ef6fb8ed8d
--- /dev/null
+++ b/examples/demos/webgpu/raster_image.ts
@@ -0,0 +1,31 @@
+import { ImageLayer, Scene } from '@antv/l7';
+import * as allMap from '@antv/l7-maps';
+
+export function MapRender(option: { map: string; renderer: string }) {
+  const scene = new Scene({
+    id: 'map',
+    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    enableWebGPU: true,
+    shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
+    map: new allMap[option.map || 'Map']({
+      style: 'light',
+      center: [115.5268, 34.3628],
+      zoom: 7,
+    }),
+  });
+  scene.on('loaded', () => {
+    const layer = new ImageLayer({});
+    layer.source(
+      'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8SUaRr7bxNsAAAAAAAAAAABkARQnAQ',
+      {
+        parser: {
+          type: 'image',
+          extent: [
+            113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137,
+          ],
+        },
+      },
+    );
+    scene.addLayer(layer);
+  });
+}
diff --git a/examples/demos/webgpu/template.ts b/examples/demos/webgpu/template.ts
index 753c8dc8d4..17163efbd7 100644
--- a/examples/demos/webgpu/template.ts
+++ b/examples/demos/webgpu/template.ts
@@ -21,7 +21,7 @@ import {
   } from '@antv/g-device-api';
 export async function MapRender(option: {
     map: string
-    renderer: string
+    renderer: 'regl' | 'device'
 }) {
     const dom = document.getElementById('map') as HTMLDivElement;
     // 创建 canvas
diff --git a/examples/demos/webgpu/texture.ts b/examples/demos/webgpu/texture.ts
index 0d77185a05..6e14685238 100644
--- a/examples/demos/webgpu/texture.ts
+++ b/examples/demos/webgpu/texture.ts
@@ -22,7 +22,7 @@ import {
 import { createTexture, generateTexture } from './utils/common';
 export async function MapRender(option: {
     map: string
-    renderer: string
+    renderer: 'regl' | 'device'
 }) {
     const dom = document.getElementById('map') as HTMLDivElement;
     // 创建 canvas
diff --git a/examples/template.ts b/examples/template.ts
index 6b41803367..35310d8f97 100644
--- a/examples/template.ts
+++ b/examples/template.ts
@@ -3,7 +3,7 @@ import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
     map: string
-   renderer: string
+   renderer: 'regl' | 'device'
 }) {
 
     const scene = new Scene({
diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts
index f6a0418bad..b0fd3ece2e 100644
--- a/packages/core/src/services/layer/LayerService.ts
+++ b/packages/core/src/services/layer/LayerService.ts
@@ -215,7 +215,6 @@ export default class LayerService
     }
     // // 瓦片裁剪
     if (layer.tileMask) {
-      // TODO 示例瓦片掩膜多层支持
       layer.tileMask.render({
         isStencil: true,
         stencilType,
diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts
index 75a803cd2e..602ece2583 100644
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@@ -227,7 +227,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
 
   public enableDataEncodeStyles: string[] = [];
 
-  public enablg: string[] = [];
 
   /**
    * 待更新样式属性，在初始化阶段完成注册
diff --git a/packages/layers/src/image/models/image.ts b/packages/layers/src/image/models/image.ts
index c2b8e5091e..4e7b72a066 100644
--- a/packages/layers/src/image/models/image.ts
+++ b/packages/layers/src/image/models/image.ts
@@ -12,13 +12,12 @@ import { RasterImageTriangulation } from '../../core/triangulation';
 import ImageFrag from '../shaders/image_frag.glsl';
 import ImageVert from '../shaders/image_vert.glsl';
 import { ShaderLocation } from '../../core/CommonStyleAttribute';
-import { defaultValue, rgb2arr } from '@antv/l7-utils';
+import { defaultValue } from '@antv/l7-utils';
 export default class ImageModel extends BaseModel {
   protected texture: ITexture2D;
 
   protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption: { [key: string]: any; }; } {
-    const { color = 'rgb(255,255,255)',opacity,brightness,contrast,saturation,gamma } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
-    const colorArry = rgb2arr(color);
+    const { opacity,brightness,contrast,saturation,gamma } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
     const commonOptions = {
       u_opacity:defaultValue(opacity,1.0),
       u_brightness:defaultValue(brightness,1.0),
diff --git a/packages/layers/src/plugins/ShaderUniformPlugin.ts b/packages/layers/src/plugins/ShaderUniformPlugin.ts
index 4fab8d145f..9f9ac44566 100644
--- a/packages/layers/src/plugins/ShaderUniformPlugin.ts
+++ b/packages/layers/src/plugins/ShaderUniformPlugin.ts
@@ -44,6 +44,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
 
     let uniformBuffer: IBuffer;
     if (!this.rendererService.uniformBuffers[0]) {
+   
       // Create a Uniform Buffer Object(UBO).
       uniformBuffer = this.rendererService.createBuffer({
         data: new Float32Array(16 * 4 + 4 * 7),
@@ -57,7 +58,6 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
       const offset = layer.getLayerConfig().tileOrigin;
       // 重新计算坐标系参数
       this.coordinateSystemService.refresh(offset);
-
       if (version === 'GAODE2.x') {
         this.setLayerCenter(layer);
         // @ts-ignore
@@ -82,10 +82,10 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
         width,
         height,
       );
-
-      if (this.layerService.alreadyInRendering && uniformBuffer) {
+      if (this.layerService.alreadyInRendering && this.rendererService.uniformBuffers[0]) {
+        const renderUniformBuffer = this.rendererService.uniformBuffers[0];
         // Update only once since all models can share one UBO.
-        uniformBuffer.subData({
+        renderUniformBuffer.subData({
           offset: 0,
           data,
         });
diff --git a/packages/layers/src/raster/models/rasterTerrainRgb.ts b/packages/layers/src/raster/models/rasterTerrainRgb.ts
index 03f9177f76..8e99b77ceb 100644
--- a/packages/layers/src/raster/models/rasterTerrainRgb.ts
+++ b/packages/layers/src/raster/models/rasterTerrainRgb.ts
@@ -1,7 +1,6 @@
 import type {
   IEncodeFeature,
   IModel,
-  IModelUniform,
   ITexture2D} from '@antv/l7-core';
 import {
   AttributeType,
@@ -11,12 +10,13 @@ import { getDefaultDomain } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
 import type { IRasterTerrainLayerStyleOptions } from '../../core/interface';
 import { RasterImageTriangulation } from '../../core/triangulation';
+import { ShaderLocation } from '../../core/CommonStyleAttribute';
 import Raster_terrainFrag from '../shaders/terrain/terrain_rgb_frag.glsl';
 import Raster_terrainVert from '../shaders/terrain/terrain_rgb_vert.glsl';
 
 export default class RasterTerrainRGB extends BaseModel {
   protected texture: ITexture2D;
-  public getUninforms(): IModelUniform {
+  protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption: { [key: string]: any; }; } {
     const {
       opacity,
       clampLow = true,
@@ -44,18 +44,23 @@ export default class RasterTerrainRGB extends BaseModel {
         newdomain,
       );
     }
-    return {
-      u_opacity: opacity || 1,
-      u_texture: this.texture,
+    const commonOptions = {
+      u_unpack: [rScaler, gScaler, bScaler, offset],
       u_domain: newdomain,
+      u_opacity: opacity || 1,
+      u_noDataValue: noDataValue,
       u_clampLow: clampLow,
       u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow,
-      u_noDataValue: noDataValue,
-      u_unpack: [rScaler, gScaler, bScaler, offset],
-      u_colorTexture: texture!,
+      u_texture: this.texture,
+      u_colorTexture: texture,
     };
+    this.textures = [this.texture,texture!]
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+
   }
   public async initModels(): Promise<IModel[]> {
+    this.initUniformsBuffer();
     const source = this.layer.getSource();
     const { createTexture2D } = this.rendererService;
     const imageData = await source.data.images;
@@ -92,6 +97,7 @@ export default class RasterTerrainRGB extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Uv',
+        shaderLocation: ShaderLocation.UV,
         buffer: {
           usage: gl.DYNAMIC_DRAW,
           data: [],
diff --git a/packages/layers/src/raster/shaders/terrain/terrain_rgb_frag.glsl b/packages/layers/src/raster/shaders/terrain/terrain_rgb_frag.glsl
index 85b8904c51..404685d296 100644
--- a/packages/layers/src/raster/shaders/terrain/terrain_rgb_frag.glsl
+++ b/packages/layers/src/raster/shaders/terrain/terrain_rgb_frag.glsl
@@ -1,20 +1,22 @@
-precision mediump float;
-uniform float u_opacity: 1.0;
-
 uniform sampler2D u_texture;
 uniform sampler2D u_colorTexture;
 
-varying vec2 v_texCoord;
+layout(std140) uniform commonUniforms {
+ vec4 u_unpack;
+ vec2 u_domain;
+ float u_opacity;
+ float u_noDataValue;
+ bool u_clampLow;
+ bool u_clampHigh;
+};
+
+in vec2 v_texCoord;
+out vec4 outputColor;
 
-uniform vec2 u_domain;
-uniform float u_noDataValue;
-uniform bool u_clampLow: true;
-uniform bool u_clampHigh: true;
-uniform vec4 u_unpack;
 
 float getElevation(vec2 coord, float bias) {
     // Convert encoded elevation value to meters
-    vec4 data = texture2D(u_texture, coord,bias) * 255.0;
+    vec4 data =  texture(SAMPLER_2D(u_texture), coord,bias) * 255.0;
     data.a = -1.0;
     return dot(data, u_unpack);
 }
@@ -22,20 +24,20 @@ float getElevation(vec2 coord, float bias) {
 vec4 getColor(float value) {
    float normalisedValue =(value- u_domain[0]) / (u_domain[1] - u_domain[0]);
     vec2 coord = vec2(normalisedValue, 0);
-    return texture2D(u_colorTexture, coord);
+    return  texture(SAMPLER_2D(u_colorTexture), coord);
 }
 
 void main() {
   float value = getElevation(v_texCoord,0.0);
   if (value == u_noDataValue) {
-    gl_FragColor = vec4(0.0, 0, 0, 0.0);
+    outputColor = vec4(0.0, 0, 0, 0.0);
   } else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) {
-     gl_FragColor = vec4(0.0, 0, 0, 0.0);
+     outputColor = vec4(0.0, 0, 0, 0.0);
   } else {
    
-    gl_FragColor = getColor(value);
-    gl_FragColor.a =  gl_FragColor.a * u_opacity ;
-      if(gl_FragColor.a < 0.01)
+    outputColor = getColor(value);
+    outputColor.a =  outputColor.a * u_opacity ;
+      if(outputColor.a < 0.01)
       discard;
   }
 }
diff --git a/packages/layers/src/raster/shaders/terrain/terrain_rgb_vert.glsl b/packages/layers/src/raster/shaders/terrain/terrain_rgb_vert.glsl
index 7445370ad1..b99f26bf34 100644
--- a/packages/layers/src/raster/shaders/terrain/terrain_rgb_vert.glsl
+++ b/packages/layers/src/raster/shaders/terrain/terrain_rgb_vert.glsl
@@ -1,10 +1,18 @@
-precision highp float;
-uniform mat4 u_ModelMatrix;
+layout(location = 0) in vec3 a_Position;
+layout(location = 14) in vec2 a_Uv;
 
-attribute vec3 a_Position;
-attribute vec2 a_Uv;
-varying vec2 v_texCoord;
+layout(std140) uniform commonUniforms {
+ vec4 u_unpack;
+ vec2 u_domain;
+ float u_opacity;
+ float u_noDataValue;
+ bool u_clampLow;
+ bool u_clampHigh;
+
+};
+out vec2 v_texCoord;
 #pragma include "projection"
+
 void main() {
    v_texCoord = a_Uv;
    vec4 project_pos = project_position(vec4(a_Position, 1.0));
diff --git a/packages/layers/src/tile/tile/Tile.ts b/packages/layers/src/tile/tile/Tile.ts
index 41393f3987..abd8f1470f 100644
--- a/packages/layers/src/tile/tile/Tile.ts
+++ b/packages/layers/src/tile/tile/Tile.ts
@@ -81,7 +81,8 @@ export default abstract class Tile extends EventEmitter implements ITile {
   }
 
   protected async addTileMask() {
-    const mask = new PolygonLayer({ visible: false, enablePicking: false })
+
+    const mask = new PolygonLayer({ name:'mask', visible: true, enablePicking: false })
       .source(
         {
           type: 'FeatureCollection',
@@ -93,8 +94,10 @@ export default abstract class Tile extends EventEmitter implements ITile {
             featureId: 'id',
           },
         },
+
       )
       .shape('fill')
+      .color('#0f0')
       .style({
         opacity: 0.5,
       });
@@ -110,7 +113,7 @@ export default abstract class Tile extends EventEmitter implements ITile {
     }
     return mask;
   }
-
+ // 全局 Mask
   protected async addMask(layer: ILayer, mask: ILayer) {
     const container = createLayerContainer(
       this.parent.sceneContainer as Container,
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 69436eeee3..9ca07fd7d3 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -24,7 +24,7 @@
     "tsc": "tsc --project tsconfig.build.json"
   },
   "dependencies": {
-    "@antv/g-device-api": "^1.4.10",
+    "@antv/g-device-api": "^1.4.16",
     "@antv/l7-core": "2.20.13",
     "@antv/l7-utils": "2.20.13",
     "@babel/runtime": "^7.7.7",
diff --git a/packages/renderer/src/device/DeviceModel.ts b/packages/renderer/src/device/DeviceModel.ts
index bbf0a1edd4..c5fa1d7342 100644
--- a/packages/renderer/src/device/DeviceModel.ts
+++ b/packages/renderer/src/device/DeviceModel.ts
@@ -210,12 +210,18 @@ export default class DeviceModel implements IModel {
             ? stencilParams.func.cmp
             : CompareFunction.ALWAYS,
           passOp: stencilParams.opFront.zpass,
+          failOp: stencilParams.opFront.fail,
+          depthFailOp: stencilParams.opFront.zfail,
+          mask: stencilParams.opFront.mask,
         },
         stencilBack: {
           compare: stencilEnabled
             ? stencilParams.func.cmp
             : CompareFunction.ALWAYS,
           passOp: stencilParams.opBack.zpass,
+          failOp: stencilParams.opBack.fail,
+          depthFailOp: stencilParams.opBack.zfail,
+          mask: stencilParams.opBack.mask,
         },
       },
     });
@@ -413,11 +419,13 @@ export default class DeviceModel implements IModel {
         fail: stencilOpMap[opFront.fail],
         zfail: stencilOpMap[opFront.zfail],
         zpass: stencilOpMap[opFront.zpass],
+        mask: func.mask,
       },
       opBack: {
         fail: stencilOpMap[opBack.fail],
         zfail: stencilOpMap[opBack.zfail],
         zpass: stencilOpMap[opBack.zpass],
+        mask: func.mask,
       },
     };
   }
diff --git a/packages/renderer/src/device/index.ts b/packages/renderer/src/device/index.ts
index 6b48d095d6..62b2753e1b 100644
--- a/packages/renderer/src/device/index.ts
+++ b/packages/renderer/src/device/index.ts
@@ -31,6 +31,7 @@ import type {
   ITexture2D,
   ITexture2DInitializationOptions,
 } from '@antv/l7-core';
+import { lodashUtil } from '@antv/l7-utils';
 import { injectable } from 'inversify';
 import 'reflect-metadata';
 import DeviceAttribute from './DeviceAttribute';
@@ -40,6 +41,7 @@ import DeviceFramebuffer from './DeviceFramebuffer';
 import DeviceModel from './DeviceModel';
 import DeviceTexture2D from './DeviceTexture2D';
 import { isWebGL2 } from './utils/webgl';
+const { isUndefined } = lodashUtil;
 
 /**
  * Device API renderer
@@ -219,6 +221,25 @@ export default class DeviceRendererService implements IRendererService {
     if (framebuffer) {
       // @ts-ignore
       framebuffer.clearOptions = { color, depth, stencil };
+    } else {
+      const platformString = this.queryVerdorInfo();
+      if (platformString === 'WebGL1') {
+        const gl = this.getGLContext();
+        if (!isUndefined(stencil)) {
+          gl.clearStencil(stencil);
+          gl.clear(gl.STENCIL_BUFFER_BIT);
+        } else if (!isUndefined(depth)) {
+          gl.clearDepth(depth);
+          gl.clear(gl.DEPTH_BUFFER_BIT);
+        }
+      } else if (platformString === 'WebGL2') {
+        const gl = this.getGLContext() as WebGL2RenderingContext;
+        if (!isUndefined(stencil)) {
+          gl.clearBufferiv(gl.STENCIL, 0, [stencil]);
+        } else if (!isUndefined(depth)) {
+          gl.clearBufferfv(gl.DEPTH, 0, [depth]);
+        }
+      }
     }
   };