diff --git a/README.md b/README.md
index 68cd025c73..0eaa29f51d 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ L7 Large-scale WebGL-powered Geospatial data visualization analysis framework
 
 ## l7 visualization demos
 
-![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*zOFwTJ9wHXQAAAAAAAAAAABkARQnAQ)
+![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SGU-QIZsnyoAAAAAAAAAAABkARQnAQ)
 
 ### Installation
 
diff --git a/README.zh.md b/README.zh.md
index 40f39db8e2..2b1281786e 100644
--- a/README.zh.md
+++ b/README.zh.md
@@ -5,7 +5,7 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 
 ## l7 visualization demos
 
-![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*zOFwTJ9wHXQAAAAAAAAAAABkARQnAQ)
+![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SGU-QIZsnyoAAAAAAAAAAABkARQnAQ)
 
 
 ### Installation
diff --git a/docs/api/l7.en.md b/docs/api/l7.en.md
index 440d8585bb..c372d192a0 100644
--- a/docs/api/l7.en.md
+++ b/docs/api/l7.en.md
@@ -5,6 +5,7 @@ redirect_from:
   - /en/docs/api
 ---
 
+
 An open source large-scale geospatial data visualization analysis development framework powered by WebGL.
 
 L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
@@ -16,6 +17,10 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 <p>Your user agent does not support the HTML5 Video element.</p>
 </video>
 
+2.0.beta 版本目前有些功能还未完善，1月6号我们正式版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
+
+1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
+
 ## 核心特性
 
 
