docs: refactor layer docs

docs/api/layer/heatmap_layer/grid.zh.md

@@ -0,0 +1,4 @@
+---
+title: 网格热力图
+order: 1
+---

docs/api/layer/heatmap_layer/heatmap.en.md

@@ -1,6 +1,6 @@
 ---
 title: HeatmapLayer
-order: 5
+order: 0
 ---
 
 # heatmapLayer

docs/api/layer/heatmap_layer/heatmap.zh.md

@@ -1,6 +1,6 @@
 ---
 title: HeatmapLayer
-order: 5
+order: 0
 ---
 
 # heatmapLayer

docs/api/layer/heatmap_layer/hexagon.zh.md

@@ -0,0 +1,4 @@
+---
+title: 蜂窝热力图
+order: 1
+---

docs/api/layer/heatmap_layer/normal.zh.md

@@ -0,0 +1,4 @@
+---
+title: 经典热力图
+order: 1
+---

docs/api/layer/line_layer/arc.zh.md

@@ -0,0 +1,5 @@
+---
+title: 弧线图
+order: 1
+---
+将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等

docs/api/layer/line_layer/linelayer.zh.md

@@ -1,6 +1,6 @@
 ---
 title: LineLayer
-order: 2
+order: 0
 ---
 
 ## 线图层

docs/api/layer/line_layer/path.zh.md

@@ -0,0 +1,5 @@
+---
+title: 路径图
+order: 1
+---
+用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

docs/api/layer/point_layer/bubble.en.md

@@ -0,0 +1,4 @@
+---
+title: bubble
+order: 1
+---

docs/api/layer/point_layer/bubble.zh.md

@@ -0,0 +1,32 @@
+---
+title: 气泡图
+order: 1
+---
+气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
+
+## 使用
+
+气泡图通过PointLayer对象实例化，shape 设置成 **circle**
+
+```javascript
+
+const bubble = 
+new PointLayer()
+    .source(data)
+    .shape(circle)
+    .size('mag',[0, 25])
+    .color('red')
+    .style({
+      opacity: 0.3,
+      strokeWidth: 1
+    })
+```
+## tips
+
+目前style的配置项只支持全局设置，不支持数据映射。
+
+如果 opacity 设置为 0.3 则所有的气泡都是 0.3
+
+style方法如果没有设置 stroke, 默认于气泡的填充色相同
+
+

docs/api/layer/point_layer/chart.zh.md

@@ -0,0 +1,5 @@
+---
+title: 复合图表地图
+order: 6
+---
+使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等

docs/api/layer/point_layer/column.zh.md

@@ -0,0 +1,58 @@
+---
+title: 3D 柱图
+order: 5
+---
+3D柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
+
+## 使用
+
+3D柱图通过 PointLayer对象实例化，将shape设置成不同的3Dshape
+### shape
+
+3D Shape 支持
+
+- cylinder 
+- triangleColumn
+- hexagonColumn
+- squareColumn
+
+### size
+
+  3D柱图size 需要设置三个维度 [w, l, z]
+  - w 宽
+  - l 长
+  - z 高度
+
+size设置成常量
+
+```
+ layer.size([2,2,3])
+ ```
+size 回调函数设置
+
+```
+ layer.size('unit_price', h => {
+        return [ 6, 6, h / 500 ];
+    })
+```
+
+
+
+```javascript
+
+const column = new PointLayer({})
+      .source(data)
+      .shape('name', [
+        'cylinder',
+        'triangleColumn',
+        'hexagonColumn',
+        'squareColumn'
+      ])
+      .size('unit_price', h => {
+        return [ 6, 6, h / 500 ];
+      })
+      .color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
+      .style({
+        opacity: 1.0
+      });
+```

docs/api/layer/point_layer/intensity.zh.md

@@ -0,0 +1,12 @@
+---
+title: 亮度图
+order: 3
+---
+亮度图又层点密度图，在地理区域上绘制海量的点，地图上单位面积的点越多亮度越高
+
+
+##使用
+
+### shape
+
+亮度图可以不设置

