diff --git a/README.md b/README.md
index 8027a4b9bc..4a91e89ba8 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ L7 focuses on  geographic data expressiveness，interaction and design of geogra
 ![l7 demo](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*SGU-QIZsnyoAAAAAAAAAAABkARQnAQ)
 
 
-## Highlight features of L7 2.0
+## ✨ Highlight features of L7 2.0
 
 
 🌏	Data-driven Visualization
@@ -46,7 +46,9 @@ For global users, Mapbox is easy to be embedded by a simple line of code.
 
 
 
-### Installation
+.
+
+ ###  📦 Installation
 
 ```
 npm install @antv/l7@beta
@@ -98,7 +100,7 @@ scene.addLayer(pointLayer);
 [Examples](https://l7.antv.vision/en/examples/gallery/basic)
 
 
-## Development
+##  🔨 Development
 
 使用 Yarn Workspace 完成依赖安装以及各包之间的 link 工作：
 ```bash
@@ -123,6 +125,6 @@ yarn start
 visit http://localhost:8000/
 
 
-## License
+## ✅ License
 
 [MIT license](./LICENSE).
diff --git a/dev-docs/ConfigSchemaValidation.md b/dev-docs/ConfigSchemaValidation.md
index e8736469b8..0b17d579b3 100644
--- a/dev-docs/ConfigSchemaValidation.md
+++ b/dev-docs/ConfigSchemaValidation.md
@@ -12,6 +12,36 @@ Invalid configuration object. MyPlugin has been initialised using a configuratio
 和 Webpack 一样，我们也选择 [ajv](https://github.com/epoberezkin/ajv) 作为 JSON Schema 校验器。
 目前我们只在 Layer 初始阶段进行校验，一旦校验失败会中断后续初始化插件的处理，并在控制台给出校验失败信息。后续需要在属性更新时同样进行校验。
 
+## 地图参数校验
+
+当用户传入地图参数时，需要进行校验：
+```javascript
+// l7-core/services/config/mapConfigSchema.ts
+
+export default {
+  properties: {
+    // 地图缩放等级
+    zoom: {
+      type: 'number',
+      minimum: 0,
+      maximum: 20,
+    },
+    // 地图中心点
+    center: {
+      item: {
+        type: 'number',
+      },
+      maxItems: 2,
+      minItems: 2,
+    },
+    // 仰角
+    pitch: {
+      type: 'number',
+    },
+  },
+};
+```
+
 ## Layer 基类配置项 Schema
 
 目前在基类中我们声明了如下属性及其对应的校验规则：
diff --git a/dev-docs/IoC 容器、依赖注入与服务说明.md b/dev-docs/IoC 容器、依赖注入与服务说明.md
index 4d50bccf85..c154b448c6 100644
--- a/dev-docs/IoC 容器、依赖注入与服务说明.md	
+++ b/dev-docs/IoC 容器、依赖注入与服务说明.md	
@@ -171,6 +171,7 @@ protected getConfigSchema() {
 通过 `mapService` 引用。
 
 常用地图状态获取方法如下：
+
 | 方法名 | 参数 | 返回值 | 说明 |
 | -------- | ------------- | --------- | --------- |
 | getSize  | 无 | `[number, number]` | 获取地图尺寸（像素单位） |
@@ -196,7 +197,6 @@ protected getConfigSchema() {
 通过 `rendererService` 引用。
 
 
-
 ### 图层管理服务
 
 开发者不需要显式调用。用于管理场景中所有的图层，负责图层的创建、销毁。
diff --git a/dev-docs/使用方法.md b/dev-docs/使用方法.md
index ab21ebc66f..a8538ff11a 100644
--- a/dev-docs/使用方法.md
+++ b/dev-docs/使用方法.md
@@ -39,12 +39,13 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
       // 创建场景
       const scene = new L7.Scene({
         id: 'map', // 容器 id
-        type: 'mapbox', // 高德 amap 或者 mapbox
-        style: 'mapbox://styles/mapbox/streets-v9',
-        center: [110.19382669582967, 50.258134],
-        pitch: 0,
-        zoom: 3,
-        token: 'pg.xxx', // 高德或者 Mapbox 的 token
+        map: new L7.Mapbox({ // 高德地图为 L7.AMap
+          style: 'mapbox://styles/mapbox/streets-v9',
+          center: [110.19382669582967, 50.258134],
+          pitch: 0,
+          zoom: 3,
+          token: 'pg.xxx', // 高德或者 Mapbox 的 token
+        }),
       });
 
       // 创建图层
@@ -89,16 +90,17 @@ L7 提供三种使用方式：CDN、Submodule 以及 React 组件。
 
 ## 通过 Submodule 使用
 
-首先通过 `npm/yarn` 安装 `@antv/l7`：
+首先通过 `npm/yarn` 安装 `@antv/l7@beta`：
 ```bash
-npm install --save @antv/l7
+npm install --save @antv/l7@beta
 // or
-yarn add @antv/l7
+yarn add @antv/l7@beta
 ```
 
 然后就可以使用其中包含的场景和各类图层：
 ```typescript
 import { Scene, PolygonLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
 
 (async function() {
   // 获取数据
@@ -109,13 +111,14 @@ import { Scene, PolygonLayer } from '@antv/l7';
 
   // 创建场景
   const scene = new Scene({
-    center: [110.19382669582967, 50.258134],
     id: 'map',
-    pitch: 0,
-    style: 'dark',
-    type: 'amap',
-    zoom: 3,
-    token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    map: new AMap({
+      center: [110.19382669582967, 50.258134],
+      pitch: 0,
+      style: 'dark',
+      zoom: 3,
+      token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    }),
   });
 
   // 创建图层
@@ -151,9 +154,10 @@ L7 目前的文档都通过这种方式使用，可以参考项目中的 stories
 React 组件待开发，目前可以暂时以 Submodule 方式使用：
 ```tsx
 import { Scene, PolygonLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
 import * as React from 'react';
 
-export default class AMap extends React.Component {
+export default class AMapExample extends React.Component {
   private scene: Scene;
 
   public componentWillUnmount() {
@@ -165,13 +169,14 @@ export default class AMap extends React.Component {
       '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
+      map: new AMap({
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        style: 'dark',
+        zoom: 3,
+        token: 'pg.xxx', // 高德或者 Mapbox 的 token
+      }),
     });
     const layer = new PolygonLayer({});
 
diff --git a/dev-docs/构建方案.md b/dev-docs/构建方案.md
index 580a2f157e..33bb6d28b4 100644
--- a/dev-docs/构建方案.md
+++ b/dev-docs/构建方案.md
@@ -344,9 +344,9 @@ yarn build
 }
 ```
 
-### [WIP] 异步加载 Mapbox
+### 按需引入地图依赖
 
 以 L7 Bundler 方式使用时，由于需要在运行时根据用户配置项选择地图底图，会导致构建时需要将全部地图依赖引入，无法进行 TreeShaking。
 目前高德地图使用运行时异步加载方式引入，不会导致该问题，但 Mapbox 同样使用 Bundler，对于高德用户就多余了。
 
-一个可能的方案是对于 Mapbox 使用 CodeSplitting。在容器首次获取 Mapbox 地图服务时异步加载并缓存。
\ No newline at end of file
+[ISSUE](https://github.com/antvis/L7/issues/86)
diff --git a/dev-docs/自定义后处理效果.md b/dev-docs/自定义后处理效果.md
index 2d2bc401a4..527aa2775c 100644
--- a/dev-docs/自定义后处理效果.md
+++ b/dev-docs/自定义后处理效果.md
@@ -136,11 +136,12 @@ void main() {
 // 场景定义
 const scene = new Scene({
   id: 'map',
-  type: 'mapbox',
-  style: 'mapbox://styles/mapbox/streets-v9',
-  center: [110.19382669582967, 50.258134],
-  pitch: 0,
-  zoom: 3,
+  map: new Mapbox({
+    style: 'mapbox://styles/mapbox/streets-v9',
+    center: [110.19382669582967, 50.258134],
+    pitch: 0,
+    zoom: 3,
+  }),
 });
 // 注册自定义后处理效果
 scene.registerPostProcessingPass(
@@ -154,7 +155,6 @@ scene.registerPostProcessingPass(
 和 L7 内置的后处理效果使用方法一致，通过效果名引用，同时传入定义参数即可：
 ```typescript
 const layer = new PolygonLayer({
-  enableMultiPassRenderer: true,
   enablePicking: true,
   enableHighlight: true,
   passes: [
diff --git a/docs/api/component/control.zh.md b/docs/api/component/control.zh.md
index 16d9950e31..6f1809a4a4 100644
--- a/docs/api/component/control.zh.md
+++ b/docs/api/component/control.zh.md
@@ -7,39 +7,47 @@ order: 3
 地图组件 用于控制地图的状态如果平移，缩放，或者展示地图一些的辅助信息如图例，比例尺
 
 
-## 构造函数
+L7 目前支持Control
 
-```javascript
-const baseControl = new L7.Control.Base(option);
-```
+-  Zoom 放大缩小
+-  Scale 比例尺
+-  Layers 图层列表
+
+
+## 构造函数
 
 
 #### option
- position: `string` 控件位置支持是个方位 `bottomright, topright, bottomleft, topleft`
+ 
+position: `string` 控件位置支持是个方位 
+
+- bottomright
+- topright
+- bottomleft,
+- topleft`
 
 
-#### scene 内置地图组件
-zoom 地图放大缩小  默认添加<br />Scale 地图比例尺   默认添加<br />attribution 地图数据属性  默认添加<br />layer 图层列表
 
-**scene配置项设置控件添加状态**
+组件介绍
+
+```
+import { Scale Layers, Zoom } from '@antv/l7';
 
-```javascript
-scene = new L7.scene({
-   zoomControl: true,
-   scaleControl: true,
-   attributionControl: true
-})
 ```
 
-#### 
+
+
 
 #### Zoom
 放大缩小组件 默认 左上角
 
 ```javascript
- new L7.Control.Zoom({
+ const zoomControl = new  Zoom({
       position: 'topleft'
-    }).addTo(scene);
+    })
+
+ scene.addControl(zoomControl);
+
 ```
 
 
@@ -47,50 +55,34 @@ scene = new L7.scene({
 比例尺组件默认左下角
 
 ```javascript
- new L7.Control.Scale({
-      position: 'bottomleft'
-    }).addTo(scene);
-```
+  const zoomControl = new  Zoom({
+      position: 'topleft'
+    })
 
+ scene.addControl(zoomControl);
 
-#### attribution
-默认右下角
-
-```javascript
-new L7.Control.Attribution({
-      position: 'bottomleft'
-    }).addTo(scene);
 ```
 
 
 #### layer
-图层列表目前只支持可视化overlayers 图层控制
+图层列表目前支持可视化的图层控制
 
 ```javascript
- var overlayers = {
-        "围栏填充": layer,
-        "围栏边界": layer2
+
+ const overlayers = {
+        "点图层": layer,
+        
       };
-new L7.Control.Layers({
-  overlayers: overlayers
-}).addTo(scene);
+ const layersControl = new Layers({
+      overlayers
+    });
+scene.addControl(layersControl);
+
 ```
 
 
 ## 方法
 
-#### onAdd
-组件添加到地图Scene时调用，自定义组件时需要实现此方法
-
-
-#### addTo
-添加到地图scene
-
-```javascript
-control.addTo(scene);
-```
-
-
 #### setPosition
 设置组件位置
 
@@ -106,32 +98,3 @@ control.setPosition('bottomright');
 control.remove();
 ```
 
-
-
-## 示例代码
-
-
-#### 自定义图例控件
-[源码](https://antv.alipay.com/zh-cn/l7/1.x/demo/component/extendControl.html)
-
-```javascript
-var legend = new L7.Control.Base({
-        position: 'bottomright'
-      });
-      legend.onAdd = function() {
-        var el = document.createElement('div');
-        el.className = 'infolegend legend';
-        var grades = [0, 8, 15, 30, 65, 120];
-        for (var i = 0; i < grades.length; i++) {
-          el.innerHTML += '<i style="background:' + colors[i] + '"></i> ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
-        }
-        return el;
-      };
-      legend.addTo(scene);
-
-```
-
-## 
-
-## FAQ
-
diff --git a/docs/api/scene.en.md b/docs/api/scene.en.md
index 7a5f5c2eff..c069eff70b 100644
--- a/docs/api/scene.en.md
+++ b/docs/api/scene.en.md
@@ -10,19 +10,24 @@ order: 2
 ```javascript
 // Module 引用
 import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
-  mapStyle: 'dark',
-  center: [ 110.770672, 34.159869 ],
-  pitch: 45,
+  map: new GaodeMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
 });
 
 // CDN 使用方法
 const scene = new L7.Scene({
   id: 'map',
-  mapStyle: 'dark',
-  center: [ 110.770672, 34.159869 ],
-  pitch: 45,
+  map: new L7.GaodeMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
 });
 ```
 
@@ -43,20 +48,21 @@ const scene = new L7.Scene({
 可以通过scene map 属性获取 map实例
 
 ```javascript
- const map = scene.map
+const map = scene.map
 
 ```
-为了统一不通底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
+为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
 
 示例代码
 
 ```javascript
-import { Scene } from '@antv/l7';
 const scene =new L7.Scene({
-    id:'map',
-    mapStyle:'dark',
-    center:[ 110.770672, 34.159869 ],
-    pitch:45
+  id: 'map',
+  map: new L7.GaodeMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
 })
 ```
 
diff --git a/docs/api/scene.zh.md b/docs/api/scene.zh.md
index 7c69759b0e..966cd71f84 100644
--- a/docs/api/scene.zh.md
+++ b/docs/api/scene.zh.md
@@ -7,7 +7,29 @@ order: 2
 
 ## Scene
 
-L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理
+```javascript
+// Module 引用
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
+});
+
+// CDN 使用方法
+const scene = new L7.Scene({
+  id: 'map',
+  map: new L7.GaodeMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
+});
+```
 
 
 ## Map
@@ -26,7 +48,7 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
 可以通过scene map 属性获取 map实例
 
 ```javascript
- const map = scene.map
+const map = scene.map
 
 ```
 为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
@@ -34,24 +56,17 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
 示例代码
 
 ```javascript
-// Module 引用
-import { Scene } from '@antv/l7';
-const scene = new Scene({
+const scene =new L7.Scene({
   id: 'map',
-  mapStyle: 'dark',
-  center: [ 110.770672, 34.159869 ],
-  pitch: 45,
-});
-
-// CDN 使用方法
-const scene = new L7.Scene({
-  id: 'map',
-  mapStyle: 'dark',
-  center: [ 110.770672, 34.159869 ],
-  pitch: 45,
-});
+  map: new L7.GaodeMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
+})
 ```
 
+
 ### 构造函数
 
 **Scene** 
diff --git a/docs/tutorial/map/amap.en.md b/docs/tutorial/map/amap.en.md
index 82fcdbacee..39d3dee816 100644
--- a/docs/tutorial/map/amap.en.md
+++ b/docs/tutorial/map/amap.en.md
@@ -1,5 +1,5 @@
 ---
-title: AMap BaseMap
+title: GaodeMap BaseMap
 order: 0
 ---
 
@@ -35,13 +35,13 @@ order: 0
 ``` javascript
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
-    center: [120.19382669582967, 30.258134],
-    pitch: 0,
-    zoom: 12,
-    type:'amap',
-    token: '高德地图token'
-
+    map: new L7.GaodeMap({
+      style: 'dark', // 样式URL
+      center: [120.19382669582967, 30.258134],
+      pitch: 0,
+      zoom: 12,
+      token: '高德地图token',
+    }),
   });
 
 ```
@@ -111,12 +111,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
-    center: [120.19382669582967, 30.258134],
-    pitch: 0,
-    zoom: 12,
-    type:'amap',
-
+    map: new L7.GaodeMap({
+      style: 'dark', // 样式URL
+      center: [120.19382669582967, 30.258134],
+      pitch: 0,
+      zoom: 12,
+      token: '高德地图token',
+    }),
   });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
diff --git a/docs/tutorial/map/amap.zh.md b/docs/tutorial/map/amap.zh.md
index 5f14e1040b..7396f5b059 100644
--- a/docs/tutorial/map/amap.zh.md
+++ b/docs/tutorial/map/amap.zh.md
@@ -35,13 +35,13 @@ order: 0
 ``` javascript
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
-    center: [120.19382669582967, 30.258134],
-    pitch: 0,
-    zoom: 12,
-    type:'amap',
-    token: '高德地图token'
-
+    map: new L7.GaodeMap({
+      style: 'dark', // 样式URL
+      center: [120.19382669582967, 30.258134],
+      pitch: 0,
+      zoom: 12,
+      token: '高德地图token',
+    }),
   });
 
 ```
@@ -111,12 +111,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
-    center: [120.19382669582967, 30.258134],
-    pitch: 0,
-    zoom: 12,
-    type:'amap',
-
+    map: new L7.GaodeMap({
+      style: 'dark', // 样式URL
+      center: [120.19382669582967, 30.258134],
+      pitch: 0,
+      zoom: 12,
+      token: '高德地图token',
+    }),
   });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
diff --git a/docs/tutorial/map/mapbox.en.md b/docs/tutorial/map/mapbox.en.md
index 4b22282baf..fcf792add6 100644
--- a/docs/tutorial/map/mapbox.en.md
+++ b/docs/tutorial/map/mapbox.en.md
@@ -42,13 +42,13 @@ order: 0
 ``` javascript
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
-    center: [120.19382669582967, 30.258134],
-    pitch: 0,
-    zoom: 12,
-    type:'mapbox',
-    token: 'mapbox token'
-
+    map: new L7.Mapbox({
+      style: 'dark', // 样式URL
+      center: [120.19382669582967, 30.258134],
+      pitch: 0,
+      zoom: 12,
+      token: 'mapbox token',
+    }),
   });
 
 ```
@@ -118,12 +118,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 <script>
   const scene = new L7.Scene({
     id: 'map',
-    style: 'dark', // 样式URL
-    center: [120.19382669582967, 30.258134],
-    pitch: 0,
-    zoom: 12,
-    type:'amap',
-
+    map: new L7.Mapbox({
+      style: 'dark', // 样式URL
+      center: [120.19382669582967, 30.258134],
+      pitch: 0,
+      zoom: 12,
+      token: 'mapbox token',
+    }),
   });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
diff --git a/docs/tutorial/quickstart.en.md b/docs/tutorial/quickstart.en.md
index 276def0d14..5907fa077d 100644
--- a/docs/tutorial/quickstart.en.md
+++ b/docs/tutorial/quickstart.en.md
@@ -47,6 +47,7 @@ yarn add  --save @antv/l7@beta
 然后就可以使用其中包含的场景和各类图层：
 ```typescript
 import { Scene, PolygonLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 
 (async function() {
   // 获取数据
@@ -57,13 +58,14 @@ import { Scene, PolygonLayer } from '@antv/l7';
 
   // 创建场景
   const scene = new Scene({
-    center: [110.19382669582967, 50.258134],
     id: 'map',
-    pitch: 0,
-    style: 'dark',
-    type: 'amap',
-    zoom: 3,
-    token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    map: new GaodeMap({
+      center: [110.19382669582967, 50.258134],
+      pitch: 0,
+      style: 'dark',
+      zoom: 3,
+      token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    }),
   });
 
   // 创建图层
@@ -86,15 +88,12 @@ import { Scene, PolygonLayer } from '@antv/l7';
 
   // 添加图层到场景中
   scene.addLayer(layer);
-
-  // 渲染场景
-  scene.render();
 })();
 ```
 
 
 L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
-* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
+* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/GaodeMap.tsx)
 * [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
 
 
@@ -103,9 +102,10 @@ L7 目前的文档都通过这种方式使用，可以参考项目中的 stories
 React 组件待开发，目前可以暂时以 Submodule 方式使用：
 ```tsx
 import { Scene, PolygonLayer} from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
-export default class AMap extends React.Component {
+export default class GaodeMap extends React.Component {
   private scene: Scene;
 
   public componentWillUnmount() {
@@ -117,13 +117,14 @@ export default class AMap extends React.Component {
       '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
+      map: new GaodeMap({
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        style: 'dark',
+        zoom: 3,
+        token: 'pg.xxx', // 高德或者 Mapbox 的 token
+      }),
     });
     const layer = new PolygonLayer({});
 
@@ -143,7 +144,6 @@ export default class AMap extends React.Component {
         opacity: 0.8,
       });
     scene.addLayer(layer);
-    scene.render();
     this.scene = scene;
   }
 
diff --git a/docs/tutorial/quickstart.zh.md b/docs/tutorial/quickstart.zh.md
index 7a054b2e52..1b37860175 100644
--- a/docs/tutorial/quickstart.zh.md
+++ b/docs/tutorial/quickstart.zh.md
@@ -47,6 +47,7 @@ yarn add  --save @antv/l7@beta
 然后就可以使用其中包含的场景和各类图层：
 ```typescript
 import { Scene, PolygonLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 
 (async function() {
   // 获取数据
@@ -57,13 +58,14 @@ import { Scene, PolygonLayer } from '@antv/l7';
 
   // 创建场景
   const scene = new Scene({
-    center: [110.19382669582967, 50.258134],
     id: 'map',
-    pitch: 0,
-    style: 'dark',
-    type: 'amap',
-    zoom: 3,
-    token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    map: new GaodeMap({
+      center: [110.19382669582967, 50.258134],
+      pitch: 0,
+      style: 'dark',
+      zoom: 3,
+      token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    }),
   });
 
   // 创建图层
@@ -86,15 +88,12 @@ import { Scene, PolygonLayer } from '@antv/l7';
 
   // 添加图层到场景中
   scene.addLayer(layer);
-
-  // 渲染场景
-  scene.render();
 })();
 ```
 
 
 L7 目前的文档都通过这种方式使用，可以参考项目中的 stories：
-* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/AMap.tsx)
+* [高德地图](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/GaodeMap.tsx)
 * [Mapbox](https://github.com/antvis/L7/blob/next/stories/MapAdaptor/components/Mapbox.tsx)
 
 
@@ -103,9 +102,10 @@ L7 目前的文档都通过这种方式使用，可以参考项目中的 stories
 React 组件待开发，目前可以暂时以 Submodule 方式使用：
 ```tsx
 import { Scene, PolygonLayer} from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
-export default class AMap extends React.Component {
+export default class GaodeMap extends React.Component {
   private scene: Scene;
 
   public componentWillUnmount() {
@@ -117,13 +117,14 @@ export default class AMap extends React.Component {
       '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
+      map: new GaodeMap({
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        style: 'dark',
+        zoom: 3,
+        token: 'pg.xxx', // 高德或者 Mapbox 的 token
+      }),
     });
     const layer = new PolygonLayer({});
 
@@ -143,7 +144,6 @@ export default class AMap extends React.Component {
         opacity: 0.8,
       });
     scene.addLayer(layer);
-    scene.render();
     this.scene = scene;
   }
 
diff --git a/examples/gallery/basic/demo/arcCircle.js b/examples/gallery/basic/demo/arcCircle.js
index b146911eea..c64c1f1eb5 100644
--- a/examples/gallery/basic/demo/arcCircle.js
+++ b/examples/gallery/basic/demo/arcCircle.js
@@ -1,13 +1,16 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'dark',
-  center: [ 107.77791556935472, 35.443286920228644 ],
-  zoom: 2.9142882493605033
+  map: new Mapbox({
+    style: 'dark',
+    pitch: 0,
+    center: [ 107.77791556935472, 35.443286920228644 ],
+    zoom: 2.9142882493605033
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
   .then(res => res.text())
   .then(data => {
diff --git a/examples/gallery/basic/demo/bus_dark.js b/examples/gallery/basic/demo/bus_dark.js
index 8827fe4144..f93a386b80 100644
--- a/examples/gallery/basic/demo/bus_dark.js
+++ b/examples/gallery/basic/demo/bus_dark.js
@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  center: [ 103.83735604457024, 1.360253881403068 ],
-  pitch: 4.00000000000001,
-  zoom: 10.210275860702593,
-  rotation: 19.313180925794313,
-  type: 'mapbox',
-  style: 'dark'
+  map: new Mapbox({
+    style: 'dark',
+    center: [ 103.83735604457024, 1.360253881403068 ],
+    pitch: 4.00000000000001,
+    zoom: 10.210275860702593,
+    rotation: 19.313180925794313
+  })
 });
 
 fetch(
diff --git a/examples/gallery/basic/demo/column_dark.js b/examples/gallery/basic/demo/column_dark.js
index 9308b7b8fc..b2c3ea49fe 100644
--- a/examples/gallery/basic/demo/column_dark.js
+++ b/examples/gallery/basic/demo/column_dark.js
@@ -1,13 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 35.210526315789465,
-  type: 'amap',
-  style: 'dark',
-  center: [ 104.288144, 31.239692 ],
-  zoom: 4.4
+  map: new GaodeMap({
+    pitch: 35.210526315789465,
+    style: 'dark',
+    center: [ 104.288144, 31.239692 ],
+    zoom: 4.4
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
   .then(res => res.json())
   .then(data => {
diff --git a/examples/gallery/basic/demo/light.js b/examples/gallery/basic/demo/light.js
index e9003bd989..bf723d7e05 100644
--- a/examples/gallery/basic/demo/light.js
+++ b/examples/gallery/basic/demo/light.js
@@ -1,15 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
-  pitch: 43,
-  center: [ 120.13383079335335, 29.651873105004427 ],
-  zoom: 7.068989519212174,
-  type: 'mapbox'
+  map: new Mapbox({
+    style: 'dark',
+    pitch: 43,
+    center: [ 120.13383079335335, 29.651873105004427 ],
+    zoom: 7.068989519212174
+  })
 });
 
-window.mapScene = scene;
-
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
 )
diff --git a/examples/gallery/basic/demo/normal.js b/examples/gallery/basic/demo/normal.js
index 02f6b5c522..efddb8fd1a 100644
--- a/examples/gallery/basic/demo/normal.js
+++ b/examples/gallery/basic/demo/normal.js
@@ -1,14 +1,15 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
-  style: 'dark',
-  center: [ 121.417463, 31.215175 ],
-  pitch: 0,
-  zoom: 11
+  map: new GaodeMap({
+    center: [ 121.417463, 31.215175 ],
+    pitch: 0,
+    zoom: 11
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
   .then(res => res.text())
   .then(data => {
diff --git a/examples/gallery/basic/demo/point.js b/examples/gallery/basic/demo/point.js
index 90544ac834..f7943a9cc1 100644
--- a/examples/gallery/basic/demo/point.js
+++ b/examples/gallery/basic/demo/point.js
@@ -1,13 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 64.88,
-  type: 'amap',
-  style: 'dark',
-  center: [ 114.060288, 22.53684 ],
-  zoom: 15.63
+  map: new GaodeMap({
+    pitch: 64.88,
+    style: 'dark',
+    center: [ 114.060288, 22.53684 ],
+    zoom: 15.63
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
 )
diff --git a/examples/heatmap/grid/demo/china.js b/examples/heatmap/grid/demo/china.js
index ed4d905e4c..91b2dcccd2 100644
--- a/examples/heatmap/grid/demo/china.js
+++ b/examples/heatmap/grid/demo/china.js
@@ -1,13 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'light',
-  pitch: 0,
-  center: [ 107.054293, 35.246265 ],
-  zoom: 4.056,
-  type: 'amap'
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )
diff --git a/examples/heatmap/grid/demo/grid1.js b/examples/heatmap/grid/demo/grid1.js
index bae6518f1c..714214f22e 100644
--- a/examples/heatmap/grid/demo/grid1.js
+++ b/examples/heatmap/grid/demo/grid1.js
@@ -1,13 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
-  pitch: 0,
-  center: [ 110.097892, 33.853662 ],
-  zoom: 4.056,
-  type: 'amap'
+  map: new GaodeMap({
+    style: 'dark',
+    pitch: 0,
+    center: [ 110.097892, 33.853662 ],
+    zoom: 4.056
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )
diff --git a/examples/heatmap/grid/demo/heatmap3.js b/examples/heatmap/grid/demo/heatmap3.js
index b910353cf5..53dda2e450 100644
--- a/examples/heatmap/grid/demo/heatmap3.js
+++ b/examples/heatmap/grid/demo/heatmap3.js
@@ -1,11 +1,14 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'light',
-  pitch: 0,
-  center: [ 110.097892, 33.853662 ],
-  zoom: 4.056,
-  type: 'amap'
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 110.097892, 33.853662 ],
+    zoom: 4.056
+  })
 });
 
 fetch(
diff --git a/examples/heatmap/grid/demo/world.js b/examples/heatmap/grid/demo/world.js
index efa07a2378..116fbed6f9 100644
--- a/examples/heatmap/grid/demo/world.js
+++ b/examples/heatmap/grid/demo/world.js
@@ -1,14 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
-  pitch: 0,
-  center: [ 110.097892, 33.853662 ],
-  zoom: 4.056,
-  type: 'amap'
+  map: new GaodeMap({
+    style: 'dark',
+    pitch: 0,
+    center: [ 110.097892, 33.853662 ],
+    zoom: 4.056
+  })
 });
 
-window.mapScene = scene;
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )
diff --git a/examples/heatmap/heatmap/demo/heatmap.js b/examples/heatmap/heatmap/demo/heatmap.js
index 890eae042c..495b42778b 100644
--- a/examples/heatmap/heatmap/demo/heatmap.js
+++ b/examples/heatmap/heatmap/demo/heatmap.js
@@ -1,11 +1,14 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
-  pitch: 0,
-  center: [ 127.5671666579043, 7.445038892195569 ],
-  type: 'mapbox',
-  zoom: 2.632456779444394
+  map: new Mapbox({
+    style: 'dark',
+    pitch: 0,
+    center: [ 127.5671666579043, 7.445038892195569 ],
+    zoom: 2.632456779444394
+  })
 });
 
 fetch(
diff --git a/examples/heatmap/heatmap/demo/heatmap3d.js b/examples/heatmap/heatmap/demo/heatmap3d.js
index d8c7417b14..52334e0ab4 100644
--- a/examples/heatmap/heatmap/demo/heatmap3d.js
+++ b/examples/heatmap/heatmap/demo/heatmap3d.js
@@ -1,14 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
-  pitch: 58.5,
-  center: [ 111.8759, 30.6942 ],
-  rotation: 0.519,
-  type: 'mapbox',
-  zoom: 3.6116
+  map: new Mapbox({
+    style: 'dark',
+    pitch: 58.5,
+    center: [ 111.8759, 30.6942 ],
+    rotation: 0.519,
+    zoom: 3.6116
+  })
 });
-window.mapScene = scene;
 
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
diff --git a/examples/heatmap/heatmap/demo/heatmap_purple.js b/examples/heatmap/heatmap/demo/heatmap_purple.js
index dc7f578655..cd4382a48d 100644
--- a/examples/heatmap/heatmap/demo/heatmap_purple.js
+++ b/examples/heatmap/heatmap/demo/heatmap_purple.js
@@ -1,11 +1,14 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
-  pitch: 0,
-  center: [ 127.5671666579043, 7.445038892195569 ],
-  type: 'mapbox',
-  zoom: 2.632456779444394
+  map: new Mapbox({
+    style: 'dark',
+    pitch: 0,
+    center: [ 127.5671666579043, 7.445038892195569 ],
+    zoom: 2.632456779444394
+  })
 });
 
 fetch(
diff --git a/examples/heatmap/hexagon/demo/china.js b/examples/heatmap/hexagon/demo/china.js
index 03a2afc650..3074425609 100644
--- a/examples/heatmap/hexagon/demo/china.js
+++ b/examples/heatmap/hexagon/demo/china.js
@@ -1,13 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
-  pitch: 47.49999999999995,
-  center: [ 112.50447776627743, 30.830476390931125 ],
-  zoom: 3.9879693680088626,
-  type: 'mapbox'
+  map: new Mapbox({
+    style: 'dark',
+    pitch: 47.49999999999995,
+    center: [ 112.50447776627743, 30.830476390931125 ],
+    zoom: 3.9879693680088626
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )
diff --git a/examples/heatmap/hexagon/demo/hexagon.js b/examples/heatmap/hexagon/demo/hexagon.js
index a8c88c6998..d68e931e25 100644
--- a/examples/heatmap/hexagon/demo/hexagon.js
+++ b/examples/heatmap/hexagon/demo/hexagon.js
@@ -1,14 +1,17 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'light',
-  pitch: 56.499,
-  center: [ 114.07737552216226, 22.542656745583486 ],
-  rotation: 39.19,
-  zoom: 12.47985,
-  type: 'mapbox'
+  map: new Mapbox({
+    style: 'light',
+    pitch: 56.499,
+    center: [ 114.07737552216226, 22.542656745583486 ],
+    rotation: 39.19,
+    zoom: 12.47985
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
 )
diff --git a/examples/heatmap/hexagon/demo/light.js b/examples/heatmap/hexagon/demo/light.js
index e9003bd989..bf723d7e05 100644
--- a/examples/heatmap/hexagon/demo/light.js
+++ b/examples/heatmap/hexagon/demo/light.js
@@ -1,15 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'dark',
-  pitch: 43,
-  center: [ 120.13383079335335, 29.651873105004427 ],
-  zoom: 7.068989519212174,
-  type: 'mapbox'
+  map: new Mapbox({
+    style: 'dark',
+    pitch: 43,
+    center: [ 120.13383079335335, 29.651873105004427 ],
+    zoom: 7.068989519212174
+  })
 });
 
-window.mapScene = scene;
-
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
 )
diff --git a/examples/heatmap/hexagon/demo/world.js b/examples/heatmap/hexagon/demo/world.js
index dcf3c75c4d..261e44893c 100644
--- a/examples/heatmap/hexagon/demo/world.js
+++ b/examples/heatmap/hexagon/demo/world.js
@@ -1,11 +1,14 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  style: 'light',
-  pitch: 0,
-  center: [ 104.995156, 31.450658 ],
-  type: 'amap',
-  zoom: 3.79
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 104.995156, 31.450658 ],
+    zoom: 3.79
+  })
 });
 
 fetch(
diff --git a/examples/line/arc/demo/arc.js b/examples/line/arc/demo/arc.js
index 7da1c8b128..d58d92b78f 100644
--- a/examples/line/arc/demo/arc.js
+++ b/examples/line/arc/demo/arc.js
@@ -1,12 +1,16 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'dark',
-  center: [ 0, 23.107329 ],
-  zoom: 0
+  map: new Mapbox({
+    pitch: 0,
+    style: 'dark',
+    center: [ 0, 23.107329 ],
+    zoom: 0
+  })
 });
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json'
 )
diff --git a/examples/line/arc/demo/arcCircle.js b/examples/line/arc/demo/arcCircle.js
index e0592e91cf..3fb1f37441 100644
--- a/examples/line/arc/demo/arcCircle.js
+++ b/examples/line/arc/demo/arcCircle.js
@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'dark',
-  center: [ 107.77791556935472, 35.443286920228644 ],
-  zoom: 2.9142882493605033
+  map: new Mapbox({
+    pitch: 0,
+    style: 'dark',
+    center: [ 107.77791556935472, 35.443286920228644 ],
+    zoom: 2.9142882493605033
+  })
 });
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
   .then(res => res.text())
diff --git a/examples/line/arc/demo/trip_arc.js b/examples/line/arc/demo/trip_arc.js
index aee084549a..735d15076e 100644
--- a/examples/line/arc/demo/trip_arc.js
+++ b/examples/line/arc/demo/trip_arc.js
@@ -1,11 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 60,
-  type: 'mapbox',
-  style: 'light',
-  center: [ -74.06967, 40.720399 ],
-  zoom: 12.45977
+  map: new Mapbox({
+    pitch: 60,
+    type: 'mapbox',
+    style: 'light',
+    center: [ -74.06967, 40.720399 ],
+    zoom: 12.45977
+  })
 });
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
diff --git a/examples/line/arc/demo/trip_arc_dark.js b/examples/line/arc/demo/trip_arc_dark.js
index efed67f4c4..5a2f7d20e8 100644
--- a/examples/line/arc/demo/trip_arc_dark.js
+++ b/examples/line/arc/demo/trip_arc_dark.js
@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 60,
-  type: 'mapbox',
-  style: 'dark',
-  center: [ 104.34278, 41.12554 ],
-  zoom: 2.94888,
-  rotation: 42.3999
+  map: new Mapbox({
+    pitch: 60,
+    style: 'dark',
+    center: [ 104.34278, 41.12554 ],
+    zoom: 2.94888,
+    rotation: 42.3999
+  })
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
diff --git a/examples/line/isoline/demo/ele.js b/examples/line/isoline/demo/ele.js
index 7ec7faf05c..bced2a4d0b 100644
--- a/examples/line/isoline/demo/ele.js
+++ b/examples/line/isoline/demo/ele.js
@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 53.6305,
-  type: 'amap',
-  style: 'light',
-  center: [ 102.600579, 23.114887 ],
-  zoom: 14.66
+  map: new GaodeMap({
+    pitch: 53.6305,
+    style: 'light',
+    center: [ 102.600579, 23.114887 ],
+    zoom: 14.66
+  })
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
diff --git a/examples/line/isoline/demo/ele_dark.js b/examples/line/isoline/demo/ele_dark.js
index 272c067cf1..e1381edb7d 100644
--- a/examples/line/isoline/demo/ele_dark.js
+++ b/examples/line/isoline/demo/ele_dark.js
@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 26.842105263157915,
-  type: 'amap',
-  style: 'dark',
-  center: [ 102.599436, 23.116371 ],
-  zoom: 14.78
+  map: new GaodeMap({
+    pitch: 26.842105263157915,
+    style: 'dark',
+    center: [ 102.599436, 23.116371 ],
+    zoom: 14.78
+  })
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
diff --git a/examples/line/isoline/demo/isoline.js b/examples/line/isoline/demo/isoline.js
index e1e5aa4fb3..feebbd0066 100644
--- a/examples/line/isoline/demo/isoline.js
+++ b/examples/line/isoline/demo/isoline.js
@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [ 104.117492, 36.492696 ],
-  zoom: 3.89
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'light',
+    center: [ 104.117492, 36.492696 ],
+    zoom: 3.89
+  })
 });
 
 fetch(
diff --git a/examples/line/line/demo/isoline.js b/examples/line/line/demo/isoline.js
index e1e5aa4fb3..feebbd0066 100644
--- a/examples/line/line/demo/isoline.js
+++ b/examples/line/line/demo/isoline.js
@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [ 104.117492, 36.492696 ],
-  zoom: 3.89
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'light',
+    center: [ 104.117492, 36.492696 ],
+    zoom: 3.89
+  })
 });
 
 fetch(
diff --git a/examples/line/path/demo/bus_dark.js b/examples/line/path/demo/bus_dark.js
index edeec43a5d..95b40e2686 100644
--- a/examples/line/path/demo/bus_dark.js
+++ b/examples/line/path/demo/bus_dark.js
@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  center: [ 103.83735, 1.3602538 ],
-  pitch: 4.00000000000001,
-  zoom: 10.210275860702593,
-  rotation: 19.313180925794313,
-  type: 'mapbox',
-  style: 'dark'
+  map: new Mapbox({
+    center: [ 103.83735, 1.3602538 ],
+    pitch: 4.00000000000001,
+    zoom: 10.210275860702593,
+    rotation: 19.313180925794313,
+    style: 'dark'
+  })
 });
 
 fetch(
diff --git a/examples/line/path/demo/bus_light.js b/examples/line/path/demo/bus_light.js
index 5f2bc7b881..693331944f 100644
--- a/examples/line/path/demo/bus_light.js
+++ b/examples/line/path/demo/bus_light.js
@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  center: [ 103.83735604457024, 1.360253881403068 ],
-  pitch: 4.00000000000001,
-  zoom: 10.210275860702593,
-  rotation: 19.313180925794313,
-  type: 'mapbox',
-  style: 'light'
+  map: new Mapbox({
+    center: [ 103.83735604457024, 1.360253881403068 ],
+    pitch: 4.00000000000001,
+    zoom: 10.210275860702593,
+    rotation: 19.313180925794313,
+    style: 'light'
+  })
 });
 
 fetch(
diff --git a/examples/line/path/demo/road_dark.js b/examples/line/path/demo/road_dark.js
index 0a9b9a96e3..0fc137a7d6 100644
--- a/examples/line/path/demo/road_dark.js
+++ b/examples/line/path/demo/road_dark.js
@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  center: [ 116.3956, 39.9392 ],
-  pitch: 0,
-  zoom: 10,
-  rotation: 0,
-  type: 'mapbox',
-  style: 'dark'
+  map: new Mapbox({
+    center: [ 116.3956, 39.9392 ],
+    pitch: 0,
+    zoom: 10,
+    rotation: 0,
+    style: 'dark'
+  })
 });
 
 fetch(
diff --git a/examples/line/path/demo/road_light.js b/examples/line/path/demo/road_light.js
index 2b87ef7fbf..4acf0bfea1 100644
--- a/examples/line/path/demo/road_light.js
+++ b/examples/line/path/demo/road_light.js
@@ -1,12 +1,15 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  center: [ 116.3956, 39.9392 ],
-  pitch: 0,
-  zoom: 10,
-  rotation: 0,
-  type: 'mapbox',
-  style: 'light'
+  map: new Mapbox({
+    center: [ 116.3956, 39.9392 ],
+    pitch: 0,
+    zoom: 10,
+    rotation: 0,
+    style: 'light'
+  })
 });
 
 fetch(
diff --git a/examples/point/bubble/demo/color.js b/examples/point/bubble/demo/color.js
index b23edb9df4..47b8b8fa83 100644
--- a/examples/point/bubble/demo/color.js
+++ b/examples/point/bubble/demo/color.js
@@ -1,13 +1,15 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [ 121.435159, 31.256971 ],
-  zoom: 14.89,
-  minZoom: 10
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'light',
+    center: [ 121.435159, 31.256971 ],
+    zoom: 14.89,
+    minZoom: 10
+  })
 });
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
diff --git a/examples/point/bubble/demo/point.js b/examples/point/bubble/demo/point.js
index 7838f9369b..e167950498 100644
--- a/examples/point/bubble/demo/point.js
+++ b/examples/point/bubble/demo/point.js
@@ -1,12 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [ 140.067171, 36.26186 ],
-  zoom: 5.32,
-  maxZoom: 10
+  map: new GaodeMap({
+    pitch: 0,
+    type: 'amap',
+    style: 'light',
+    center: [ 140.067171, 36.26186 ],
+    zoom: 5.32,
+    maxZoom: 10
+  })
 });
 
 fetch(
diff --git a/examples/point/bubble/demo/scatter.js b/examples/point/bubble/demo/scatter.js
index 136571b925..f09afbfdce 100644
--- a/examples/point/bubble/demo/scatter.js
+++ b/examples/point/bubble/demo/scatter.js
@@ -1,11 +1,14 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
-  style: 'light',
-  center: [ -121.24357, 37.58264 ],
-  pitch: 0,
-  zoom: 6.45
+  map: new GaodeMap({
+    style: 'light',
+    center: [ -121.24357, 37.58264 ],
+    pitch: 0,
+    zoom: 6.45
+  })
 });
 
 fetch(
diff --git a/examples/point/bubble/demo/world.js b/examples/point/bubble/demo/world.js
index a2b2ad0e42..b30c794a67 100644
--- a/examples/point/bubble/demo/world.js
+++ b/examples/point/bubble/demo/world.js
@@ -1,12 +1,15 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'dark',
-  center: [ 96.99215001469588, 29.281597225674773 ],
-  zoom: 2.194613775109773,
-  maxZoom: 10
+  map: new Mapbox({
+    pitch: 0,
+    style: 'dark',
+    center: [ 96.99215001469588, 29.281597225674773 ],
+    zoom: 2.194613775109773,
+    maxZoom: 10
+  })
 });
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
diff --git a/examples/point/chart/demo/bar.js b/examples/point/chart/demo/bar.js
index cbbe427c05..05c16e3507 100644
--- a/examples/point/chart/demo/bar.js
+++ b/examples/point/chart/demo/bar.js
@@ -1,12 +1,15 @@
 import { Scene, Marker } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as G2 from '@antv/g2';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
-  style: 'light',
-  center: [ 2.6125016864608597, 49.359131 ],
-  pitch: 0,
-  zoom: 4.19
+  map: new GaodeMap({
+    style: 'light',
+    center: [ 2.6125016864608597, 49.359131 ],
+    pitch: 0,
+    zoom: 4.19
+  })
 });
 scene.render();
 scene.on('loaded', () => {
diff --git a/examples/point/chart/demo/chart.js b/examples/point/chart/demo/chart.js
index e6d3521b23..abe7a089fb 100644
--- a/examples/point/chart/demo/chart.js
+++ b/examples/point/chart/demo/chart.js
@@ -1,12 +1,15 @@
 import { Scene, Marker } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as G2 from '@antv/g2';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
-  style: 'light',
-  center: [ 2.6125016864608597, 49.359131 ],
-  pitch: 0,
-  zoom: 4.19
+  map: new GaodeMap({
+    style: 'light',
+    center: [ 2.6125016864608597, 49.359131 ],
+    pitch: 0,
+    zoom: 4.19
+  })
 });
 scene.render();
 scene.on('loaded', () => {
diff --git a/examples/point/chart/demo/ring.js b/examples/point/chart/demo/ring.js
index 54363a5d5d..9dbad9079b 100644
--- a/examples/point/chart/demo/ring.js
+++ b/examples/point/chart/demo/ring.js
@@ -1,4 +1,5 @@
 import { Scene, Marker } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as G2 from '@antv/g2';
 
 const CSS = `.l7-marker .g2-guide-html {
@@ -36,11 +37,12 @@ loadCssCode(CSS);
 
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'dark',
-  center: [ 52.21496184144132, 24.121126851768906 ],
-  zoom: 3.802
+  map: new Mapbox({
+    pitch: 0,
+    style: 'dark',
+    center: [ 52.21496184144132, 24.121126851768906 ],
+    zoom: 3.802
+  })
 });
 scene.render();
 scene.on('loaded', () => {
diff --git a/examples/point/column/demo/clumn_shape.js b/examples/point/column/demo/clumn_shape.js
index a42a9efe09..a0d134a043 100644
--- a/examples/point/column/demo/clumn_shape.js
+++ b/examples/point/column/demo/clumn_shape.js
@@ -1,14 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 66.02383,
-  type: 'amap',
-  style: 'dark',
-  center: [ 121.400257, 31.25287 ],
-  zoom: 14.55,
-  rotation: 134.9507
+  map: new GaodeMap({
+    pitch: 66.02383,
+    style: 'dark',
+    center: [ 121.400257, 31.25287 ],
+    zoom: 14.55,
+    rotation: 134.9507
+  })
 });
