Mouse Coordinates

<!--
  示例：读取鼠标经纬度
  核心逻辑：mousemove 拿事件坐标，unproject 转成经纬度，再用 rAF 合并写 DOM
  数据：无外部数据，全部来自指针位置
  依赖：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:14px;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}
  #map{flex:1 1 auto;min-height:0}
  .hud{position:absolute;right:12px;bottom:12px;z-index:2;background:rgba(22,24,29,0.86);color:#f2f5f8;
       padding:8px 12px;border-radius:6px;font:12px/1.7 ui-monospace,Consolas,monospace;pointer-events:none}
  .hud span{color:#8fa3bf}
</style>
</head>
<body>
<div class="bar">
  <span>经纬度 <b id="ll">—</b></span>
  <span>屏幕坐标 <b id="px">—</b></span>
  <span>缩放 <b id="z">3.00</b></span>
</div>
<div id="map"></div>
<div class="hud" id="hud">
  <div><span>lng</span> <b id="hl">—</b></div>
  <div><span>lat</span> <b id="hb">—</b></div>
  <div><span>zoom</span> <b id="hz">3.00</b></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: [104.2, 35.5],
    zoom: 3,
    attributionControl: { compact: true, customAttribution: 'MapLibre demo tiles' }
  });

  map.addControl(new maplibregl.ScaleControl({ maxWidth: 120 }), 'bottom-left');
  map.addControl(new maplibregl.NavigationControl(), 'top-right');

  var llEl = document.getElementById('ll');
  var pxEl = document.getElementById('px');
  var zEl = document.getElementById('z');
  var hlEl = document.getElementById('hl');
  var hbEl = document.getElementById('hb');
  var hzEl = document.getElementById('hz');

  var pending = null;
  var scheduled = false;

  /* 每帧最多写一次 DOM，拖拽时不会因为频繁重排掉帧 */
  function flush() {
    scheduled = false;
    if (!pending) return;
    var p = pending;
    pending = null;
    llEl.textContent = p.lng.toFixed(5) + ', ' + p.lat.toFixed(5);
    pxEl.textContent = p.x + ', ' + p.y;
    hlEl.textContent = p.lng.toFixed(5);
    hbEl.textContent = p.lat.toFixed(5);
  }

  map.on('mousemove', function (e) {
    pending = {
      lng: e.lngLat.lng,
      lat: e.lngLat.lat,
      x: Math.round(e.point.x),
      y: Math.round(e.point.y)
    };
    if (!scheduled) {
      scheduled = true;
      requestAnimationFrame(flush);
    }
  });

  map.on('mouseout', function () {
    llEl.textContent = '—';
    pxEl.textContent = '—';
    hlEl.textContent = '—';
    hbEl.textContent = '—';
  });

  function readZoom() {
    var z = map.getZoom().toFixed(2);
    zEl.textContent = z;
    hzEl.textContent = z;
  }
  map.on('zoom', readZoom);
  map.on('load', readZoom);

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