javascript - 使用自定义按钮扩展 L.control.zoom

Question

我正在寻找一种向 L.control.zoom 添加额外按钮的方法。 Leaflet 正在从 CDN 加载，我使用的是普通 Javascript(没有预处理器或任何东西)。

我希望有类似 L.control.zoom.extend({}) 的东西，但不幸的是这并不存在。尝试 L.Control.extend({...L.control.zoom}) 也不起作用。

对于上下文，通过复制粘贴 original code 来完成此操作。在第 42 行添加自定义按钮的代码如下所示:

let zoomControls = L.Control.extend({
    // @section
    // @aka Control.Zoom options
    options: {
        position: 'topleft',

        // @option zoomInText: String = '+'
        // The text set on the 'zoom in' button.
        zoomInText: '+',

        // @option zoomInTitle: String = 'Zoom in'
        // The title set on the 'zoom in' button.
        zoomInTitle: 'Zoom in',

        // @option zoomOutText: String = '−'
        // The text set on the 'zoom out' button.
        zoomOutText: '−',

        // @option zoomOutTitle: String = 'Zoom out'
        // The title set on the 'zoom out' button.
        zoomOutTitle: 'Zoom out'
    },

    onAdd: function (map) {
        var zoomName = 'leaflet-control-zoom',
            container = L.DomUtil.create('div', zoomName + ' leaflet-bar'),
            options = this.options;

        let locationLink = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
        L.DomEvent.disableClickPropagation(locationLink);
        locationLink.title = 'My location';
        let locationIcon = L.DomUtil.create('span', 'fa-lg fas fa-map-marker-alt', locationLink);
        L.DomEvent.on(locationLink, 'click', () => {
            alert('BUTTON CLICKED');
        });
        this._zoomInButton  = this._createButton(options.zoomInText, options.zoomInTitle,
                zoomName + '-in',  container, this._zoomIn);
        this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle,
                zoomName + '-out', container, this._zoomOut);

        this._updateDisabled();
        map.on('zoomend zoomlevelschange', this._updateDisabled, this);

        return container;
    },

    onRemove: function (map) {
        map.off('zoomend zoomlevelschange', this._updateDisabled, this);
    },

    disable: function () {
        this._disabled = true;
        this._updateDisabled();
        return this;
    },

    enable: function () {
        this._disabled = false;
        this._updateDisabled();
        return this;
    },

    _zoomIn: function (e) {
        if (!this._disabled && this._map._zoom < this._map.getMaxZoom()) {
            this._map.zoomIn(this._map.options.zoomDelta * (e.shiftKey ? 3 : 1));
        }
    },

    _zoomOut: function (e) {
        if (!this._disabled && this._map._zoom > this._map.getMinZoom()) {
            this._map.zoomOut(this._map.options.zoomDelta * (e.shiftKey ? 3 : 1));
        }
    },

    _createButton: function (html, title, className, container, fn) {
        var link = L.DomUtil.create('a', className, container);
        link.innerHTML = html;
        link.href = '#';
        link.title = title;

        /*
         * Will force screen readers like VoiceOver to read this as "Zoom in - button"
         */
        link.setAttribute('role', 'button');
        link.setAttribute('aria-label', title);

        L.DomEvent.disableClickPropagation(link);
        L.DomEvent.on(link, 'click', L.DomEvent.stop);
        L.DomEvent.on(link, 'click', fn, this);
        L.DomEvent.on(link, 'click', this._refocusOnMap, this);

        return link;
    },

    _updateDisabled: function () {
        var map = this._map,
            className = 'leaflet-disabled';

        L.DomUtil.removeClass(this._zoomInButton, className);
        L.DomUtil.removeClass(this._zoomOutButton, className);

        if (this._disabled || map._zoom === map.getMinZoom()) {
            L.DomUtil.addClass(this._zoomOutButton, className);
        }
        if (this._disabled || map._zoom === map.getMaxZoom()) {
            L.DomUtil.addClass(this._zoomInButton, className);
        }
    }
});

Answer 1

虽然传单中没有明确说明 class customization tutorial ，工厂和类之间有一个微妙的区别，工厂是小写的，不能扩展，而类是Pascal大小写的，可以在其上使用Leaflet extend机制:

var MyNewZoomControl = L.Control.Zoom.extend({
  onAdd: function (map) {
    // your new method content
  }
}

话虽这么说，如果您的新按钮并未真正与缩放按钮共享功能或未与它们“合并”，您可以简单地创建一个单独的控件并将其插入到相同的 Angular 落位置。还有 Leaflet EasyButton 插件可以在这方面提供帮助。