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);