Reprojection Image

<!--
  示例：单幅影像重投影 — OpenLayers reprojection-image
  核心逻辑：全球栅格声明为 EPSG:4326，切换视口投影观察 OpenLayers 如何逐像素重采样
  依赖：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:8px;align-items:center;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar button{font:inherit;padding:3px 10px;border:1px solid #ccd2da;background:#fff;
       border-radius:3px;cursor:pointer;color:#2b3140}
  .bar button.on{background:#1f5fd0;border-color:#1f5fd0;color:#fff}
  #map{flex:1 1 auto;min-height:0;background:#eef0f3}
</style>
</head>
<body>
<div class="bar">
  <button data-proj="EPSG:3857" class="on">视口 3857</button>
  <button data-proj="EPSG:4326">视口 4326</button>
  <span id="info">—</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;
  }

  /* 等经纬度全球栅格：经纬网 + 粗略陆地色块 */
  function makeWorld() {
    var w = 1440, h = 720;
    var c = document.createElement('canvas');
    c.width = w;
    c.height = h;
    var ctx = c.getContext('2d');

    ctx.fillStyle = '#cfe3ef';
    ctx.fillRect(0, 0, w, h);

    function land(points, color) {
      ctx.beginPath();
      points.forEach(function (p, i) {
        var x = (p[0] + 180) / 360 * w;
        var y = (90 - p[1]) / 180 * h;
        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
      });
      ctx.closePath();
      ctx.fillStyle = color;
      ctx.fill();
    }

    land([[-168, 65], [-140, 70], [-110, 72], [-85, 70], [-60, 55], [-55, 45],
      [-75, 30], [-85, 20], [-100, 18], [-115, 30], [-125, 42], [-140, 58],
      [-168, 65]], '#d9d2b4');

    land([[-80, 8], [-60, 10], [-35, -5], [-38, -22], [-55, -35], [-70, -45],
      [-75, -20], [-80, 8]], '#d9d2b4');

    land([[-10, 36], [0, 43], [12, 45], [28, 41], [40, 41], [50, 46], [60, 44],
      [75, 40], [88, 30], [100, 22], [110, 20], [120, 24], [122, 38], [130, 43],
      [140, 50], [150, 60], [170, 66], [180, 68], [180, 72], [140, 75], [100, 78],
      [60, 72], [30, 70], [10, 60], [-5, 50], [-10, 36]], '#d9d2b4');

    land([[-17, 15], [-5, 5], [8, 4], [10, -2], [13, -12], [20, -20], [26, -33],
      [32, -30], [40, -15], [43, 0], [38, 12], [33, 22], [25, 32], [10, 34],
      [0, 30], [-10, 25], [-17, 15]], '#d9d2b4');

    land([[114, -22], [122, -18], [135, -15], [145, -18], [153, -28], [150, -38],
      [140, -38], [130, -32], [115, -34], [114, -22]], '#d9d2b4');

    /* 经纬网，每 30° */
    ctx.strokeStyle = 'rgba(40,70,90,0.35)';
    ctx.lineWidth = 1;
    for (var lon = -180; lon <= 180; lon += 30) {
      var x = (lon + 180) / 360 * w;
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, h);
      ctx.stroke();
    }
    for (var lat = -90; lat <= 90; lat += 30) {
      var y = (90 - lat) / 180 * h;
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(w, y);
      ctx.stroke();
    }

    return c.toDataURL();
  }

  var worldSource = new ol.source.ImageStatic({
    url: makeWorld(),
    projection: 'EPSG:4326',
    imageExtent: [-180, -90, 180, 90],
    crossOrigin: 'anonymous'
  });

  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.45 }),
      new ol.layer.Image({ source: worldSource, opacity: 0.9 })
    ],
    view: new ol.View({
      projection: 'EPSG:3857',
      center: [0, 0],
      zoom: 2,
      minZoom: 0,
      maxZoom: 8
    }),
    controls: ol.control.defaults.defaults({ attribution: false })
  });

  var centerLonLat = [116.391, 39.907];

  function switchProjection(code) {
    map.setView(new ol.View({
      projection: code,
      center: code === 'EPSG:4326' ? centerLonLat : ol.proj.fromLonLat(centerLonLat),
      zoom: 2,
      minZoom: 0,
      maxZoom: code === 'EPSG:4326' ? 8 : 8
    }));

    document.getElementById('info').textContent =
      code === 'EPSG:4326'
        ? '视口 4326：影像无需重采样，边缘平直'
        : '视口 3857：影像被实时拉伸重采样，高纬度拉伸明显';
  }

  Array.prototype.forEach.call(
    document.querySelectorAll('[data-proj]'),
    function (btn) {
      btn.addEventListener('click', function () {
        Array.prototype.forEach.call(
          document.querySelectorAll('[data-proj]'),
          function (b) { b.classList.remove('on'); }
        );
        btn.classList.add('on');
        switchProjection(btn.getAttribute('data-proj'));
      });
    }
  );

  switchProjection('EPSG:3857');
})();
</script>
</body>
</html>