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
-        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/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',
-  center: [ 110.770672, 34.159869 ],
-  pitch: 45,
+  map: new AMap({
+    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.AMap({
+    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.AMap({
+    style: 'dark',
+    center: [ 110.770672, 34.159869 ],
+    pitch: 45,
+  }),
 })
 ```
 

docs/api/scene.zh.md

@@ -1,13 +1,35 @@
 ---
-title: 场景 Scene
+title: Scene
 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
@@ -26,32 +48,25 @@ L7 地理可视化 地图，图层，组件，以及可视化所需要的资源
 可以通过scene map 属性获取 map实例
 
 ```javascript
- const map = scene.map
+const map = scene.map
 
 ```
 为了统一不同底图之前的接口差异 L7 在scene层对map的方法做了统一，因此一些地图的操作方法可以通过scene调用这样，切换不同底图时保证表现一致。
 
 示例代码
 
 ```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.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',
-    style: 'dark', // 样式URL
-    center: [120.19382669582967, 30.258134],
-    pitch: 0,
-    zoom: 12,
-    type:'amap',
-    token: '高德地图token'
-
+    map: new L7.AMap({
+      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',
-    mapStyle: 'dark', // 样式URL
-    center: [120.19382669582967, 30.258134],
-    pitch: 0,
-    zoom: 12,
-    type:'amap',
-
+    map: new L7.AMap({
+      style: 'dark', // 样式URL
+      center: [120.19382669582967, 30.258134],
+      pitch: 0,
+      zoom: 12,
+      token: '高德地图token',
+    }),
   });
 
 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')