GeoJSON

<!--
  示例：deck.gl GeoJSON 面
  要点：GeoJsonLayer 消费程序生成的 FeatureCollection，填充色与挤出高度按属性映射
  依赖：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>GeoJSON 面</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:10px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .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}
  .bar button.on{background:#2c4a7a;border-color:#4f8ad6;color:#dfe9ff}
  .bar .sep{width:1px;height:18px;background:#2a313c;margin:0 4px}
  #cv{flex:1 1 auto;min-height:0;width:100%}
</style>
</head>
<body>
<div class="bar">
  <span>面要素 <b id="n">—</b></span>
  <span class="sep"></span>
  <button id="mode" class="on">挤出</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 blobs = [
    { lng: 116.35, lat: 39.88, sx: 1.00, sy: 0.70, k: 1.0 },
    { lng: 117.55, lat: 39.10, sx: 0.50, sy: 0.40, k: 0.85 },
    { lng: 115.10, lat: 38.55, sx: 0.45, sy: 0.35, k: 0.70 },
    { lng: 117.70, lat: 40.70, sx: 0.40, sy: 0.30, k: 0.58 }
  ];

  var cell = 0.10;
  var inset = 0.012;
  var features = [];
  var serial = 0;

  function influence(lng, lat) {
    var best = 0;
    for (var i = 0; i < blobs.length; i++) {
      var b = blobs[i];
      var dx = (lng - b.lng) / b.sx;
      var dy = (lat - b.lat) / b.sy;
      var v = Math.exp(-(dx * dx + dy * dy)) * b.k;
      if (v > best) best = v;
    }
    return best;
  }

  for (var lng = 114.4; lng <= 118.2; lng += cell) {
    for (var lat = 37.4; lat <= 40.8; lat += cell) {
      var w = influence(lng, lat);
      if (w < 0.32) continue;

      /* 叠加一层细微噪声，避免所有格子取整后完全一致 */
      var density = Math.min(1, w * 0.82 + Math.random() * 0.16);
      var h = cell / 2 - inset;
      var fid = 'C' + (serial++);

      features.push({
        type: 'Feature',
        id: fid,
        properties: {
          id: fid,
          density: Number(density.toFixed(3)),
          block: Math.round(density * 100)
        },
        geometry: {
          type: 'Polygon',
          coordinates: [[
            [lng - h, lat - h],
            [lng + h, lat - h],
            [lng + h, lat + h],
            [lng - h, lat + h],
            [lng - h, lat - h]
          ]]
        }
      });
    }
  }

  var geoJson = { type: 'FeatureCollection', features: features };
  document.getElementById('n').textContent = features.length;

  var extruded = true;

  function ramp(v) {
    /* 深蓝 → 青 → 黄 → 橙 */
    if (v < 0.34) {
      var t1 = v / 0.34;
      return [Math.round(18 + 30 * t1), Math.round(46 + 90 * t1), Math.round(92 + 96 * t1), 210];
    }
    if (v < 0.68) {
      var t2 = (v - 0.34) / 0.34;
      return [Math.round(48 + 180 * t2), Math.round(136 + 72 * t2), Math.round(188 - 30 * t2), 220];
    }
    var t3 = (v - 0.68) / 0.32;
    return [Math.round(228 + 20 * t3), Math.round(208 - 60 * t3), Math.round(158 - 96 * t3), 235];
  }

  function buildLayer() {
    return new deck.GeoJsonLayer({
      id: 'cells',
      data: geoJson,
      filled: true,
      stroked: true,
      extruded: extruded,
      getFillColor: function (f) { return ramp(f.properties.density); },
      getLineColor: [236, 245, 255, 130],
      getLineWidth: 1,
      lineWidthUnits: 'pixels',
      lineWidthMinPixels: 1,
      getElevation: function (f) { return f.properties.density; },
      elevationScale: extruded ? 14000 : 0,
      material: { ambient: 0.5, diffuse: 0.68, shininess: 20 },
      pickable: true
    });
  }

  var deckgl = new deck.Deck({
    canvas: 'cv',
    width: '100%',
    height: '100%',
    initialViewState: {
      longitude: 116.3,
      latitude: 39.2,
      zoom: 7.0,
      pitch: 60,
      bearing: -12,
      maxPitch: 70
    },
    controller: true,
    layers: [buildLayer()],
    getTooltip: function (info) {
      if (!info.object) return null;
      var p = info.object.properties;
      if (!p) return null;
      return p.id + ' · 密度 ' + p.density.toFixed(2) + ' · 强度 ' + p.block;
    }
  });

  document.getElementById('mode').addEventListener('click', function (e) {
    extruded = !extruded;
    e.currentTarget.textContent = extruded ? '挤出' : '平面';
    e.currentTarget.classList.toggle('on', extruded);
    deckgl.setProps({ layers: [buildLayer()] });
  });

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