Question

我正在寻找一种向L.control.zoom添加额外按钮的方法。正在从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 = '&#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

虽然在传单class customization tutorial中没有明确说明，但工厂（它们属于低级且不能扩展）与类之间存在细微的区别，哪些是PascalCased，并且可以在其中使用Leaflet extend机制：

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

也就是说，如果您的新按钮没有真正与缩放按钮共享功能或未与它们“合并”，则可以简单地制作一个单独的Control并将其插入相同的角位置。还有Leaflet EasyButton插件可以在这方面提供帮助。

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

1 个答案: