Cog Pyramid

<!--
  示例：影像金字塔 — OpenLayers cog-pyramid
  核心逻辑：同一范围的 3 张不同分辨率影像组成图层组，靠 minResolution/maxResolution 切换
  依赖：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}
  .bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:12px;align-items:center;font-size:12px;color:#58606e}
  #map{flex:1 1 auto;min-height:0;background:#eef0f3}
</style>
</head>
<body>
<div class="bar">
  <span id="info">—</span>
  <span>缩放地图观察层级切换</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 (typeof ol === 'undefined') {
    document.getElementById('map').innerHTML =
      '<div style="padding:20px;color:#b42318">OpenLayers 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  var extent = ol.proj.transformExtent(
    [116.24, 39.84, 116.52, 40.00], 'EPSG:4326', 'EPSG:3857'
  );

  /* 同一景影像的三级金字塔：256 / 512 / 1024 像素 */
  function makeLevel(size, detail) {
    var c = document.createElement('canvas');
    c.width = size;
    c.height = size;
    var ctx = c.getContext('2d');

    ctx.fillStyle = '#e7e2d2';
    ctx.fillRect(0, 0, size, size);

    var cells = detail;
    for (var i = 0; i < cells; i++) {
      for (var j = 0; j < cells; j++) {
        var v = 0.35 + 0.5 * Math.abs(Math.sin(i / 3.1 + j / 4.7));
        ctx.fillStyle = 'rgba(' + Math.round(90 + v * 90) + ',' +
          Math.round(120 + v * 70) + ',' + Math.round(70 + v * 40) + ',' +
          (0.35 + v * 0.45) + ')';
        ctx.fillRect(i * size / cells, j * size / cells,
          size / cells + 0.6, size / cells + 0.6);
      }
    }

    ctx.strokeStyle = 'rgba(60,60,60,0.45)';
    ctx.lineWidth = Math.max(1, size / 400);
    ctx.beginPath();
    ctx.moveTo(0, size * 0.68);
    ctx.bezierCurveTo(size * 0.3, size * 0.55, size * 0.6, size * 0.82,
      size, size * 0.62);
    ctx.stroke();

    ctx.fillStyle = 'rgba(20,20,20,0.8)';
    ctx.font = Math.round(size / 14) + 'px sans-serif';
    ctx.fillText(size + 'px 级', size * 0.06, size * 0.16);

    return c.toDataURL();
  }

  var levels = [
    { size: 1024, cells: 24, min: 0, max: 1200, name: '全分辨率' },
    { size: 512, cells: 12, min: 1200, max: 4800, name: '中分辨率' },
    { size: 256, cells: 6, min: 4800, max: Infinity, name: '缩略图' }
  ];

  var groupLayers = levels.map(function (lv) {
    return new ol.layer.Image({
      source: new ol.source.ImageStatic({
        url: makeLevel(lv.size, lv.cells),
        projection: 'EPSG:3857',
        imageExtent: extent,
        crossOrigin: 'anonymous'
      }),
      minResolution: lv.min,
      maxResolution: lv.max
    });
  });

  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'}), opacity: 0.55 }),
      new ol.layer.Group({ layers: groupLayers })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([116.38, 39.92]),
      zoom: 12,
      minZoom: 2,
      maxZoom: 18
    }),
    controls: ol.control.defaults.defaults({ attribution: false })
  });

  function update() {
    var res = map.getView().getResolution();
    var active = levels.filter(function (lv) {
      return res >= lv.min && res < lv.max;
    })[0];
    document.getElementById('info').textContent =
      '分辨率 ' + res.toFixed(0) + ' m/px · 当前层：' +
      (active ? active.name : '边界切换');
  }

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