diff --git a/demos/demo/bike.js b/demos/demo/bike.js
new file mode 100644
index 0000000000..dda5e82d78
--- /dev/null
+++ b/demos/demo/bike.js
@@ -0,0 +1,110 @@
+/* eslint-disable no-eval */
+import { Scene, LineLayer, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 40,
+    style: 'dark',
+    center: [ 3.438, 40.16797 ],
+    zoom: 0.51329
+  })
+});
+Promise.all(
+  [ fetch('https://gw.alipayobjects.com/os/basement_prod/9acd4831-5655-41a5-b0a0-831603e0092d.json').then(function(d) {
+    return d.text();
+  }).then(JSON.parse), fetch('https://gw.alipayobjects.com/os/basement_prod/dbe4e40b-3fbf-4a20-b36b-7a8bd3b8aef2.csv').then(function(d) {
+    return d.text();
+  }), fetch('https://gw.alipayobjects.com/os/basement_prod/89d20ef7-77df-44ca-a238-6e3679ab3ae4.csv').then(function(d) {
+    return d.text();
+  }) ]).then(function onLoad([ coordinates, trips, stations ]) {
+  const stationArray = parseCSV(stations);
+  const stationObj = {};
+  stationArray.forEach(function(st) {
+    stationObj[st.station_id] = {
+      x: st.longitude * 1,
+      y: st.latitude * 1
+    };
+  });
+  const tripsArray = parseCSV(trips);
+  const triplines = [];
+  tripsArray.forEach(function(trip) {
+    if (stationObj[trip.start_station] && stationObj[trip.end_station]) {
+      const line = {
+        x: stationObj[trip.start_station].x,
+        y: stationObj[trip.start_station].y,
+        x1: stationObj[trip.end_station].x,
+        y1: stationObj[trip.end_station].y,
+        duration: trip.duration
+      };
+      triplines.push(line);
+    }
+  });
+  const roadlayer = new LineLayer().source(coordinates).shape('line')
+    .size(0.6)
+    .color('#eee')
+    .active(true)
+    .style({
+      opacity: 0.9
+    });
+  const stationLayer = new PointLayer().source(stations, {
+    parser: {
+      type: 'csv',
+      x: 'longitude',
+      y: 'latitude'
+    }
+  }).shape('circle')
+    .active(true)
+    .size(40)
+    .color('#fec44f')
+    .animate(true)
+    .style({
+      opacity: 1.0
+    })
+    .render();
+
+  const arclayer = new LineLayer().source(triplines.slice(0, 1000), {
+    parser: {
+      type: 'json',
+      x: 'x',
+      y: 'y',
+      x1: 'x1',
+      y1: 'y1'
+    }
+  })
+    .color('#ff6b34')
+    .shape('arc3d')
+    .size(1)
+    .style({
+      opacity: 1.0
+    })
+    .animate({
+      interval: 0.5,
+      trailLength: 0.5,
+      duration: 1
+    });
+  arclayer.fitBounds();
+  scene.addLayer(roadlayer);
+  scene.addLayer(stationLayer);
+  scene.addLayer(arclayer);
+
+
+});
+
+function parseCSV(data) {
+  const lines = data.split('\n');
+  const header = lines[0];
+  const columns = header.split(',');
+  return lines.slice(1).filter(function(l) {
+    return l;
+  }).map(function(line) {
+    const obj = {};
+    line.split(',').forEach(function(value, i) {
+      const name = columns[i];
+      obj[name] = value;
+    });
+    return obj;
+  });
+}
+
diff --git a/examples/gallery/animate/demo/animate.js b/examples/gallery/animate/demo/animate.js
deleted file mode 100644
index 82104725ab..0000000000
--- a/examples/gallery/animate/demo/animate.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Scene, LineLayer } from '@antv/l7';
-import { Mapbox } from '@antv/l7-maps';
-const scene = new Scene({
-  id: 'map',
-  map: new Mapbox({
-    center: [ 110.19382669582967, 40.258134 ],
-    pitch: 0,
-    zoom: 3,
-    style: 'dark'
-  })
-});
-
-fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/49a796db-944b-4c35-aa97-1015f0a407f1.json'
-)
-  .then(res => res.json())
-  .then(data => {
-    data.features = data.features.map(function(fe) {
-      if (fe.properties.saldo < 0) {
-        fe.geometry.coordinates = fe.geometry.coordinates.reverse();
-      }
-      return fe;
-    });
-    const layer = new LineLayer({
-      autoFit: true
-    })
-      .source(data)
-      .shape('line')
-      .size('saldo', [ 1, 2 ])
-      .color('saldo', function(v) {
-        return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)';
-      })
-      .animate({
-        enable: true,
-        interval: 0.1,
-        duration: 3,
-        trailLength: 1
-      })
-      .style({
-        opacity: 0.8
-      });
-    scene.addLayer(layer);
-  });
diff --git a/examples/gallery/animate/demo/animate_line.js b/examples/gallery/animate/demo/animate_line.js
index b69fffbc37..e0106eb0cd 100644
--- a/examples/gallery/animate/demo/animate_line.js
+++ b/examples/gallery/animate/demo/animate_line.js
@@ -21,15 +21,15 @@ fetch(
           coordinates: 'path'
         }
       })
