Custom Control

<!--
  示例：自定义控件
  要点：L.Control.extend 的 onAdd/onRemove、阻止事件冒泡、缩放与鼠标坐标实时回显
  依赖：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}
  #map{height:100%}

  .myctl{background:#fff;border-radius:6px;box-shadow:0 1px 6px rgba(0,0,0,.2);
         padding:8px;width:172px;font-size:12px;color:#16181d}
  .myctl .row{display:flex;gap:6px;margin-bottom:6px}
  .myctl button{flex:1;font:inherit;font-size:12px;padding:4px 0;border-radius:4px;cursor:pointer;
         border:1px solid #ccd1d9;background:#f8f9fb;color:#16181d}
  .myctl button:hover{background:#eef0f3}
  .myctl .line{display:flex;justify-content:space-between;gap:8px;color:#58606e}
  .myctl .line b{font-weight:600;color:#16181d;font-variant-numeric:tabular-nums}
  .myctl .coord{font-variant-numeric:tabular-nums;margin-top:2px;color:#16181d;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
(function () {
  'use strict';

  var HOME = { center: [39.907359, 116.391263], zoom: 12 };

  var map = L.map('map', {
    center: HOME.center,
    zoom: HOME.zoom
  });

  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);

  /* 控件内部维护自己的 DOM 与事件引用，onRemove 时逐项解绑 */
  var InfoControl = L.Control.extend({
    options: { position: 'topright' },

    initialize: function (options) {
      L.setOptions(this, options);
    },

    onAdd: function (map) {
      var box = L.DomUtil.create('div', 'myctl');

      var row = L.DomUtil.create('div', 'row', box);
      var bj = L.DomUtil.create('button', '', row);
      bj.type = 'button';
      bj.textContent = '北京';
      var sh = L.DomUtil.create('button', '', row);
      sh.type = 'button';
      sh.textContent = '上海';
      var home = L.DomUtil.create('button', '', row);
      home.type = 'button';
      home.textContent = '复位';

      var zoomLine = L.DomUtil.create('div', 'line', box);
      zoomLine.innerHTML = '<span>缩放级别</span><b>—</b>';
      var zoomValue = zoomLine.querySelector('b');

      var coord = L.DomUtil.create('div', 'coord', box);
      coord.textContent = '移动鼠标查看坐标';

      /* 控件里的点击与滚轮不能传给地图，否则会触发拖拽和缩放 */
      L.DomEvent.disableClickPropagation(box);
      L.DomEvent.disableScrollPropagation(box);

      function go(lat, lng, zoom) {
        map.flyTo([lat, lng], zoom, { duration: 1.2 });
      }

      bj.addEventListener('click', function () { go(39.907359, 116.391263, 12); });
      sh.addEventListener('click', function () { go(31.230400, 121.473700, 11); });
      home.addEventListener('click', function () { go(HOME.center[0], HOME.center[1], HOME.zoom); });

      this._zoomHandler = function () {
        zoomValue.textContent = map.getZoom();
      };
      map.on('zoomend', this._zoomHandler);
      this._zoomHandler();

      /* mousemove 每帧触发，用 requestAnimationFrame 合并写入 */
      var pending = false;
      var lastEvent = null;
      this._moveHandler = function (e) {
        lastEvent = e;
        if (pending) return;
        pending = true;
        requestAnimationFrame(function () {
          pending = false;
          if (!lastEvent) return;
          coord.textContent = lastEvent.latlng.lat.toFixed(5) + ', ' +
                              lastEvent.latlng.lng.toFixed(5);
        });
      };
      map.on('mousemove', this._moveHandler);

      this._box = box;
      return box;
    },

    onRemove: function (map) {
      map.off('zoomend', this._zoomHandler);
      map.off('mousemove', this._moveHandler);
    }
  });

  new InfoControl({ position: 'topright' }).addTo(map);
})();
</script>
</body>
</html>