-window.mapScene = scene;
 
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
diff --git a/examples/point/column/demo/clumn_shape_light.js b/examples/point/column/demo/clumn_shape_light.js
index 86adec4ec2..c3ad3a2cb0 100644
--- a/examples/point/column/demo/clumn_shape_light.js
+++ b/examples/point/column/demo/clumn_shape_light.js
@@ -1,14 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 60,
-  type: 'mapbox',
-  style: 'light',
-  center: [ 121.412224, 31.26192438 ],
-  zoom: 13.13438,
-  rotation: 35.97133
+  map: new Mapbox({
+    pitch: 60,
+    style: 'light',
+    center: [ 121.412224, 31.26192438 ],
+    zoom: 13.13438,
+    rotation: 35.97133
+  })
 });
-window.mapScene = scene;
 
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
diff --git a/examples/point/column/demo/column_dark.js b/examples/point/column/demo/column_dark.js
index 19a62a865a..b2c3ea49fe 100644
--- a/examples/point/column/demo/column_dark.js
+++ b/examples/point/column/demo/column_dark.js
@@ -1,14 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  pitch: 35.210526315789465,
-  type: 'amap',
-  style: 'dark',
-  center: [ 104.288144, 31.239692 ],
-  zoom: 4.4
+  map: new GaodeMap({
+    pitch: 35.210526315789465,
+    style: 'dark',
+    center: [ 104.288144, 31.239692 ],
+    zoom: 4.4
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
   .then(res => res.json())
   .then(data => {
diff --git a/examples/point/column/demo/column_light.js b/examples/point/column/demo/column_light.js
index 3663d33fc5..e8470d47e7 100644
--- a/examples/point/column/demo/column_light.js
+++ b/examples/point/column/demo/column_light.js
@@ -1,14 +1,17 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 48.62562,
-  type: 'amap',
-  style: 'light',
-  center: [ 104.026043, 31.847 ],
-  rotation: -0.76,
-  zoom: 4.48
+  map: new GaodeMap({
+    pitch: 48.62562,
+    style: 'light',
+    center: [ 104.026043, 31.847 ],
+    rotation: -0.76,
+    zoom: 4.48
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
   .then(res => res.json())
   .then(data => {
diff --git a/examples/point/image/demo/image.js b/examples/point/image/demo/image.js
index 7527385370..0d1f731f61 100644
--- a/examples/point/image/demo/image.js
+++ b/examples/point/image/demo/image.js
@@ -1,11 +1,14 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [ 121.434765, 31.256735 ],
-  zoom: 14.83
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'light',
+    center: [ 121.434765, 31.256735 ],
+    zoom: 14.83
+  })
 });
 
 fetch(
diff --git a/examples/point/image/demo/locate.js b/examples/point/image/demo/locate.js
index 1fe607a556..cffb6f6c25 100644
--- a/examples/point/image/demo/locate.js
+++ b/examples/point/image/demo/locate.js
@@ -1,11 +1,14 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [ 116.276227, 35.256776 ],
-  zoom: 6
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'light',
+    center: [ 116.276227, 35.256776 ],
+    zoom: 6
+  })
 });
 
 fetch(
diff --git a/examples/point/image/demo/weather.js b/examples/point/image/demo/weather.js
index ee50c7c78f..2dea6c9f46 100644
--- a/examples/point/image/demo/weather.js
+++ b/examples/point/image/demo/weather.js
@@ -1,12 +1,15 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
-  style: 'dark',
-  center: [ 120.5969, 29.7918 ],
-  pitch: 35,
-  zoom: 7,
-  rotation: 4.183582
+  map: new GaodeMap({
+    style: 'dark',
+    center: [ 120.5969, 29.7918 ],
+    pitch: 35,
+    zoom: 7,
+    rotation: 4.183582
+  })
 });
 scene.addImage(
   '00',
diff --git a/examples/point/marker/demo/marker.js b/examples/point/marker/demo/marker.js
index be35cfe81f..fa523846d8 100644
--- a/examples/point/marker/demo/marker.js
+++ b/examples/point/marker/demo/marker.js
@@ -1,11 +1,14 @@
 import { Scene, Marker } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
-  style: 'light',
-  center: [ 105.790327, 36.495636 ],
-  pitch: 0,
-  zoom: 4
+  map: new GaodeMap({
+    style: 'light',
+    center: [ 105.790327, 36.495636 ],
+    pitch: 0,
+    zoom: 4
+  })
 });
 scene.render();
 scene.on('loaded', () => {
diff --git a/examples/point/scatter/demo/normal.js b/examples/point/scatter/demo/normal.js
index 64e85903fa..154d3ff439 100644
--- a/examples/point/scatter/demo/normal.js
+++ b/examples/point/scatter/demo/normal.js
@@ -1,13 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
-  style: 'dark',
-  center: [ 121.417463, 31.215175 ],
-  pitch: 0,
-  zoom: 11
+  map: new GaodeMap({
+    style: 'dark',
+    center: [ 121.417463, 31.215175 ],
+    pitch: 0,
+    zoom: 11
+  })
 });
