推荐文章：探索HTML5 Canvas的力量 —— Leaflet.CanvasLayer开源项目深度剖析

// 引入Leaflet库和Leaflet.CanvasLayer库
import L from 'leaflet';
import CanvasLayer from 'leaflet-canvas-layer';
 
// 初始化地图
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors'
}).addTo(map);
 
// 创建自定义CanvasLayer
class CustomCanvasLayer extends CanvasLayer {
    drawLayer() {
        const ctx = this.canvas.getContext('2d');
        ctx.fillStyle = 'red';
        ctx.beginPath();
        ctx.arc(75, 75, 50, 0, Math.PI * 2);
        ctx.fill();
    }
}
 
// 实例化自定义CanvasLayer并添加到地图上
const customLayer = new CustomCanvasLayer({
    paint: () => { /* 绘制逻辑 */ }
}).addTo(map);

这段代码演示了如何在Leaflet地图上添加自定义的Canvas层。它首先引入了Leaflet库和Leaflet.CanvasLayer库，然后初始化了地图，并创建了一个自定义的CanvasLayer类，该类在其drawLayer方法中绘制了一个红色的圆。最后，实例化了这个自定义层并将其添加到了地图上。这个示例简洁地展示了如何利用CanvasLayer扩展Leaflet的绘图能力。