CanvasLayer

CanvasLayer allows users to customize the content and style of the layer through canvas drawing methods. Compared to Marker by creating the actual DOM, CanvasLayer undoubtedly has better performance.

use

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

Online case

source

🌟 CanvasLayer does not need to set source.

event

🌟 CanvasLayer does not support interactive actions yet.

animate

When the user is drawing a canvas animation, in order to update the animation, the animate method needs to be executed.

layer.animate(true);

Online case

style

zIndex

Each time a CanvasLayer is created, L7 will generate an instance of the Canvas DOM. We adjust the level of the CanvasLayer by setting the zIndex value.

update

Specify the update method of CanavsLayer. update has two values ​​’always’ and ‘dragend’. The default is ‘always’

• always always updated
• dragend The map is updated after dragging/zooming.

drawingOnCanvas(options)

options: {
  canvas: HTMLCanvasELement;
  ctx: CanvasRenderingContext2D;
  mapService: IMapService;
  size: [number, number];
}

drawingOnCanvas, this is a function that accepts relevant parameters. The user writes the canvas drawing logic in this function.

• canvas DOM node generated by canvas CanvasLayer
• The context of the canvas DOM generated by ctx
• mapService mapService of the current map, mainly provides lngLatToContainer method
• size The actual drawing range size of the current view

lngLatToContainer([lng,lat]): {x: x, y: y}

This method is provided by the mapService parameter and is mainly used to convert latitude and longitude point data into xy coordinates that can be used in Canvas drawing in real time, so as to achieve the correspondence between the drawing content and the location of the map.

var center = [120, 30];
var centerXY = mapService.lngLatToContainer(center); // {x: 100, y: 100}
// centerXY means 100px from the upper left corner of the view in the x-axis direction and 100px in the y-axis direction
// canvas drawing coordinate system