Navigation Controls

<!--
  示例：自定义导航控件
  要点：ol.control.Control 直接接受 DOM 元素，按钮里调用视图动画
  依赖：OpenLayers 10.3.1 · 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/ol@10.3.1/ol.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;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:14px;align-items:center;font-size:12px;color:#58606e}
  .bar b{color:#16181d;font-weight:600}
  #map{flex:1 1 auto;min-height:0;position:relative;background:#eef0f3}
  .navctl{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;
          background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.18);overflow:hidden}
  .navctl button{width:34px;height:34px;border:0;background:#fff;cursor:pointer;
                 font-size:15px;line-height:1;color:#3b4250}
  .navctl button:hover{background:#eef2f8}
  .navctl button+button{border-top:1px solid #e6e9ef}
  .readout{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.92);
           padding:6px 10px;border-radius:6px;font-size:12px;color:#445;
           box-shadow:0 1px 4px rgba(0,0,0,.14)}
</style>
</head>
<body>
<div class="bar">
  <span>控件按钮：放大 / 缩小 / 复位 / 正北</span>
  <span>当前 <b id="z">—</b> 级</span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/ol@10.3.1/dist/ol.js"></script>
<script>
(function () {
  'use strict';
  if (!window.ol) {
    document.getElementById('map').textContent = 'OpenLayers 加载失败，请检查 cdn.jsdelivr.net 是否可访问';
    return;
  }

  var home = {
    center: ol.proj.fromLonLat([116.391263, 39.907359]),
    zoom: 11,
    rotation: 0
  };

  var view = new ol.View({
    center: home.center,
    zoom: home.zoom,
    rotation: home.rotation
  });

  var map = new ol.Map({
    target: 'map',
    layers: [new ol.layer.Tile({ source: new ol.source.XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', attributions: 'Tiles © Esri'}) })],
    view: view,
    controls: ol.control.defaults.defaults({ zoom: false, rotate: false, attribution: true })
  });

  /* 自定义控件：一个 div 内放四个按钮 */
  var el = document.createElement('div');
  el.className = 'navctl';
  el.innerHTML =
    '<button data-act="in" title="放大">+</button>' +
    '<button data-act="out" title="缩小">−</button>' +
    '<button data-act="home" title="复位">⌂</button>' +
    '<button data-act="north" title="正北">N</button>';

  el.addEventListener('click', function (evt) {
    var act = evt.target.getAttribute('data-act');
    if (!act) return;

    if (act === 'in' || act === 'out') {
      view.animate({ zoom: view.getZoom() + (act === 'in' ? 1 : -1), duration: 250 });
    } else if (act === 'home') {
      view.animate({ center: home.center, zoom: home.zoom, rotation: 0, duration: 500 });
    } else if (act === 'north') {
      view.animate({ rotation: 0, duration: 300 });
    }
  });

  map.addControl(new ol.control.Control({ element: el }));

  var readout = document.createElement('div');
  readout.className = 'readout';
  document.getElementById('map').appendChild(readout);

  function report() {
    document.getElementById('z').textContent = view.getZoom().toFixed(1);
    readout.textContent = '旋转 ' + (view.getRotation() * 180 / Math.PI).toFixed(0) + '°';
  }

  map.on('moveend', report);
  report();
})();
</script>
</body>
</html>