Leaflet中使用Leaflet.fullscreen插件实现全屏效果

分手后的思念是犯贱 2023-10-01 12:26 38阅读 0赞

## 场景 ##

Vue+Leaflet实现加载OSM显示地图：

[Vue+Leaflet实现加载OSM显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Vue_Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]

在上面的基础上，怎样实现地图全屏效果。

![9d2c5cf43e5c4cd6b848a795a32c87bf.gif][]

注：

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

## 实现 ##

1、插件地址

[https://github.com/Leaflet/Leaflet.fullscreen][https_github.com_Leaflet_Leaflet.fullscreen]

2、下载源码，引入核心js文件，Leaflet.fullscreen.js，以及全屏按钮所需的照片资源

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

修改样式css文件中图片的路径

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

3、新建地图时添加全屏插件

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

4、完整示例代码

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>leaflet实现全屏</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
        <style>
            html,
            body,
            #map {
                padding: 0;
                margin: 0;
                width: 500px;
                height: 500px;
                overflow: hidden;
            }
    
            .leaflet-control-fullscreen a {
                background: #fff url(./icon/fullscreen.png) no-repeat 0 0;
                background-size: 26px 52px;
            }
    
            .leaflet-touch .leaflet-control-fullscreen a {
                background-position: 2px 2px;
            }
    
            .leaflet-fullscreen-on .leaflet-control-fullscreen a {
                background-position: 0 -26px;
            }
    
            .leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
                background-position: 2px -24px;
            }
    
            /* Do not combine these two rules; IE will break. */
            .leaflet-container:-webkit-full-screen {
                width: 100% !important;
                height: 100% !important;
            }
    
            .leaflet-container.leaflet-fullscreen-on {
                width: 100% !important;
                height: 100% !important;
            }
    
            .leaflet-pseudo-fullscreen {
                position: fixed !important;
                width: 100% !important;
                height: 100% !important;
                top: 0 !important;
                left: 0 !important;
                z-index: 99999;
            }
    
            @media (-webkit-min-device-pixel-ratio:2),
            (min-resolution:192dpi) {
                .leaflet-control-fullscreen a {
                    background-image: url(./icon/fullscreen@2x.png);
                }
            }
        </style>
    </head>
    
    <body>
        <div id="map"></div>
        <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        <script type="text/javascript" src="./js/Leaflet.fullscreen.js"></script>
        <script type="text/javascript">
            var map = L.map('map', {
                fullscreenControl: {
                    pseudoFullscreen: false
                }
            }).setView([36.09, 120.35], 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: ''
            }).addTo(map);
        </script>
    </body>
    
    </html>

[Vue_Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394
[9d2c5cf43e5c4cd6b848a795a32c87bf.gif]: https://img-blog.csdnimg.cn/9d2c5cf43e5c4cd6b848a795a32c87bf.gif
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[https_github.com_Leaflet_Leaflet.fullscreen]: https://github.com/Leaflet/Leaflet.fullscreen
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/fafbb43947ee4c1d92e7b0151e4fb5f7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,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/3867b596bc1442ab9dbceb00ecd8dc7b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16