@@ -73,4 +78,4 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 ![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
 
 
-更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
\ No newline at end of file
+更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
diff --git a/docs/api/l7.zh.md b/docs/api/l7.zh.md
index 99742bd0c3..705b43d549 100644
--- a/docs/api/l7.zh.md
+++ b/docs/api/l7.zh.md
@@ -7,6 +7,12 @@ redirect_from:
 
 # L7 地理空间数据可视分析引擎
 
+2.0.beta 版本目前有些功能还未完善，
+
+⚠️ 1月6号 正式版发版，将支持1.x版的所有功能，而且会新增很多新功能特性。届时我们也会提供新版本迁移的相关文档，
+
+⚠️ 1.x 版本的用户需求我们持续跟进 [旧版官网地址](https://antv-2018.alipay.com/zh-cn/l7/1.x/index.html)
+
 L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成 2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。
 
 <video id="video" controls="" preload="none" poster="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ">
@@ -73,4 +79,8 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
 ![L7 Road Map](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*3j9HTLTQT2MAAAAAAAAAAABkARQnAQ)
 
 
-更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
\ No newline at end of file
+更多技术细节，详细进展，请关注 [GitHub](https://github.com/antvis/L7)，欢迎大家来给点点 Star，让更多人看到这个开源的项目。
+
+### 技术支持服务群
+L7 相关技术问题，需求反馈，我们会及时响应
+![地理空间可视化L7支持群](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*REc9Qrttrg8AAAAAAAAAAABkARQnAQ)
diff --git a/docs/manual/tutorial/quickstart.en.md b/docs/manual/tutorial/quickstart.en.md
new file mode 100644
index 0000000000..8c72bca67f
--- /dev/null
+++ b/docs/manual/tutorial/quickstart.en.md
@@ -0,0 +1,166 @@
+---
+title: QuickStart
+order: 0
+redirect_from:
+  - /en/docs/manual
+---
+# 使用方法
+
+L7 提供三种使用方式：CDN、Submodule。
+
+## 通过 CDN 使用
+
+首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
+```html
+<head>
+  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
+</head>
+```
+
+如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
+```html
+<head>
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
+  <!-- 上一步引入的 L7 JS 和 CSS -->
+</head>
+```
+⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
+
+然后在 `<body>` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`：
+⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下：
+* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/)
+* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens)
+
+## 通过 Submodule 使用
+
+首先通过 `npm/yarn`
+```bash
+npm install --save @antv/l7
+
+yarn add npm install --save @antv/l7
+
+```
+
+然后就可以使用其中包含的场景和各类图层：
+```typescript
+import { Scene, PolygonLayer } from '@antv/l7';
+
+(async function() {
+  // 获取数据
+  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({
+    center: [110.19382669582967, 50.258134],
+    id: 'map',
+    pitch: 0,
+    style: 'dark',
+    type: 'amap',
+    zoom: 3,
+    token: 'pg.xxx', // 高德或者 Mapbox 的 token
+  });
+
+  // 创建图层
+  const layer = new PolygonLayer({});
+  layer
+    .source(data)
+    .size('name', [0, 10000, 50000, 30000, 100000])
+    .color('name', [
+      '#2E8AE6',
+      '#69D1AB',
+      '#DAF291',
+      '#FFD591',
+      '#FF7A45',
+      '#CF1D49',
+    ])
+    .shape('fill')
+    .style({
+      opacity: 0.8,
+    });
+
+  // 添加图层到场景中
+  scene.addLayer(layer);
+
+  // 渲染场景
+  scene.render();
+})();
+```
+
+
+L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
+* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
+* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
+
+
+## [WIP] React
+
+React 组件待开发，目前可以暂时以 Submodule 方式使用：
+```tsx
+import { Scene, PolygonLayer} from '@antv/l7';
+import * as React from 'react';
+
+export default class AMap extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    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({
+      center: [110.19382669582967, 50.258134],
+      id: 'map',
+      pitch: 0,
+      style: 'dark',
+      type: 'amap',
+      zoom: 3,
+      token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    });
+    const layer = new PolygonLayer({});
+
+    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.8,
+      });
+    scene.addLayer(layer);
+    scene.render();
+    this.scene = scene;
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}
+```
+
+⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
+
diff --git a/docs/manual/tutorial/quickstart.zh.md b/docs/manual/tutorial/quickstart.zh.md
new file mode 100644
index 0000000000..1694a677f8
--- /dev/null
+++ b/docs/manual/tutorial/quickstart.zh.md
@@ -0,0 +1,167 @@
+---
+title: 快速上手
+order: 0
+redirect_from:
+  - /zh/docs/manual
+---
+
+# 使用方法
+
+L7 提供三种使用方式：CDN、Submodule。
+
+## 通过 CDN 使用
+
+首先在 `<head>` 中引入 L7 CDN 版本的 JS 和 CSS 文件：
+```html
+<head>
+  <script src='https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0-beta.5/dist/l7.js'></script>
+</head>
+```
+
+如果使用 Mapbox，还需要额外引入 Mapbox 的 JS 和 CSS 文件，这一步可以参考 [Mapbox 文档](https://docs.mapbox.com/mapbox-gl-js/overview/#quickstart)：
+```html
+<head>
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
+  <!-- 上一步引入的 L7 JS 和 CSS -->
+</head>
+```
+⚠️高德采用异步加载，因此不需要引入任何额外静态文件。
+
+然后在 `<body>` 中定义一个容器并设置一个 `id`。通过全局 `L7` 这个命名空间可以获取场景 `L7.Scene` 和图层 `L7.PolygonLayer`：
+⚠️需要获取高德或者 Mapbox 的使用 token 并传入 `L7.Scene` 的构造函数，获取方式如下：
+* 高德地图开发者 Key [申请方法](https://lbs.amap.com/dev/key/)
+* [Mapbox Access Tokens](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/#creating-and-managing-access-tokens)
+
+## 通过 Submodule 使用
+
+首先通过 `npm/yarn`
+```bash
+npm install --save @antv/l7
+
+yarn add npm install --save @antv/l7
+
+```
+
+然后就可以使用其中包含的场景和各类图层：
+```typescript
+import { Scene, PolygonLayer } from '@antv/l7';
+
+(async function() {
+  // 获取数据
+  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({
+    center: [110.19382669582967, 50.258134],
+    id: 'map',
+    pitch: 0,
+    style: 'dark',
+    type: 'amap',
+    zoom: 3,
+    token: 'pg.xxx', // 高德或者 Mapbox 的 token
+  });
+
+  // 创建图层
+  const layer = new PolygonLayer({});
+  layer
+    .source(data)
+    .size('name', [0, 10000, 50000, 30000, 100000])
+    .color('name', [
+      '#2E8AE6',
+      '#69D1AB',
+      '#DAF291',
+      '#FFD591',
+      '#FF7A45',
+      '#CF1D49',
+    ])
+    .shape('fill')
+    .style({
+      opacity: 0.8,
+    });
+
+  // 添加图层到场景中
+  scene.addLayer(layer);
+
+  // 渲染场景
+  scene.render();
+})();
+```
+
+
+L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
+* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
+* [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
+
+
+## [WIP] React
+
+React 组件待开发，目前可以暂时以 Submodule 方式使用：
+```tsx
+import { Scene, PolygonLayer} from '@antv/l7';
+import * as React from 'react';
+
+export default class AMap extends React.Component {
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    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({
+      center: [110.19382669582967, 50.258134],
+      id: 'map',
+      pitch: 0,
+      style: 'dark',
+      type: 'amap',
+      zoom: 3,
+      token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    });
+    const layer = new PolygonLayer({});
+
+    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.8,
+      });
+    scene.addLayer(layer);
+    scene.render();
+    this.scene = scene;
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}
+```
+
+⚠️组件 Unmount 时需要通过 `scene.destroy()` 手动销毁场景。
+
diff --git a/docs/tutorial/data.en.md b/docs/tutorial/data.en.md
new file mode 100644
index 0000000000..f6ddefc5df
--- /dev/null
+++ b/docs/tutorial/data.en.md
@@ -0,0 +1,65 @@
+---
+title: data
+order: 1
+---
+
+## 数据
+
+目前L7支持的数据格式有GeoJson,CSV,JSon Image
+
+GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
+
+
+## GeoJSON
+
+> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
+
+
+
+```json
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              110.478515625,
+              32.76880048488168
+            ],
+            [
+              117.68554687499999,
+              32.76880048488168
+            ],
+            [
+              117.68554687499999,
+              37.64903402157866
+            ],
+            [
+              110.478515625,
+              37.64903402157866
+            ],
+            [
+              110.478515625,
+              32.76880048488168
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}
+```
+
+## 地理统计分析工具
+[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
+
+## 在线工具
+
+[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据
+
+[https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据
diff --git a/docs/tutorial/data.zh.md b/docs/tutorial/data.zh.md
new file mode 100644
index 0000000000..781c763b24
--- /dev/null
+++ b/docs/tutorial/data.zh.md
@@ -0,0 +1,74 @@
+---
+title: 数据
+order: 1
+---
+
+## 数据
+
+目前L7支持的数据格式有GeoJson,CSV,JSon Image
+
+GeoJSON 支持点、线、面，等所有的空间数据格式。<br />CSV 支持，点，线段，弧线的支持。<br />JSON 支持简单的点、线，面，不支持多点，多线的，多面数据格式。
+
+
+## GeoJSON
+
+> GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
+
+
+
+```json
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              110.478515625,
+              32.76880048488168
+            ],
+            [
+              117.68554687499999,
+              32.76880048488168
+            ],
+            [
+              117.68554687499999,
+              37.64903402157866
+            ],
+            [
+              110.478515625,
+              37.64903402157866
+            ],
+            [
+              110.478515625,
+              32.76880048488168
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}
+```
+
+## 地理统计分析工具
+[turfjs](http://turfjs.org/):  地理数据计算，处理，统计，分析的Javascript 库
+
+## 在线工具
+
+[http://geojson.io/](http://geojson.io/)    可以在线查看，绘制，修改GeoJSON数据
+
+[https://mapshaper.org/](https://mapshaper.org/)  可以查看较大的geojson，还能够简化GeoJSON数据
+
+## 数据资源
+
+#### 全国行政区划边界 
+[支持 geojson, svg下载](http://datav.aliyun.com/tools/atlas/#&lat=33.50475906922609&lng=104.32617187499999&zoom=4)
+
+#### HighCharts 全球行政区划数据集
+
+[https://img.hcharts.cn/mapdata/](https://img.hcharts.cn/mapdata/)
diff --git a/docs/api/quickstart.en.md b/docs/tutorial/quickstart.en.md
similarity index 100%
rename from docs/api/quickstart.en.md
rename to docs/tutorial/quickstart.en.md
diff --git a/docs/api/quickstart.zh.md b/docs/tutorial/quickstart.zh.md
similarity index 99%
rename from docs/api/quickstart.zh.md
rename to docs/tutorial/quickstart.zh.md
index a1fea25669..5aadbc295a 100644
--- a/docs/api/quickstart.zh.md
+++ b/docs/tutorial/quickstart.zh.md
@@ -4,7 +4,6 @@ order: 0
 redirect_from:
   - /zh/docs/tutorial
 ---
-# 使用方法
 
 # 使用方法
 
diff --git a/gatsby-config.js b/gatsby-config.js
index 639838afee..bfdb4be393 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -21,6 +21,13 @@ module.exports = {
         },
         redirect: 'api/l7'
       },
+      {
+        slug: 'docs/tutorial',
+        title: {
+          zh: '教程',
+          en: 'tutorial'
+        }
+      },
       {
         slug: 'examples',
         title: {
@@ -41,10 +48,10 @@ module.exports = {
         order: 0
       },
       {
-        slug: 'api/quickstart',
+        slug: '/tutorial',
         title: {
           zh: '快速入门',
-          en: 'quickstart'
+          en: 'Quickstart'
         },
         order: 0
       },
diff --git a/package.json b/package.json
index 1270c56f5e..2b03bbcc74 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "babel-plugin-transform-import-styles": "^0.0.11",
     "babel-plugin-transform-postcss": "^0.3.0",
     "babel-preset-gatsby": "^0.2.22",
+    "babel-template": "^6.26.0",
     "clean-webpack-plugin": "^0.1.19",
     "commitizen": "^4.0.3",
     "copy-webpack-plugin": "^4.5.2",
