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,90 +7,82 @@ 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配置项设置控件添加状态**
 
-```javascript
-scene = new L7.scene({
-   zoomControl: true,
-   scaleControl: true,
-   attributionControl: true
-})
+组件介绍
+
+```
+import { Scale Layers, Zoom } from '@antv/l7';
+
 ```
 
-#### 
+
+
 
 #### Zoom
 放大缩小组件 默认 左上角
 
 ```javascript
- new L7.Control.Zoom({
+ const zoomControl = new  Zoom({
       position: 'topleft'
-    }).addTo(scene);
+    })
+
+ scene.addControl(zoomControl);
+
 ```
 
 
 #### Scale
 比例尺组件默认左下角
 
 ```javascript
- new L7.Control.Scale({
-      position: 'bottomleft'
-    }).addTo(scene);
-```
-
+  const zoomControl = new  Zoom({
+      position: 'topleft'
+    })
 
-#### attribution
-默认右下角
+ scene.addControl(zoomControl);
 
-```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
-