Bitmap

<!--
  示例：位图图层
  核心逻辑：BitmapLayer 把一张图片贴到经纬度范围上，随视角一起缩放旋转
  数据：canvas 现场绘制的 512×256 假彩色影像，替代真实卫星瓦片服务
  依赖：deck.gl 9.0 · 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>
<style>
  html,body{height:100%;margin:0;background:#0d1117}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{position:relative;z-index:5;flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:14px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .bar input[type=range]{width:110px}
  #cv{flex:1 1 auto;min-height:0;width:100%}
</style>
</head>
<body>
<div class="bar">
  <span>图片 <b>512 × 256</b></span>
  <span>覆盖范围 <b>95°E–125°E, 25°N–45°N</b></span>
  <label>透明度 <input id="o" type="range" min="0" max="1" step="0.05" value="0.9"> <b id="ov">0.90</b></label>
</div>
<canvas id="cv"></canvas>
<script src="https://cdn.jsdelivr.net/npm/deck.gl@9.0.35/dist.min.js"></script>
<script>
(function () {
  'use strict';

  if (typeof deck === 'undefined') {
    document.body.innerHTML =
      '<div style="padding:24px;color:#ff8c74">deck.gl 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  /* 用 canvas 画一张假彩色影像：低处偏蓝绿、高处偏棕黄，再叠几团云 */
  function makeImage() {
    var W = 512, H = 256;
    var c = document.createElement('canvas');
    c.width = W;
    c.height = H;
    var g = c.getContext('2d');

    var base = g.createLinearGradient(0, 0, 0, H);
    base.addColorStop(0, '#e8dcc0');
    base.addColorStop(0.45, '#9fb98a');
    base.addColorStop(0.7, '#4f7d6a');
    base.addColorStop(1, '#1e4a63');
    g.fillStyle = base;
    g.fillRect(0, 0, W, H);

    /* 二十团随机色斑，模拟地表起伏与水体 */
    for (var i = 0; i < 20; i++) {
      var x = Math.random() * W;
      var y = Math.random() * H * 0.8;
      var r = 20 + Math.random() * 60;
      var rg = g.createRadialGradient(x, y, 0, x, y, r);
      var bright = Math.random() > 0.5;
      rg.addColorStop(0, bright ? 'rgba(255,245,210,0.55)' : 'rgba(30,80,110,0.55)');
      rg.addColorStop(1, 'rgba(0,0,0,0)');
      g.fillStyle = rg;
      g.beginPath();
      g.arc(x, y, r, 0, Math.PI * 2);
      g.fill();
    }

    /* 经纬网格，方便看清图片贴上去后的形变 */
    g.strokeStyle = 'rgba(255,255,255,0.25)';
    g.lineWidth = 1;
    for (var k = 1; k < 6; k++) {
      g.beginPath(); g.moveTo(k * W / 6, 0); g.lineTo(k * W / 6, H); g.stroke();
    }
    for (var m = 1; m < 4; m++) {
      g.beginPath(); g.moveTo(0, m * H / 4); g.lineTo(W, m * H / 4); g.stroke();
    }

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

  var BOUNDS = [[95, 25], [125, 45]];

  var bitmap = new deck.BitmapLayer({
    id: 'image',
    image: makeImage(),
    bounds: BOUNDS,
    opacity: 0.9,
    pickable: true
  });

  /* 叠加几个参考点，确认位图位置是否对得上 */
  var cities = [
    { n: '北京', p: [116.39, 39.90] }, { n: '上海', p: [121.47, 31.23] },
    { n: '成都', p: [104.06, 30.57] }, { n: '西安', p: [108.94, 34.34] },
    { n: '广州', p: [113.26, 23.12] }
  ];

  var pins = new deck.ScatterplotLayer({
    id: 'pins',
    data: cities,
    getPosition: function (d) { return d.p; },
    getRadius: 4,
    radiusUnits: 'pixels',
    getFillColor: [255, 255, 255, 240],
    stroked: true,
    lineWidthMinPixels: 2,
    getLineColor: [255, 90, 90, 255],
    pickable: true
  });

  var deckgl = new deck.Deck({
    canvas: document.getElementById('cv'),
    width: '100%',
    height: '100%',
    initialViewState: {
      longitude: 110,
      latitude: 35,
      zoom: 3.6,
      pitch: 35,
      bearing: 0,
      maxPitch: 60
    },
    controller: true,
    layers: [bitmap, pins],
    getTooltip: function (info) {
      if (!info.object) return null;
      if (info.object.n) return info.object.n;
      if (info.coordinate) {
        return info.coordinate[0].toFixed(2) + ', ' + info.coordinate[1].toFixed(2);
      }
      return null;
    }
  });

  document.getElementById('o').addEventListener('input', function () {
    var v = parseFloat(this.value);
    document.getElementById('ov').textContent = v.toFixed(2);
    bitmap = bitmap.clone({ opacity: v });
    deckgl.setProps({ layers: [bitmap, pins] });
  });

  window.__deck = deckgl;
})();
</script>
</body>
</html>