feat: 补充官网 CanvasLayer 文档、调整参数名

docs/api/canvas.en.md

@@ -0,0 +1,6 @@
+---
+title: Custom Layer
+order: 7
+---
+
+`markdown:docs/api/canvas.zh.md`

docs/api/canvas.zh.md

@@ -0,0 +1,83 @@
+---
+title: 自定义图层
+order: 7
+---
+
+L7 的自定义图层允许用户通过 canvas 绘制的方法自定义图层的内容和样式。相比于 Marker 通过创建实际 DOM 的方式，CanvasLayer 无疑有更加的性能。
+
+## 使用
+
+```jsx
+import { CanvasLayer } from '@antv/l7';
+const layer = new CanvasLayer({})
+      .style({
+        drawingOnCanvas: option => {
+          const { size, ctx, mapService } = option;
+          const [ width, height ] = size;
+
+          ctx.clearRect(0, 0, width, height);
+          // canvas 绘制
+          
+        }
+      });
+```
+
+<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*hUmNQJ1sAb8AAAAAAAAAAAAAARQnAQ'/>
+
+[在线案例](../../examples/point/chart#custom)
+
+### source
+🌟 CanvasLayer 不需要设置 source。
+
+### Event
+🌟 CanvasLayer 暂不支持交互动作。
+
+### animate
+
+当用户在绘制 canvas 动画的时候，为了实现动画的更新，需要执行 animate 方法。
+
+```javascript
+layer.animate(true);
+```
+[在线案例](../../examples/point/chart#custom)
+
+### style
+
+#### zIndex
+
+每个创建一个 CanvasLayer，L7 会生成一个 Canvas DOM 的实例，我们通过设置 zIndex 的值来调整 CanvasLayer 的层级。
+
+#### update
+
+指定 CanavsLayer 的更新方式，update 有两个值 'always'、'dragend'，默认为 'always'
+- always  总是更新
+- dragend 地图拖动完后/缩放完后更新
+
+#### drawingOnCanvas(options)
+
+```javascript
+options: {
+  canvas: HTMLCanvasELement;
+  ctx: CanvasRenderingContext2D;
+  mapService: IMapService
+  size: [number, number];
+}
+```
+  drawingOnCanvas，这是一个函数，接受相关参数，用户在该函数中写 canvas 的绘制逻辑
+  - canvas  CanvasLayer 生成的 canvas DOM 节点
+  - ctx 生成的 canvas DOM 的上下文
+  - mapService  当前地图的 mapService，主要提供 lngLatToContainer 方法
+  - size  当前视图的实际绘图范围的大小
+
+#### lngLatToContainer([lng,lat]): {x: x, y: y}
+
+该方法是由 mapService 参数提供的，主要用于将经纬度点位数据实时转化成 Canvas 绘图能够使用的 xy 坐标，从而达到绘图内容与地图的位置的对应。
+
+```javascript
+var center = [120, 30];
+var centerXY = mapService.lngLatToContainer(center); // {x: 100, y: 100}
+// centerXY 表示距离视图左上角 x 轴方向 100px，y 轴方向 100px
+// canvas 绘图坐标系
+```
+
+`markdown:docs/common/layer/base.md`

examples/point/chart/demo/custom.js

@@ -119,7 +119,7 @@ scene.on('loaded', () => {
   const layer = new CanvasLayer({})
     .style({
       zIndex: 10,
-      update: 'aways',
+      update: 'always',
       drawingOnCanvas: draw
     })
     .animate({

packages/layers/src/canvas/models/canvas.ts

@@ -7,7 +7,7 @@ import {
 } from '../../core/interface';
 
 export default class CanvaModel extends BaseModel {
-  protected updateMode: CanvasUpdateType = CanvasUpdateType.AWAYS;
+  protected updateMode: CanvasUpdateType = CanvasUpdateType.ALWAYS;
   protected canvas: HTMLCanvasElement;
   protected ctx: CanvasRenderingContext2D;
   protected prevSize: [number, number];
@@ -15,7 +15,7 @@ export default class CanvaModel extends BaseModel {
   public renderUpdate = () => {
     const {
       zIndex = 10,
-      update = CanvasUpdateType.AWAYS,
+      update = CanvasUpdateType.ALWAYS,
       animateOption = { enable: false, duration: 20 },
     } = this.layer.getLayerConfig() as ICanvasLayerStyleOptions;
     if (+this.canvas.style.zIndex === zIndex) {
@@ -26,7 +26,7 @@ export default class CanvaModel extends BaseModel {
       this.unBindListener();
       this.bindListener();
     }
-    if (this.updateMode === CanvasUpdateType.AWAYS && animateOption.enable) {
+    if (this.updateMode === CanvasUpdateType.ALWAYS && animateOption.enable) {
       this.renderCanvas();
     }
   };
@@ -40,7 +40,7 @@ export default class CanvaModel extends BaseModel {
   };
 
   public bindListener = () => {
-    if (this.updateMode === CanvasUpdateType.AWAYS) {
+    if (this.updateMode === CanvasUpdateType.ALWAYS) {
       this.mapService.on('mapchange', this.renderCanvas);
     } else {
       this.mapService.on('zoomstart', this.clearCanvas);
@@ -61,7 +61,7 @@ export default class CanvaModel extends BaseModel {
 
   public initModels() {
     const {
-      update = CanvasUpdateType.AWAYS,
+      update = CanvasUpdateType.ALWAYS,
     } = this.layer.getLayerConfig() as ICanvasLayerStyleOptions;
     this.updateMode = update as CanvasUpdateType;
     this.initCanvas();

packages/layers/src/core/interface.ts

@@ -123,7 +123,7 @@ export interface IGeometryLayerStyleOptions {
 }
 
 export enum CanvasUpdateType {
-  'AWAYS' = 'aways',
+  'ALWAYS' = 'always',
   'DRAGEND' = 'dragend',
 }
 

stories/Object/components/canvas.tsx

@@ -138,7 +138,7 @@ export default class Demo extends React.Component {
           const layer = new CanvasLayer({})
             .style({
               zIndex: 10,
-              update: 'aways',
+              update: 'always',
               // update: 'dragend',
               drawingOnCanvas: this.draw,
             })