From 3a320c7aed0ac312108d92c85f082b6617a0737b Mon Sep 17 00:00:00 2001 From: 2912401452 <2912401452@qq.com> Date: Fri, 18 Mar 2022 18:09:42 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E5=AE=98=E7=BD=91=20?= =?UTF-8?q?CanvasLayer=20=E6=96=87=E6=A1=A3=E3=80=81=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E5=8F=82=E6=95=B0=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/canvas.en.md | 6 ++ docs/api/canvas.zh.md | 83 +++++++++++++++++++++ examples/point/chart/demo/custom.js | 2 +- packages/layers/src/canvas/models/canvas.ts | 10 +-- packages/layers/src/core/interface.ts | 2 +- stories/Object/components/canvas.tsx | 2 +- 6 files changed, 97 insertions(+), 8 deletions(-) create mode 100644 docs/api/canvas.en.md create mode 100644 docs/api/canvas.zh.md diff --git a/docs/api/canvas.en.md b/docs/api/canvas.en.md new file mode 100644 index 0000000000..7eff754ed4 --- /dev/null +++ b/docs/api/canvas.en.md @@ -0,0 +1,6 @@ +--- +title: Custom Layer +order: 7 +--- + +`markdown:docs/api/canvas.zh.md` diff --git a/docs/api/canvas.zh.md b/docs/api/canvas.zh.md new file mode 100644 index 0000000000..56842b3568 --- /dev/null +++ b/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 绘制 + + } + }); +``` + +案例 + +[在线案例](../../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` diff --git a/examples/point/chart/demo/custom.js b/examples/point/chart/demo/custom.js index a58ffff796..305b9920b3 100644 --- a/examples/point/chart/demo/custom.js +++ b/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({ diff --git a/packages/layers/src/canvas/models/canvas.ts b/packages/layers/src/canvas/models/canvas.ts index 33d3500b6d..9b7e18c77b 100644 --- a/packages/layers/src/canvas/models/canvas.ts +++ b/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(); diff --git a/packages/layers/src/core/interface.ts b/packages/layers/src/core/interface.ts index da24a8c063..3475f3aa59 100644 --- a/packages/layers/src/core/interface.ts +++ b/packages/layers/src/core/interface.ts @@ -123,7 +123,7 @@ export interface IGeometryLayerStyleOptions { } export enum CanvasUpdateType { - 'AWAYS' = 'aways', + 'ALWAYS' = 'always', 'DRAGEND' = 'dragend', } diff --git a/stories/Object/components/canvas.tsx b/stories/Object/components/canvas.tsx index 0114931123..5e71eb3be7 100644 --- a/stories/Object/components/canvas.tsx +++ b/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, })