Pane Order

<!--
  示例：图层顺序
  要点：map.createPane 自定义 pane、zIndex 控制叠放、默认 pane 层级对照
  依赖：Leaflet 1.9.4 · jsDelivr CDN
-->
<!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{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}
  .bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:#58606e}
  .bar button{font:inherit;font-size:12px;padding:4px 10px;border-radius:4px;cursor:pointer;
       border:1px solid #ccd1d9;background:#fff;color:#16181d}
  .bar button:hover{background:#eef0f3}
  .bar button.on{background:#1f5fd0;border-color:#1f5fd0;color:#fff}
  .bar b{color:#16181d;font-weight:600;font-variant-numeric:tabular-nums}
  .bar .sep{width:1px;height:16px;background:#dfe3e9}
  #map{flex:1 1 auto;min-height:0}
  .ptag{background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.12);border-radius:3px;
    font:11px/1.3 sans-serif;padding:2px 6px;white-space:nowrap}
</style>
</head>
<body>
<div class="bar">
  <button data-front="a" class="on">A 置顶</button>
  <button data-front="b">B 置顶</button>
  <button data-front="c">C 置顶</button>
  <span class="sep"></span>
  <span>层级 A <b id="za">420</b> · B <b id="zb">440</b> · C <b id="zc">460</b></span>
</div>
<div id="map"></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);

  /* 三个自定义 pane，层级由自己决定；不创建的话图层只能挤在 overlayPane 里 */
  function makePane(name, z) {
    var p = map.createPane(name);
    p.style.zIndex = z;
    /* 自定义 pane 默认不接收鼠标事件，需要交互时打开 */
    p.style.pointerEvents = 'auto';
    return p;
  }

  var panes = {
    a: makePane('pane-a', 420),
    b: makePane('pane-b', 440),
    c: makePane('pane-c', 460)
  };

  var SHAPES = [
    { key: 'a', bounds: [[39.885, 116.355], [39.925, 116.415]],
      color: '#1f5fd0', label: 'A · 规划区' },
    { key: 'b', bounds: [[39.898, 116.375], [39.935, 116.435]],
      color: '#17694a', label: 'B · 保护区' },
    { key: 'c', bounds: [[39.893, 116.392], [39.932, 116.452]],
      color: '#c2410c', label: 'C · 施工区' }
  ];

  SHAPES.forEach(function (s) {
    L.rectangle(s.bounds, {
      pane: 'pane-' + s.key,
      color: s.color,
      weight: 2,
      fillColor: s.color,
      fillOpacity: 0.18
    }).addTo(map).bindTooltip(s.label, {
      permanent: true, direction: 'center', className: 'ptag', opacity: 1
    });
  });

  var el = {
    a: document.getElementById('za'),
    b: document.getElementById('zb'),
    c: document.getElementById('zc')
  };

  function setFront(key) {
    /* 置顶方的 zIndex 抬高，其余依次排在下方 */
    var order = key === 'a' ? ['a', 'b', 'c'] : key === 'b' ? ['b', 'c', 'a'] : ['c', 'a', 'b'];
    var z = 460;

    order.forEach(function (k, i) {
      var val = z - i * 20;
      panes[k].style.zIndex = val;
      el[k].textContent = val;
    });
  }

  Array.prototype.forEach.call(document.querySelectorAll('[data-front]'), function (btn) {
    btn.addEventListener('click', function () {
      Array.prototype.forEach.call(document.querySelectorAll('[data-front]'), function (b) {
        b.classList.remove('on');
      });
      btn.classList.add('on');
      setFront(btn.getAttribute('data-front'));
    });
  });

  /* 默认 pane 层级，改叠放顺序时先对照这张表 */
  console.log('pane 层级', {
    tilePane: 200, overlayPane: 400, shadowPane: 500,
    markerPane: 600, tooltipPane: 650, popupPane: 700
  });
})();
</script>
</body>
</html>