Leaflet中使用Leaflet.fullscreen插件实现全屏效果-蒲公英云

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

场景

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

Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客

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

注：

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

实现

1、插件地址

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>