docs/api/layer/point_layer/marker.zh.md

@@ -0,0 +1,5 @@
+---
+title: 自定义 Marker
+order: 7
+---
+可自定义点符号，通过自定义dom实现地图标注，富文本、动态点状符号都可用于地图上信息的标记。

docs/api/layer/point_layer/pointlayer.en.md

@@ -1,6 +1,6 @@
 ---
 title: PointLayer
-order: 1
+order: 0
 ---
 
 # PointLayer

docs/api/layer/point_layer/pointlayer.zh.md

@@ -1,6 +1,6 @@
 ---
 title: PointLayer
-order: 1
+order: 0
 ---
 
 # PointLayer

docs/api/layer/point_layer/scatter.zh.md

@@ -0,0 +1,39 @@
+---
+title: 散点图
+order: 2
+---
+在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
+
+## 使用
+散点图通过PointLayer对象实例化
+
+### shape
+
+- circle
+- square
+- hexagon
+- triangle
+- pentagon
+- octogon
+- hexagram
+- rhombus
+- vesica
+
+### 视觉通道设置
+
+shape、size 设置成常量
+color 可以设置根据数据映射
+
+```javascript
+
+const scatter = 
+new PointLayer()
+    .source(data)
+    .shape(circle)
+    .size(5)
+    .color('red')
+    .style({
+      opacity: 0.3,
+      strokeWidth: 1
+    })
+```

docs/api/layer/point_layer/symbol.en.md

@@ -0,0 +1,4 @@
+---
+title: 符号图
+order: 4
+---

docs/api/layer/point_layer/symbol.zh.md

@@ -0,0 +1,45 @@
+---
+title: 符号图
+order: 4
+---
+在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
+
+
+
+## 使用
+
+符号图 通过PointLayer对象实例化，将shape设置成图片符号
+
+### shape
+
+通过scene addImage 方法
+
+addImage()
+ 参数：
+ - id 图片的id,
+ - url 图片的url
+ 
+ ```javascript
+ scene.addImage(
+      '00',
+      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
+  );
+
+⚠️ 符号图的ID不能与点图层已有shape名称相同，比如不能设置 circle
+
+```
+
+符号图需要把shape设置成图片的id，同样符号图shape也支持数据映射
+
+```javascript
+const scatter = 
+new PointLayer()
+    .source(data)
+    .shape('00')
+    .size(5)
+    .color('red')
+    .style({
+      opacity: 0.3,
+      strokeWidth: 1
+    })
+```

docs/api/layer/polygon_layer/extrude.zh.md

@@ -0,0 +1,4 @@
+---
+title: 3D填充图
+order: 1
+---

docs/api/layer/polygon_layer/fill.zh.md

@@ -0,0 +1,4 @@
+---
+title: 填充图
+order: 1
+---

docs/api/layer/polygon_layer/polygonlayer.en.md

@@ -1,6 +1,6 @@
 ---
 title: PolygonLayer
-order: 3
+order: 0
 ---
 
 # 填充图

docs/api/layer/polygon_layer/polygonlayer.zh.md

@@ -1,6 +1,6 @@
 ---
 title: PolygonLayer
-order: 3
+order: 0
 ---
 
 # 填充图

docs/api/scene.zh.md

