Padding Offset

<!--
  示例：用内边距偏移消失点
  核心逻辑：easeTo 传 padding，地图中心仍指向目标，但视觉中心被挤到空白区域
  数据：页面内写死的城市列表
  依赖：MapLibre GL JS 4 · jsDelivr CDN · demotiles 样式
-->
<!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/maplibre-gl@4/dist/maplibre-gl.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;color:#16181d}
  .bar{flex:0 0 auto;display:flex;gap:10px;align-items:center;padding:8px 12px;
       background:#f6f7f9;border-bottom:1px solid #e3e6ea;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar b{color:#16181d;font-weight:600}
  .bar button{background:#fff;border:1px solid #cfd6df;border-radius:4px;padding:3px 10px;
       font:12px/1.4 inherit;color:#3a4250;cursor:pointer}
  .bar button:hover{border-color:#2e86de;color:#2e86de}
  .bar label{display:flex;gap:5px;align-items:center;cursor:pointer}
  .wrap{flex:1 1 auto;min-height:0;position:relative;display:flex}
  #map{flex:1 1 auto;min-width:0}
  .panel{flex:0 0 280px;border-left:1px solid #e3e6ea;background:#fff;padding:14px;overflow:auto;
         font-size:12.5px;color:#3a4250}
  .panel h3{margin:0 0 6px;font-size:14px;color:#16181d}
  .panel p{margin:0 0 10px;color:#6b7685;line-height:1.7}
  .panel dl{margin:0}
  .panel dt{color:#8a94a3;font-size:11.5px}
  .panel dd{margin:0 0 8px;font-weight:600;color:#16181d;font-family:ui-monospace,Consolas,monospace}
</style>
</head>
<body>
<div class="bar">
  <span>目标 <b id="c">—</b></span>
  <label><input id="pad" type="checkbox" checked> 启用右侧内边距</label>
  <button data-city="北京,116.39,39.90">北京</button>
  <button data-city="上海,121.47,31.23">上海</button>
  <button data-city="成都,104.06,30.57">成都</button>
  <button data-city="广州,113.26,23.12">广州</button>
</div>
<div class="wrap">
  <div id="map"></div>
  <div class="panel">
    <h3>视觉中心在哪</h3>
    <p>右侧留出 280 px 给面板后，地图会把目标点放在剩余区域的正中，
       而不是整个画布的正中。</p>
    <dl>
      <dt>地图中心</dt><dd id="mc">—</dd>
      <dt>像素偏移</dt><dd id="off">—</dd>
    </dl>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
<script>
(function () {
  'use strict';

  if (typeof maplibregl === 'undefined') {
    document.body.innerHTML =
      '<div style="padding:24px;color:#b42318">MapLibre 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  var map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [116.39, 39.90],
    zoom: 5,
    attributionControl: { compact: true, customAttribution: 'MapLibre demo tiles' }
  });

  map.addControl(new maplibregl.NavigationControl(), 'top-right');

  var target = [116.39, 39.90];
  var cEl = document.getElementById('c');
  var mcEl = document.getElementById('mc');
  var offEl = document.getElementById('off');
  var padBox = document.getElementById('pad');

  var marker = new maplibregl.Marker({ color: '#e8590c' })
    .setLngLat(target)
    .addTo(map);

  function padding() {
    /* 面板宽度与 CSS 里的 flex-basis 保持一致 */
    return padBox.checked ? { right: 280, top: 0, bottom: 0, left: 0 } : { right: 0, top: 0, bottom: 0, left: 0 };
  }

  function flyTo(c) {
    target = c;
    marker.setLngLat(c);
    cEl.textContent = c[0].toFixed(2) + ', ' + c[1].toFixed(2);

    map.easeTo({
      center: c,
      zoom: 5,
      padding: padding(),
      duration: 900
    });
  }

  Array.prototype.forEach.call(document.querySelectorAll('button[data-city]'), function (btn) {
    btn.addEventListener('click', function () {
      var v = btn.getAttribute('data-city').split(',');
      flyTo([parseFloat(v[1]), parseFloat(v[2])]);
    });
  });

  function read() {
    var c = map.getCenter();
    mcEl.textContent = c.lng.toFixed(2) + ', ' + c.lat.toFixed(2);

    /* 把目标点投到屏幕上，看它偏离画布中心多少像素 */
    var p = map.project(target);
    var w = map.getCanvas().clientWidth;
    var h = map.getCanvas().clientHeight;
    offEl.textContent = 'x ' + Math.round(p.x - w / 2) + ' / y ' + Math.round(p.y - h / 2);
  }

  map.on('move', read);
  map.on('moveend', read);
  map.on('load', read);

  padBox.addEventListener('change', function () {
    map.easeTo({ center: target, padding: padding(), duration: 600 });
  });

  map.on('error', function (e) {
    if (e.error) console.warn('地图错误：' + e.error.message);
  });
})();
</script>
</body>
</html>