Zoomify

<!--
  示例：OpenLayers Zoomify 大图
  要点：Zoomify 源按 TileGroup 目录取图，页面内生成瓦片并切换高分辨率版本
  依赖：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>Zoomify 大图</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:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:#58606e}
  .bar label{display:flex;gap:5px;align-items:center;cursor:pointer}
  .bar select,.bar input[type=range]{font-size:12px}
  .bar .val{font-family:ui-monospace,Consolas,monospace;color:#1f5fd0;min-width:44px}
  .bar .sep{width:1px;height:16px;background:#d8dce2}
  #map{flex:1 1 auto;min-height:0;background:#eef0f3}
</style>
</head>
<body>
<div class="bar">
  <label><input type="checkbox" id="retina"> 2 倍瓦片</label>
  <span class="sep"></span>
  <span id="info">合成影像 4000 × 3000</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').textContent = 'OpenLayers 加载失败，请检查能否访问 cdn.jsdelivr.net';
    return;
  }


  var imageWidth = 4000;
  var imageHeight = 3000;

  function drawZoomifyTile(source, tileCoord, pixels) {
    var extent = source.getTileGrid().getTileCoordExtent(tileCoord);
    var canvas = document.createElement('canvas');
    canvas.width = pixels;
    canvas.height = pixels;
    var ctx = canvas.getContext('2d');

    function toPixel(x, y) {
      return [
        (x - extent[0]) / (extent[2] - extent[0]) * pixels,
        (extent[3] - y) / (extent[3] - extent[1]) * pixels
      ];
    }

    ctx.fillStyle = '#dfe9f2';
    ctx.fillRect(0, 0, pixels, pixels);

    var mountain = [
      [300, 700], [900, 2100], [1500, 1500], [2100, 2400],
      [2800, 1300], [3600, 2000], [4000, 1600], [4000, 0], [300, 0]
    ].map(function (p) { return toPixel(p[0], p[1]); });
    ctx.beginPath();
    ctx.moveTo(mountain[0][0], mountain[0][1]);
    for (var i = 1; i < mountain.length; ++i) {
      ctx.lineTo(mountain[i][0], mountain[i][1]);
    }
    ctx.closePath();
    ctx.fillStyle = 'rgba(120, 150, 175, 0.55)';
    ctx.fill();

    var river = [[0, 900], [700, 1200], [1500, 900], [2400, 1300], [3300, 1000], [4000, 1200]]
      .map(function (p) { return toPixel(p[0], p[1]); });
    ctx.beginPath();
    ctx.moveTo(river[0][0], river[0][1]);
    for (var j = 1; j < river.length; ++j) {
      ctx.lineTo(river[j][0], river[j][1]);
    }
    ctx.strokeStyle = '#5b9bd5';
    ctx.lineWidth = pixels / 40;
    ctx.stroke();

    ctx.strokeStyle = 'rgba(60, 80, 100, 0.25)';
    ctx.lineWidth = 1;
    for (var gx = 0; gx <= imageWidth; gx += 500) {
      var p1 = toPixel(gx, 0);
      var p2 = toPixel(gx, imageHeight);
      ctx.beginPath();
      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.stroke();
    }

    ctx.fillStyle = 'rgba(30, 45, 60, 0.75)';
    ctx.font = '600 ' + Math.round(pixels / 20) + 'px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('Zoomify ' + tileCoord[0], pixels / 2, pixels * 0.88);

    return canvas.toDataURL('image/png');
  }

  var source = new ol.source.Zoomify({
    url: 'https://demo.invalid/zoomify/',
    size: [imageWidth, imageHeight],
    zDirection: -1
  });

  var retinaSource = new ol.source.Zoomify({
    url: 'https://demo.invalid/zoomify/',
    size: [imageWidth, imageHeight],
    zDirection: -1,
    tilePixelRatio: 2,
    tileSize: 128
  });

  source.setTileUrlFunction(function (tileCoord) {
    return drawZoomifyTile(source, tileCoord, 256);
  });

  retinaSource.setTileUrlFunction(function (tileCoord) {
    return drawZoomifyTile(retinaSource, tileCoord, 256);
  });

  var layer = new ol.layer.Tile({source: source});

  var map = new ol.Map({
    target: 'map',
    layers: [layer],
    view: new ol.View({
      resolutions: source.getTileGrid().getResolutions(),
      extent: source.getTileGrid().getExtent(),
      constrainOnlyCenter: true
    })
  });

  map.getView().fit(source.getTileGrid().getExtent());

  document.getElementById('retina').addEventListener('change', function (evt) {
    var useRetina = evt.target.checked;
    var next = useRetina ? retinaSource : source;
    layer.setSource(next);
    document.getElementById('info').textContent = useRetina
      ? '合成影像 4000 × 3000 · 2 倍瓦片'
      : '合成影像 4000 × 3000 · 1 倍瓦片';
  });

})();
</script>
</body>
</html>