diff --git a/README.md b/README.md
index 9b05d21e..52a28e77 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,10 @@ extension to show wind field。
 - [x] 色斑图渲染，支持瓦片和单张。
 - [x] 多数据源支持（geotiff、灰度图-可解析带 exif 信息、png-多通道浮点数压缩）。
 - [x] TimelineSource（时序数据源）支持。
-- [ ] 粒子渲染，支持瓦片和单张。
+- [x] 粒子渲染，支持瓦片和单张。
+- [x] 箭头图层，支持瓦片和单张（矢量数据：风或洋流）。
+- [x] 图层拾取。
+- [x] 图层掩膜。
 
 https://github.com/sakitam-fdd/wind-layer/assets/19517451/b36b7eea-c647-42ed-91a4-e1f182d0343c
 
@@ -40,6 +43,8 @@ https://github.com/sakitam-fdd/wind-layer/assets/19517451/bf27d98e-68ed-4f9c-b1e
 
 https://sakitam-fdd.github.io/wind-layer/particles.mp4
 
+https://sakitam-fdd.github.io/wind-layer/arrow.mp4
+
 https://github.com/sakitam-fdd/wind-layer/assets/19517451/064f0ea4-f72f-4e9a-80e7-7a0097f60013
 
 https://sakitam-fdd.github.io/wind-layer/particles-poc.mp4
diff --git a/docs/public/arrow.mp4 b/docs/public/arrow.mp4
new file mode 100644
index 00000000..4f6f8242
Binary files /dev/null and b/docs/public/arrow.mp4 differ
diff --git a/examples/timeline-pattern.html b/examples/timeline-pattern.html
index 7a076b20..8b3429cf 100644
--- a/examples/timeline-pattern.html
+++ b/examples/timeline-pattern.html
@@ -7,8 +7,8 @@
   <meta name="renderer" content="webkit"/>
   <meta name="force-rendering" content="webkit"/>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
