Coord Pick

<!--
  示例：坐标拾取
  要点：mousemove 实时换算 WGS84 / Web 墨卡托 / 像素坐标、点击落点、复制到剪贴板
  依赖：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:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:#58606e}
  .bar span.mono{font-family:Consolas,monospace;color:#16181d}
  .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 .grow{flex:1}
  #map{flex:1 1 auto;min-height:0;cursor:crosshair}
  .pin{width:12px;height:12px;border-radius:50%;background:#c2410c;border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.3)}
  .pin-label{background:#16181d;color:#fff;font-size:11px;padding:1px 5px;border-radius:3px;white-space:nowrap}
</style>
</head>
<body>
<div class="bar">
  <span>经纬度 <b class="mono" id="ll">—</b></span>
  <span>墨卡托 <b class="mono" id="mc">—</b></span>
  <span>像素 <b class="mono" id="px">—</b></span>
  <span class="grow"></span>
  <button id="copy">复制经纬度</button>
  <button id="clear">清空落点</button>
  <span id="count">0 个点</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: 13 });

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

  var llEl = document.getElementById('ll');
  var mcEl = document.getElementById('mc');
  var pxEl = document.getElementById('px');
  var countEl = document.getElementById('count');

  var last = null;
  var pts = [];
  var group = L.layerGroup().addTo(map);

  var pin = L.divIcon({
    className: '',
    html: '<div class="pin"></div>',
    iconSize: [12, 12],
    iconAnchor: [6, 6]
  });

  map.on('mousemove', function (e) {
    last = e.latlng;
    /* project 得到的是墨卡托米制坐标，等价于 EPSG:3857 */
    var m = map.project(e.latlng, e.target.getZoom());

    llEl.textContent = e.latlng.lat.toFixed(6) + ', ' + e.latlng.lng.toFixed(6);
    mcEl.textContent = Math.round(m.x) + ', ' + Math.round(m.y);
    pxEl.textContent = Math.round(e.containerPoint.x) + ', ' + Math.round(e.containerPoint.y)
      + ' @z' + map.getZoom();
  });

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

  map.on('click', function (e) {
    var marker = L.marker(e.latlng, { icon: pin })
      .bindTooltip(e.latlng.lat.toFixed(5) + ', ' + e.latlng.lng.toFixed(5), {
        permanent: true, direction: 'right', className: 'pin-label', opacity: 1
      })
      .addTo(group);

    marker.on('click', function () {
      map.removeLayer(marker);
      pts = pts.filter(function (p) { return p.marker !== marker; });
      syncCount();
    });

    pts.push({ marker: marker, latlng: e.latlng });
    syncCount();
  });

  function syncCount() {
    countEl.textContent = pts.length + ' 个点';
  }

  document.getElementById('copy').addEventListener('click', function () {
    if (!last) return;
    var text = last.lat.toFixed(6) + ',' + last.lng.toFixed(6);
    var btn = this;
    var done = function (ok) {
      btn.textContent = ok ? '已复制 ✓' : '复制失败';
      setTimeout(function () { btn.textContent = '复制经纬度'; }, 1200);
    };

    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(function () { done(true); },
        function () { done(false); });
    } else {
      var ta = document.createElement('textarea');
      ta.value = text;
      document.body.appendChild(ta);
      ta.select();
      var ok = false;
      try { ok = document.execCommand('copy'); } catch (err) { ok = false; }
      document.body.removeChild(ta);
      done(ok);
    }
  });

  document.getElementById('clear').addEventListener('click', function () {
    group.clearLayers();
    pts = [];
    syncCount();
  });
})();
</script>
</body>
</html>