feat(map): adjust Scene API, use @antv/l7-maps instead

re #86

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
+        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',
+    map: new AMap({
+      center: [110.19382669582967, 50.258134],
       pitch: 0,
       style: 'dark',
-    type: 'amap',
       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',
+      map: new AMap({
+        center: [110.19382669582967, 50.258134],
         pitch: 0,
         style: 'dark',
-      type: 'amap',
         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',
+  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/scene.en.md

@@ -10,19 +10,24 @@ order: 1
 ```javascript
 // Module 引用
 import { Scene } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
-  mapStyle: 'dark',
+  map: new AMap({
+    style: 'dark',
     center: [ 110.770672, 34.159869 ],
     pitch: 45,
+  }),
 });
 
 // CDN 使用方法
 const scene = new L7.Scene({
   id: 'map',
-  mapStyle: 'dark',
+  map: new L7.AMap({
+    style: 'dark',
     center: [ 110.770672, 34.159869 ],
     pitch: 45,
+  }),
 });
 ```
 
@@ -46,17 +51,18 @@ const scene = new L7.Scene({
 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',
+  map: new L7.AMap({
+    style: 'dark',
     center: [ 110.770672, 34.159869 ],
-    pitch:45
+    pitch: 45,
+  }),
 })
 ```
 

docs/api/scene.zh.md

@@ -1,5 +1,5 @@
 ---
-title: 场景 Scene
+title: Scene
 order: 1
 ---
 
@@ -7,7 +7,29 @@ order: 1
 
 ## Scene
 
-L7 地理可视化 地图，图层，组件，以及可视化所需要的资源，如图片，字体通过Scene统一管理
+```javascript
+// Module 引用
+import { Scene } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
+const scene = new Scene({
+  id: 'map',
+  map: new AMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
+});
+
+// CDN 使用方法
+const scene = new L7.Scene({
+  id: 'map',
+  map: new L7.AMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
+});
+```
 
 
 ## Map
@@ -34,24 +56,17 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
 示例代码
 
 ```javascript
-// Module 引用
-import { Scene } from '@antv/l7';
-const scene = new Scene({
-  id: 'map',
-  mapStyle: 'dark',
-  center: [ 110.770672, 34.159869 ],
-  pitch: 45,
-});
-
-// CDN 使用方法
 const scene =new L7.Scene({
   id: 'map',
-  mapStyle: 'dark',
+  map: new L7.AMap({
+    style: 'dark',
     center: [ 110.770672, 34.159869 ],
     pitch: 45,
-});
+  }),
+})
 ```
 
+
 ### 构造函数
 
 **Scene** 

docs/tutorial/map/amap.en.md

@@ -35,13 +35,13 @@ order: 0
 ``` javascript
   const scene = new L7.Scene({
     id: 'map',
+    map: new L7.AMap({
       style: 'dark', // 样式URL
       center: [120.19382669582967, 30.258134],
       pitch: 0,
       zoom: 12,
-    type:'amap',
-    token: '高德地图token'
-
+      token: '高德地图token',
+    }),
   });
 
 ```
@@ -111,12 +111,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 
   const scene = new L7.Scene({
     id: 'map',
-    mapStyle: 'dark', // 样式URL
+    map: new L7.AMap({
+      style: 'dark', // 样式URL
       center: [120.19382669582967, 30.258134],
       pitch: 0,
       zoom: 12,
-    type:'amap',
-
+      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',
+    map: new L7.AMap({
       style: 'dark', // 样式URL
       center: [120.19382669582967, 30.258134],
       pitch: 0,
       zoom: 12,
-    type:'amap',
-    token: '高德地图token'
-
+      token: '高德地图token',
+    }),
   });
 
 ```
@@ -111,12 +111,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 
   const scene = new L7.Scene({
     id: 'map',
-    mapStyle: 'dark', // 样式URL
+    map: new L7.AMap({
+      style: 'dark', // 样式URL
       center: [120.19382669582967, 30.258134],
       pitch: 0,
       zoom: 12,
-    type:'amap',
-
+      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',
+    map: new L7.Mapbox({
       style: 'dark', // 样式URL
       center: [120.19382669582967, 30.258134],
       pitch: 0,
       zoom: 12,
-    type:'mapbox',
-    token: 'mapbox token'
-
+      token: 'mapbox token',
+    }),
   });
 
 ```
@@ -118,12 +118,13 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
 <script>
   const scene = new L7.Scene({
     id: 'map',
-    mapStyle: 'dark', // 样式URL
+    map: new L7.Mapbox({
+      style: 'dark', // 样式URL
       center: [120.19382669582967, 30.258134],
       pitch: 0,
       zoom: 12,
-    type:'amap',
-
+      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 { AMap } 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',
+    map: new AMap({
+      center: [110.19382669582967, 50.258134],
       pitch: 0,
       style: 'dark',
-    type: 'amap',
       zoom: 3,
       token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    }),
   });
 
   // 创建图层
@@ -86,9 +88,6 @@ import { Scene, PolygonLayer } from '@antv/l7';
 
   // 添加图层到场景中
   scene.addLayer(layer);
-
-  // 渲染场景
-  scene.render();
 })();
 ```
 
@@ -103,6 +102,7 @@ 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 {
@@ -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',
+      map: new AMap({
+        center: [110.19382669582967, 50.258134],
         pitch: 0,
         style: 'dark',
-      type: 'amap',
         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 { AMap } 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',
+    map: new AMap({
+      center: [110.19382669582967, 50.258134],
       pitch: 0,
       style: 'dark',
-    type: 'amap',
       zoom: 3,
       token: 'pg.xxx', // 高德或者 Mapbox 的 token
+    }),
   });
 
   // 创建图层
@@ -86,9 +88,6 @@ import { Scene, PolygonLayer } from '@antv/l7';
 
   // 添加图层到场景中
   scene.addLayer(layer);
-
-  // 渲染场景
-  scene.render();
 })();
 ```
 
@@ -103,6 +102,7 @@ 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 {
@@ -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',
+      map: new AMap({
+        center: [110.19382669582967, 50.258134],
         pitch: 0,
         style: 'dark',
-      type: 'amap',
         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',
+  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',
+  map: new Mapbox({
+    style: 'dark',
     center: [ 103.83735604457024, 1.360253881403068 ],
     pitch: 4.00000000000001,
     zoom: 10.210275860702593,
     rotation: 19.313180925794313,
-  type: 'mapbox',
-  style: 'dark'
+  }),
 });
 
 fetch(

examples/gallery/basic/demo/column_dark.js

@@ -1,13 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 35.210526315789465,
-  type: 'amap',
     style: 'dark',
     center: [ 104.288144, 31.239692 ],
-  zoom: 4.4
+    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',
+  map: new Mapbox({
     style: 'dark',
     pitch: 43,
     center: [ 120.13383079335335, 29.651873105004427 ],
     zoom: 7.068989519212174,
-  type: 'mapbox'
+  }),
 });
 
-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 { AMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
-  style: 'dark',
+  map: new AMap({
     center: [ 121.417463, 31.215175 ],
     pitch: 0,
-  zoom: 11
+    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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 64.88,
-  type: 'amap',
     style: 'dark',
     center: [ 114.060288, 22.53684 ],
-  zoom: 15.63
+    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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     style: 'light',
     pitch: 0,
     center: [ 107.054293, 35.246265 ],
     zoom: 4.056,
-  type: 'amap'
+  }),
 });
-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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     style: 'dark',
     pitch: 0,
     center: [ 110.097892, 33.853662 ],
     zoom: 4.056,
-  type: 'amap'
+  }),
 });
-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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     style: 'light',
     pitch: 0,
     center: [ 110.097892, 33.853662 ],
     zoom: 4.056,
-  type: 'amap'
+  }),
 });
 
 fetch(

examples/heatmap/grid/demo/world.js

@@ -1,14 +1,16 @@
 import { Scene, HeatmapLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     style: 'dark',
     pitch: 0,
     center: [ 110.097892, 33.853662 ],
     zoom: 4.056,
-  type: 'amap'
+  }),
 });
 
-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',
+  map: new Mapbox({
     style: 'dark',
     pitch: 0,
     center: [ 127.5671666579043, 7.445038892195569 ],
-  type: 'mapbox',
-  zoom: 2.632456779444394
+    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',
+  map: new Mapbox({
     style: 'dark',
     pitch: 58.5,
     center: [ 111.8759, 30.6942 ],
     rotation: 0.519,
-  type: 'mapbox',
-  zoom: 3.6116
+    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',
+  map: new Mapbox({
     style: 'dark',
     pitch: 0,
     center: [ 127.5671666579043, 7.445038892195569 ],
-  type: 'mapbox',
     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',
+  map: new Mapbox({
     style: 'dark',
     pitch: 47.49999999999995,
     center: [ 112.50447776627743, 30.830476390931125 ],
     zoom: 3.9879693680088626,
-  type: 'mapbox'
+  }),
 });
-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',
+  map: new Mapbox({
     style: 'light',
     pitch: 56.499,
     center: [ 114.07737552216226, 22.542656745583486 ],
     rotation: 39.19,
     zoom: 12.47985,
-  type: 'mapbox'
+  }),
 });
-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',
+  map: new Mapbox({
     style: 'dark',
     pitch: 43,
     center: [ 120.13383079335335, 29.651873105004427 ],
     zoom: 7.068989519212174,
-  type: 'mapbox'
+  }),
 });
 
-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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     style: 'light',
     pitch: 0,
     center: [ 104.995156, 31.450658 ],
-  type: 'amap',
-  zoom: 3.79
+    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',
+  map: new Mapbox({
     pitch: 0,
-  type: 'mapbox',
     style: 'dark',
     center: [ 0, 23.107329 ],
-  zoom: 0
+    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',
+  map: new Mapbox({
     pitch: 0,
-  type: 'mapbox',
     style: 'dark',
     center: [ 107.77791556935472, 35.443286920228644 ],
-  zoom: 2.9142882493605033
+    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',
+  map: new Mapbox({
     pitch: 60,
     type: 'mapbox',
     style: 'light',
     center: [ -74.06967, 40.720399 ],
-  zoom: 12.45977
+    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',
+  map: new Mapbox({
     pitch: 60,
-  type: 'mapbox',
     style: 'dark',
     center: [ 104.34278, 41.12554 ],
     zoom: 2.94888,
-  rotation: 42.3999
+    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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 53.6305,
-  type: 'amap',
     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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 26.842105263157915,
-  type: 'amap',
     style: 'dark',
     center: [ 102.599436, 23.116371 ],
-  zoom: 14.78
+    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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
-  type: 'amap',
     style: 'light',
     center: [ 104.117492, 36.492696 ],
-  zoom: 3.89
+    zoom: 3.89,
+  }),
 });
 
 fetch(

examples/line/line/demo/isoline.js

@@ -1,11 +1,14 @@
 import { Scene, LineLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
-  type: 'amap',
     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',
+  map: new Mapbox({
     center: [ 103.83735, 1.3602538 ],
     pitch: 4.00000000000001,
     zoom: 10.210275860702593,
     rotation: 19.313180925794313,
-  type: 'mapbox',
-  style: 'dark'
+    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',
+  map: new Mapbox({
     center: [ 103.83735604457024, 1.360253881403068 ],
     pitch: 4.00000000000001,
     zoom: 10.210275860702593,
     rotation: 19.313180925794313,
-  type: 'mapbox',
-  style: 'light'
+    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',
+  map: new Mapbox({
     center: [ 116.3956, 39.9392 ],
     pitch: 0,
     zoom: 10,
     rotation: 0,
-  type: 'mapbox',
-  style: 'dark'
+    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',
+  map: new Mapbox({
     center: [ 116.3956, 39.9392 ],
     pitch: 0,
     zoom: 10,
     rotation: 0,
-  type: 'mapbox',
-  style: 'light'
+    style: 'light',
+  }),
 });
 
 fetch(

examples/point/bubble/demo/color.js

@@ -1,13 +1,15 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
-  type: 'amap',
     style: 'light',
     center: [ 121.435159, 31.256971 ],
     zoom: 14.89,
-  minZoom: 10
+    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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
     type: 'amap',
     style: 'light',
     center: [ 140.067171, 36.26186 ],
     zoom: 5.32,
-  maxZoom: 10
+    maxZoom: 10,
+  }),
 });
 
 fetch(

examples/point/bubble/demo/scatter.js

@@ -1,11 +1,14 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new AMap({
     style: 'light',
     center: [ -121.24357, 37.58264 ],
     pitch: 0,
-  zoom: 6.45
+    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',
+  map: new Mapbox({
     pitch: 0,
-  type: 'mapbox',
     style: 'dark',
     center: [ 96.99215001469588, 29.281597225674773 ],
     zoom: 2.194613775109773,
-  maxZoom: 10
+    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 { AMap } from '@antv/l7-maps';
 import * as G2 from '@antv/g2';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new AMap({
     style: 'light',
     center: [ 2.6125016864608597, 49.359131 ],
     pitch: 0,
-  zoom: 4.19
+    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 { AMap } from '@antv/l7-maps';
 import * as G2 from '@antv/g2';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new AMap({
     style: 'light',
     center: [ 2.6125016864608597, 49.359131 ],
     pitch: 0,
-  zoom: 4.19
+    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',
+  map: new Mapbox({
     pitch: 0,
-  type: 'mapbox',
     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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 66.02383,
-  type: 'amap',
     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',
+  map: new Mapbox({
     pitch: 60,
-  type: 'mapbox',
     style: 'light',
     center: [ 121.412224, 31.26192438 ],
     zoom: 13.13438,
-  rotation: 35.97133
+    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 { AMap } from '@antv/l7-maps';
 
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 35.210526315789465,
-  type: 'amap',
     style: 'dark',
     center: [ 104.288144, 31.239692 ],
-  zoom: 4.4
+    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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 48.62562,
-  type: 'amap',
     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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
-  type: 'amap',
     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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
-  type: 'amap',
     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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new AMap({
     style: 'dark',
     center: [ 120.5969, 29.7918 ],
     pitch: 35,
     zoom: 7,
-  rotation: 4.183582
+    rotation: 4.183582,
+  }),
 });
 scene.addImage(
   '00',

examples/point/marker/demo/marker.js

@@ -1,11 +1,14 @@
 import { Scene, Marker } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new AMap({
     style: 'light',
     center: [ 105.790327, 36.495636 ],
     pitch: 0,
-  zoom: 4
+    zoom: 4,
+  }),
 });
 scene.render();
 scene.on('loaded', () => {

examples/point/scatter/demo/normal.js

@@ -1,13 +1,16 @@
 import { Scene, PointLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
-  type: 'amap',
+  map: new AMap({
     style: 'dark',
     center: [ 121.417463, 31.215175 ],
     pitch: 0,
-  zoom: 11
+    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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 64.88,
-  type: 'amap',
     style: 'dark',
     center: [ 114.060288, 22.53684 ],
-  zoom: 15.63
+    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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
-  type: 'amap',
     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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
-  type: 'amap',
     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 { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
-  type: 'amap',
     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',
+  map: new Mapbox({
     pitch: 0,
-  type: 'mapbox',
     style: 'light',
     center: [ 3.438, 40.16797 ],
-  zoom: 0.51329
+    zoom: 0.51329,
+  }),
 });
 Promise.all([
   fetch(

examples/raster/basic/demo/image.js

@@ -1,11 +1,14 @@
 import { Scene, ImageLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
-  type: 'amap',
     style: 'light',
     center: [ 121.268, 30.3628 ],
-  zoom: 13
+    zoom: 13,
+  }),
 });
 
 const layer = new ImageLayer({});

examples/raster/basic/demo/radar.js

@@ -1,11 +1,14 @@
 import { Scene, ImageLayer } from '@antv/l7';
+import { AMap } from '@antv/l7-maps';
+
 const scene = new Scene({
   id: 'map',
+  map: new AMap({
     pitch: 0,
-  type: 'amap',
     style: 'dark',
     center: [ 115.5268, 34.3628 ],
-  zoom: 7
+    zoom: 7,
+  }),
 });
 
 const layer = new ImageLayer({});

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

packages/component/src/marker.ts

@@ -14,7 +14,7 @@ export default class Marker {
   private markerOption: IMarkerOption;
   private defaultMarker: boolean;
   private popup: IPopup; // TODO: POPup
-  private mapservice: IMapService;
+  private mapservice: IMapService<unknown>;
   private lngLat: ILngLat;
   private scene: IMarkerScene;
   constructor(option?: Partial<IMarkerOption>) {

packages/component/src/popup.ts

@@ -15,7 +15,7 @@ export interface IPopupOption {
 }
 export default class Popup extends EventEmitter implements IPopup {
   private popupOption: IPopupOption;
-  private mapservice: IMapService;
+  private mapservice: IMapService<unknown>;
   private lngLat: ILngLat;
   private content: HTMLElement;
   private closeButton: HTMLElement;

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/services/component/IMarkerService.ts

@@ -1,6 +1,6 @@
 import { ILngLat, IMapService } from '../map/IMapService';
 export interface IMarkerScene {
-  getMapService(): IMapService;
+  getMapService(): IMapService<unknown>;
   [key: string]: any;
 }
 export interface IMarker {

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(

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

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

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

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

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

packages/core/src/services/scene/SceneService.ts

@@ -121,7 +121,7 @@ export default class Scene extends EventEmitter implements ISceneService {
     /**
      * 初始化底图
      */
-    this.hooks.init.tapPromise('initMap', async (config: unknown) => {
+    this.hooks.init.tapPromise('initMap', async () => {
       // 等待首次相机同步
       await new Promise((resolve) => {
         this.map.onCameraChanged((viewport: IViewport) => {
@@ -129,7 +129,7 @@ export default class Scene extends EventEmitter implements ISceneService {
           this.cameraService.update(viewport);
           resolve();
         });
-        this.map.init(config as Partial<IMapCamera>);
+        this.map.init();
       });
 
       // 重新绑定非首次相机更新事件

packages/core/src/types.ts

@@ -26,6 +26,7 @@ const TYPES = {
   IFactoryNormalPass: Symbol.for('Factory<IFactoryNormalPass>'),
   IMultiPassRenderer: Symbol.for('IMultiPassRenderer'),
   SceneID: Symbol.for('SceneID'),
+  MapConfig: Symbol.for('MapConfig'),
 };
 
 export { TYPES };

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

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

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

packages/maps/src/index.ts

@@ -1,4 +1,4 @@
-import AMapService from './amap';
-import MapboxService from './mapbox';
+import AMap from './amap/Wrapper';
+import Mapbox from './mapbox/Wrapper';
 
-export { AMapService, MapboxService };
+export { AMap, Mapbox };

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

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

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

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

packages/scene/src/index.ts

@@ -10,22 +10,21 @@ import {
   ILayer,
   ILayerService,
   ILngLat,
-  IMapConfig,
   IMapService,
   IMarker,
   IPoint,
   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 { Container } from 'inversify';
+import ILayerManager from './ILayerManager';
+import IMapController from './IMapController';
 import IPostProcessingPassPluggable from './IPostProcessingPassPluggable';
 
 /**
@@ -38,49 +37,39 @@ 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 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,
@@ -93,7 +82,7 @@ class Scene implements IPostProcessingPassPluggable {
     this.addControl(new Logo());
   }
 
-  public getMapService(): IMapService {
+  public getMapService(): IMapService<unknown> {
     return this.mapService;
   }
 
@@ -163,7 +152,7 @@ class Scene implements IPostProcessingPassPluggable {
       : this.sceneService.off(type, handle);
   }
 
-  // map method
+  // implements IMapController
 
   public getZoom(): number {
     return this.mapService.getZoom();
@@ -185,8 +174,6 @@ class Scene implements IPostProcessingPassPluggable {
     return this.mapService.getBounds();
   }
 
-  // set Map status
-
   public setRotation(rotation: number): void {
     this.mapService.setRotation(rotation);
   }

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

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

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

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

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

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',
+      map: new Mapbox({
+        center: [116.2825, 39.9],
         pitch: 0,
-      type: 'mapbox',
         style: 'mapbox://styles/mapbox/dark-v9',
         zoom: 2,
+      }),
     });
     const lineLayer = new LineLayer({
       enablePicking: true,

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',
+      map: new Mapbox({
+        center: [116.2825, 39.9],
         pitch: 0,
-      type: 'mapbox',
         style: 'mapbox://styles/mapbox/dark-v9',
         zoom: 2,
+      }),
     });
     const lineLayer = new LineLayer({
       enablePicking: true,

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',
+      map: new Mapbox({
+        center: [121.268, 30.3628],
         pitch: 0,
-      type: 'mapbox',
         style: 'mapbox://styles/mapbox/dark-v10',
         zoom: 2,
+      }),
     });
     const layer = new HeatmapLayer({
       enableTAA: false,

stories/Layers/components/HeatmapGrid.tsx

@@ -1,4 +1,5 @@
 import { HeatmapLayer, Scene } from '@antv/l7';
+import { AMap } 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',
+      map: new AMap({
         style: 'dark',
         pitch: 0,
         center: [110.097892, 33.853662],
         zoom: 4.056,
-      type: 'amap',
+      }),
     });
     const layer = new HeatmapLayer({
       enablePicking: true,

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',
+      map: new Mapbox({
+        center: [102.602992, 23.107329],
         pitch: 0,
-      type: 'mapbox',
         style: 'mapbox://styles/mapbox/dark-v9',
         zoom: 13,
+      }),
     });
     const lineLayer = new LineLayer({
       enableMultiPassRenderer: true,

stories/Layers/components/Point.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,15 +13,15 @@ export default class Point3D extends React.Component {
 
   public componentDidMount() {
     const scene = new Scene({
-      center: [120.19382669582967, 30.258134],
       id: 'map',
+      map: new Mapbox({
+        center: [120.19382669582967, 30.258134],
         pitch: 0,
-      type: 'mapbox',
         style: 'mapbox://styles/mapbox/streets-v9',
         zoom: 1,
+      }),
     });
     const pointLayer = new PointLayer({
-      enableMultiPassRenderer: true,
       enablePicking: true,
       enableHighlight: true,
       onHover: (pickedFeature: any) => {

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',
+      map: new Mapbox({
+        center: [120.19382669582967, 30.258134],
         pitch: 0,
-      type: 'mapbox',
         style: 'mapbox://styles/mapbox/streets-v9',
         zoom: 1,
+      }),
     });
     const pointLayer = new PointLayer({
       enablePicking: true,

stories/Layers/components/PointImage.tsx

@@ -1,4 +1,5 @@
 import { PointLayer, Scene } from '@antv/l7';
+import { AMap } 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({
+      id: 'map',
+      map: new AMap({
         center: [121.4, 31.258134],
         zoom: 15,
-      id: 'map',
         pitch: 0,
-      type: 'amap',
         style: 'dark',
+      }),
     });
     scene.addImage(
       '00',