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

我正在寻找向

L.control.zoom

添加额外按钮的方法。传单是从CDN加载的，我使用的是香草Javascript（没有预处理器或任何东西）

我希望会有类似于

L.control.zoom.extend（{}）

的东西，但不幸的是这并不存在。尝试

L.Control.extend（{…L.Control.zoom}）

也不起作用

对于上下文，通过复制粘贴并在第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);
        }
    }
});

让ZoomControl=L.Control.extend({
//@节
//@aka Control.Zoom选项
选项：{
位置：'左上'，
//@option zoomInText:String='+'
//“放大”按钮上设置的文本。
zoomInText:“+”，
//@option zoomInTitle:String='Zoom-in'
//“放大”按钮上设置的标题。
ZoomMinTitle:“放大”，
//@option zoomOutText:String='−；'
//“缩小”按钮上设置的文本。
zoomOutText:“−；”，
//@option zoomoutittle:String='缩小'
//“缩小”按钮上设置的标题。
Zoomoutittle:“缩小”
},
onAdd：函数（映射）{
var zoomName=‘传单控制缩放’，
container=L.DomUtil.create（'div'，zoomName+'传单栏'），
options=this.options；
让locationLink=L.DomUtil.create（'a'，'传单栏部分传单栏部分'，容器）；
L.DomEvent.disableClickPropagation（locationLink）；
locationLink.title='我的位置'；
让locationIcon=L.DomUtil.create（'span'，'fa lg fas fa map marker alt'，locationLink）；
L.DomEvent.on（locationLink，'单击'，（）=>{
警报（“点击按钮”）；
});
this.\u zoomInButton=this.\u createButton（options.zoomInText，options.zoomInTitle，
zoomName+'-in'，容器，此。_zoomIn）；
this.\u zoomOutButton=this.\u createButton（options.zoomOutText，options.zoomOutTitle，
zoomName+'-out'，容器，此；
此。_updateSabled（）；
地图上（'ZoomMend zoomlevelschange'，this.\u updateDisabled，this）；
返回容器；
},
onRemove：函数（映射）{
map.off（'zoomendZoomlevelschange'，this.\u updateDisabled，this）；
},
禁用：函数（）{
此项。_disabled=true；
此。_updateSabled（）；
归还这个；
},
启用：函数（）{
此项。_disabled=false；
此。_updateSabled（）；
归还这个；
},
_缩放：功能（e）{
如果（！this.\u已禁用&&this.\u映射.\u缩放this._映射.getMinZoom（））{
this._map.zoomOut（this._map.options.zoomDelta*（e.shiftKey？3:1））；
}
},
_createButton：函数（html、标题、类名、容器、fn）{
var link=L.DomUtil.create（'a'，className，container）；
link.innerHTML=html；
link.href='#'；
link.title=标题；
/*
*将迫使像VoiceOver这样的屏幕阅读器将其读为“放大-按钮”
*/
link.setAttribute（'role'，'button'）；
link.setAttribute（'aria-label'，title）；
L.DomEvent.disableClickPropagation（链接）；
L.DomEvent.on（链接“单击”，L.DomEvent.stop）；
L.DomEvent.on（链接“点击”，fn，本）；
L.DomEvent.on（链接“单击”，此.\u重新聚焦地图，此）；
返回链接；
},
_updateSabled:函数（）{
var map=此。_map，
className=‘传单已禁用’；
L.DomUtil.removeClass（this.\u zoomInButton，className）；
L.DomUtil.removeClass（this._zoomOutButton，className）；
如果（此.| | |映射._zoom===map.getMinZoom（））{
L.DomUtil.addClass（this._zoomOutButton，className）；
}
如果（此.|禁用| |映射._缩放===map.getMaxZoom（））{
L.DomUtil.addClass（this.\u zoomInButton，className）；
}
}
});

虽然传单中没有明确说明，但工厂和类之间存在微妙的区别，前者是小写的，不能扩展；后者是PASCALCA的，可以在其上使用传单

扩展

机制：

var MyNewZoomControl=L.Control.Zoom.extend({
onAdd：函数（映射）{
//你的新方法内容
}
}

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