-window.mapScene = scene;
+
 fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
   .then(res => res.text())
   .then(data => {
diff --git a/examples/point/scatter/demo/normal2.js b/examples/point/scatter/demo/normal2.js
index 90544ac834..f7943a9cc1 100644
--- a/examples/point/scatter/demo/normal2.js
+++ b/examples/point/scatter/demo/normal2.js
@@ -1,13 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 64.88,
-  type: 'amap',
-  style: 'dark',
-  center: [ 114.060288, 22.53684 ],
-  zoom: 15.63
+  map: new GaodeMap({
+    pitch: 64.88,
+    style: 'dark',
+    center: [ 114.060288, 22.53684 ],
+    zoom: 15.63
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
 )
diff --git a/examples/polygon/3d/demo/polygon.js b/examples/polygon/3d/demo/polygon.js
index d35193c9d5..eb576e9911 100644
--- a/examples/polygon/3d/demo/polygon.js
+++ b/examples/polygon/3d/demo/polygon.js
@@ -1,14 +1,16 @@
 import { Scene, PolygonLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'dark',
-  center: [ 114.050008, 22.529272 ],
-  zoom: 14.1
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'dark',
+    center: [ 114.050008, 22.529272 ],
+    zoom: 14.1
+  })
 });
 
-window.mapScene = scene;
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
 )
diff --git a/examples/polygon/fill/demo/fill.js b/examples/polygon/fill/demo/fill.js
index 1970c12f1b..c316b593e7 100644
--- a/examples/polygon/fill/demo/fill.js
+++ b/examples/polygon/fill/demo/fill.js
@@ -1,13 +1,16 @@
 import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [ 116.368652, 39.93866 ],
-  zoom: 10.07
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'light',
+    center: [ 116.368652, 39.93866 ],
+    zoom: 10.07
+  })
 });
-window.mapScene = scene;
+
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'
 )
diff --git a/examples/polygon/fill/demo/polygon.js b/examples/polygon/fill/demo/polygon.js
index a86e29d3f3..a5b2b9db05 100644
--- a/examples/polygon/fill/demo/polygon.js
+++ b/examples/polygon/fill/demo/polygon.js
@@ -1,11 +1,14 @@
 import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [ 107.042225, 37.66565 ],
-  zoom: 3.87
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'light',
+    center: [ 107.042225, 37.66565 ],
+    zoom: 3.87
+  })
 });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
diff --git a/examples/polygon/fill/demo/population.js b/examples/polygon/fill/demo/population.js
index 48f17f3ff6..4e89fda2fa 100644
--- a/examples/polygon/fill/demo/population.js
+++ b/examples/polygon/fill/demo/population.js
@@ -1,11 +1,14 @@
 import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'mapbox',
-  style: 'light',
-  center: [ 3.438, 40.16797 ],
-  zoom: 0.51329
+  map: new Mapbox({
+    pitch: 0,
+    style: 'light',
+    center: [ 3.438, 40.16797 ],
+    zoom: 0.51329
+  })
 });
 Promise.all([
   fetch(
diff --git a/examples/raster/basic/demo/image.js b/examples/raster/basic/demo/image.js
index e0f091adf9..3348b62c6f 100644
--- a/examples/raster/basic/demo/image.js
+++ b/examples/raster/basic/demo/image.js
@@ -1,11 +1,14 @@
 import { Scene, ImageLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'light',
-  center: [ 121.268, 30.3628 ],
-  zoom: 13
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'light',
+    center: [ 121.268, 30.3628 ],
+    zoom: 13
+  })
 });
 
 const layer = new ImageLayer({});
diff --git a/examples/raster/basic/demo/radar.js b/examples/raster/basic/demo/radar.js
index 49b8cbb2eb..783c981251 100644
--- a/examples/raster/basic/demo/radar.js
+++ b/examples/raster/basic/demo/radar.js
@@ -1,11 +1,14 @@
 import { Scene, ImageLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
-  type: 'amap',
-  style: 'dark',
-  center: [ 115.5268, 34.3628 ],
-  zoom: 7
+  map: new GaodeMap({
+    pitch: 0,
+    style: 'dark',
+    center: [ 115.5268, 34.3628 ],
+    zoom: 7
+  })
 });
 
 const layer = new ImageLayer({});
diff --git a/examples/tutorial/control/demo/amap.js b/examples/tutorial/control/demo/amap.js
new file mode 100644
index 0000000000..0fac489045
--- /dev/null
+++ b/examples/tutorial/control/demo/amap.js
@@ -0,0 +1,53 @@
+import { PointLayer, Scale, Scene, Layers, Zoom } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 121.4316962, 31.26082325 ],
+    zoom: 15.056
+  })
+});
+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('circle')
+        .size('unit_price', [ 5, 25 ])
+        .color('name', [ '#49B5AD', '#5B8FF9' ])
+        .style({
+          opacity: 0.3,
+          strokeWidth: 1
+        });
+
+    scene.addLayer(pointLayer);
+    const overlayers = {
+      围栏填充: pointLayer
+    };
+    const layersControl = new Layers({
+      overlayers
+    });
+
+    scene.addControl(layersControl);
+
+  });
+
+
+const zoomControl = new Zoom({
+  position: 'topright'
+});
+const scaleControl = new Scale({
+  position: 'bottomright'
+});
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+
diff --git a/examples/tutorial/control/demo/mapbox.js b/examples/tutorial/control/demo/mapbox.js
new file mode 100644
index 0000000000..29d546c756
--- /dev/null
+++ b/examples/tutorial/control/demo/mapbox.js
@@ -0,0 +1,17 @@
+import { Scale, Zoom, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+});
+
+const zoomControl = new Zoom();
+const scaleControl = new Scale();
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+
diff --git a/examples/tutorial/control/demo/meta.json b/examples/tutorial/control/demo/meta.json
new file mode 100644
index 0000000000..7e0fad15f0
--- /dev/null
+++ b/examples/tutorial/control/demo/meta.json
@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "高德底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*yXzQRYcGTyoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/tutorial/control/index.en.md b/examples/tutorial/control/index.en.md
new file mode 100644
index 0000000000..a9978df6dc
--- /dev/null
+++ b/examples/tutorial/control/index.en.md
@@ -0,0 +1,5 @@
+---
+title: control
+order: 2
+---
+How to use the map control
diff --git a/examples/tutorial/control/index.zh.md b/examples/tutorial/control/index.zh.md
new file mode 100644
index 0000000000..d6dbf5be7b
--- /dev/null
+++ b/examples/tutorial/control/index.zh.md
@@ -0,0 +1,5 @@
+---
+title: 组件
+order: 2
+---
+如何使用组件
diff --git a/examples/tutorial/data/demo/line.js b/examples/tutorial/data/demo/line.js
new file mode 100644
index 0000000000..de86a0fa73
--- /dev/null
+++ b/examples/tutorial/data/demo/line.js
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 0000000000..3368f7c835
--- /dev/null
+++ b/examples/tutorial/data/demo/meta.json
@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "图库",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "line.js",
+      "title": "json数据"",
+      "screenshot": ""
+    }
+  ]
+}
diff --git a/examples/tutorial/data/index.en.md b/examples/tutorial/data/index.en.md
new file mode 100644
index 0000000000..77bfc9dc39
--- /dev/null
+++ b/examples/tutorial/data/index.en.md
@@ -0,0 +1,6 @@
+---
+title: Data
+order: 1
+---
+
+coming soon ……
diff --git a/examples/tutorial/data/index.zh.md b/examples/tutorial/data/index.zh.md
new file mode 100644
index 0000000000..497c3edaab
--- /dev/null
+++ b/examples/tutorial/data/index.zh.md
@@ -0,0 +1,5 @@
+---
+title: 数据
+order: 1
+---
+在路上 ……
diff --git a/examples/tutorial/map/demo/amap.js b/examples/tutorial/map/demo/amap.js
new file mode 100644
index 0000000000..de86a0fa73
--- /dev/null
+++ b/examples/tutorial/map/demo/amap.js
@@ -0,0 +1,11 @@
+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/map/demo/mapbox.js b/examples/tutorial/map/demo/mapbox.js
new file mode 100644
index 0000000000..6c82028835
--- /dev/null
+++ b/examples/tutorial/map/demo/mapbox.js
@@ -0,0 +1,11 @@
+import { Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+});
diff --git a/examples/tutorial/map/demo/meta.json b/examples/tutorial/map/demo/meta.json
new file mode 100644
index 0000000000..17980c8053
--- /dev/null
+++ b/examples/tutorial/map/demo/meta.json
@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "高德底图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*F0JPSoLcSesAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/tutorial/map/index.en.md b/examples/tutorial/map/index.en.md
new file mode 100644
index 0000000000..3565f11732
--- /dev/null
+++ b/examples/tutorial/map/index.en.md
@@ -0,0 +1,6 @@
+---
+title: map
+order: 0
+---
+
+how to  use L7 Initialize third-party maps
diff --git a/examples/tutorial/map/index.zh.md b/examples/tutorial/map/index.zh.md
new file mode 100644
index 0000000000..640cb22e79
--- /dev/null
+++ b/examples/tutorial/map/index.zh.md
@@ -0,0 +1,7 @@
+---
+title: 地图
+order: 0
+---
+介绍如何初始化一个第三方底图
+
+
diff --git a/examples/tutorial/marker/demo/amap.js b/examples/tutorial/marker/demo/amap.js
new file mode 100644
index 0000000000..4c220d00df
--- /dev/null
+++ b/examples/tutorial/marker/demo/amap.js
@@ -0,0 +1,21 @@
+import { Scene, Marker, Popup } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    style: 'light',
+    pitch: 0,
+    center: [ 121.4316962, 31.26082325 ],
+    zoom: 12.056
+  })
+});
+// 创建默认 marker
+const popup = new Popup({
+  offsets: [ 0, 20 ]
+}).setText('hello');
+
+const marker = new Marker()
+  .setLnglat([ 121.4316962, 31.26082325 ])
+  .setPopup(popup);
+
+scene.addMarker(marker);
diff --git a/examples/tutorial/marker/demo/mapbox.js b/examples/tutorial/marker/demo/mapbox.js
new file mode 100644
index 0000000000..29d546c756
--- /dev/null
+++ b/examples/tutorial/marker/demo/mapbox.js
@@ -0,0 +1,17 @@
+import { Scale, Zoom, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    style: 'light',
+    pitch: 0,
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
+});
+
+const zoomControl = new Zoom();
+const scaleControl = new Scale();
+scene.addControl(zoomControl);
+scene.addControl(scaleControl);
+
diff --git a/examples/tutorial/marker/demo/meta.json b/examples/tutorial/marker/demo/meta.json
new file mode 100644
index 0000000000..87f95e2b00
--- /dev/null
+++ b/examples/tutorial/marker/demo/meta.json
@@ -0,0 +1,18 @@
+{
+  "title": {
+    "zh": "地图",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "amap.js",
+      "title": "添加默认Marker",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Gzj7SYk-vdEAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "mapbox.js",
+      "title": "MapBox底图组件",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*_SIYR50bbcoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/tutorial/marker/index.en.md b/examples/tutorial/marker/index.en.md
new file mode 100644
index 0000000000..03045d11ef
--- /dev/null
+++ b/examples/tutorial/marker/index.en.md
@@ -0,0 +1,5 @@
+---
+title: control
+order: 2
+---
+add  Rich text  annotation  to scene
diff --git a/examples/tutorial/marker/index.zh.md b/examples/tutorial/marker/index.zh.md
new file mode 100644
index 0000000000..7dedb73b14
--- /dev/null
+++ b/examples/tutorial/marker/index.zh.md
@@ -0,0 +1,5 @@
+---
+title: Marker
+order: 2
+---
+通过添加dom实现富文本地图标注
diff --git a/gatsby-browser.js b/gatsby-browser.js
index 138b7c520d..487778f8c1 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -4,3 +4,4 @@ require('./packages/component/src/css/l7.css');
 window.geotiff = require('geotiff/dist/geotiff.bundle.min.js');
 window.g2 = require('@antv/g2');
 window.l7 = require('@antv/l7');
+window.l7Maps = require('@antv/l7-maps');
diff --git a/lerna.json b/lerna.json
index 5f0405037d..0240652b66 100644
--- a/lerna.json
+++ b/lerna.json
@@ -9,9 +9,7 @@
       ],
       "allowBranch": [
         "master",
-        "develop",
-        "next",
-        "dev-container"
+        "next"
       ],
       "message": "chore: publish"
     }