-      .size(3)
+      .size(1.5)
       .shape('line')
       .color('color', v => {
         return `rgb(${v[0]})`;
       })
       .animate({
-        interval: 0.1,
-        trailLength: 1.0,
-        duration: 2
+        interval: 0.6,
+        trailLength: 1.5,
+        duration: 6
       });
     scene.addLayer(lineLayer);
   });
diff --git a/examples/gallery/animate/demo/animate_path.js b/examples/gallery/animate/demo/animate_path.js
index b4ce03f234..09055bae54 100644
--- a/examples/gallery/animate/demo/animate_path.js
+++ b/examples/gallery/animate/demo/animate_path.js
@@ -18,7 +18,7 @@ fetch(
   .then(data => {
     const layer = new LineLayer()
       .source(data)
-      .size(1)
+      .size(1.5)
       .shape('line')
       .color('#25d8b7')
       .animate({
diff --git a/examples/gallery/animate/demo/build.js b/examples/gallery/animate/demo/build.js
index 47d0205076..00e3e28115 100644
--- a/examples/gallery/animate/demo/build.js
+++ b/examples/gallery/animate/demo/build.js
@@ -4,12 +4,12 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    style: 'dark',
+    style: 'amap://styles/a49ef8d081db7b85adb2e90ba7941f1e?isPublic=true',
     center: [ 120.173104, 30.244072 ],
-    pitch: 66.50572,
-    zoom: 15.79,
-    minZoom: 10,
-    maxZoom: 18
+    pitch: 70.41138037735848,
+    zoom: 17.18,
+    rotation: 2.24, // 358.7459759480504
+    minZoom: 14
   })
 });
 
@@ -27,15 +27,15 @@ scene.on('loaded', () => {
       layer
         .source(data)
         .size('floor', [ 100, 3000 ])
-        .color('rgba(242,246,250,1.0)')
+        .color('rgba(242,246,250,0.5)')
         .animate({
           enable: true
         })
         .style({
           opacity: 1.0,
-          baseColor: 'rgb(16,16,16)',
-          windowColor: 'rgb(30,60,89)',
-          brightColor: 'rgb(255,176,38)'
+          baseColor: 'rgba(36,16,63,0.3)',
+          windowColor: '#0e0220',
+          brightColor: '#08faee'
         });
       scene.addLayer(layer);
     });
@@ -60,4 +60,3 @@ scene.on('loaded', () => {
     });
 
 });
-
diff --git a/examples/gallery/animate/demo/meta.json b/examples/gallery/animate/demo/meta.json
index 05de900825..7a326cd872 100644
--- a/examples/gallery/animate/demo/meta.json
+++ b/examples/gallery/animate/demo/meta.json
@@ -19,20 +19,15 @@
       "title": "流向图",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*u5BsQbn30pkAAAAAAAAAAABkARQnAQ"
     },
-    {
-      "filename": "animate.js",
-      "title": "轨迹动画",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-x3uRY5G_4sAAAAAAAAAAABkARQnAQ"
-    },
     {
       "filename": "build.js",
       "title": "点亮城市",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*InPpTbVN-yUAAAAAAAAAAABkARQnAQ"
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7XkWTYQMfPMAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "animate_line.js",
       "title": "轨迹动画",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8cXXR5FxHgAAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jLo0RY0sDG4AAAAAAAAAAABkARQnAQ"
     }
   ]
 }
diff --git a/examples/point/column/demo/column_light.js b/examples/point/column/demo/column_light.js
index 0e06b97cf6..e6b5738f30 100644
--- a/examples/point/column/demo/column_light.js
+++ b/examples/point/column/demo/column_light.js
@@ -1,4 +1,4 @@
-import { Scene, PointLayer } from '@antv/l7';
+import { Scene, PointLayer, Popup } from '@antv/l7';
 import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
@@ -32,5 +32,14 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
       .style({
         opacity: 1.0
       });
