Fullscreen

<!--
  示例：全屏
  要点：容器 fixed 铺满的伪全屏、切换后调用 invalidateSize、Esc 退出、缩放级别同步
  依赖：Leaflet 1.9.4 · jsDelivr CDN + Esri 瓦片
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>全屏</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css">
<style>
  html,body{height:100%;margin:0}
  body{overflow:hidden;font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}

  #stage{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff}
  #stage.is-full{position:fixed;inset:0;z-index:9999}

  .bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:8px;align-items:center;font-size:12px;color:#58606e}
  .bar button{font:inherit;font-size:12px;padding:4px 12px;border-radius:4px;cursor:pointer;
       border:1px solid #ccd1d9;background:#fff;color:#16181d}
  .bar button:hover{background:#eef0f3}
  .bar .spacer{flex:1 1 auto}
  .bar #status{font-variant-numeric:tabular-nums}

  #map{flex:1 1 auto;min-height:0}
</style>
</head>
<body>
<div id="stage">
  <div class="bar">
    <button id="fs" type="button">进入全屏</button>
    <span class="spacer"></span>
    <span id="status">缩放 12</span>
  </div>
  <div id="map"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
(function () {
  'use strict';

  var map = L.map('map', {
    center: [39.907359, 116.391263],
    zoom: 12
  });

  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
    maxZoom: 19,
    attribution: 'Tiles © Esri'
  }).addTo(map);

  L.control.scale({ imperial: false, position: 'bottomleft' }).addTo(map);

  L.circle([39.907359, 116.391263], {
    radius: 1500,
    color: '#1f5fd0',
    weight: 1.5,
    fillOpacity: 0.1
  }).addTo(map);

  var stage = document.getElementById('stage');
  var btn = document.getElementById('fs');
  var status = document.getElementById('status');

  function syncStatus() {
    status.textContent = '缩放 ' + map.getZoom() +
      (stage.classList.contains('is-full') ? ' · 全屏' : '');
  }

  function setFull(on) {
    stage.classList.toggle('is-full', on);
    btn.textContent = on ? '退出全屏' : '进入全屏';
    document.documentElement.style.overflow = on ? 'hidden' : '';

    /* 容器尺寸变了必须重新计算，否则瓦片错位、只画一半 */
    setTimeout(function () {
      map.invalidateSize();
      syncStatus();
    }, 60);
  }

  btn.addEventListener('click', function () {
    setFull(!stage.classList.contains('is-full'));
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && stage.classList.contains('is-full')) setFull(false);
  });

  map.on('zoomend', syncStatus);
  syncStatus();
})();
</script>
</body>
</html>