Leaflet中實現新增、隱藏、自定義縮放Zoom控制元件

阿新 • • 發佈：2022-04-02

場景

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