@@ -97,6 +97,7 @@ const scene =new L7.Scene({
 - dark
 - light
 - normal
+- blank 无底图
 
 除了内置的样式，你也可以传入自定义的其他属性。
 
@@ -198,7 +199,14 @@ scene.setCenter([lng,lat])
 ```
 
 参数：`center`  {LngLat} 地图中心点
+### setZoom()
 
+设置地图缩放等级
+
+参数：`zoom` 地图缩放等级
+```
+scene.setZoom(zoom)
+```
 
 ### setZoomAndCenter
 设置地图等级和中心

docs/tutorial/quickstart.zh.md

@@ -156,4 +156,7 @@ export default class AMapExample extends React.Component {
 
 更多React使用 [示例查看](https://github.com/antvis/L7/tree/master/stories) 
 
-### Vue 欢迎补充
+### Vue 欢迎补充
+[1.x Vue 使用](https://codesandbox.io/s/l7-vue1xdemo-wknsz)
+### Html
+[2.0版本 HTML 使用模板](https://codesandbox.io/s/l7htmltemplate-vp2lp)

gatsby-config.js

@@ -87,6 +87,38 @@ module.exports = {
         },
         order: 3
       },
+      {
+        slug: 'api/layer/point_layer',
+        title: {
+          zh: '点图层',
+          en: 'PointLayer'
+        },
+        order: 1
+      },
+      {
+        slug: 'api/layer/line_layer',
+        title: {
+          zh: '线图层',
+          en: 'LineLayer'
+        },
+        order: 2
+      },
+      {
+        slug: 'api/layer/polygon_layer',
+        title: {
+          zh: '面图层',
+          en: 'PolygonLayer'
+        },
+        order: 3
+      },
+      {
+        slug: 'api/layer/heatmap_layer',
+        title: {
+          zh: '热力图',
+          en: 'HeatmapLayer'
+        },
+        order: 4
+      },
       {
         slug: 'api/source',
         title: {

packages/core/src/services/config/ConfigService.ts

@@ -4,6 +4,7 @@ import { ILayerConfig } from '../layer/ILayerService';
 import { IGlobalConfigService, ISceneConfig } from './IConfigService';
 import mapConfigSchema from './mapConfigSchema';
 import sceneConfigSchema from './sceneConfigSchema';
+import WarnInfo, { IWarnInfo } from './warnInfo';
 
 /**
  * 场景默认配置项
@@ -104,6 +105,10 @@ export default class GlobalConfigService implements IGlobalConfigService {
     return this.sceneConfigCache[sceneId];
   }
 
+  public getSceneWarninfo(id: string) {
+    return WarnInfo[id];
+  }
+
   public setSceneConfig(sceneId: string, config: Partial<ISceneConfig>) {
     this.sceneConfigCache[sceneId] = {
       ...defaultSceneConfig,

packages/core/src/services/config/IConfigService.ts

@@ -41,6 +41,11 @@ export interface IGlobalConfigService {
   getLayerConfig<IChildLayerConfig>(
     layerId: string,
   ): Partial<ILayerConfig & ISceneConfig & IChildLayerConfig>;
+  /**
+   * 获取警告信息
+   * @param key
+   */
+  getSceneWarninfo(layerId: string): string;
 
   /**
    * 设置图层配置项，继承所属场景配置项

packages/core/src/services/config/warnInfo.ts

@@ -0,0 +1,10 @@
+export interface IWarnInfo {
+  MapToken: string;
+  [key: string]: any;
+}
+const WarnInfo: IWarnInfo = {
+  MapToken: '您正在使用 Demo测试地图token，如果生成环境中使用去对应地图请注册Token',
+  SDK: 's',
+};
+
+export default WarnInfo;

packages/core/src/services/map/IMapService.ts

@@ -51,6 +51,7 @@ export interface IMapService<RawMap = {}> {
   panBy(pixel: Point): void;
   fitBounds(bound: Bounds): void;
   setZoomAndCenter(zoom: number, center: Point): void;
+  setZoom(zoom: number): void;
   setMapStyle(style: string): void;
 
   // coordinates methods

packages/maps/src/amap/index.ts

@@ -5,7 +5,9 @@ import {
   Bounds,
   CoordinateSystem,
   ICoordinateSystemService,
+  IGlobalConfigService,
   ILngLat,
+  ILogService,
   IMapConfig,
   IMapService,
   IPoint,
@@ -47,6 +49,12 @@ export default class AMapService
    */
   public map: AMap.Map & IAMapInstance;
 
+  @inject(TYPES.IGlobalConfigService)
+  private readonly configService: IGlobalConfigService;
+
+  @inject(TYPES.ILogService)
+  private readonly logger: ILogService;
+
   @inject(TYPES.MapConfig)
   private readonly config: Partial<IMapConfig>;
 
@@ -106,8 +114,13 @@ export default class AMapService
   }
   public getZoom(): number {
     // 统一返回 Mapbox 缩放等级
-    return this.map.getZoom() - 1;
+    return this.map.getZoom();
   }
+
+  public setZoom(zoom: number): void {
+    return this.map.setZoom(zoom);
+  }
+
   public getCenter(): ILngLat {
     const center = this.map.getCenter();
     return {
@@ -250,7 +263,10 @@ export default class AMapService
             pendingResolveQueue = [];
           }
         };
-        const url: string = `https://webapi.amap.com/maps?v=${AMAP_VERSION}&key=${AMAP_API_KEY}&plugin=Map3D&callback=initAMap`;
+        if (token === AMAP_API_KEY) {
+          this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
+        }
+        const url: string = `https://webapi.amap.com/maps?v=${AMAP_VERSION}&key=${token}&plugin=Map3D&callback=initAMap`;
         const $jsapi = document.createElement('script');
         $jsapi.id = AMAP_SCRIPT_ID;
         $jsapi.charset = 'utf-8';

packages/maps/src/mapbox/index.ts

@@ -5,7 +5,9 @@ import {
   Bounds,
   CoordinateSystem,
   ICoordinateSystemService,
+  IGlobalConfigService,
   ILngLat,
+  ILogService,
   IMapConfig,
   IMapService,
   IPoint,
@@ -27,7 +29,8 @@ const EventMap: {
 import { MapTheme } from './theme';
 
 const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
-
+const MAPBOX_API_KEY =
+  'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
 /**
  * AMapService
  */
@@ -39,6 +42,11 @@ export default class MapboxService
   @inject(TYPES.MapConfig)
   private readonly config: Partial<IMapConfig>;
 
+  @inject(TYPES.IGlobalConfigService)
+  private readonly configService: IGlobalConfigService;
+
+  @inject(TYPES.ILogService)
+  private readonly logger: ILogService;
   @inject(TYPES.ICoordinateSystemService)
   private readonly coordinateSystemService: ICoordinateSystemService;
 
@@ -85,10 +93,15 @@ export default class MapboxService
   public getType() {
     return 'mapbox';
   }
+
   public getZoom(): number {
     return this.map.getZoom();
   }
 
+  public setZoom(zoom: number) {
+    return this.map.setZoom(zoom);
+  }
+
   public getCenter(): ILngLat {
     return this.map.getCenter();
   }
@@ -177,7 +190,7 @@ export default class MapboxService
       id = 'map',
       attributionControl = false,
       style = 'light',
-      token = 'pk.eyJ1IjoieGlhb2l2ZXIiLCJhIjoiY2pxcmc5OGNkMDY3cjQzbG42cXk5NTl3YiJ9.hUC5Chlqzzh0FFd_aEc-uQ',
+      token = MAPBOX_API_KEY,
       rotation = 0,
       ...rest
     } = this.config;
@@ -189,7 +202,14 @@ export default class MapboxService
      * TODO: 使用 mapbox v0.53.x 版本 custom layer，需要共享 gl context
      * @see https://github.com/mapbox/mapbox-gl-js/blob/master/debug/threejs.html#L61-L64
      */
+    if (!mapboxgl) {
+      this.logger.error(this.configService.getSceneWarninfo('SDK'));
+    }
     mapboxgl.accessToken = token;
+
+    if (token === MAPBOX_API_KEY && style !== 'blank') {
+      this.logger.warn(this.configService.getSceneWarninfo('MapToken'));
+    }
     // @ts-ignore
     this.map = new mapboxgl.Map({
       container: id,

packages/scene/src/index.ts

@@ -210,6 +210,9 @@ class Scene
     this.mapService.panTo(pixel);
   }
 
+  public setZoom(zoom: number): void {
+    this.mapService.setZoom(zoom);
+  }
   public fitBounds(bound: Bounds): void {
     this.mapService.fitBounds(bound);
   }