diff --git a/package.json b/package.json
index 2ce7fe1bef..39419f4eec 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,7 @@
     "worker-loader": "^2.0.0"
   },
   "scripts": {
-    "start": "npm run site:develop",
+    "start": "npm run site:clean && npm run site:develop",
     "site:develop": "BABEL_ENV=site gatsby develop --open -H 0.0.0.0",
     "site:build": "npm run site:clean && BABEL_ENV=site gatsby build --prefix-paths",
     "site:clean": "gatsby clean",
diff --git a/packages/component/src/control/layer.ts b/packages/component/src/control/layer.ts
index d48725eb66..8235c70443 100644
--- a/packages/component/src/control/layer.ts
+++ b/packages/component/src/control/layer.ts
@@ -33,14 +33,8 @@ export default class Layers extends Control {
     this.layers = [];
     this.lastZIndex = 0;
     this.handlingClick = false;
-    const { baseLayers = {}, overlayers = {} } = this.controlOption;
+    this.initLayers();
 
-    Object.keys(baseLayers).forEach((name: string, index: number) => {
-      this.addLayer(baseLayers[name], name, false);
-    });
-    Object.keys(overlayers).forEach((name: any, index: number) => {
-      this.addLayer(overlayers[name], name, true);
-    });
     bindAll(
       [
         'checkDisabledLayers',
@@ -131,6 +125,17 @@ export default class Layers extends Control {
     this.overlaysList = DOM.create('div', className + '-overlays', form);
     container.appendChild(form);
   }
+  private initLayers() {
+    const { baseLayers = {}, overlayers = {} } = this.controlOption;
+    Object.keys(baseLayers).forEach((name: string, index: number) => {
+      // baseLayers[name].once('inited', this.update);
+      this.addLayer(baseLayers[name], name, false);
+    });
+    Object.keys(overlayers).forEach((name: any, index: number) => {
+      // overlayers[name].once('inited', this.update);
+      this.addLayer(overlayers[name], name, true);
+    });
+  }
 
   private update() {
     if (!this.container) {
@@ -177,7 +182,7 @@ export default class Layers extends Control {
       input = inputs[i];
       layer = this.layerService.getLayer(input.layerId);
       if (layer) {
-        input.disabled = !layer.isVisible();
+        input.disabled = !layer.inited || !layer.isVisible();
       }
     }
   }
@@ -251,10 +256,9 @@ export default class Layers extends Control {
 
   private addItem(obj: any) {
     const label = document.createElement('label');
-    const checked =
-      this.layerService.getLayer(obj.layer.id) && obj.layer.isVisible();
+    const layer = this.layerService.getLayer(obj.layer.id);
+    const checked = layer && layer.inited && obj.layer.isVisible();
     let input: IInputItem;
-
     if (obj.overlay) {
       input = document.createElement('input') as IInputItem;
       input.type = 'checkbox';
diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts
index 0d47b968a1..5740662377 100644
--- a/packages/component/src/marker.ts
+++ b/packages/component/src/marker.ts
@@ -1,5 +1,6 @@
-import { ILngLat, IMapService, IMarkerScene, IPopup } from '@antv/l7-core';
+import { ILngLat, IMapService, IPoint, IPopup, TYPES } from '@antv/l7-core';
 import { bindAll, DOM } from '@antv/l7-utils';
+import { Container } from 'inversify';
 import { anchorTranslate, anchorType, applyAnchorClass } from './utils/anchor';
 //  marker 支持 dragger 未完成
 
@@ -14,9 +15,9 @@ export default class Marker {
   private markerOption: IMarkerOption;
   private defaultMarker: boolean;
   private popup: IPopup; // TODO: POPup
-  private mapservice: IMapService;
+  private mapsService: IMapService<unknown>;
   private lngLat: ILngLat;
-  private scene: IMarkerScene;
+  private scene: Container;
   constructor(option?: Partial<IMarkerOption>) {
     this.markerOption = {
       ...this.getDefault(),
@@ -36,29 +37,27 @@ export default class Marker {
     };
   }
 
-  public addTo(scene: IMarkerScene) {
-    this.scene = scene;
-    const mapService = scene.getMapService();
-    const { element, draggable } = this.markerOption;
+  public addTo(scene: Container) {
     this.remove();
-    this.mapservice = mapService;
-    mapService.getMarkerContainer().appendChild(element as HTMLElement);
-    mapService.on('camerachange', this.update);
+    this.scene = scene;
+    this.mapsService = scene.get<IMapService>(TYPES.IMapService);
+    const { element, draggable } = this.markerOption;
+    this.mapsService.getMarkerContainer().appendChild(element as HTMLElement);
+    this.mapsService.on('camerachange', this.update);
     // this.setDraggable(draggable);
     this.update();
     return this;
   }
 
   public remove() {
-    if (this.mapservice) {
-      this.mapservice.off('click', this.onMapClick);
-      this.mapservice.off('move', this.update);
-      this.mapservice.off('moveend', this.update);
-      this.mapservice.off('mousedown', this.addDragHandler);
-      this.mapservice.off('touchstart', this.addDragHandler);
-      this.mapservice.off('mouseup', this.onUp);
-      this.mapservice.off('touchend', this.onUp);
-      delete this.mapservice;
+    if (this.mapsService) {
+      this.mapsService.off('click', this.onMapClick);
+      this.mapsService.off('move', this.update);
+      this.mapsService.off('moveend', this.update);
+      this.mapsService.off('mousedown', this.addDragHandler);
+      this.mapsService.off('touchstart', this.addDragHandler);
+      this.mapsService.off('mouseup', this.onUp);
+      this.mapsService.off('touchend', this.onUp);
     }
     const { element } = this.markerOption;
     if (element) {
@@ -70,8 +69,15 @@ export default class Marker {
     return this;
   }
 
-  public setLnglat(lngLat: ILngLat) {
-    this.lngLat = lngLat;
+  public setLnglat(lngLat: ILngLat | IPoint) {
+    this.lngLat = lngLat as ILngLat;
+    if (Array.isArray(lngLat)) {
+      this.lngLat = {
+        lng: lngLat[0],
+        lat: lngLat[1],
+      };
+    }
+
     if (this.popup) {
       this.popup.setLnglat(this.lngLat);
     }
@@ -86,6 +92,14 @@ export default class Marker {
     return this.markerOption.element as HTMLElement;
   }
 
+  public setPopup(popup: IPopup) {
+    this.popup = popup;
+    if (this.lngLat) {
+      this.popup.setLnglat(this.lngLat);
+    }
+    return this;
+  }
+
   public togglePopup() {
     const popup = this.popup;
     if (!popup) {
@@ -115,7 +129,7 @@ export default class Marker {
   }
 
   private update() {
-    if (!this.mapservice) {
+    if (!this.mapsService) {
       return;
     }
     const { element, anchor } = this.markerOption;
@@ -131,12 +145,12 @@ export default class Marker {
   }
 
   private updatePosition() {
-    if (!this.mapservice) {
+    if (!this.mapsService) {
       return;
     }
     const { element } = this.markerOption;
     const { lng, lat } = this.lngLat;
-    const pos = this.mapservice.lngLatToContainer([lng, lat]);
+    const pos = this.mapsService.lngLatToContainer([lng, lat]);
     if (element) {
       element.style.left = pos.x + 'px';
       element.style.top = pos.y + 'px';
diff --git a/packages/component/src/popup.ts b/packages/component/src/popup.ts
index e80ff912c3..b72653a452 100644
--- a/packages/component/src/popup.ts
+++ b/packages/component/src/popup.ts
@@ -1,6 +1,7 @@
-import { ILngLat, IMapService, IMarkerScene, IPopup } from '@antv/l7-core';
+import { ILngLat, IMapService, IPoint, IPopup, TYPES } from '@antv/l7-core';
 import { bindAll, DOM } from '@antv/l7-utils';
 import { EventEmitter } from 'eventemitter3';
+import { Container } from 'inversify';
 import { anchorTranslate, anchorType, applyAnchorClass } from './utils/anchor';
 
 /** colse event */
@@ -15,7 +16,7 @@ export interface IPopupOption {
 }
 export default class Popup extends EventEmitter implements IPopup {
   private popupOption: IPopupOption;
-  private mapservice: IMapService;
+  private mapsService: IMapService<unknown>;
   private lngLat: ILngLat;
   private content: HTMLElement;
   private closeButton: HTMLElement;
@@ -32,14 +33,13 @@ export default class Popup extends EventEmitter implements IPopup {
     bindAll(['update', 'onClickClose', 'remove'], this);
   }
 
-  public addTo(scene: IMarkerScene) {
-    const mapService = scene.getMapService();
-    this.mapservice = mapService;
-    this.mapservice.on('camerachange', this.update);
+  public addTo(scene: Container) {
+    this.mapsService = scene.get<IMapService>(TYPES.IMapService);
+    this.mapsService.on('camerachange', this.update);
     this.update();
     if (this.popupOption.closeOnClick) {
       this.timeoutInstance = setTimeout(() => {
-        this.mapservice.on('click', this.onClickClose);
+        this.mapsService.on('click', this.onClickClose);
       }, 30);
     }
     return this;
@@ -62,9 +62,15 @@ export default class Popup extends EventEmitter implements IPopup {
   }
 
   public setLnglat(lngLat: ILngLat): this {
-    this.lngLat = lngLat;
-    if (this.mapservice) {
-      this.mapservice.on('camerachange', this.update);
+    this.lngLat = lngLat as ILngLat;
+    if (Array.isArray(lngLat)) {
+      this.lngLat = {
+        lng: lngLat[0],
+        lat: lngLat[1],
+      };
+    }
+    if (this.mapsService) {
+      this.mapsService.on('camerachange', this.update);
     }
     this.update();
     return this;
@@ -99,18 +105,18 @@ export default class Popup extends EventEmitter implements IPopup {
       this.removeDom(this.container);
       delete this.container;
     }
-    if (this.mapservice) {
+    if (this.mapsService) {
       // TODO: mapbox AMap 事件同步
-      this.mapservice.off('camerachange', this.update);
-      this.mapservice.off('click', this.onClickClose);
-      delete this.mapservice;
+      this.mapsService.off('camerachange', this.update);
+      this.mapsService.off('click', this.onClickClose);
+      delete this.mapsService;
     }
     clearTimeout(this.timeoutInstance);
     this.emit('close');
     return this;
   }
   public isOpen() {
-    return !!this.mapservice;
+    return !!this.mapsService;
   }
 
   private createContent() {
@@ -166,10 +172,10 @@ export default class Popup extends EventEmitter implements IPopup {
   private update() {
     const hasPosition = this.lngLat;
     const { className, maxWidth, anchor } = this.popupOption;
-    if (!this.mapservice || !hasPosition || !this.content) {
+    if (!this.mapsService || !hasPosition || !this.content) {
       return;
     }
-    const markerContainer = this.mapservice.getMarkerContainer();
+    const markerContainer = this.mapsService.getMarkerContainer();
     if (!this.container && markerContainer) {
       this.container = this.creatDom(
         'div',
@@ -198,12 +204,12 @@ export default class Popup extends EventEmitter implements IPopup {
   }
 
   private updatePosition() {
-    if (!this.mapservice) {
+    if (!this.mapsService) {
       return;
     }
     const { lng, lat } = this.lngLat;
     const { offsets } = this.popupOption;
-    const pos = this.mapservice.lngLatToContainer([lng, lat]);
+    const pos = this.mapsService.lngLatToContainer([lng, lat]);
     this.container.style.left = pos.x + offsets[0] + 'px';
     this.container.style.top = pos.y - offsets[1] + 'px';
   }
diff --git a/packages/core/package.json b/packages/core/package.json
index 0af5886cb4..0e6bb45d27 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -31,7 +31,6 @@
     "inversify": "^5.0.1",
     "inversify-inject-decorators": "^3.1.0",
     "lodash": "^4.17.15",
-    "mapbox-gl": "^1.2.1",
     "merge-json-schemas": "^1.0.0",
     "probe.gl": "^3.1.1",
     "reflect-metadata": "^0.1.13",
@@ -39,7 +38,6 @@
     "viewport-mercator-project": "^6.2.1"
   },
   "devDependencies": {
-    "@types/amap-js-api": "^1.4.6",
     "@types/gl-matrix": "^2.4.5",
     "@types/hammerjs": "^2.0.36",
     "@types/lodash": "^4.14.138",
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index e62bd21ecb..e29e8933ec 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -43,7 +43,7 @@ export * from './services/asset/IIconService';
 export * from './services/asset/IFontService';
 export * from './services/component/IControlService';
 export * from './services/component/IMarkerService';
-export * from './services/component/IPopUpService';
+export * from './services/component/IPopupService';
 export * from './services/log/ILogService';
 export * from './services/interaction/IInteractionService';
 
diff --git a/packages/core/src/inversify.config.ts b/packages/core/src/inversify.config.ts
index c4ddedf5fd..9c1f0f18f6 100644
--- a/packages/core/src/inversify.config.ts
+++ b/packages/core/src/inversify.config.ts
@@ -28,6 +28,8 @@ import FontService from './services/asset/FontService';
 import IconService from './services/asset/IconService';
 import CameraService from './services/camera/CameraService';
 import ControlService from './services/component/ControlService';
+import MarkerService from './services/component/MarkerService';
+import PopupService from './services/component/PopupService';
 import GlobalConfigService from './services/config/ConfigService';
 import CoordinateSystemService from './services/coordinate/CoordinateSystemService';
 import InteractionService from './services/interaction/InteractionService';
@@ -38,6 +40,8 @@ import SceneService from './services/scene/SceneService';
 import ShaderModuleService from './services/shader/ShaderModuleService';
 
 /** PostProcessing passes */
+import { IMarkerService } from './services/component/IMarkerService';
+import { IPopupService } from './services/component/IPopupService';
 import {
   IMultiPassRenderer,
   IPass,
@@ -181,6 +185,15 @@ export function createSceneContainer() {
     .bind<IControlService>(TYPES.IControlService)
     .to(ControlService)
     .inSingletonScope();
+  sceneContainer
+    .bind<IMarkerService>(TYPES.IMarkerService)
+    .to(MarkerService)
+    .inSingletonScope();
+
+  sceneContainer
+    .bind<IPopupService>(TYPES.IPopupService)
+    .to(PopupService)
+    .inSingletonScope();
 
   // 绑定常规 passes
   sceneContainer
diff --git a/packages/core/src/services/component/ControlService.ts b/packages/core/src/services/component/ControlService.ts
index 6ba71d9ac0..0f0c6de019 100644
--- a/packages/core/src/services/component/ControlService.ts
+++ b/packages/core/src/services/component/ControlService.ts
@@ -1,26 +1,36 @@
 import { DOM } from '@antv/l7-utils';
 import { Container, injectable } from 'inversify';
+import { TYPES } from '../../types';
+import { IMapService } from '../map/IMapService';
 import {
   IControl,
   IControlCorners,
   IControlService,
   IControlServiceCfg,
 } from './IControlService';
-
 @injectable()
 export default class ControlService implements IControlService {
   public container: HTMLElement;
   public controlCorners: IControlCorners;
   public controlContainer: HTMLElement;
+  public scene: Container;
+  public mapsService: IMapService;
   private controls: IControl[] = [];
-  public init(cfg: IControlServiceCfg) {
+  private unAddControls: IControl[] = [];
+  public init(cfg: IControlServiceCfg, sceneContainer: Container) {
     this.container = cfg.container;
+    this.scene = sceneContainer;
+    this.mapsService = sceneContainer.get<IMapService>(TYPES.IMapService);
     this.initControlPos();
   }
-
   public addControl(ctr: IControl, sceneContainer: Container): void {
-    ctr.addTo(sceneContainer); // scene对象
-    this.controls.push(ctr);
+    const mapsService = sceneContainer.get<IMapService>(TYPES.IMapService);
+    if (mapsService.map) {
+      ctr.addTo(this.scene); // scene对象
+      this.controls.push(ctr);
+    } else {
+      this.unAddControls.push(ctr);
+    }
   }
   public removeControl(ctr: IControl): this {
     const index = this.controls.indexOf(ctr);
@@ -31,6 +41,14 @@ export default class ControlService implements IControlService {
     return this;
   }
 
+  public addControls() {
+    this.unAddControls.forEach((ctr: IControl) => {
+      ctr.addTo(this.scene); // scene对象
+      this.controls.push(ctr);
+    });
+    this.unAddControls = [];
+  }
+
   public destroy(): void {
     for (const ctr of this.controls) {
       ctr.remove();
diff --git a/packages/core/src/services/component/IControlService.ts b/packages/core/src/services/component/IControlService.ts
index fd8a98313c..e7bd40da13 100644
--- a/packages/core/src/services/component/IControlService.ts
+++ b/packages/core/src/services/component/IControlService.ts
@@ -26,7 +26,8 @@ export interface IControlService {
   container: HTMLElement;
   controlCorners: IControlCorners;
   controlContainer: HTMLElement;
-  init(cfg: IControlServiceCfg): void;
+  addControls(): void;
+  init(cfg: IControlServiceCfg, sceneContainer: Container): void;
   addControl(ctr: IControl, sceneContainer: Container): void;
   removeControl(ctr: IControl): void;
   destroy(): void;
diff --git a/packages/core/src/services/component/IMarkerService.ts b/packages/core/src/services/component/IMarkerService.ts
index a20a190a2e..1792f48c3e 100644
--- a/packages/core/src/services/component/IMarkerService.ts
+++ b/packages/core/src/services/component/IMarkerService.ts
@@ -1,13 +1,28 @@
-import { ILngLat, IMapService } from '../map/IMapService';
+import { Container, injectable } from 'inversify';
+import { ILngLat, IMapService, IPoint } from '../map/IMapService';
+import { IPopup } from './IPopupService';
 export interface IMarkerScene {
-  getMapService(): IMapService;
+  getMapService(): IMapService<unknown>;
   [key: string]: any;
 }
+
+export interface IMarkerServiceCfg {
+  container: HTMLElement;
+}
 export interface IMarker {
-  addTo(scene: IMarkerScene): void;
+  addTo(scene: Container): void;
   remove(): void;
-  setLnglat(lngLat: ILngLat): this;
+  setLnglat(lngLat: ILngLat | IPoint): this;
   getLnglat(): ILngLat;
   getElement(): HTMLElement;
+  setPopup(popup: IPopup): void;
   togglePopup(): this;
 }
+export interface IMarkerService {
+  container: HTMLElement;
+  addMarker(Marker: IMarker): void;
+  addMarkers(): void;
+  removeMarker(Marker: IMarker): void;
+  init(scene: Container): void;
+  destroy(): void;
+}
diff --git a/packages/core/src/services/component/IPopUpService.ts b/packages/core/src/services/component/IPopupService.ts
similarity index 55%
rename from packages/core/src/services/component/IPopUpService.ts
rename to packages/core/src/services/component/IPopupService.ts
index af4d3a1c36..271650185c 100644
--- a/packages/core/src/services/component/IPopUpService.ts
+++ b/packages/core/src/services/component/IPopupService.ts
@@ -1,7 +1,8 @@
+import { Container } from 'inversify';
 import { ILngLat, IMapService } from '../map/IMapService';
-import { IMarkerScene } from './IMarkerService';
+
 export interface IPopup {
-  addTo(scene: IMarkerScene): this;
+  addTo(scene: Container): this;
   remove(): void;
   setLnglat(lngLat: ILngLat): this;
   getLnglat(): ILngLat;
@@ -10,3 +11,9 @@ export interface IPopup {
   setMaxWidth(maxWidth: string): this;
   isOpen(): boolean;
 }
+export interface IPopupService {
+  addPopup(popup: IPopup): void;
+  removePopup(popup: IPopup): void;
+  init(scene: Container): void;
+  destroy(): void;
+}
diff --git a/packages/core/src/services/component/MarkerService.ts b/packages/core/src/services/component/MarkerService.ts
new file mode 100644
index 0000000000..6ae5995f26
--- /dev/null
+++ b/packages/core/src/services/component/MarkerService.ts
@@ -0,0 +1,41 @@
+import { Container, injectable } from 'inversify';
+import { TYPES } from '../../types';
+import { IMapService } from '../map/IMapService';
+import { IMarker, IMarkerService, IMarkerServiceCfg } from './IMarkerService';
+
+@injectable()
+export default class MarkerService implements IMarkerService {
+  public container: HTMLElement;
+  private scene: Container;
+  private mapsService: IMapService;
+  private markers: IMarker[] = [];
+  private unAddMarkers: IMarker[] = [];
+  public addMarker(marker: IMarker): void {
+    if (!this.mapsService.map) {
+      this.unAddMarkers.push(marker);
+    } else {
+      this.markers.push(marker);
+      marker.addTo(this.scene);
+    }
+  }
+  public addMarkers(): void {
+    this.unAddMarkers.forEach((marker: IMarker) => {
+      marker.addTo(this.scene);
+      this.markers.push(marker);
+    });
+    this.unAddMarkers = [];
+  }
+  public removeMarker(marker: IMarker): void {
+    marker.remove();
+  }
+  public init(scene: Container): void {
+    // this.container = cfg.container;
+    this.scene = scene;
+    this.mapsService = scene.get<IMapService>(TYPES.IMapService);
+  }
+  public destroy(): void {
+    this.markers.forEach((marker: IMarker) => {
+      marker.remove();
+    });
+  }
+}
diff --git a/packages/core/src/services/component/PopupService.ts b/packages/core/src/services/component/PopupService.ts
new file mode 100644
index 0000000000..cdde3d992b
--- /dev/null
+++ b/packages/core/src/services/component/PopupService.ts
@@ -0,0 +1,28 @@
+import { Container, injectable } from 'inversify';
+import { TYPES } from '../../types';
+import { IMapService } from '../map/IMapService';
+import { IPopup, IPopupService } from './IPopupService';
+
+@injectable()
+export default class PopupService implements IPopupService {
+  private scene: Container;
+  private popup: IPopup;
+
+  public removePopup(popup: IPopup): void {
+    popup.remove();
+  }
+
+  public destroy(): void {
+    this.popup.remove();
+  }
+
+  public addPopup(popup: IPopup) {
+    this.popup.remove();
+    popup.addTo(this.scene);
+    this.popup = popup;
+  }
+
+  public init(scene: Container) {
+    this.scene = scene;
+  }
+}
diff --git a/packages/core/src/services/config/ConfigService.ts b/packages/core/src/services/config/ConfigService.ts
index 79269a79bb..b51ed8374e 100644
--- a/packages/core/src/services/config/ConfigService.ts
+++ b/packages/core/src/services/config/ConfigService.ts
@@ -2,16 +2,14 @@ import Ajv from 'ajv';
 import { injectable, postConstruct } from 'inversify';
 import { ILayerConfig } from '../layer/ILayerService';
 import { IGlobalConfigService, ISceneConfig } from './IConfigService';
+import mapConfigSchema from './mapConfigSchema';
 import sceneConfigSchema from './sceneConfigSchema';
 
 /**
  * 场景默认配置项
  */
 const defaultSceneConfig: Partial<ISceneConfig> = {
-  type: 'amap',
-  zoom: 5,
-  center: [107.622, 39.266],
-  pitch: 0,
+  id: 'map',
 };
 
 /**
@@ -79,6 +77,11 @@ export default class GlobalConfigService implements IGlobalConfigService {
    */
   private sceneConfigValidator: Ajv.ValidateFunction;
 
+  /**
+   * 地图配置项校验器
+   */
+  private mapConfigValidator: Ajv.ValidateFunction;
+
   /**
    * 全部图层配置项缓存
    */
@@ -108,6 +111,10 @@ export default class GlobalConfigService implements IGlobalConfigService {
     return this.validate(this.sceneConfigValidator, data);
   }
 
+  public validateMapConfig(data: object) {
+    return this.validate(this.mapConfigValidator, data);
+  }
+
   public getLayerConfig<IChildLayerConfig>(
     layerId: string,
   ): Partial<ILayerConfig & ISceneConfig & IChildLayerConfig> {
@@ -146,6 +153,7 @@ export default class GlobalConfigService implements IGlobalConfigService {
   @postConstruct()
   private registerSceneConfigSchemaValidator() {
     this.sceneConfigValidator = ajv.compile(sceneConfigSchema);
+    this.mapConfigValidator = ajv.compile(mapConfigSchema);
   }
 
   private validate(
diff --git a/packages/core/src/services/config/IConfigService.ts b/packages/core/src/services/config/IConfigService.ts
index 260c7af68f..ccb657264f 100644
--- a/packages/core/src/services/config/IConfigService.ts
+++ b/packages/core/src/services/config/IConfigService.ts
@@ -1,9 +1,12 @@
 import Ajv from 'ajv';
 import { ILayerConfig } from '../layer/ILayerService';
-import { IMapConfig } from '../map/IMapService';
+import { IMapWrapper } from '../map/IMapService';
 import { IRenderConfig } from '../renderer/IRendererService';
 
-export type ISceneConfig = IMapConfig & IRenderConfig;
+export interface ISceneConfig extends IRenderConfig {
+  id: string;
+  map: IMapWrapper;
+}
 
 interface IValidateResult {
   valid: boolean;
@@ -25,6 +28,12 @@ export interface IGlobalConfigService {
    */
   validateSceneConfig(data: object): IValidateResult;
 
+  /**
+   * 校验用户传入的地图配置项
+   * @param data 地图配置项
+   */
+  validateMapConfig(data: object): IValidateResult;
+
   /**
    * 获取图层配置项
    * @param layerId 图层 ID
diff --git a/packages/core/src/services/config/__tests__/schema.spec.ts b/packages/core/src/services/config/__tests__/schema.spec.ts
index 565bad951b..7e532b9a28 100644
--- a/packages/core/src/services/config/__tests__/schema.spec.ts
+++ b/packages/core/src/services/config/__tests__/schema.spec.ts
@@ -1,12 +1,99 @@
+import { Container } from 'inversify';
 import 'reflect-metadata';
-import ConfigService from '../ConfigService';
+import { TYPES } from '../../../index';
+import GlobalConfigService from '../ConfigService';
 import { IGlobalConfigService } from '../IConfigService';
 
 describe('ConfigService', () => {
+  let container: Container;
   let configService: IGlobalConfigService;
 
-  beforeEach(() => {
-    configService = new ConfigService();
+  beforeAll(() => {
+    container = new Container();
+    container
+      .bind<IGlobalConfigService>(TYPES.IGlobalConfigService)
+      .to(GlobalConfigService);
+    configService = container.get<IGlobalConfigService>(
+      TYPES.IGlobalConfigService,
+    );
+  });
+
+  afterAll(() => {
+    container.unbind(TYPES.IGlobalConfigService);
+  });
+
+  it("should validate scene's options according to JSON schema", () => {
+    const { valid, errorText } = configService.validateSceneConfig({
+      id: 0,
+    });
+    expect(valid).toBeFalsy();
+    expect(errorText).toMatch('id should be string');
+
+    expect(
+      configService.validateSceneConfig({
+        id: 'map',
+      }).valid,
+    ).toBeTruthy();
+  });
+
+  it("should validate map's `zoom` option", () => {
+    const { valid, errorText } = configService.validateMapConfig({
+      zoom: 100,
+      minZoom: 100,
+      maxZoom: -1,
+    });
+    expect(valid).toBeFalsy();
+    expect(errorText).toMatch('zoom should be <= 20');
+    expect(errorText).toMatch('minZoom should be <= 20');
+    expect(errorText).toMatch('maxZoom should be >= 0');
+
+    expect(
+      configService.validateMapConfig({
+        zoom: 10,
+        minZoom: 1,
+        maxZoom: 15,
+      }).valid,
+    ).toBeTruthy();
+  });
+
+  it("should validate map's `pitch` option", () => {
+    const { valid, errorText } = configService.validateMapConfig({
+      pitch: '1',
+    });
+    expect(valid).toBeFalsy();
+    expect(errorText).toMatch('pitch should be number');
+
+    expect(
+      configService.validateMapConfig({
+        pitch: 10,
+      }).valid,
+    ).toBeTruthy();
+  });
+
+  it("should validate map's `center` option", () => {
+    const { valid, errorText } = configService.validateMapConfig({
+      center: [1, 2, 3],
+    });
+    expect(valid).toBeFalsy();
+    expect(errorText).toMatch('center should NOT have more than 2 items');
+
+    const { valid: v2, errorText: e2 } = configService.validateMapConfig({
+      center: [1],
+    });
+    expect(v2).toBeFalsy();
+    expect(e2).toMatch('center should NOT have fewer than 2 items');
+
+    const { valid: v3, errorText: e3 } = configService.validateMapConfig({
+      center: 100,
+    });
+    expect(v3).toBeFalsy();
+    expect(e3).toMatch('center should be array');
+
+    expect(
+      configService.validateMapConfig({
+        center: [100, 100],
+      }).valid,
+    ).toBeTruthy();
   });
 
   it("should validate layer's options according to JSON schema", () => {
diff --git a/packages/core/src/services/config/mapConfigSchema.ts b/packages/core/src/services/config/mapConfigSchema.ts
new file mode 100644
index 0000000000..23dff45d03
--- /dev/null
+++ b/packages/core/src/services/config/mapConfigSchema.ts
@@ -0,0 +1,36 @@
+/**
+ * 地图 Schema
+ */
+export default {
+  properties: {
+    // 地图缩放等级
+    zoom: {
+      type: 'number',
+      minimum: 0,
+      maximum: 20,
+    },
+    minZoom: {
+      type: 'number',
+      minimum: 0,
+      maximum: 20,
+    },
+    maxZoom: {
+      type: 'number',
+      minimum: 0,
+      maximum: 20,
+    },
+    // 地图中心点
+    center: {
+      type: 'array',
+      items: {
+        type: 'number',
+      },
+      maxItems: 2,
+      minItems: 2,
+    },
+    // 仰角
+    pitch: {
+      type: 'number',
+    },
+  },
+};
diff --git a/packages/core/src/services/config/sceneConfigSchema.ts b/packages/core/src/services/config/sceneConfigSchema.ts
index f5711af6e4..c8b75ce824 100644
--- a/packages/core/src/services/config/sceneConfigSchema.ts
+++ b/packages/core/src/services/config/sceneConfigSchema.ts
@@ -1,5 +1,3 @@
-import { MapType } from '../map/IMapService';
-
 /**
  * 场景 Schema
  */
@@ -9,27 +7,5 @@ export default {
     id: {
       type: 'string',
     },
-    // 地图类型，目前支持高德 & Mapbox
-    type: {
-      enum: [MapType.amap, MapType.mapbox],
-    },
-    // 地图缩放等级
-    zoom: {
-      type: 'number',
-      minimum: 0,
-      maximum: 20,
-    },
-    // 地图中心点
-    center: {
-      item: {
-        type: 'number',
-      },
-      maxItems: 2,
-      minItems: 2,
-    },
-    // 仰角
-    pitch: {
-      type: 'number',
-    },
   },
 };
diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts
index 6122de55a6..6d6c26249c 100644
--- a/packages/core/src/services/map/IMapService.ts
+++ b/packages/core/src/services/map/IMapService.ts
@@ -1,5 +1,4 @@
-/// <reference types="amap-js-api" />
-import { Map } from 'mapbox-gl';
+import { Container } from 'inversify';
 import { IViewport } from '../camera/ICameraService';
 export type Point = [number, number];
 export type Bounds = [[number, number], [number, number]];
@@ -11,9 +10,14 @@ export interface IPoint {
   x: number;
   y: number;
 }
-export interface IMapService {
-  map: AMap.Map | Map;
-  init(config: Partial<IMapConfig>): void;
+
+export interface IMapWrapper {
+  setContainer(container: Container, id: string): void;
+}
+
+export interface IMapService<RawMap = {}> {
+  map: RawMap;
+  init(): void;
   destroy(): void;
   onCameraChanged(callback: (viewport: IViewport) => void): void;
   // init map
@@ -31,7 +35,7 @@ export interface IMapService {
   getMinZoom(): number;
   getMaxZoom(): number;
   // get map params
-  getType(): MapType;
+  getType(): string;
   getZoom(): number;
   getCenter(): ILngLat;
   getPitch(): number;
@@ -56,19 +60,12 @@ export interface IMapService {
   lngLatToContainer(lnglat: Point): IPoint;
 }
 
-export enum MapType {
-  amap = 'amap',
-  mapbox = 'mapbox',
-}
-
 export const MapServiceEvent = ['mapload'];
 
 /**
  * 地图初始化配置项
  */
 export interface IMapConfig {
-  type: MapType | keyof typeof MapType;
-
   /**
    * 容器 DOM id
    */
diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts
index 7273a10607..46ee136964 100644
--- a/packages/core/src/services/scene/SceneService.ts
+++ b/packages/core/src/services/scene/SceneService.ts
@@ -7,6 +7,7 @@ import { IFontService } from '../asset/IFontService';
 import { IIconService } from '../asset/IIconService';
 import { ICameraService, IViewport } from '../camera/ICameraService';
 import { IControlService } from '../component/IControlService';
+import { IMarkerService } from '../component/IMarkerService';
 import { IGlobalConfigService, ISceneConfig } from '../config/IConfigService';
 import { IInteractionService } from '../interaction/IInteractionService';
 import { ILayer, ILayerService } from '../layer/ILayerService';
@@ -59,6 +60,9 @@ export default class Scene extends EventEmitter implements ISceneService {
   @inject(TYPES.IShaderModuleService)
   private readonly shaderModuleService: IShaderModuleService;
 
+  @inject(TYPES.IMarkerService)
+  private readonly markerService: IMarkerService;
+
   /**
    * 是否首次渲染
    */
@@ -112,16 +116,10 @@ export default class Scene extends EventEmitter implements ISceneService {
     // 字体资源
     this.fontService.init();
 
-    this.controlService.init({
-      container: document.getElementById(
-        this.configService.getSceneConfig(this.id).id || 'map',
-      ) as HTMLElement,
-    });
-
     /**
      * 初始化底图
      */
-    this.hooks.init.tapPromise('initMap', async (config: unknown) => {
+    this.hooks.init.tapPromise('initMap', async () => {
       // 等待首次相机同步
       await new Promise((resolve) => {
         this.map.onCameraChanged((viewport: IViewport) => {
@@ -129,11 +127,14 @@ export default class Scene extends EventEmitter implements ISceneService {
           this.cameraService.update(viewport);
           resolve();
         });
-        this.map.init(config as Partial<IMapCamera>);
+        this.map.init();
       });
-
+      // this.controlService.addControls();
       // 重新绑定非首次相机更新事件
       this.map.onCameraChanged(this.handleMapCameraChanged);
+      this.map.addMarkerContainer();
+      // 初始化未加载的marker;
+      this.markerService.addMarkers();
       this.logger.debug('map loaded');
     });
 
@@ -155,7 +156,6 @@ export default class Scene extends EventEmitter implements ISceneService {
 
       // 初始化 container 上的交互
       this.interactionService.init();
-
       this.logger.debug(`scene ${this.id} renderer loaded`);
     });
     // TODO：init worker, fontAtlas...
@@ -185,7 +185,7 @@ export default class Scene extends EventEmitter implements ISceneService {
 
       await this.initPromise;
       // FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？
-      this.map.addMarkerContainer();
+
       this.logger.info(' render inited');
       this.emit('loaded');
       this.inited = true;
@@ -194,6 +194,8 @@ export default class Scene extends EventEmitter implements ISceneService {
     // 尝试初始化未初始化的图层
     this.layerService.initLayers();
     this.layerService.renderLayers();
+    // 组件需要等待layer 初始化完成之后添加
+    this.controlService.addControls();
     this.logger.debug(`scene ${this.id} render`);
 
     this.rendering = false;
@@ -205,6 +207,7 @@ export default class Scene extends EventEmitter implements ISceneService {
     this.layerService.destroy();
     this.interactionService.destroy();
     this.controlService.destroy();
+    this.markerService.destroy();
     this.removeAllListeners();
     this.rendererService.destroy();
     this.map.destroy();
diff --git a/packages/core/src/shaders/projection.glsl b/packages/core/src/shaders/projection.glsl
index 4f792e549e..3c977c88a6 100644
--- a/packages/core/src/shaders/projection.glsl
+++ b/packages/core/src/shaders/projection.glsl
@@ -113,8 +113,7 @@ float project_pixel(float pixel) {
   return pixel;
 }
 vec2 project_pixel(vec2 pixel) {
-  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20
-    || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
+  if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {
     // P20 坐标系下，为了和 Web 墨卡托坐标系统一，zoom 默认减1
     return pixel * pow(2.0, (19.0 - u_Zoom));
   }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 7f3c5fbc0e..c2570b616f 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -9,6 +9,8 @@ const TYPES = {
   ILayerStyleService: Symbol.for('ILayerStyleService'),
   ILogService: Symbol.for('ILogService'),
   IMapService: Symbol.for('IMapService'),
+  IMarkerService: Symbol.for('IMarkerService'),
+  IPopupService: Symbol.for('PopupService'),
   IFactoryMapService: Symbol.for('Factory<IMapService>'),
   IRendererService: Symbol.for('IRendererService'),
   IShaderModuleService: Symbol.for('IShaderModuleService'),
@@ -26,6 +28,7 @@ const TYPES = {
   IFactoryNormalPass: Symbol.for('Factory<IFactoryNormalPass>'),
   IMultiPassRenderer: Symbol.for('IMultiPassRenderer'),
   SceneID: Symbol.for('SceneID'),
+  MapConfig: Symbol.for('MapConfig'),
 };
 
 export { TYPES };
diff --git a/packages/l7/package.json b/packages/l7/package.json
index 24ad426fc2..9371d5d52e 100644
--- a/packages/l7/package.json
+++ b/packages/l7/package.json
@@ -26,6 +26,7 @@
     "@antv/l7-component": "^2.0.0-beta.10",
     "@antv/l7-core": "^2.0.0-beta.10",
     "@antv/l7-layers": "^2.0.0-beta.10",
+    "@antv/l7-maps": "^2.0.0-beta.10",
     "@antv/l7-scene": "^2.0.0-beta.10"
   },
   "gitHead": "0563f357f3a07c099bf1ffa9350e6fa3c88353ae",
diff --git a/packages/l7/package_bak.json b/packages/l7/package_bak.json
deleted file mode 100644
index 7eb4d32924..0000000000
--- a/packages/l7/package_bak.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "@antv/l7",
-  "version": "2.0.0-beta.8",
-  "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
-  "main": "dist/l7.js",
-  "sideEffects": true,
-  "files": [
-    "dist",
-    "lib",
-    "es",
-    "README.md"
-  ],
-  "scripts": {
-    "tsc": "tsc --project tsconfig.build.json",
-    "clean": "rimraf dist; rimraf es; rimraf lib;",
-    "build": "run-p build:*",
-    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
-    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
-    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
-  },
-  "author": "antv",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-   "@l7/core": "0.0.1",
-   "@l7/scene": "0.0.1",
-   "@l7/layers": "0.0.1",
-   "@l7/component": "0.0.1"
-  }
-}
diff --git a/packages/l7/src/index.ts b/packages/l7/src/index.ts
index 71410257e9..4bdf44e1ec 100644
--- a/packages/l7/src/index.ts
+++ b/packages/l7/src/index.ts
@@ -1,4 +1,5 @@
 export * from '@antv/l7-core';
 export * from '@antv/l7-scene';
+export * from '@antv/l7-maps';
 export * from '@antv/l7-layers';
 export * from '@antv/l7-component';
diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts
index de8da5c815..0996dab510 100644
--- a/packages/layers/src/core/BaseLayer.ts
+++ b/packages/layers/src/core/BaseLayer.ts
@@ -265,6 +265,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     this.buildModels();
 
     this.inited = true;
+    // 触发初始化完成事件;
+    this.emit('inited');
     return this;
   }
 
diff --git a/packages/layers/src/heatmap/shaders/grid_vert.glsl b/packages/layers/src/heatmap/shaders/grid_vert.glsl
index ca18f08914..42cdbb317a 100644
--- a/packages/layers/src/heatmap/shaders/grid_vert.glsl
+++ b/packages/layers/src/heatmap/shaders/grid_vert.glsl
@@ -12,7 +12,6 @@ uniform mat4 u_ModelMatrix;
 varying vec4 v_color;
 
 #pragma include "projection"
-#pragma include "project"
 #pragma include "picking"
 
 void main() {
@@ -20,7 +19,6 @@ void main() {
 
   mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
   vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ;
-  // vec2 lnglat = unProjectFlat(a_Pos.xy);
   vec4 project_pos = project_position(vec4(a_Pos.xy + offset, 0, 1.0));
   gl_Position = project_common_position_to_clipspace(project_pos);
 
diff --git a/packages/layers/src/point/models/extrude.ts b/packages/layers/src/point/models/extrude.ts
index 8aa4ad3010..47636c6dff 100644
--- a/packages/layers/src/point/models/extrude.ts
+++ b/packages/layers/src/point/models/extrude.ts
@@ -1,8 +1,8 @@
 import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core';
 import BaseModel from '../../core/BaseModel';
 import { PointExtrudeTriangulation } from '../../core/triangulation';
-import pointExtrudeVert from '../shaders/extrude3_vert.glsl';
 import pointExtrudeFrag from '../shaders/extrude_frag.glsl';
+import pointExtrudeVert from '../shaders/extrude_vert.glsl';
 interface IPointLayerStyleOptions {
   opacity: number;
 }
diff --git a/packages/layers/src/point/shaders/extrude3_vert.glsl b/packages/layers/src/point/shaders/extrude3_vert.glsl
deleted file mode 100644
index e59309e2e5..0000000000
--- a/packages/layers/src/point/shaders/extrude3_vert.glsl
+++ /dev/null
@@ -1,33 +0,0 @@
-precision highp float;
-
-#define ambientRatio 0.5
-#define diffuseRatio 0.3
-#define specularRatio 0.2
-
-attribute vec3 a_Position;
-attribute vec3 a_Pos;
-attribute vec4 a_Color;
-attribute vec3 a_Size;
-attribute vec3 a_Normal;
-
-uniform mat4 u_ModelMatrix;
-varying vec4 v_color;
-
-#pragma include "projection"
-#pragma include "light"
-#pragma include "picking"
-
-void main() {
-  vec3 size = a_Size * a_Position;
-
-  vec2 offset = project_pixel(size.xy);
-
-  vec4 project_pos = project_position(vec4(a_Pos.xy, 0, 1.0));
-  vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z), 1.0);
-
-  float lightWeight = calc_lighting(pos);
-  v_color =vec4(a_Color.rgb * lightWeight, a_Color.w); 
-
-  gl_Position = project_common_position_to_clipspace(pos);
-  setPickingColor(a_PickingColor);
-}
diff --git a/packages/layers/src/point/shaders/extrude_vert.glsl b/packages/layers/src/point/shaders/extrude_vert.glsl
index a99a38a7d1..ee75f84c38 100644
--- a/packages/layers/src/point/shaders/extrude_vert.glsl
+++ b/packages/layers/src/point/shaders/extrude_vert.glsl
@@ -23,27 +23,10 @@ void main() {
   vec2 offset = project_pixel(size.xy);
 
   vec4 project_pos = project_position(vec4(a_Pos.xy, 0, 1.0));
-  vec4 pos = vec4(project_pos.xy + offset, project_pixel(size.z), 1.0);
+  vec4 pos = vec4(project_pos.xy + offset, size.z, 1.0);
 
   float lightWeight = calc_lighting(pos);
-
-//  vec3 worldPos = vec3(pos * u_ModelMatrix);
-
-//  vec3 worldNormal = vec3(vec4(a_Normal,1.0));
-//   // //cal light weight
-//  vec3 viewDir = normalize(u_CameraPosition - worldPos);
-
-//  vec3 lightDir = normalize(vec3(1, -10.5, 12));
-
-//  vec3 halfDir = normalize(viewDir+lightDir);
-//   // //lambert
-//  float lambert = dot(worldNormal, lightDir);
-//     //specular
-//  float specular = pow( max(0.0, dot(worldNormal, halfDir)), 32.0);
-//     //sum to light weight
-//  float lightWeight = ambientRatio + diffuseRatio * lambert + specularRatio * specular;
-
-  v_color =vec4(a_Color.rgb*lightWeight, a_Color.w); 
+  v_color =vec4(a_Color.rgb * lightWeight, a_Color.w);
 
   gl_Position = project_common_position_to_clipspace(pos);
   setPickingColor(a_PickingColor);
diff --git a/packages/layers/src/polygon/polygon3D.ts b/packages/layers/src/polygon/polygon3D.ts
deleted file mode 100644
index a63decbe27..0000000000
--- a/packages/layers/src/polygon/polygon3D.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { AttributeType, gl, IEncodeFeature, ILayer } from '@antv/l7-core';
-import BaseLayer from '../core/BaseLayer';
-import { PolygonExtrudeTriangulation } from '../core/triangulation';
-import polygonExtrudeFrag from './shaders/polygon_extrude_frag.glsl';
-import polygonExtrudeVert from './shaders/polygon_extrude_vert.glsl';
-interface IPointLayerStyleOptions {
-  opacity: number;
-}
-export default class PolygonLayer extends BaseLayer<IPointLayerStyleOptions> {
-  public name: string = 'PolygonLayer';
-
-  protected getConfigSchema() {
-    return {
-      properties: {
-        opacity: {
-          type: 'number',
-          minimum: 0,
-          maximum: 1,
-        },
-      },
-    };
-  }
-
-  protected renderModels() {
-    const { opacity } = this.getLayerConfig();
-    this.models.forEach((model) =>
-      model.draw({
-        uniforms: {
-          u_opacity: opacity || 1.0,
-        },
-      }),
-    );
-    return this;
-  }
-
-  protected buildModels() {
-    this.registerBuiltinAttributes();
-    this.models = [
-      this.buildLayerModel({
-        moduleName: 'polygonExtrude',
-        vertexShader: polygonExtrudeVert,
-        fragmentShader: polygonExtrudeFrag,
-        triangulation: PolygonExtrudeTriangulation,
-      }),
-    ];
-  }
-
-  private registerBuiltinAttributes() {
-    // point layer size;
-    this.styleAttributeService.registerStyleAttribute({
-      name: 'normal',
-      type: AttributeType.Attribute,
-      descriptor: {
-        name: 'a_Normal',
-        buffer: {
-          // give the WebGL driver a hint that this buffer may change
-          usage: gl.STATIC_DRAW,
-          data: [],
-          type: gl.FLOAT,
-        },
-        size: 3,
-        update: (
-          feature: IEncodeFeature,
-          featureIdx: number,
-          vertex: number[],
-          attributeIdx: number,
-          normal: number[],
-        ) => {
-          return normal;
-        },
-      },
-    });
-
-    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 } = feature;
-          return Array.isArray(size) ? [size[0]] : [size as number];
-        },
-      },
-    });
-  }
-}
diff --git a/packages/layers/src/polygon/shaders/polygon_extrude_vert.glsl b/packages/layers/src/polygon/shaders/polygon_extrude_vert.glsl
index 41f18fab1d..f0f0245ed3 100644
--- a/packages/layers/src/polygon/shaders/polygon_extrude_vert.glsl
+++ b/packages/layers/src/polygon/shaders/polygon_extrude_vert.glsl
@@ -13,31 +13,18 @@ uniform mat4 u_ModelMatrix;
 varying vec4 v_Color;
 
 #pragma include "projection"
+#pragma include "light"
 #pragma include "picking"
 
 void main() {
-  vec4 project_pos = project_position(vec4(a_Position.xy, project_pixel(a_Position.z * a_Size), 1.0));
+  vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
+  vec4 project_pos = project_position(pos);
 
   gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
 
-  vec3 worldPos = vec3(project_pos * u_ModelMatrix);
-
-  vec3 worldNormal = vec3(vec4(a_Normal,1.0) * u_ModelMatrix);
-  //  vec3 worldNormal = project_normal(a_Normal);
-  // //cal light weight
-  vec3 viewDir = normalize(u_CameraPosition - worldPos);
-
-  vec3 lightDir = normalize(vec3(1, -10.5, 12));
-
-  vec3 halfDir = normalize(viewDir+lightDir);
-  // //lambert
-  float lambert = dot(worldNormal, lightDir);
-  //specular
-  float specular = pow( max(0.0, dot(worldNormal, halfDir)), 16.0);
-  //sum to light weight
-  float lightWeight = ambientRatio + diffuseRatio * lambert + specularRatio * specular;
+  float lightWeight = calc_lighting(pos);
   // v_Color = a_Color;
-  v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w); 
+  v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w);
 
   setPickingColor(a_PickingColor);
-}
\ No newline at end of file
+}
diff --git a/packages/maps/src/BaseMapWrapper.ts b/packages/maps/src/BaseMapWrapper.ts
new file mode 100644
index 0000000000..3885a1d300
--- /dev/null
+++ b/packages/maps/src/BaseMapWrapper.ts
@@ -0,0 +1,52 @@
+import {
+  IGlobalConfigService,
+  ILogService,
+  IMapConfig,
+  IMapService,
+  IMapWrapper,
+  lazyInject,
+  TYPES,
+} from '@antv/l7-core';
+import { Container } from 'inversify';
+
+export default class BaseMapWrapper<RawMap> implements IMapWrapper {
+  @lazyInject(TYPES.ILogService)
+  protected readonly logger: ILogService;
+
+  @lazyInject(TYPES.IGlobalConfigService)
+  protected readonly configService: IGlobalConfigService;
+
+  protected config: Partial<IMapConfig>;
+
+  constructor(config: Partial<IMapConfig>) {
+    this.config = config;
+  }
+
+  public setContainer(sceneContainer: Container, id: string) {
+    // 首先使用全局配置服务校验地图参数
+    const { valid, errorText } = this.configService.validateMapConfig(
+      this.config,
+    );
+
+    if (!valid) {
+      this.logger.error(errorText || '');
+      return;
+    }
+
+    // 绑定用户传入的原始地图参数
+    sceneContainer.bind<Partial<IMapConfig>>(TYPES.MapConfig).toConstantValue({
+      ...this.config,
+      id,
+    });
+    sceneContainer
+      .bind<IMapService<RawMap>>(TYPES.IMapService)
+      .to(this.getServiceConstructor())
+      .inSingletonScope();
+  }
+
+  protected getServiceConstructor(): new (...args: any[]) => IMapService<
+    RawMap
+  > {
+    throw new Error('Method not implemented.');
+  }
+}
diff --git a/packages/maps/src/amap/Viewport.ts b/packages/maps/src/amap/Viewport.ts
index 6d52b23b58..4a68f96c6d 100644
--- a/packages/maps/src/amap/Viewport.ts
+++ b/packages/maps/src/amap/Viewport.ts
@@ -46,6 +46,8 @@ export default class Viewport implements IViewport {
     );
     mat4.lookAt(this.viewMatrix, eye, vec3.fromValues(0, 0, 0), up);
 
+    this.viewUncenteredMatrix = mat4.clone(this.viewMatrix);
+
     // 移动相机位置
     mat4.translate(
       this.viewMatrix,
diff --git a/packages/maps/src/amap/Wrapper.ts b/packages/maps/src/amap/Wrapper.ts
new file mode 100644
index 0000000000..7114e93c1d
--- /dev/null
+++ b/packages/maps/src/amap/Wrapper.ts
@@ -0,0 +1,11 @@
+import { IAMapInstance } from '../../typings/index';
+import BaseMapWrapper from '../BaseMapWrapper';
+import AMapService from './index';
+
+export default class AMapWrapper extends BaseMapWrapper<
+  AMap.Map & IAMapInstance
+> {
+  protected getServiceConstructor() {
+    return AMapService;
+  }
+}
diff --git a/packages/maps/src/amap/index.ts b/packages/maps/src/amap/index.ts
index d1b85529b7..3767beccff 100644
--- a/packages/maps/src/amap/index.ts
+++ b/packages/maps/src/amap/index.ts
@@ -11,7 +11,6 @@ import {
   IPoint,
   IViewport,
   MapServiceEvent,
-  MapType,
   TYPES,
 } from '@antv/l7-core';
 import { DOM } from '@antv/l7-utils';
@@ -40,16 +39,22 @@ const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
  * AMapService
  */
 @injectable()
-export default class AMapService implements IMapService {
+export default class AMapService
+  implements IMapService<AMap.Map & IAMapInstance> {
   /**
    * 原始地图实例
    */
   public map: AMap.Map & IAMapInstance;
 
+  @inject(TYPES.MapConfig)
+  private readonly config: Partial<IMapConfig>;
+
   @inject(TYPES.ICoordinateSystemService)
   private readonly coordinateSystemService: ICoordinateSystemService;
+
   @inject(TYPES.IEventEmitter)
   private eventEmitter: any;
+
   private markerContainer: HTMLElement;
   private $mapContainer: HTMLElement | null;
 
@@ -96,7 +101,7 @@ export default class AMapService implements IMapService {
   }
 
   public getType() {
-    return MapType.amap;
+    return 'amap';
   }
   public getZoom(): number {
     // 统一返回 Mapbox 缩放等级
@@ -196,7 +201,7 @@ export default class AMapService implements IMapService {
     };
   }
 
-  public async init(mapConfig: IMapConfig): Promise<void> {
+  public async init(): Promise<void> {
     const {
       id,
       style = 'light',
@@ -204,7 +209,7 @@ export default class AMapService implements IMapService {
       maxZoom = 18,
       token = AMAP_API_KEY,
       ...rest
-    } = mapConfig;
+    } = this.config;
     // 高德地图创建独立的container；
 
     // @ts-ignore
@@ -312,15 +317,13 @@ export default class AMapService implements IMapService {
       });
 
       // set coordinate system
-      // if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD) {
-      //   // TODO:偏移坐标系高德地图不支持 pitch bear 同步
-      //   this.coordinateSystemService.setCoordinateSystem(
-      //     CoordinateSystem.P20_OFFSET,
-      //   );
-      // } else {
-      //   this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.P20);
-      // }
-      this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.P20);
+      if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD) {
+        this.coordinateSystemService.setCoordinateSystem(
+          CoordinateSystem.P20_OFFSET,
+        );
+      } else {
+        this.coordinateSystemService.setCoordinateSystem(CoordinateSystem.P20);
+      }
       this.cameraChangedCallback(this.viewport);
     }
   };
diff --git a/packages/maps/src/index.ts b/packages/maps/src/index.ts
index b70638e8a5..980d870217 100644
--- a/packages/maps/src/index.ts
+++ b/packages/maps/src/index.ts
@@ -1,4 +1,4 @@
-import AMapService from './amap';
-import MapboxService from './mapbox';
+import GaodeMap from './amap/Wrapper';
+import Mapbox from './mapbox/Wrapper';
 
-export { AMapService, MapboxService };
+export { GaodeMap, Mapbox };
diff --git a/packages/maps/src/mapbox/Wrapper.ts b/packages/maps/src/mapbox/Wrapper.ts
new file mode 100644
index 0000000000..b3fe8faec1
--- /dev/null
+++ b/packages/maps/src/mapbox/Wrapper.ts
@@ -0,0 +1,12 @@
+import { Map } from 'mapbox-gl';
+import { IMapboxInstance } from '../../typings/index';
+import BaseMapWrapper from '../BaseMapWrapper';
+import MapboxService from './index';
+
+export default class MapboxWrapper extends BaseMapWrapper<
+  Map & IMapboxInstance
+> {
+  protected getServiceConstructor() {
+    return MapboxService;
+  }
+}
diff --git a/packages/maps/src/mapbox/index.ts b/packages/maps/src/mapbox/index.ts
index cc3a65fc46..c9de4f3d21 100644
--- a/packages/maps/src/mapbox/index.ts
+++ b/packages/maps/src/mapbox/index.ts
@@ -11,7 +11,6 @@ import {
   IPoint,
   IViewport,
   MapServiceEvent,
-  MapType,
   TYPES,
 } from '@antv/l7-core';
 import { DOM } from '@antv/l7-utils';
@@ -33,8 +32,13 @@ const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
  * AMapService
  */
 @injectable()
-export default class MapboxService implements IMapService {
+export default class MapboxService
+  implements IMapService<Map & IMapboxInstance> {
   public map: Map & IMapboxInstance;
+
+  @inject(TYPES.MapConfig)
+  private readonly config: Partial<IMapConfig>;
+
   @inject(TYPES.ICoordinateSystemService)
   private readonly coordinateSystemService: ICoordinateSystemService;
 
@@ -79,7 +83,7 @@ export default class MapboxService implements IMapService {
   // get mapStatus method
 
   public getType() {
-    return MapType.mapbox;
+    return 'mapbox';
   }
   public getZoom(): number {
     return this.map.getZoom();
@@ -168,15 +172,15 @@ export default class MapboxService implements IMapService {
     return this.map.project(lnglat);
   }
 
-  public async init(mapConfig: IMapConfig): Promise<void> {
+  public async init(): Promise<void> {
     const {
-      id,
+      id = 'map',
       attributionControl = false,
       style = 'light',
       token = 'pk.eyJ1IjoieGlhb2l2ZXIiLCJhIjoiY2pxcmc5OGNkMDY3cjQzbG42cXk5NTl3YiJ9.hUC5Chlqzzh0FFd_aEc-uQ',
       rotation = 0,
       ...rest
-    } = mapConfig;
+    } = this.config;
     this.$mapContainer = document.getElementById(id);
 
     this.viewport = new Viewport();
@@ -199,7 +203,6 @@ export default class MapboxService implements IMapService {
 
     // 不同于高德地图，需要手动触发首次渲染
     this.handleCameraChanged();
-    this.removeLogoControl();
   }
 
   public destroy() {
@@ -207,6 +210,7 @@ export default class MapboxService implements IMapService {
     if (this.map) {
       this.map.remove();
       this.$mapContainer = null;
+      this.removeLogoControl();
     }
   }
   public emit(name: string, ...args: any[]) {
@@ -223,10 +227,7 @@ export default class MapboxService implements IMapService {
   public onCameraChanged(callback: (viewport: IViewport) => void): void {
     this.cameraChangedCallback = callback;
   }
-  // 同步不同底图的配置项
-  private initMapConig(): void {
-    throw new Error('Method not implemented.');
-  }
+
   private handleCameraChanged = () => {
     // @see https://github.com/mapbox/mapbox-gl-js/issues/2572
     const { lat, lng } = this.map.getCenter().wrap();
diff --git a/packages/maps/src/mapbox/theme.ts b/packages/maps/src/mapbox/theme.ts
index b665cb74e7..539ff40591 100644
--- a/packages/maps/src/mapbox/theme.ts
+++ b/packages/maps/src/mapbox/theme.ts
@@ -1,7 +1,7 @@
 export const MapTheme: {
   [key: string]: any;
 } = {
-  light: 'mapbox://styles/zcxduo/ck233y3ru1di71cnulo9jdg2v',
+  light: 'mapbox://styles/zcxduo/ck2ypyb1r3q9o1co1766dex29',
   dark: 'mapbox://styles/zcxduo/ck241p6413s0b1cpayzldv7x7',
   normal: 'mapbox://styles/mapbox/streets-v11',
 };
diff --git a/packages/renderer/src/regl/index.ts b/packages/renderer/src/regl/index.ts
index af51e899bf..cd2a6af137 100644
--- a/packages/renderer/src/regl/index.ts
+++ b/packages/renderer/src/regl/index.ts
@@ -54,7 +54,6 @@ export default class ReglRendererService implements IRendererService {
           'OES_element_index_uint',
           'EXT_shader_texture_lod', // IBL
           'OES_standard_derivatives', // wireframe
-          'EXT_SRGB', // baseColor emmisive
           'OES_texture_float', // shadow map
           'WEBGL_depth_texture',
           'angle_instanced_arrays',
diff --git a/packages/scene/package.json b/packages/scene/package.json
index 0f772a98f6..57c7e59e6b 100644
--- a/packages/scene/package.json
+++ b/packages/scene/package.json
@@ -26,6 +26,7 @@
     "@antv/l7-core": "^2.0.0-beta.10",
     "@antv/l7-maps": "^2.0.0-beta.10",
     "@antv/l7-renderer": "^2.0.0-beta.10",
+    "@antv/l7-utils": "^2.0.0-beta.10",
     "inversify": "^5.0.1",
     "inversify-inject-decorators": "^3.1.0",
     "mapbox-gl": "^1.2.1",
diff --git a/packages/scene/src/ILayerManager.ts b/packages/scene/src/ILayerManager.ts
new file mode 100644
index 0000000000..1cbb01ed05
--- /dev/null
+++ b/packages/scene/src/ILayerManager.ts
@@ -0,0 +1,11 @@
+import { ILayer } from '@antv/l7-core';
+
+export default interface ILayerManager {
+  addLayer(layer: ILayer): void;
+
+  getLayers(): ILayer[];
+
+  getLayer(id: string): ILayer | undefined;
+
+  removeLayer(layer: ILayer): void;
+}
diff --git a/packages/scene/src/IMapController.ts b/packages/scene/src/IMapController.ts
new file mode 100644
index 0000000000..e1174a1e63
--- /dev/null
+++ b/packages/scene/src/IMapController.ts
@@ -0,0 +1,67 @@
+import { Bounds, ILngLat, IPoint, Point } from '@antv/l7-core';
+
+export default interface IMapController {
+  /**
+   * 当前缩放等级
+   */
+  getZoom(): number;
+
+  /**
+   * 中心点经纬度
+   */
+  getCenter(): ILngLat;
+
+  /**
+   * 仰角
+   */
+  getPitch(): number;
+
+  /**
+   * 逆时针旋转角度
+   */
+  getRotation(): number;
+
+  /**
+   * 获取当前地图可视区域 `[西南角、东北角]`
+   */
+  getBounds(): Bounds;
+
+  /**
+   * 放大地图
+   */
+  zoomIn(): void;
+
+  /**
+   * 缩小地图
+   */
+  zoomOut(): void;
+
+  /**
+   * 地图平移到指定点 `[x, y]`
+   */
+  panTo(p: Point): void;
+
+  /**
+   * 地图平移到指定点 `[x, y]`
+   */
+  panBy(pixel: Point): void;
+
+  /**
+   * 调整地图适合指定区域
+   */
+  fitBounds(bound: Bounds): void;
+
+  setRotation(rotation: number): void;
+
+  setZoomAndCenter(zoom: number, center: Point): void;
+
+  setMapStyle(style: string): void;
+
+  pixelToLngLat(pixel: Point): ILngLat;
+
+  lngLatToPixel(lnglat: Point): IPoint;
+
+  containerToLngLat(pixel: Point): ILngLat;
+
+  lngLatToContainer(lnglat: Point): IPoint;
+}
diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts
index 0482720c0c..84bb66ddb2 100644
--- a/packages/scene/src/index.ts
+++ b/packages/scene/src/index.ts
@@ -10,22 +10,25 @@ import {
   ILayer,
   ILayerService,
   ILngLat,
-  IMapConfig,
   IMapService,
   IMarker,
+  IMarkerService,
   IPoint,
+  IPopup,
+  IPopupService,
   IPostProcessingPass,
-  IRenderConfig,
   IRendererService,
+  ISceneConfig,
   ISceneService,
-  MapType,
   Point,
   SceneEventList,
   TYPES,
 } from '@antv/l7-core';
-import { AMapService, MapboxService } from '@antv/l7-maps';
 import { ReglRendererService } from '@antv/l7-renderer';
+import { DOM } from '@antv/l7-utils';
 import { Container } from 'inversify';
+import ILayerManager from './ILayerManager';
+import IMapController from './IMapController';
 import IPostProcessingPassPluggable from './IPostProcessingPassPluggable';
 
 /**
@@ -38,62 +41,62 @@ import IPostProcessingPassPluggable from './IPostProcessingPassPluggable';
  * const scene = new Scene();
  * const pointLayer = new PointLayer();
  * scene.addLayer(pointLayer);
- * scene.render();
  *
  */
-class Scene implements IPostProcessingPassPluggable {
-  // public map: AMap.Map | Map;
+class Scene
+  implements IPostProcessingPassPluggable, IMapController, ILayerManager {
   private sceneService: ISceneService;
-  private mapService: IMapService;
+  private mapService: IMapService<unknown>;
   private controlService: IControlService;
   private layerService: ILayerService;
   private iconService: IIconService;
+  private markerService: IMarkerService;
+  private popupService: IPopupService;
 
   private container: Container;
 
-  public constructor(config: IMapConfig & IRenderConfig) {
-    const { type = MapType.amap } = config;
+  public constructor(config: ISceneConfig) {
+    const { id, map } = config;
 
     // 创建场景容器
     const sceneContainer = createSceneContainer();
     this.container = sceneContainer;
 
+    // 绑定地图服务
+    map.setContainer(sceneContainer, id);
+
     // 绑定渲染引擎服务
     sceneContainer
       .bind<IRendererService>(TYPES.IRendererService)
       .to(ReglRendererService)
       .inSingletonScope();
 
-    // 根据用户传入参数绑定地图服务
-    let mapServiceImpl: new (...args: any[]) => IMapService;
-    if (type === MapType.mapbox) {
-      mapServiceImpl = MapboxService;
-    } else if (type === MapType.amap) {
-      mapServiceImpl = AMapService;
-    } else {
-      throw new Error('不支持的地图服务');
-    }
-    sceneContainer
-      .bind<IMapService>(TYPES.IMapService)
-      .to(mapServiceImpl)
-      .inSingletonScope();
-
     // 依赖注入
     this.sceneService = sceneContainer.get<ISceneService>(TYPES.ISceneService);
-    this.mapService = sceneContainer.get<IMapService>(TYPES.IMapService);
+    this.mapService = sceneContainer.get<IMapService<unknown>>(
+      TYPES.IMapService,
+    );
     this.iconService = sceneContainer.get<IIconService>(TYPES.IIconService);
     this.controlService = sceneContainer.get<IControlService>(
       TYPES.IControlService,
     );
     this.layerService = sceneContainer.get<ILayerService>(TYPES.ILayerService);
 
+    this.markerService = sceneContainer.get<IMarkerService>(
+      TYPES.IMarkerService,
+    );
+
+    this.popupService = sceneContainer.get<IPopupService>(TYPES.IPopupService);
+
+    this.initComponent(id);
+
     // 初始化 scene
     this.sceneService.init(config);
     // TODO: 初始化组件
     this.addControl(new Logo());
   }
 
-  public getMapService(): IMapService {
+  public getMapService(): IMapService<unknown> {
     return this.mapService;
   }
 
@@ -148,9 +151,12 @@ class Scene implements IPostProcessingPassPluggable {
 
   // marker
   public addMarker(marker: IMarker) {
-    marker.addTo(this);
+    this.markerService.addMarker(marker);
   }
 
+  public addPopup(popup: IPopup) {
+    this.popupService.addPopup(popup);
+  }
   public on(type: string, handle: (...args: any[]) => void): void {
     SceneEventList.indexOf(type) === -1
       ? this.mapService.on(type, handle)
@@ -163,7 +169,7 @@ class Scene implements IPostProcessingPassPluggable {
       : this.sceneService.off(type, handle);
   }
 
-  // map method
+  // implements IMapController
 
   public getZoom(): number {
     return this.mapService.getZoom();
@@ -185,8 +191,6 @@ class Scene implements IPostProcessingPassPluggable {
     return this.mapService.getBounds();
   }
 
-  // set Map status
-
   public setRotation(rotation: number): void {
     this.mapService.setRotation(rotation);
   }
@@ -250,6 +254,16 @@ class Scene implements IPostProcessingPassPluggable {
       .whenTargetNamed(name);
   }
 
+  private initComponent(id: string | HTMLDivElement) {
+    this.controlService.init(
+      {
+        container: DOM.getContainer(id),
+      },
+      this.container,
+    );
+    this.markerService.init(this.container);
+    this.popupService.init(this.container);
+  }
   // 资源管理
 }
 
diff --git a/packages/utils/src/dom.ts b/packages/utils/src/dom.ts
index 205cd123ab..ae3ad726bc 100644
--- a/packages/utils/src/dom.ts
+++ b/packages/utils/src/dom.ts
@@ -1,24 +1,11 @@
 const docStyle = window.document.documentElement.style;
 type ELType = HTMLElement | SVGElement;
-export function createRendererContainer(domId: string): HTMLDivElement | null {
-  const $wrapper = document.getElementById(domId);
-
-  if ($wrapper) {
-    const $container = document.createElement('div');
-    $container.style.cssText += `
-      position: absolute;
-      top: 0;
-      z-index:2;
-      height: 100%;
-      width: 100%;
-      pointer-events: none;
-    `;
-    $container.id = 'l7_canvaslayer';
-    $wrapper.appendChild($container);
-    return $container;
+export function getContainer(domId: string | HTMLDivElement) {
+  let $dom = domId as HTMLDivElement;
+  if (typeof domId === 'string') {
+    $dom = document.getElementById(domId) as HTMLDivElement;
   }
-
-  return null;
+  return $dom;
 }
 
 export function trim(str: string) {
@@ -130,7 +117,7 @@ export function getClass(el: ELType) {
 }
 
 export function empty(el: ELType) {
-  while (el.firstChild) {
+  while (el && el.firstChild) {
     el.removeChild(el.firstChild);
   }
 }
diff --git a/stories/Animation/components/Polygon.tsx b/stories/Animation/components/Polygon.tsx
index efaac59a40..a3591953a6 100644
--- a/stories/Animation/components/Polygon.tsx
+++ b/stories/Animation/components/Polygon.tsx
@@ -1,4 +1,5 @@
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -8,7 +9,7 @@ function convertRGB2Hex(rgb: number[]) {
   );
 }
 
-export default class Mapbox extends React.Component {
+export default class Polygon extends React.Component {
   private gui: dat.GUI;
   private $stats: Node;
   private scene: Scene;
@@ -29,11 +30,12 @@ export default class Mapbox extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      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({
diff --git a/stories/Components/components/Marker.tsx b/stories/Components/components/Marker.tsx
index b5c2ebbd57..fc99f2d652 100644
--- a/stories/Components/components/Marker.tsx
+++ b/stories/Components/components/Marker.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { Marker, PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class MarkerComponent extends React.Component {
@@ -16,11 +17,12 @@ export default class MarkerComponent extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 30.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     this.scene = scene;
     const layer = new PolygonLayer({});
diff --git a/stories/Components/components/Popup.tsx b/stories/Components/components/Popup.tsx
index c3572ffdaf..4863381c90 100644
--- a/stories/Components/components/Popup.tsx
+++ b/stories/Components/components/Popup.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Popup, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class PopupComponent extends React.Component {
@@ -16,11 +17,12 @@ export default class PopupComponent extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 30.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     this.scene = scene;
     const layer = new PolygonLayer({});
diff --git a/stories/Components/components/Scale.tsx b/stories/Components/components/Scale.tsx
index beaf655c64..e9893ee812 100644
--- a/stories/Components/components/Scale.tsx
+++ b/stories/Components/components/Scale.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Scale, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class ScaleComponent extends React.Component {
@@ -16,11 +17,12 @@ export default class ScaleComponent extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 30.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     this.scene = scene;
     const layer = new PolygonLayer({});
diff --git a/stories/Components/components/Zoom.tsx b/stories/Components/components/Zoom.tsx
index ed479ac77e..b749f9954c 100644
--- a/stories/Components/components/Zoom.tsx
+++ b/stories/Components/components/Zoom.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Scene, Zoom } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 
 import * as React from 'react';
 
@@ -17,11 +18,12 @@ export default class ZoomComponent extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 30.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     this.scene = scene;
     const layer = new PolygonLayer({});
diff --git a/stories/Layers/components/Arc2DLine.tsx b/stories/Layers/components/Arc2DLine.tsx
index b0fd086b37..ee39fda8ce 100644
--- a/stories/Layers/components/Arc2DLine.tsx
+++ b/stories/Layers/components/Arc2DLine.tsx
@@ -1,4 +1,5 @@
 import { LineLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class Arc2DLineDemo extends React.Component {
@@ -14,12 +15,13 @@ export default class Arc2DLineDemo extends React.Component {
       'https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt',
     );
     const scene = new Scene({
-      center: [116.2825, 39.9],
       id: 'map',
-      pitch: 0,
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/dark-v9',
-      zoom: 2,
+      map: new Mapbox({
+        center: [116.2825, 39.9],
+        pitch: 0,
+        style: 'mapbox://styles/mapbox/dark-v9',
+        zoom: 2,
+      }),
     });
     const lineLayer = new LineLayer({
       enablePicking: true,
diff --git a/stories/Layers/components/Arcline.tsx b/stories/Layers/components/Arcline.tsx
index 6881645376..e81ae3ca1a 100644
--- a/stories/Layers/components/Arcline.tsx
+++ b/stories/Layers/components/Arcline.tsx
@@ -1,4 +1,5 @@
 import { LineLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class ArcLineDemo extends React.Component {
@@ -14,12 +15,13 @@ export default class ArcLineDemo extends React.Component {
       'https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt',
     );
     const scene = new Scene({
-      center: [116.2825, 39.9],
       id: 'map',
-      pitch: 0,
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/dark-v9',
-      zoom: 2,
+      map: new Mapbox({
+        center: [116.2825, 39.9],
+        pitch: 0,
+        style: 'mapbox://styles/mapbox/dark-v9',
+        zoom: 2,
+      }),
     });
     const lineLayer = new LineLayer({
       enablePicking: true,
diff --git a/stories/Layers/components/HeatMap.tsx b/stories/Layers/components/HeatMap.tsx
index 6fb0c2dd31..0ca9fdf800 100644
--- a/stories/Layers/components/HeatMap.tsx
+++ b/stories/Layers/components/HeatMap.tsx
@@ -1,4 +1,5 @@
 import { HeatmapLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 // @ts-ignore
 import * as React from 'react';
 
@@ -15,12 +16,13 @@ export default class HeatMapLayerDemo extends React.Component {
       'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
     );
     const scene = new Scene({
-      center: [121.268, 30.3628],
       id: 'map',
-      pitch: 0,
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/dark-v10',
-      zoom: 2,
+      map: new Mapbox({
+        center: [121.268, 30.3628],
+        pitch: 0,
+        style: 'mapbox://styles/mapbox/dark-v10',
+        zoom: 2,
+      }),
     });
     const layer = new HeatmapLayer({
       enableTAA: false,
diff --git a/stories/Layers/components/HeatmapGrid.tsx b/stories/Layers/components/HeatmapGrid.tsx
index be38b6187d..82a48d4c43 100644
--- a/stories/Layers/components/HeatmapGrid.tsx
+++ b/stories/Layers/components/HeatmapGrid.tsx
@@ -1,4 +1,5 @@
 import { HeatmapLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class GridHeatMap extends React.Component {
@@ -16,11 +17,12 @@ export default class GridHeatMap extends React.Component {
     const data = await response.text();
     const scene = new Scene({
       id: 'map',
-      style: 'dark',
-      pitch: 0,
-      center: [110.097892, 33.853662],
-      zoom: 4.056,
-      type: 'amap',
+      map: new GaodeMap({
+        style: 'dark',
+        pitch: 0,
+        center: [110.097892, 33.853662],
+        zoom: 4.056,
+      }),
     });
     const layer = new HeatmapLayer({
       enablePicking: true,
diff --git a/stories/Layers/components/Line.tsx b/stories/Layers/components/Line.tsx
index 9cefddee43..ec09d0b702 100644
--- a/stories/Layers/components/Line.tsx
+++ b/stories/Layers/components/Line.tsx
@@ -1,4 +1,5 @@
 import { LineLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class LineDemo extends React.Component {
@@ -14,12 +15,13 @@ export default class LineDemo extends React.Component {
       'https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json',
     );
     const scene = new Scene({
-      center: [102.602992, 23.107329],
       id: 'map',
-      pitch: 0,
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/dark-v9',
-      zoom: 13,
+      map: new Mapbox({
+        center: [102.602992, 23.107329],
+        pitch: 0,
+        style: 'mapbox://styles/mapbox/dark-v9',
+        zoom: 13,
+      }),
     });
     const lineLayer = new LineLayer({
       enableMultiPassRenderer: true,
diff --git a/stories/Layers/components/Point.tsx b/stories/Layers/components/Point.tsx
index ddf07ef4cc..aef74b70ec 100644
--- a/stories/Layers/components/Point.tsx
+++ b/stories/Layers/components/Point.tsx
@@ -1,4 +1,5 @@
 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';
@@ -10,51 +11,38 @@ export default class Point3D extends React.Component {
     this.scene.destroy();
   }
 
-  public componentDidMount() {
+  public async componentDidMount() {
+    const response = await fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+    );
+    const pointsData = await response.json();
     const scene = new Scene({
-      center: [120.19382669582967, 30.258134],
       id: 'map',
-      pitch: 0,
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      zoom: 1,
+      map: new GaodeMap({
+        center: [120.19382669582967, 30.258134],
+        pitch: 0,
+        style: 'light',
+        zoom: 3,
+      }),
+      // map: new Mapbox({
+      //   center: [120.19382669582967, 30.258134],
+      //   pitch: 0,
+      //   style: 'mapbox://styles/mapbox/streets-v9',
+      //   zoom: 1,
+      // }),
     });
-    const pointLayer = new PointLayer({
-      enableMultiPassRenderer: true,
-      enablePicking: true,
-      enableHighlight: true,
-      onHover: (pickedFeature: any) => {
-        // tslint:disable-next-line:no-console
-        console.log('Scene4', pickedFeature.feature.name);
-      },
-    });
-    pointLayer
-      .source(data)
-      .color('name', [
-        '#FFF5B8',
-        '#FFDC7D',
-        '#FFAB5C',
-        '#F27049',
-        '#D42F31',
-        '#730D1C',
-      ])
-      .shape('subregion', [
-        'circle',
-        'triangle',
-        'square',
-        'pentagon',
-        'hexagon',
-        'octogon',
-        'hexagram',
-        'rhombus',
-        'vesica',
-      ])
-      .size('scalerank', [5, 10])
+    const pointLayer = new PointLayer({})
+      .source(pointsData)
+      .shape('circle')
+      .size('mag', [1, 25])
+      .color('mag', (mag) => {
+        return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
+      })
       .style({
-        opacity: 1.0,
+        opacity: 0.3,
+        strokeWidth: 1,
       });
     scene.addLayer(pointLayer);
-    scene.render();
     this.scene = scene;
   }
 
diff --git a/stories/Layers/components/Point3D.tsx b/stories/Layers/components/Point3D.tsx
index f2631fe889..21944f3b9b 100644
--- a/stories/Layers/components/Point3D.tsx
+++ b/stories/Layers/components/Point3D.tsx
@@ -1,4 +1,5 @@
 import { PointLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 // @ts-ignore
 import data from '../data/data.json';
@@ -12,12 +13,13 @@ export default class Point3D extends React.Component {
 
   public componentDidMount() {
     const scene = new Scene({
-      center: [120.19382669582967, 30.258134],
       id: 'map',
-      pitch: 0,
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      zoom: 1,
+      map: new Mapbox({
+        center: [120.19382669582967, 30.258134],
+        pitch: 0,
+        style: 'mapbox://styles/mapbox/streets-v9',
+        zoom: 1,
+      }),
     });
     const pointLayer = new PointLayer({
       enablePicking: true,
diff --git a/stories/Layers/components/PointImage.tsx b/stories/Layers/components/PointImage.tsx
index 7f9a735f24..dfb746a6fd 100644
--- a/stories/Layers/components/PointImage.tsx
+++ b/stories/Layers/components/PointImage.tsx
@@ -1,4 +1,5 @@
 import { PointLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 export default class PointImage extends React.Component {
   // @ts-ignore
@@ -13,12 +14,13 @@ export default class PointImage extends React.Component {
       'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
     );
     const scene = new Scene({
-      center: [121.4, 31.258134],
-      zoom: 15,
       id: 'map',
-      pitch: 0,
-      type: 'amap',
-      style: 'dark',
+      map: new GaodeMap({
+        center: [121.4, 31.258134],
+        zoom: 15,
+        pitch: 0,
+        style: 'dark',
+      }),
     });
     scene.addImage(
       '00',
diff --git a/stories/Layers/components/Polygon3D.tsx b/stories/Layers/components/Polygon3D.tsx
index 7e9f76d13b..e4f5d5cb62 100644
--- a/stories/Layers/components/Polygon3D.tsx
+++ b/stories/Layers/components/Polygon3D.tsx
@@ -1,4 +1,5 @@
 import { PolygonLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
 function convertRGB2Hex(rgb: number[]) {
@@ -24,42 +25,36 @@ export default class Polygon3D extends React.Component {
 
   public async componentDidMount() {
     const response = await fetch(
-      'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
+      'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
     );
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new GaodeMap({
+        pitch: 0,
+        style: 'dark',
+        center: [ 114.050008, 22.529272 ],
+        zoom: 14.1
+      })
     });
-    this.scene = scene;
-    const layer = new PolygonLayer({
-      enableMultiPassRenderer: true,
-      enableLighting: true,
-      enablePicking: true,
-      enableHighlight: true,
-      // enableTAA: true,
-    });
-    layer
+
+    const layer = new PolygonLayer({})
       .source(await response.json())
-      .size('name', [0, 10000, 50000, 30000, 100000])
-      .color('name', [
-        '#2E8AE6',
-        '#69D1AB',
-        '#DAF291',
-        '#FFD591',
-        '#FF7A45',
-        '#CF1D49',
-      ])
       .shape('extrude')
+      .size('h20', [100, 120, 160, 200, 260, 500])
+      .color('h20', [
+        '#816CAD',
+        '#A67FB5',
+        '#C997C7',
+        '#DEB8D4',
+        '#F5D4E6',
+        '#FAE4F1',
+        '#FFF3FC'
+      ])
       .style({
-        opacity: 1.0,
+        opacity: 1.0
       });
     scene.addLayer(layer);
-    scene.render();
-    this.scene = scene;
+
   }
 
   public render() {
diff --git a/stories/Layers/components/RasterImage.tsx b/stories/Layers/components/RasterImage.tsx
index 039f2a8bb5..06628c5c23 100644
--- a/stories/Layers/components/RasterImage.tsx
+++ b/stories/Layers/components/RasterImage.tsx
@@ -1,4 +1,5 @@
 import { ImageLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
 export default class ImageLayerDemo extends React.Component {
@@ -10,12 +11,13 @@ export default class ImageLayerDemo extends React.Component {
 
   public componentDidMount() {
     const scene = new Scene({
-      center: [121.2680,30.3628],
       id: 'map',
-      pitch: 0,
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      zoom: 10,
+      map: new Mapbox({
+        center: [121.268, 30.3628],
+        pitch: 0,
+        style: 'mapbox://styles/mapbox/streets-v9',
+        zoom: 10,
+      }),
     });
     const layer = new ImageLayer({});
     layer.source(
diff --git a/stories/Layers/components/RasterLayer.tsx b/stories/Layers/components/RasterLayer.tsx
index 0abbbb27e2..90a2479563 100644
--- a/stories/Layers/components/RasterLayer.tsx
+++ b/stories/Layers/components/RasterLayer.tsx
@@ -1,4 +1,5 @@
 import { RasterLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 // @ts-ignore
 import * as GeoTIFF from 'geotiff/dist/geotiff.bundle.js';
 import * as React from 'react';
@@ -12,12 +13,13 @@ export default class ImageLayerDemo extends React.Component {
 
   public async componentDidMount() {
     const scene = new Scene({
-      center: [121.268, 30.3628],
       id: 'map',
-      pitch: 0,
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      zoom: 2,
+      map: new Mapbox({
+        center: [121.268, 30.3628],
+        pitch: 0,
+        style: 'mapbox://styles/mapbox/streets-v9',
+        zoom: 2,
+      }),
     });
     const tiffdata = await this.getTiffData();
     const layer = new RasterLayer({});
@@ -51,7 +53,6 @@ export default class ImageLayerDemo extends React.Component {
         },
       });
     scene.addLayer(layer);
-    console.log(layer);
     scene.render();
     this.scene = scene;
   }
diff --git a/stories/MapAdaptor/Map.stories.tsx b/stories/MapAdaptor/Map.stories.tsx
index bebfd56af9..a2276c3e4d 100644
--- a/stories/MapAdaptor/Map.stories.tsx
+++ b/stories/MapAdaptor/Map.stories.tsx
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import AMap from './components/AMap';
+import GaodeMap from './components/AMap';
 import Mapbox from './components/Mapbox';
 import Mixed from './components/Mixed';
 import MultiAMap from './components/MultiAMap';
@@ -9,7 +9,7 @@ import MultiMapbox from './components/MultiMapbox';
 import notes from './Map.md';
 // @ts-ignore
 storiesOf('地图底图', module)
-  .add('高德地图', () => <AMap />, {
+  .add('高德地图', () => <GaodeMap />, {
     notes: { markdown: notes },
   })
   .add('Mapbox', () => <Mapbox />, {
diff --git a/stories/MapAdaptor/components/AMap.tsx b/stories/MapAdaptor/components/AMap.tsx
index 045b85341e..d0b313e5df 100644
--- a/stories/MapAdaptor/components/AMap.tsx
+++ b/stories/MapAdaptor/components/AMap.tsx
@@ -1,8 +1,9 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
-export default class AMap extends React.Component {
+export default class GaodeMapComponent extends React.Component {
   // @ts-ignore
   private scene: Scene;
 
@@ -16,12 +17,13 @@ export default class AMap extends React.Component {
     );
     const data = await response.json();
     const scene = new Scene({
-      center: [110.19382669582967, 50.258134],
       id: 'map',
-      pitch: 0,
-      style: 'dark',
-      type: 'amap',
-      zoom: 3,
+      map: new GaodeMap({
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        style: 'dark',
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
       enablePicking: false,
diff --git a/stories/MapAdaptor/components/Mapbox.tsx b/stories/MapAdaptor/components/Mapbox.tsx
index 8f68e5ba9f..0cdc21f1a8 100644
--- a/stories/MapAdaptor/components/Mapbox.tsx
+++ b/stories/MapAdaptor/components/Mapbox.tsx
@@ -1,8 +1,9 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
-export default class Mapbox extends React.Component {
+export default class MapboxComponent extends React.Component {
   private scene: Scene;
 
   public componentWillUnmount() {
@@ -15,11 +16,12 @@ export default class Mapbox extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 30.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     this.scene = scene;
     const layer = new PolygonLayer({});
diff --git a/stories/MapAdaptor/components/Mixed.tsx b/stories/MapAdaptor/components/Mixed.tsx
index 241f3d9d51..0dc725e0cf 100644
--- a/stories/MapAdaptor/components/Mixed.tsx
+++ b/stories/MapAdaptor/components/Mixed.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PointLayer, PolygonLayer, Scene } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 // @ts-ignore
 import pointsData from '../../assets/data/points.json';
@@ -24,36 +25,40 @@ export default class Mixed extends React.Component {
     const data = await response.json();
 
     const scene1 = new Scene({
-      center: [110.19382669582967, 50.258134],
       id: 'map1',
-      pitch: 0,
-      style: 'light',
-      type: 'amap',
-      zoom: 3,
+      map: new GaodeMap({
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        style: 'light',
+        zoom: 3,
+      }),
     });
     const scene2 = new Scene({
-      center: [110.19382669582967, 50.258134],
       id: 'map2',
-      pitch: 0,
-      style: 'dark',
-      type: 'amap',
-      zoom: 3,
+      map: new GaodeMap({
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        style: 'dark',
+        zoom: 3,
+      }),
     });
     const scene3 = new Scene({
       id: 'map3',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 2,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 2,
+      }),
     });
     const scene4 = new Scene({
       id: 'map4',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/light-v10',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 2,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/light-v10',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 2,
+      }),
     });
 
     this.scene1 = scene1;
diff --git a/stories/MapAdaptor/components/MultiAMap.tsx b/stories/MapAdaptor/components/MultiAMap.tsx
index 8ea80f01d0..45cbe6cdc8 100644
--- a/stories/MapAdaptor/components/MultiAMap.tsx
+++ b/stories/MapAdaptor/components/MultiAMap.tsx
@@ -1,8 +1,9 @@
 // @ts-ignore
-import { PolygonLayer, Scene } from '@antv/l7';
+import { Scene } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
 import * as React from 'react';
 
-export default class MultiAMap extends React.Component {
+export default class MultiGaodeMap extends React.Component {
   private scene1: Scene;
   private scene2: Scene;
 
@@ -16,39 +17,23 @@ export default class MultiAMap extends React.Component {
       'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
     );
     const scene1 = new Scene({
-      center: [110.19382669582967, 50.258134],
       id: 'map1',
-      pitch: 0,
-      style: 'light',
-      type: 'amap',
-      zoom: 3,
+      map: new GaodeMap({
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        style: 'light',
+        zoom: 3,
+      }),
     });
     const scene2 = new Scene({
-      center: [110.19382669582967, 50.258134],
       id: 'map2',
-      pitch: 0,
-      style: 'dark',
-      type: 'amap',
-      zoom: 3,
+      map: new GaodeMap({
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        style: 'dark',
+        zoom: 3,
+      }),
     });
-    // 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);
     this.scene1 = scene1;
     this.scene2 = scene2;
   }
diff --git a/stories/MapAdaptor/components/MultiMapbox.tsx b/stories/MapAdaptor/components/MultiMapbox.tsx
index 02c4fe6b82..e7b0905ea6 100644
--- a/stories/MapAdaptor/components/MultiMapbox.tsx
+++ b/stories/MapAdaptor/components/MultiMapbox.tsx
@@ -1,8 +1,9 @@
 // @ts-ignore
 import { Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as React from 'react';
 
-export default class Mapbox extends React.Component {
+export default class MultiMapbox extends React.Component {
   private scene1: Scene;
   private scene2: Scene;
 
@@ -17,62 +18,25 @@ export default class Mapbox extends React.Component {
     );
     const scene1 = new Scene({
       id: 'map1',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 30.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     this.scene1 = scene1;
 
     const scene2 = new Scene({
       id: 'map2',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/light-v10',
-      center: [110.19382669582967, 30.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/light-v10',
+        center: [110.19382669582967, 30.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     this.scene2 = scene2;
-    // const layer = new PolygonLayer({});
-
-    // layer
-    //   .source(await response.json())
-    //   .size('name', [0, 10000, 50000, 30000, 100000])
-    //   .color('name', () => {
-    //     return 'yellow';
-    //   })
-    //   .shape('fill')
-    //   .style({
-    //     opacity: 0.8,
-    //   });
-    // scene.addLayer(layer);
-    // scene.on('loaded', () => {
-    //   const zoomControl = new Zoom({
-    //     position: 'bottomright',
-    //   });
-    //   const scaleControl = new Scale();
-    //   const popup = new Popup({
-    //     offsets: [0, 20],
-    //   })
-    //     .setLnglat({
-    //       lng: 120.19382669582967,
-    //       lat: 30.258134,
-    //     })
-    //     .setText('hello')
-    //     .addTo(scene);
-
-    //   const maker = new Marker();
-    //   maker
-    //     .setLnglat({
-    //       lng: 120.19382669582967,
-    //       lat: 30.258134,
-    //     })
-    //     .addTo(scene);
-    //   scene.addControl(zoomControl);
-    //   scene.addControl(scaleControl);
-    //   // layer.fitBounds();
-    // });
   }
 
   public render() {
diff --git a/stories/MultiPassRenderer/components/Blur.tsx b/stories/MultiPassRenderer/components/Blur.tsx
index fe017d8483..70ca5e1a30 100644
--- a/stories/MultiPassRenderer/components/Blur.tsx
+++ b/stories/MultiPassRenderer/components/Blur.tsx
@@ -1,4 +1,5 @@
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -24,14 +25,14 @@ export default class Blur extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
-      enableMultiPassRenderer: true,
       enablePicking: true,
       enableHighlight: true,
       passes: [
diff --git a/stories/MultiPassRenderer/components/ColorHalftone.tsx b/stories/MultiPassRenderer/components/ColorHalftone.tsx
index 9214118f76..045b6ebb34 100644
--- a/stories/MultiPassRenderer/components/ColorHalftone.tsx
+++ b/stories/MultiPassRenderer/components/ColorHalftone.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -26,14 +27,14 @@ export default class ColorHalftone extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
-      enableMultiPassRenderer: true,
       enablePicking: true,
       enableHighlight: true,
       passes: [
diff --git a/stories/MultiPassRenderer/components/CustomPostProcessing.tsx b/stories/MultiPassRenderer/components/CustomPostProcessing.tsx
index 07606e6445..6729e8063f 100644
--- a/stories/MultiPassRenderer/components/CustomPostProcessing.tsx
+++ b/stories/MultiPassRenderer/components/CustomPostProcessing.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { BasePostProcessingPass, PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -87,11 +88,12 @@ export default class CustomPostProcessing extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
 
     // 注册自定义后处理效果
diff --git a/stories/MultiPassRenderer/components/HexagonalPixelate.tsx b/stories/MultiPassRenderer/components/HexagonalPixelate.tsx
index c9d38ec39a..2a2ac5e684 100644
--- a/stories/MultiPassRenderer/components/HexagonalPixelate.tsx
+++ b/stories/MultiPassRenderer/components/HexagonalPixelate.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -25,11 +26,12 @@ export default class HexagonalPixelate extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
       enablePicking: true,
diff --git a/stories/MultiPassRenderer/components/Ink.tsx b/stories/MultiPassRenderer/components/Ink.tsx
index c630405bcb..8ac612307c 100644
--- a/stories/MultiPassRenderer/components/Ink.tsx
+++ b/stories/MultiPassRenderer/components/Ink.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -25,11 +26,12 @@ export default class Ink extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
       enablePicking: true,
diff --git a/stories/MultiPassRenderer/components/Noise.tsx b/stories/MultiPassRenderer/components/Noise.tsx
index f1eef8c82f..b3c8518200 100644
--- a/stories/MultiPassRenderer/components/Noise.tsx
+++ b/stories/MultiPassRenderer/components/Noise.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -25,11 +26,12 @@ export default class Noise extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
       enablePicking: true,
diff --git a/stories/MultiPassRenderer/components/Sepia.tsx b/stories/MultiPassRenderer/components/Sepia.tsx
index 0719ba4adc..9802829386 100644
--- a/stories/MultiPassRenderer/components/Sepia.tsx
+++ b/stories/MultiPassRenderer/components/Sepia.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -25,11 +26,12 @@ export default class Sepia extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
       enablePicking: true,
diff --git a/stories/MultiPassRenderer/components/TAA.tsx b/stories/MultiPassRenderer/components/TAA.tsx
index fb8743f091..619f273cc8 100644
--- a/stories/MultiPassRenderer/components/TAA.tsx
+++ b/stories/MultiPassRenderer/components/TAA.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -25,11 +26,12 @@ export default class TAA extends React.Component {
     const data = await response.json();
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
       enablePicking: true,
diff --git a/stories/Picking/components/AdvancedAPI.tsx b/stories/Picking/components/AdvancedAPI.tsx
index cc38312971..5c63622f46 100644
--- a/stories/Picking/components/AdvancedAPI.tsx
+++ b/stories/Picking/components/AdvancedAPI.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -24,14 +25,14 @@ export default class AdvancedAPI extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
-      enableMultiPassRenderer: true,
       enablePicking: true,
       enableHighlight: true,
       highlightColor: [0, 0, 1, 1],
diff --git a/stories/Picking/components/Highlight.tsx b/stories/Picking/components/Highlight.tsx
index f7b019ec0d..beeb6de485 100644
--- a/stories/Picking/components/Highlight.tsx
+++ b/stories/Picking/components/Highlight.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
@@ -24,11 +25,12 @@ export default class Highlight extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
       enablePicking: true,
diff --git a/stories/Picking/components/Tooltip.tsx b/stories/Picking/components/Tooltip.tsx
index 3c965db30f..426c68d6dd 100644
--- a/stories/Picking/components/Tooltip.tsx
+++ b/stories/Picking/components/Tooltip.tsx
@@ -1,9 +1,10 @@
 // @ts-ignore
 import { PolygonLayer, Scene } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
 import * as dat from 'dat.gui';
 import * as React from 'react';
 
-export default class Mapbox extends React.Component {
+export default class Tooltip extends React.Component {
   private scene: Scene;
 
   public componentWillUnmount() {
@@ -16,11 +17,12 @@ export default class Mapbox extends React.Component {
     );
     const scene = new Scene({
       id: 'map',
-      type: 'mapbox',
-      style: 'mapbox://styles/mapbox/streets-v9',
-      center: [110.19382669582967, 50.258134],
-      pitch: 0,
-      zoom: 3,
+      map: new Mapbox({
+        style: 'mapbox://styles/mapbox/streets-v9',
+        center: [110.19382669582967, 50.258134],
+        pitch: 0,
+        zoom: 3,
+      }),
     });
     const layer = new PolygonLayer({
       enablePicking: true,