typescript - 将传单标记扩展转换为 Typescript

Question

我发现了一个传单扩展，如果 map 标记超出当前 View map 边界，它会隐藏 map 标记。

import L from 'leaflet';

L.Marker.MyMarker= L.Marker.extend({}).addInitHook(function (this: ILazyMarker) {
    this.on(
        'add',
        function (this: ILazyMarker) {
            this._updateIconVisibility = function (this: ILazyMarker) {
                var map = this._map,
                    isVisible = map.getBounds().contains(this.getLatLng()),
                    wasVisible = this._wasVisible,
                    icon = this._icon,
                    iconParent = this._iconParent,
                    shadow = this._shadow,
                    shadowParent = this._shadowParent;

                // remember parent of icon
                if (!iconParent) {
                    iconParent = this._iconParent = icon.parentNode;
                }
                if (shadow && !shadowParent) {
                    shadowParent = this._shadowParent = shadow.parentNode;
                }

                // add/remove from DOM on change
                if (iconParent != null && isVisible != wasVisible) {
                    if (isVisible) {
                        iconParent.appendChild(icon);
                        if (shadowParent != null && shadow) {
                            shadowParent.appendChild(shadow);
                        }
                    } else {
                        iconParent.removeChild(icon);
                        if (shadowParent != null && shadow) {
                            shadowParent.removeChild(shadow);
                        }
                    }

                    this._wasVisible = isVisible;
                }
            };

            // on map size change, remove/add icon from/to DOM
            this._map.on('resize moveend zoomend', this._updateIconVisibility, this);
            this._updateIconVisibility();
        },
        this,
    );
});

这工作得很好，但我宁愿使用 Typescript 类来保证项目中的一致性。这是我尝试将其转换为:

import L from 'leaflet';

export default class MyMarker extends L.Marker {
    _wasVisible!: boolean;
    _icon!: any;
    _shadowParent!: any;
    _iconParent!: any;

    constructor(latlng: L.LatLngExpression, options?: L.MarkerOptions) {
        super(latlng, options);
    }

    onAdd(): this {
        this._map.on('resize moveend zoomend', this._updateIconVisibility, this);
        this._updateIconVisibility();
        return this;
    }

    _updateIconVisibility() {
        var map = this._map,
            isVisible = map.getBounds().contains(this.getLatLng()),
            wasVisible = this._wasVisible,
            icon = this._icon,
            iconParent = this._iconParent,
            shadow = this._shadow,
            shadowParent = this._shadowParent;

        // remember parent of icon
        if (!iconParent) {
            iconParent = this._iconParent = icon.parentNode;
        }
        if (shadow && !shadowParent) {
            shadowParent = this._shadowParent = shadow.parentNode;
        }

        // add/remove from DOM on change
        if (iconParent != null && isVisible != wasVisible) {
            if (isVisible) {
                iconParent.appendChild(icon);
                if (shadowParent != null && shadow) {
                    shadowParent.appendChild(shadow);
                }
            } else {
                iconParent.removeChild(icon);
                if (shadowParent != null && shadow) {
                    shadowParent.removeChild(shadow);
                }
            }

            this._wasVisible = isVisible;
        }
    }
}

当我尝试使用基于类的标记时，我添加的每个标记都会出现此错误，并且 map 不会呈现:

TypeError: Cannot read property 'parentNode' of undefined
    at MyMarker._updateIconVisibility (leaflet-my-marker.ts:78)
    at MyMarker.onAdd (leaflet-my-marker.ts:63)
    at MyMarker._layerAdd (leaflet-src.js:6567)
    at NewClass.whenReady (leaflet-src.js:4428)
    at NewClass.addLayer (leaflet-src.js:6629)
    at NewClass.addLayer (leaflet-src.js:6780)
    at VueComponent.addLayer (LLayerGroup.js:164)
    at VueComponent.FirecamMarker.mounted (MyMarker.vue?6277:99)
    at invokeWithErrorHandling (vue.runtime.esm.js:1854)
    at callHook (vue.runtime.esm.js:4219)

Answer 1

提出的“StackOverflow法则”:无论你花了多长时间编写一段代码，除非将其发布到StackOverflow上，否则你都无法解决问题

我已经断断续续地研究了几天......当然，我能够在发布问题后立即解决它。我需要在我的 onAdd 方法中调用 super 的 onAdd 方法，如下所示:

onAdd(): this {
    super.onAdd(this._map);
    this._map.on('resize moveend zoomend', this._updateIconVisibility, this);
    this._updateIconVisibility();
    return this;
}

这是有道理的，因为原始代码调用 .addInitHook() 而不是 .setInitHook()。