Leaflet中实现添加、隐藏、自定义缩放Zoom控件

场景

Leaflet快速入门与加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

上面加载显示后默认会带缩放控件。 

怎样将该缩放控件隐藏、添加缩放控件以及自定义

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、隐藏自带的缩放控件

将地图zoomControl属性设置为false

 var map = L.map('map',{ attributionControl:false, zoomControl:false }).setView([36.09, 120.35], 13);

2、新增一个缩放控件

        //定义一个地图缩放控件
        var zoomControl = L.control.zoom({position:'topleft'});
        //将地图缩放控件加载到地图
        map.addControl(zoomControl);

 

属性里面设置添加的位置为左上角

3、自定义缩放控件

        //自定义缩放控件
        L.Control.Zoom = L.Control.extend({
            //属性选择设置
            options: {
                position:'topleft', //设置缩放控件的位置
                zoomInText:'大',    //设置放大按钮的内容提示
                zoomOutText:'小',   //设置缩小按钮的内容提示
                zoomInTitle:'放大',
                zoomOutTitle:'缩小'
            },
            onAdd:function(map){
                var zoomName = 'leaflet-control-zoom',
                container = L.DomUtil.create('div',zoomName +'leaflet-bar'),
                options = this.options;
                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);
                return container;
            },
            //放大方法
            _zoomIn: function(e){
                if(!this._disabled){
                    this._map.zoomIn(e.shiftKey?3:1);
                }
            },
            //缩小方法
            _zoomOut:function(e){
                if(!this._disabled){
                    this._map.zoomOut(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;
                L.DomEvent.on(link,'mousedown dblclick',L.DomEvent.stopPropagation)
                           .on(link,'click',L.DomEvent.stop)
                           .on(link,'click',fn,this)
                           .on(link,'click',this._refocusOnMap,this);
                return link;
            }
        });

        //重新定义缩放控件
        L.control.zoom = function(options){
            return new L.Control.Zoom(options);
        };
        //将重新定义的缩放控件加载到地图
        L.control.zoom().addTo(map);