+    pointLayer.on('mousemove', e => {
+      const popup = new Popup({
+        offsets: [ 0, 0 ],
+        closeButton: false
+      })
+        .setLnglat(e.lngLat)
+        .setHTML(`<span>${e.feature.s}: ${e.feature.t}℃</span>`);
+      scene.addPopup(popup);
+    });
     scene.addLayer(pointLayer);
   });
diff --git a/examples/raster/basic/demo/light.js b/examples/raster/basic/demo/light.js
index 2b81b3f23b..3fdc64ac42 100644
--- a/examples/raster/basic/demo/light.js
+++ b/examples/raster/basic/demo/light.js
@@ -49,7 +49,7 @@ async function addLayer() {
       domain: [ 0, 90 ],
       nodataValue: 0,
       rampColors: {
-        colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#f8501a', '#f6961f', '#f8d069', '#fffdf8' ],
+        colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#fabd08', '#f1e93f', '#f1ff8f', '#fcfff7' ],
         positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ]
       }
     });
diff --git a/examples/raster/basic/demo/meta.json b/examples/raster/basic/demo/meta.json
index 3d64ca4131..bcd9c792f3 100644
--- a/examples/raster/basic/demo/meta.json
+++ b/examples/raster/basic/demo/meta.json
@@ -4,11 +4,7 @@
     "en": "Gallery"
   },
   "demos": [
-    {
-      "filename": "image.js",
-      "title": "图片",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
-    },
+
     {
       "filename": "radar.js",
       "title": "雷达图",
@@ -22,12 +18,17 @@
     {
       "filename": "light.js",
       "title": "夜光图",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*nvP2R6ZbSSgAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bUYqRb5esH4AAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "ndvi.js",
       "title": "NDVI",
       "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6BQSTI51T_UAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "image.js",
+      "title": "图片",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ZrCaR53185IAAAAAAAAAAABkARQnAQ"
     }
   ]
 }
diff --git a/examples/raster/basic/demo/ndvi.js b/examples/raster/basic/demo/ndvi.js
index 73a57e8ccf..3a6624f88f 100644
--- a/examples/raster/basic/demo/ndvi.js
+++ b/examples/raster/basic/demo/ndvi.js
@@ -12,9 +12,19 @@ const scene = new Scene({
   })
 });
 addLayer();
