Arc

<!--
  示例：deck.gl 弧线飞线
  要点：ArcLayer 以起点终点连线，两端配色表达流向，透明度随时间脉动
  依赖：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:16px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  #cv{flex:1 1 auto;min-height:0;width:100%}
</style>
</head>
<body>
<div class="bar">
  <span>航线 <b id="n">—</b> 条</span>
  <span>蓝：流出 · 橙：流入</span>
  <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 cities = {
    '北京': [116.39, 39.90],
    '上海': [121.47, 31.23],
    '广州': [113.26, 23.12],
    '成都': [104.06, 30.57],
    '西安': [108.94, 34.34],
    '武汉': [114.30, 30.59],
    '哈尔滨': [126.64, 45.75],
    '乌鲁木齐': [87.61, 43.82],
    '昆明': [102.71, 25.04],
    '拉萨': [91.11, 29.65],
    '厦门': [118.09, 24.48],
    '沈阳': [123.43, 41.80]
  };

  var flows = [
    { from: '北京', to: '上海', v: 820 },
    { from: '北京', to: '广州', v: 640 },
    { from: '北京', to: '成都', v: 430 },
    { from: '北京', to: '哈尔滨', v: 360 },
    { from: '北京', to: '乌鲁木齐', v: 280 },
    { from: '北京', to: '昆明', v: 240 },
    { from: '北京', to: '西安', v: 310 },
    { from: '上海', to: '武汉', v: 390 },
    { from: '上海', to: '厦门', v: 300 },
    { from: '上海', to: '沈阳', v: 210 },
    { from: '广州', to: '成都', v: 260 },
    { from: '成都', to: '拉萨', v: 180 }
  ];

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

  /* 端点单独画一层，弧线才不会悬空结束 */
  var cityPoints = [];
  var seen = {};
  for (var f = 0; f < flows.length; f++) {
    var names = [flows[f].from, flows[f].to];
    for (var q = 0; q < 2; q++) {
      var nm = names[q];
      if (seen[nm]) continue;
      seen[nm] = true;
      cityPoints.push({ name: nm, lng: cities[nm][0], lat: cities[nm][1] });
    }
  }

  var nodeLayer = new deck.ScatterplotLayer({
    id: 'endpoints',
    data: cityPoints,
    getPosition: function (d) { return [d.lng, d.lat]; },
    getRadius: 3,
    radiusUnits: 'pixels',
    radiusMinPixels: 2.5,
    getFillColor: [255, 222, 160, 235],
    stroked: true,
    getLineColor: [20, 28, 42, 200],
    lineWidthUnits: 'pixels',
    getLineWidth: 1
  });

  var phase = 0;

  function buildLayer() {
    return new deck.ArcLayer({
      id: 'flows',
      data: flows,
      getSourcePosition: function (d) { return cities[d.from]; },
      getTargetPosition: function (d) { return cities[d.to]; },
      getSourceColor: function (d, info) {
        var a = 150 + 95 * Math.sin(phase + info.index * 0.7);
        return [74, 168, 255, Math.round(a)];
      },
      getTargetColor: function (d, info) {
        var a = 150 + 95 * Math.sin(phase + info.index * 0.7 + 1.2);
        return [255, 158, 70, Math.round(a)];
      },
      getWidth: function (d) { return 1.8 + d.v / 220; },
      widthUnits: 'pixels',
      widthMinPixels: 1.5,
      getHeight: function (d) { return 0.32 + d.v / 4500; },
      greatCircle: true,
      pickable: true
    });
  }

  var deckgl = new deck.Deck({
    canvas: 'cv',
    width: '100%',
    height: '100%',
    initialViewState: {
      longitude: 108.0,
      latitude: 34.2,
      zoom: 3.5,
      pitch: 40,
      bearing: -6,
      maxPitch: 65
    },
    controller: true,
    layers: [buildLayer(), nodeLayer],
    getTooltip: function (info) {
      if (!info.object) return null;
      var o = info.object;
      return o.from + ' → ' + o.to + '：' + o.v + ' 人次';
    }
  });

  /* 每 70ms 推进一步相位，重建图层触发 updateTriggers */
  var last = 0;
  function pulse(now) {
    if (now - last > 70) {
      last = now;
      phase += 0.22;
      deckgl.setProps({ layers: [buildLayer(), nodeLayer] });
    }
    requestAnimationFrame(pulse);
  }
  requestAnimationFrame(pulse);

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