-  <script src="https://registry.npmmirror.com/mapbox-gl/^3/files/dist/mapbox-gl.js"></script>
-  <link rel="stylesheet" href="https://registry.npmmirror.com/mapbox-gl/^3/files/dist/mapbox-gl.css">
+  <script src="https://registry.npmmirror.com/mapbox-gl/^2/files/dist/mapbox-gl.js"></script>
+  <link rel="stylesheet" href="https://registry.npmmirror.com/mapbox-gl/^2/files/dist/mapbox-gl.css">
   <style>
     body {
       margin: 0;
diff --git a/examples/wind-arrow.html b/examples/wind-arrow.html
index a4f0a4ea..75cd8e1d 100644
--- a/examples/wind-arrow.html
+++ b/examples/wind-arrow.html
@@ -53,17 +53,17 @@
         },
       },
       layers: [
-        // {
-        //   id: 'carto',
-        //   type: 'raster',
-        //   source: 'carto',
-        //   // minzoom: 1,
-        //   // maxzoom: 22,
-        //   paint: {
-        //     // 'raster-resampling': 'nearest',
-        //     // 'raster-fade-duration': 0,
-        //   },
-        // },
+        {
+          id: 'carto',
+          type: 'raster',
+          source: 'carto',
+          // minzoom: 1,
+          // maxzoom: 22,
+          paint: {
+            // 'raster-resampling': 'nearest',
+            // 'raster-fade-duration': 0,
+          },
+        },
         {
           id: 'background',
           type: 'background',
@@ -117,48 +117,6 @@
   map.on('load', async function () {
     const clip = await fetch('./data/china.geojson').then(res => res.json());
     const interpolateColor = color.wind.reduce((result, item, key) => result.concat(item[0] - 0/*273.15*/, 'rgba(' + item[1].join(',') + ')'), []);
-    //
-    // map.addSource('tile-bbox', {
-    //   type: 'geojson',
-    //   data: {
-    //     'type': 'FeatureCollection',
-    //     'features': [],
-    //   },
-    // });
-    //
-    // map.addLayer({
-    //   type: 'line',
-    //   source: 'tile-bbox',
-    //   id: 'tile-bbox',
-    //   paint: {
-    //     'line-color': 'red',
-    //     'line-width': 1,
-    //   },
-    //   layout: {
-    //     'line-cap': 'round',
-    //     'line-join': 'round',
-    //   },
-    // });
-    //
-    // map.addLayer({
-    //   type: 'symbol',
-    //   source: 'tile-bbox',
-    //   id: 'tile-bbox-label',
-    //   'layout': {
-    //     // get the title name from the source's "title" property
-    //     'text-field': ['get', 'tile'],
-    //     // 'text-font': [
-    //     //     'Open Sans Semibold',
-    //     //     'Arial Unicode MS Bold',
-    //     // ],
-    //     // 'text-offset': [0, 1.25],
-    //     // 'text-anchor': 'top',
-    //   },
-    //   paint: {
-    //     'text-color': 'red'
-    //   },
-    //   'filter': ['==', '$type', 'Point'],
-    // });
 
     const imageSource = new mapboxWind.ImageSource('wind1', {
       // tileSize: 256,
@@ -174,50 +132,38 @@
         [-180, -85.051129],
       ],
       url: 'http://localhost:5000/2023111700/2023111703/0/0/0/wind-surface.jpeg',
-      // coordinates: [
-      //   [-78.120282611, 68.846393966],
-      //   [132.453327310, 68.846393966],
-      //   [132.453327310, -75.191804486],
-      //   [-78.120282611, -75.191804486],
-      // ],
-      // url: 'http://localhost:5000/2023111700/2023111703/0/0/0/area.jpeg',
-      // coordinates: [
-      //   [
-      //     0,
-      //     85.051129
-      //   ],
-      //   [
-      //     180,
-      //     85.051129
-      //   ],
-      //   [
-      //     180,
-      //     -85.051129
-      //   ],
-      //   [
-      //     0,
-      //     -85.051129
-      //   ],
-      // ],
-      // url: 'http://localhost:5000/2023111700/2023111703/0/0/0/7.jpeg',
-      // dataRange: [-34.37186050415039, 46.51813888549805, -42.12305450439453, 49.66694259643555],
     });
 
-    const tileSource = new mapboxWind.TileSource('wind', {
+    const source = new mapboxWind.TimelineSource('wind', {
+      sourceType: mapboxWind.LayerSourceType.tile,
       tileSize: 256,
       minZoom: 0,
-      maxZoom: 4,
+      maxZoom: 2,
       roundZoom: true,
+      duration: 1,
+      endDelay: 0,
+      repeat: true,
+      autoplay: true,
       decodeType: mapboxWind.DecodeType.imageWithExif,
-      wrapX: false,
-      // tileBounds: [-78.120282611, -75.191804486, 132.453327310, 68.846393966],
-      url: 'http://localhost:5000/2023111700/2023111703/{z}/{x}/{y}/wind-surface.jpeg',
+      intervals: [
+        '03',
+        '06',
+        '09',
+        '12',
+        '15',
+        '18',
+        '21',
+      ].map((id, index) => ({
+        // url: `http://localhost:5000/processed/2023041700/20230417${index < 10 ? '0' + index.toString() : index.toString()}/{z}/{x}/{y}/wind-surface.jpeg`,
+        url: `http://localhost:5000/2023111700/20231117${id}/{z}/{x}/{y}/wind-surface.jpeg`
+      })),
+      wrapX: true,
     });
 
     window.imageSource = imageSource;
-    window.tileSource = tileSource;
+    window.tileSource = source;
 
-    const fill = new mapboxWind.Layer('fill', imageSource, {
+    const fill = new mapboxWind.Layer('fill', source, {
       wireframe: true,
       styleSpec: {
         'fill-color': [
@@ -256,7 +202,7 @@
       dropRateBump: 0.002,
     }
 
-    const wind = new mapboxWind.Layer('wind', imageSource, {
+    const wind = new mapboxWind.Layer('wind', source, {
       wireframe: false,
       styleSpec: {
         'fill-color': [
@@ -296,20 +242,20 @@
       // }
     });
 
-    const arrow = new mapboxWind.Layer('arrow', imageSource, {
+    const arrow = new mapboxWind.Layer('arrow', source, {
       wireframe: false,
       styleSpec: {
         'fill-color': [
           'interpolate',
           ['step', 1],
           ['get', 'value'],
-          ...interpolateColor
-          // 0, '#fff',
-          // 104, '#fff',
+          // ...interpolateColor
+          0, '#fff',
+          104, '#fff',
         ],
         'opacity': 1,
         space: 20,
-        size: [30, 20],
+        size: [12, 10],
       },
       renderFrom: mapboxWind.RenderFrom.rg,
       displayRange: [0, 104],
diff --git a/packages/gl-core/src/renderer/pass/arrow/arrow.ts b/packages/gl-core/src/renderer/pass/arrow/arrow.ts
index f83843ad..c963aa93 100644
--- a/packages/gl-core/src/renderer/pass/arrow/arrow.ts
+++ b/packages/gl-core/src/renderer/pass/arrow/arrow.ts
@@ -188,17 +188,15 @@ export default class ArrowPass extends Pass<ArrowPassOptions> {
         'displayRange',
       ]);
 
-      // const zoom = rendererState.zoom;
+      const zoom = rendererState.zoom;
       const dataBounds = rendererState.sharedState.u_data_bbox;
-      const pixelsToUnits = this.options.getPixelsToUnits();
       const position = this.createTileVertexArray(tileSize, rendererState.symbolSpace);
       const pos = new Float32Array(position.length);
       for (let i = 0; i < tiles.length; i++) {
         const tile = tiles[i];
+        const bounds = tile.getTileProjBounds();
 
         if (!this.#cache.has(tile.tileKey)) {
-          const bounds = tile.getTileProjBounds();
-
           for (let j = 0; j < position.length; j += 2) {
             pos[j] = bounds.left + position[j] * (bounds.right - bounds.left);
             pos[j + 1] = bounds.top + position[j + 1] * (bounds.bottom - bounds.top);
@@ -271,9 +269,12 @@ export default class ArrowPass extends Pass<ArrowPassOptions> {
         //
         // this.#mesh.updateGeometry(geometry);
 
-        // const scaleFactor = Math.pow(2, zoom - tile.overscaledZ);
+        const scaleFactor = Math.pow(2, zoom - tile.overscaledZ);
+
+        const max = Math.max(bounds.right - bounds.right, bounds.bottom - bounds.top);
+        const scale = 1 / max;
 
-        // const pixelToUnits = 1 / (tileSize * scaleFactor);
+        const pixelToUnits = 1 / (tileSize * scaleFactor) / scale;
 
         Object.keys(uniforms).forEach((key) => {
           if (uniforms[key] !== undefined) {
@@ -288,10 +289,7 @@ export default class ArrowPass extends Pass<ArrowPassOptions> {
         );
         this.#mesh.program.setUniform('u_fade_t', fade);
         this.#mesh.program.setUniform('arrowSize', rendererState.symbolSize);
-        this.#mesh.program.setUniform(
-          'pixelsToProjUnit',
-          new Vector2(pixelsToUnits[0], pixelsToUnits[1]),
-        );
+        this.#mesh.program.setUniform('pixelsToProjUnit', new Vector2(pixelToUnits, pixelToUnits));
         this.#mesh.program.setUniform('u_bbox', rendererState.extent);
         this.#mesh.program.setUniform('u_data_bbox', dataBounds);
         this.#mesh.program.setUniform('u_head', 0.1);
diff --git a/packages/gl-core/src/shaders/arrow.vert.glsl b/packages/gl-core/src/shaders/arrow.vert.glsl
index 0b7d9352..b45abd20 100644
--- a/packages/gl-core/src/shaders/arrow.vert.glsl
+++ b/packages/gl-core/src/shaders/arrow.vert.glsl
@@ -71,9 +71,7 @@ float getValue(vec2 rg) {
 }
 
 float getAngle(vec2 rg) {
-    float angle = atan(rg.x, rg.y);
-    angle -= PI / 2.0;
-
+    float angle = atan(rg.y, rg.x);
     return angle;
 }
 
@@ -82,43 +80,10 @@ void rotate2d(inout vec2 v, float a){
     v = m * v;
 }
 
-//vec2 calc_offset(vec2 extrusion, float radius,  float view_scale) {
-//    return extrusion * radius * u_extrude_scale * view_scale;
-//}
-
-//vec4 project_vertex(vec2 extrusion, vec4 world_center, float radius,  float view_scale) {
-//    vec2 sample_offset = calc_offset(extrusion, radius, view_scale);
-//    return u_matrix * ( world_center + vec4(sample_offset, 0, 0) );
-//}
-
 void main () {
     vUv = uv;
     vec2 size = arrowSize * pixelsToProjUnit * u_devicePixelRatio;
     vec2 halfSize = size / 2.0;
-//    vec4 worldPosition = vec4(coords, 0.0, 1.0) * modelMatrix;
-//
-//    // unencode the extrusion vector that we snuck into the a_pos vector
-//    vec2 extrude = vec2(mod(a_pos, 2.0) * 2.0 - 1.0);
-//
-//    // multiply a_pos by 0.5, since we had it * 2 in order to sneak
-//    // in extrusion data
-//    vec2 circle_center = floor(coords * 0.5);
-//
-//    world_center = vec4(circle_center, 0.0, 1);
-//
-//    vec4 projected_center = u_matrix * world_center;
-//
-//    view_scale = projected_center.w / u_camera_to_center_distance;
-//
-//    gl_Position = project_vertex(extrude, world_center, radius, view_scale);
-//
-//    // This is a minimum blur distance that serves as a faux-antialiasing for
-//    // the circle. since blur is a ratio of the circle's size and the intent is
-//    // to keep the blur at roughly 1px, the two are inversely related.
-//    lowp float antialiasblur = 1.0 / u_device_pixel_ratio / radius;
-//
-//    v_data = vec3(extrude.x, extrude.y, antialiasblur);
-
     vec2 worldPosition = vec2(-halfSize.x, -halfSize.y);
     if(position.x == 1.0) {
         worldPosition.x = halfSize.x;
diff --git a/packages/mapbox-gl/src/layer.ts b/packages/mapbox-gl/src/layer.ts
index 1eb144a9..0625b729 100644
--- a/packages/mapbox-gl/src/layer.ts
+++ b/packages/mapbox-gl/src/layer.ts
@@ -6,10 +6,7 @@ import type { BaseLayerOptions, SourceType } from 'wind-gl-core';
 import { BaseLayer, LayerSourceType, RenderType, TileID, polygon2buffer } from 'wind-gl-core';
 
 import CameraSync from './utils/CameraSync';
-import {
-  getCoordinatesCenterTileID,
-  pixelsInMercatorCoordinateUnits,
-} from './utils/mercatorCoordinate';
+import { getCoordinatesCenterTileID } from './utils/mercatorCoordinate';
 
 import { expandTiles, getTileBounds, getTileProjBounds } from './utils/tile';
 
@@ -199,10 +196,6 @@ export default class Layer {
     this.sync = new CameraSync(this.map, 'perspective', this.scene);
     this.planeCamera = new OrthographicCamera(0, 1, 1, 0, 0, 1);
 
-    Math.abs(
-      (512 * (1 / Math.cos((latitude * Math.PI) / 180))) / ThreeboxConstants.EARTH_CIRCUMFERENCE,
-    );
-
     this.layer = new BaseLayer(
       this.source,
       {
@@ -235,14 +228,7 @@ export default class Layer {
           const left = mapboxgl.MercatorCoordinate.fromLngLat(m.unproject([x, y]));
           const right = mapboxgl.MercatorCoordinate.fromLngLat(m.unproject([x + pixel, y + pixel]));
 
-          const v = [Math.abs(right.x - left.x), Math.abs(left.y - right.y)];
-
-          const pixelsPerMeter = (this.map as any)?.transform.pixelsPerMeter;
-
-          const m = pixelsInMercatorCoordinateUnits((this.map as any).getCenter().lat, pixelsPerMeter);
-
-          console.log(v, m);
-          return [m, m];
+          return [Math.abs(right.x - left.x), Math.abs(left.y - right.y)];
         },
         getPixelsToProjUnit: () => [
           (this.map as any)?.transform.pixelsPerMeter,