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

Question

我正在寻找向 L.control.zoom 添加额外按钮的方法。 Leaflet 正在从 CDN 加载，我正在使用 vanilla 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 = '&#x2212;'
        // The text set on the 'zoom out' button.
        zoomOutText: '&#x2212;',

        // @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

虽然在 Leaflet class customization tutorial 中没有明确说明，factories 和类，它们是 PascalCased，您可以在其上使用 Leaflet extend 机制：

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

话虽这么说，如果您的新按钮并没有真正与缩放按钮共享功能，或者没有 "merged" 与它们共享功能，您可以简单地制作一个单独的控件并将其插入相同的角落位置。还有 Leaflet EasyButton 插件可以在这方面提供帮助。

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

Extending L.control.zoom with custom button

javascript

inheritance

leaflet

overriding

extends