Merge pull request #92 from antvis/dev-map

修改场景中地图使用方式

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).

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
 
 目前在基类中我们声明了如下属性及其对应的校验规则：

dev-docs/IoC 容器、依赖注入与服务说明.md

@@ -171,6 +171,7 @@ protected getConfigSchema() {
 通过 `mapService` 引用。
 
 常用地图状态获取方法如下：
+
 | 方法名 | 参数 | 返回值 | 说明 |
 | -------- | ------------- | --------- | --------- |
 | getSize  | 无 | `[number, number]` | 获取地图尺寸（像素单位） |
@@ -196,7 +197,6 @@ protected getConfigSchema() {
 通过 `rendererService` 引用。
 
 
-
 ### 图层管理服务
 
 开发者不需要显式调用。用于管理场景中所有的图层，负责图层的创建、销毁。

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({});
 

dev-docs/构建方案.md

@@ -344,9 +344,9 @@ yarn build
 }
 ```
 
-### [WIP] 异步加载 Mapbox
+### 按需引入地图依赖
 
 以 L7 Bundler 方式使用时，由于需要在运行时根据用户配置项选择地图底图，会导致构建时需要将全部地图依赖引入，无法进行 TreeShaking。
 目前高德地图使用运行时异步加载方式引入，不会导致该问题，但 Mapbox 同样使用 Bundler，对于高德用户就多余了。
 
-一个可能的方案是对于 Mapbox 使用 CodeSplitting。在容器首次获取 Mapbox 地图服务时异步加载并缓存。
+[ISSUE](https://github.com/antvis/L7/issues/86)

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: [

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
-

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,
+  }),
 })
 ```
 

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** 

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')

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')

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')

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;
   }
 

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;
   }
 

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 => {

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(

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 => {

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'
 )

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 => {

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'
 )

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'
 )

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'
 )

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(

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'
 )

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(

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'

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(

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'
 )

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'
 )

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'
 )

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(

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'
 )

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())

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'

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')

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')

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')

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(

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(

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(

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(

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(

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(

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'

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(

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(

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'

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', () => {

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', () => {

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', () => {

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'

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'

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 => {

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 => {

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(

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(

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',

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', () => {

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 => {

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'
 )

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'
 )

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'
 )

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')

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(

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({});

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({});

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);
+

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);
+

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"
+    }
+  ]
+}

examples/tutorial/control/index.en.md

@@ -0,0 +1,5 @@
+---
+title: control
+order: 2
+---
+How to use the map control

examples/tutorial/control/index.zh.md

@@ -0,0 +1,5 @@
+---
+title: 组件
+order: 2
+---
+如何使用组件

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
+  })
+});

examples/tutorial/data/demo/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "图库",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "line.js",
+      "title": "json数据"",
+      "screenshot": ""
+    }
+  ]
+}

examples/tutorial/data/index.en.md

@@ -0,0 +1,6 @@
+---
+title: Data
+order: 1
+---
+
+coming soon ……

examples/tutorial/data/index.zh.md

@@ -0,0 +1,5 @@
+---
+title: 数据
+order: 1
+---
+在路上 ……

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
+  })
+});

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
+  })
+});

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"
+    }
+  ]
+}

examples/tutorial/map/index.en.md

@@ -0,0 +1,6 @@
+---
+title: map
+order: 0
+---
+
+how to  use L7 Initialize third-party maps

examples/tutorial/map/index.zh.md

@@ -0,0 +1,7 @@
+---
+title: 地图
+order: 0
+---
+介绍如何初始化一个第三方底图
+
+

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);

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);
+

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"
+    }
+  ]
+}

examples/tutorial/marker/index.en.md

@@ -0,0 +1,5 @@
+---
+title: control
+order: 2
+---
+add  Rich text  annotation  to scene

examples/tutorial/marker/index.zh.md

@@ -0,0 +1,5 @@
+---
+title: Marker
+order: 2
+---
+通过添加dom实现富文本地图标注

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');

lerna.json

@@ -9,9 +9,7 @@
       ],
       "allowBranch": [
         "master",
-        "develop",
-        "next",
-        "dev-container"
+        "next"
       ],
       "message": "chore: publish"
     }

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",

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';

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';

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';
   }

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",

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';
 

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

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();

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;

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;
+}

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;
+}

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();
+    });
+  }
+}

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;
+  }
+}