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

矫情吗；* 2023-09-30 12:36 24阅读 0赞

## 场景 ##

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/122290880 ][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_122290880]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、隐藏自带的缩放控件

将地图zoomControl属性设置为false

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_18_color_FFFFFF_t_70_g_se_x_16][]

2、新增一个缩放控件

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

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

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

效果

![8ffa6a8065244fe8ad26ebb152680b2d.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_122290880]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d07d77f3478545e984ee2899111c764d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cbe90a3997ce4974af6d6aa93949fcec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/3a29da958c6448178e540e3c0590a41f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[8ffa6a8065244fe8ad26ebb152680b2d.gif]: https://img-blog.csdnimg.cn/8ffa6a8065244fe8ad26ebb152680b2d.gif