传单扩展 canvas

Question

我正在尝试扩展 Leaflet 1.4 中的 canvas like this:

L.Canvas.FPCanvas = L.Canvas.extend({
  options: {
    width: 1,
    height: 1
  },

  initialize: function(name, options) {
    this.name = name;
    L.setOptions(this, options);
  },

  onAdd: function (map){},

  onRemove: function (map) {}
});

L.canvas.fpCanvas = function(id, options) {
  return new L.Canvas.FPCanvas(id, options)
}

console.log(L.canvas.fpCanvas("fpCanvas", {width: 10, height: 10}))

const myRenderer = L.canvas();
console.log(myRenderer)

当我将扩展 canvas 记录到控制台时，原型链上的所有内容看起来都不错。但是，当我记录以下代码时：

const myRenderer = L.canvas();
console.log(myRenderer)

_layers: {}
_leaflet_id

出现了这两个附加属性，而我原以为它们是相同的。我如何修改我的 canvas 扩展以包含这些附加属性，假设我需要它们与扩展自定义 canvas 一起使用。谢谢

Answer 1

您正在用自己的实现替换 L.Canvas.initialize() 实现 - 因此，默认初始化不会发生。

让我引用 Leaflet tutorial on class extension:

Calling a method of a parent class is achieved by reaching into the prototype of the parent class and using Function.call(…). This can be seen, for example, in the code for L.FeatureGroup:
L.FeatureGroup = L.LayerGroup.extend({

    addLayer: function (layer) {
        …
        L.LayerGroup.prototype.addLayer.call(this, layer);
    },

    …
});
Calling the parent’s constructor is done in a similar way, but using ParentClass.prototype.initialize.call(this, …) instead.

传单扩展 canvas

Leaflet extending canvas

extend

html5-canvas

leaflet