Ogc Map Tiles

<!--
  示例：512 像素瓦片网格
  要点：tileSize 改 512 后同一级别只有四分之一数量的瓦片，寻址方式不变
  依赖：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>512 像素瓦片网格</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;flex-wrap:wrap}
  .bar label{display:flex;gap:5px;align-items:center;cursor:pointer}
  .bar b{color:#16181d;font-weight:600}
  #map{flex:1 1 auto;min-height:0;background:#eef0f3}
</style>
</head>
<body>
<div class="bar">
  <label><input type="radio" name="size" value="512" checked> 512 px</label>
  <label><input type="radio" name="size" value="256"> 256 px</label>
  <span>可视瓦片数 <b id="n">—</b></span>
  <span>瓦片尺寸 <b id="s">512</b> px</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 tileSize = 512;
  var cache = {};

  function tileURL(z, x, y, size) {
    var key = size + '/' + z + '/' + x + '/' + y;
    if (cache[key]) return cache[key];

    var c = document.createElement('canvas');
    c.width = c.height = size;
    var ctx = c.getContext('2d');

    ctx.fillStyle = 'rgba(31,95,208,0.06)';
    ctx.fillRect(0, 0, size, size);

    ctx.strokeStyle = 'rgba(31,95,208,0.55)';
    ctx.lineWidth = 1.5;
    ctx.strokeRect(1, 1, size - 2, size - 2);

    var cells = 4;
    ctx.strokeStyle = 'rgba(31,95,208,0.25)';
    ctx.lineWidth = 1;
    for (var i = 1; i < cells; i++) {
      ctx.beginPath(); ctx.moveTo(i * size / cells, 0); ctx.lineTo(i * size / cells, size); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(0, i * size / cells); ctx.lineTo(size, i * size / cells); ctx.stroke();
    }

    ctx.fillStyle = '#0b3d91';
    ctx.font = '600 13px ui-monospace,monospace';
    ctx.fillText(z + '/' + x + '/' + y, 10, 24);
    ctx.font = '500 11px ui-monospace,monospace';
    ctx.fillText(size + 'px', 10, 42);

    cache[key] = c.toDataURL('image/png');
    return cache[key];
  }

  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: new ol.View({ center: ol.proj.fromLonLat([116.391263, 39.907359]), zoom: 10 }),
    controls: ol.control.defaults.defaults({ rotate: false })
  });

  var overlay = null;

  function install(size) {
    tileSize = size;
    if (overlay) map.removeLayer(overlay);

    var grid = ol.tilegrid.createXYZ({ tileSize: size, maxZoom: 18 });

    overlay = new ol.layer.Tile({
      opacity: 0.9,
      source: new ol.source.XYZ({
        tileGrid: grid,
        attributions: '自造瓦片 · OGC API Tiles 模板 /{z}/{y}/{x}',
        tileUrlFunction: function (tc) {
          return tileURL(tc[0], tc[1], tc[2], size);
        }
      })
    });

    map.addLayer(overlay);
    document.getElementById('s').textContent = size;
    countVisible(grid);
  }

  function countVisible(grid) {
    var z = Math.round(map.getView().getZoom());
    var ext = map.getView().calculateExtent(map.getSize());
    var tc = grid.getTileRangeForExtentAndZ(ext, z);
    document.getElementById('n').textContent = (tc.getWidth() * tc.getHeight()) + ' 张';
  }

  document.querySelectorAll('input[name=size]').forEach(function (el) {
    el.addEventListener('change', function () {
      install(Number(this.value));
    });
  });

  map.on('moveend', function () {
    countVisible(overlay.getSource().getTileGrid());
  });

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