antv-l7/docs/api/canvas.zh.md

title	order
自定义图层	7

L7 的自定义图层允许用户通过 canvas 绘制的方法自定义图层的内容和样式。相比于 Marker 通过创建实际 DOM 的方式，CanvasLayer 无疑有更佳的性能。

使用

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 绘制
  },
});

在线案例

source

🌟 CanvasLayer 不需要设置 source。

Event

🌟 CanvasLayer 暂不支持交互动作。

animate

当用户在绘制 canvas 动画的时候，为了实现动画的更新，需要执行 animate 方法。

layer.animate(true);

在线案例

style

zIndex

每个创建一个 CanvasLayer，L7 会生成一个 Canvas DOM 的实例，我们通过设置 zIndex 的值来调整 CanvasLayer 的层级。

update

指定 CanavsLayer 的更新方式，update 有两个值 'always'、'dragend'，默认为 'always'

• always 总是更新
• dragend 地图拖动完后/缩放完后更新

drawingOnCanvas(options)

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 坐标，从而达到绘图内容与地图的位置的对应。

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