Column 3D

<!--
  示例：deck.gl 三维柱状
  要点：ColumnLayer 在规则阵列上立起柱体，高度由双峰密度场生成，倍率可调
  依赖：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:160px;accent-color:#4f9ef8}
  .bar button{font:inherit;font-size:12px;padding:3px 10px;border-radius:5px;cursor:pointer;
              border:1px solid #303845;background:#1d2531;color:#c8d2e0}
  .bar button:hover{background:#253040}
  #cv{flex:1 1 auto;min-height:0;width:100%}
</style>
</head>
<body>
<div class="bar">
  <span>柱体 <b id="n">—</b></span>
  <label>高度倍率 <input type="range" id="scale" min="100" max="1600" step="50" value="700"></label>
  <span>当前 <b id="sv">700</b></span>
  <button id="regen">重算分布</button>
  <span>拖拽旋转 · 滚轮缩放</span>
</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;
  }

  var originLng = 116.355;
  var originLat = 39.885;
  var gap = 0.0052;
  var cols = 18;
  var rows = 18;

  var shiftX = 0;
  var shiftY = 0;

  function field(x, y) {
    var v = 0;
    v += Math.exp(-((x - 0.30 + shiftX) * (x - 0.30 + shiftX) +
                    (y - 0.38 + shiftY) * (y - 0.38 + shiftY)) / 0.014) * 1.0;
    v += Math.exp(-((x - 0.68 + shiftX) * (x - 0.68 + shiftX) +
                    (y - 0.62 + shiftY) * (y - 0.62 + shiftY)) / 0.020) * 0.72;
    v += Math.exp(-((x - 0.52 + shiftX) * (x - 0.52 + shiftX) +
                    (y - 0.20 + shiftY) * (y - 0.20 + shiftY)) / 0.009) * 0.45;
    return v;
  }

  var cells = [];
  function rebuildData() {
    cells = [];
    for (var i = 0; i < cols; i++) {
      for (var j = 0; j < rows; j++) {
        var v = field(i / (cols - 1), j / (rows - 1));
        cells.push({
          lng: originLng + i * gap,
          lat: originLat + j * gap,
          row: i,
          col: j,
          value: Math.min(1, v)
        });
      }
    }
  }
  rebuildData();

  document.getElementById('n').textContent = cells.length;

  var elevationScale = 700;

  function buildLayer() {
    return new deck.ColumnLayer({
      id: 'columns',
      data: cells,
      diskResolution: 16,
      radius: 190,
      angle: Math.PI / 8,
      getPosition: function (d) { return [d.lng, d.lat]; },
      getElevation: function (d) { return d.value; },
      elevationScale: elevationScale,
      coverage: 0.84,
      extruded: true,
      getFillColor: function (d) {
        var v = d.value;
        if (v < 0.55) {
          var t1 = v / 0.55;
          return [Math.round(34 + 26 * t1), Math.round(96 + 118 * t1), Math.round(214 - 14 * t1), 225];
        }
        var t2 = (v - 0.55) / 0.45;
        return [Math.round(60 + 185 * t2), Math.round(214 - 28 * t2), Math.round(200 - 118 * t2), 228];
      },
      material: { ambient: 0.46, diffuse: 0.68, shininess: 22 },
      pickable: true,
      autoHighlight: true,
      highlightColor: [255, 255, 255, 120]
    });
  }

  var deckgl = new deck.Deck({
    canvas: 'cv',
    width: '100%',
    height: '100%',
    initialViewState: {
      longitude: 116.400,
      latitude: 39.925,
      zoom: 12.4,
      pitch: 50,
      bearing: -18,
      maxPitch: 72
    },
    controller: true,
    layers: [buildLayer()],
    getTooltip: function (info) {
      if (!info.object) return null;
      var o = info.object;
      return '行 ' + o.row + ' 列 ' + o.col + ' · 高度 ' +
        Math.round(o.value * elevationScale) + ' m';
    }
  });

  document.getElementById('scale').addEventListener('input', function (e) {
    elevationScale = Number(e.target.value);
    document.getElementById('sv').textContent = elevationScale;
    deckgl.setProps({ layers: [buildLayer()] });
  });

  document.getElementById('regen').addEventListener('click', function () {
    shiftX = Math.random() * 0.16 - 0.08;
    shiftY = Math.random() * 0.16 - 0.08;
    rebuildData();
    deckgl.setProps({ layers: [buildLayer()] });
  });

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