-async function getTiffData() {
+
+// async function getAllYearData() {
+//   const allData = [];
+//   for (let i = 1; i < 13; i++) {
+//     const month = i < 10 ? '0' + i : i;
+//     const res = await getTiffData(month);
+//     allData.push(res);
+//   }
+//   return allData;
+// }
+async function getTiffData(month) {
   const response = await fetch(
-    'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_201905.tiff'
+    'https://gw.alipayobjects.com/zos/antvdemo/assets/2019_clip/ndvi_2019' + month + '.tiff'
   );
   const arrayBuffer = await response.arrayBuffer();
   const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);
@@ -25,16 +35,13 @@ async function getTiffData() {
   return {
     data: values[0],
     width,
-    height,
-    min: 0,
-    max: 8000
+    height
   };
 }
 
 async function addLayer() {
-  const tiffdata = await getTiffData();
-
-  const layer = new RasterLayer({});
+  const layer = new RasterLayer();
+  const tiffdata = await getTiffData('06');
   layer
     .source(tiffdata.data, {
       parser: {
@@ -48,7 +55,7 @@ async function addLayer() {
       opacity: 0.8,
       clampLow: false,
       clampHigh: false,
-      domain: [ -3000, 9000 ],
+      domain: [ -3000, 10000 ],
       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 ]
diff --git a/examples/tutorial/data/demo/data_update.js b/examples/tutorial/data/demo/data_update.js
deleted file mode 100644
index f813bdc4a7..0000000000
--- a/examples/tutorial/data/demo/data_update.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Scene, PointLayer } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-const scene = new Scene({
-  id: 'map',
-  map: new GaodeMap({
-    style: 'light',
-    pitch: 0,
-    center: [ 120.19382669582967, 30.258134 ],
-    zoom: 5
-  })
-});
-
-const radius = 0.1;
-
-function pointOnCircle(angle) {
-  return {
-    type: 'FeatureCollection',
-    features: [{
-      type: 'Feature',
-      properties: {},
-      geometry: {
-        type: 'Point',
-        coordinates: [ 120.19382669582967 + Math.cos(angle) * radius, 30.258134 + Math.sin(angle) * radius ]
-      }
-    }]
-  };
-}
-
-scene.on('loaded', () => {
-  // animateMarker(0);
-});
-const layer = new PointLayer()
-  .source(pointOnCircle(0))
-  .shape('circle')
-  .size(15) // default 1
-  .color('#2F54EB')
-  .style({
-    stroke: 'rgb(255,255,255)',
-    strokeWidth: 2,
-    opacity: 1
-  });
-scene.addLayer(layer);
-// function animateMarker(timestamp) {
-//   layer.setData(pointOnCircle(timestamp / 1000));
-//   requestAnimationFrame(animateMarker);
-// }
diff --git a/examples/tutorial/data/demo/line.js b/examples/tutorial/data/demo/line.js
deleted file mode 100644
index de86a0fa73..0000000000
--- a/examples/tutorial/data/demo/line.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Scene } from '@antv/l7';
-import { GaodeMap } from '@antv/l7-maps';
-new Scene({
-  id: 'map',
-  map: new GaodeMap({
-    style: 'light',
-    pitch: 0,
-    center: [ 107.054293, 35.246265 ],
-    zoom: 4.056
-  })
-});
diff --git a/examples/tutorial/data/demo/meta.json b/examples/tutorial/data/demo/meta.json
deleted file mode 100644
index 4611002a06..0000000000
--- a/examples/tutorial/data/demo/meta.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "title": {
-    "zh": "图库",
-    "en": "Gallery"
-  },
-  "demos": [
-    {
-      "filename": "line.js",
-      "title": "json数据"
-    },
-    {
-      "filename": "data_update.js",
-      "title": "数据更新"
-    }
-  ]
-}
diff --git a/examples/tutorial/data/index.en.md b/examples/tutorial/data/index.en.md
deleted file mode 100644
index 77bfc9dc39..0000000000
--- a/examples/tutorial/data/index.en.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Data
-order: 1
----
-
-coming soon ……
diff --git a/examples/tutorial/data/index.zh.md b/examples/tutorial/data/index.zh.md
deleted file mode 100644
index 497c3edaab..0000000000
--- a/examples/tutorial/data/index.zh.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: 数据
-order: 1
----
-在路上 ……
diff --git a/packages/layers/src/point/shaders/fill_frag.glsl b/packages/layers/src/point/shaders/fill_frag.glsl
index fd317b5f1d..80b617be1b 100644
--- a/packages/layers/src/point/shaders/fill_frag.glsl
+++ b/packages/layers/src/point/shaders/fill_frag.glsl
@@ -69,8 +69,8 @@ void main() {
   float N_RINGS = 3.0;
   float FREQ = 1.0;
 
-
-
+  // gl_FragColor = v_color * color_t;
+  // gl_FragColor = mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
   gl_FragColor = opacity_t * mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
 
   if(u_aimate.x == Animate) {
diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx
index 9b78844a7e..6803927199 100644
--- a/stories/Layers/components/Point.tsx
+++ b/stories/Layers/components/Point.tsx
@@ -29,18 +29,19 @@ export default class Point3D extends React.Component {
     // scene.on('loaded', () => {
     const pointLayer = new PointLayer({})
       .source(pointsData, {
-        cluster: true,
+        cluster: false,
       })
       .shape('circle')
-      .scale('point_count', {
-        type: 'quantile',
-      })
-      .size('point_count', [5, 10, 15, 20, 25])
+      // .scale('point_count', {
+      //   type: 'quantile',
+      // })
+      // .size('point_count', [5, 10, 15, 20, 25])
+      .size(5)
       .animate(false)
       .active(true)
       .color('yellow')
       .style({
-        opacity: 0.5,
+        opacity: 1,
         strokeWidth: 1,
       });
     scene.addLayer(pointLayer);
diff --git a/stories/Layers/components/RasterLayer.tsx b/stories/Layers/components/RasterLayer.tsx
index 381a9930c4..975d940776 100644
--- a/stories/Layers/components/RasterLayer.tsx
+++ b/stories/Layers/components/RasterLayer.tsx
@@ -28,21 +28,21 @@ export default class ImageLayerDemo extends React.Component {
     });
     const tiffdata = await this.getTiffData();
     const layer = new RasterLayer({});
-    const mindata = -5000;
-    const maxdata = 10000;
+    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,
-          ],
+          extent: [73.482190241, 3.82501784112, 135.106618732, 57.6300459963],
+          // extent: [
+          //   73.4766000000000048,
+          //   18.1054999999999993,
+          //   135.1066187,
+          //   57.630046,
+          // ],
         },
       })
       .style({
@@ -108,7 +108,6 @@ export default class ImageLayerDemo extends React.Component {
     rasterFolder
       .add(styleOptions, 'colorScales', Object.keys(colorScales))
       .onChange((color: string) => {
-        colorScales[color].colors = colorScales[color].colors.reverse();
         layer.style({
           rampColors: colorScales[color],
         });
@@ -132,8 +131,8 @@ export default class ImageLayerDemo extends React.Component {
   }
   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',
+      '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);