Basemap Esri

<!--
  示例：叠加 Esri 底图
  要点：TileLayer 加载 Esri 暗灰栅格瓦片，ArcLayer 与点图层叠在其上
  依赖：deck.gl 9.0 · jsDelivr CDN · Esri 暗色底图
-->
<!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>叠加 Esri 底图</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 label{display:flex;align-items:center;gap:5px;cursor:pointer}
  .bar input[type=checkbox]{accent-color:#4f9ef8}
  .bar input[type=range]{width:150px;accent-color:#4f9ef8}
  .bar button{font:inherit;font-size:12px;padding:3px 10px;border-radius:4px;cursor:pointer;
       border:1px solid #2f3947;background:#1d242e;color:#c9d3e0}
  .bar button:hover{background:#26303d}
  #cv{flex:1 1 auto;min-height:0;width:100%;display:block}

</style>
</head>
<body>
<div class="bar">
  <span>节点 <b id="n">—</b></span>
  <label><input type="checkbox" id="base" checked> 显示底图</label>
  <span class="attr">Tiles © Esri</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 hub = [116.39, 39.90];
  var targets = [[116.46, 39.91], [116.31, 39.98], [116.48, 40.00], [116.51, 39.80], [116.35, 39.94]];

  var flows = targets.map(function (t, i) {
    return { from: hub, to: t, v: 120 + i * 40 };
  });

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

  function basemap() {
    return new deck.TileLayer({
      id: 'basemap',
      data: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}',
      minZoom: 0,
      maxZoom: 16,
      tileSize: 256,
      renderSubLayers: function (props) {
        var bb = props.tile.boundingBox;
        return new deck.BitmapLayer(props, {
          data: null,
          image: props.data,
          bounds: [bb[0][0], bb[0][1], bb[1][0], bb[1][1]]
        });
      }
    });
  }

  var showBase = true;

  function layers() {
    var out = [];
    if (showBase) out.push(basemap());
    out.push(new deck.ArcLayer({
      id: 'flows',
      data: flows,
      getSourcePosition: function (d) { return d.from; },
      getTargetPosition: function (d) { return d.to; },
      getSourceColor: [96, 186, 255, 210],
      getTargetColor: [255, 176, 92, 210],
      getWidth: function (d) { return 1 + d.v / 120; },
      widthUnits: 'pixels',
      getHeight: 0.4,
      greatCircle: true
    }));
    out.push(new deck.ScatterplotLayer({
      id: 'nodes',
      data: [hub].concat(targets),
      getPosition: function (d) { return d; },
      getRadius: 5,
      radiusUnits: 'pixels',
      getFillColor: [255, 210, 120, 240],
      stroked: true,
      getLineColor: [12, 20, 32, 230],
      lineWidthUnits: 'pixels',
      getLineWidth: 1.5
    }));
    return out;
  }

  var deckgl = new deck.Deck({
    canvas: 'cv',
    width: '100%',
    height: '100%',
    initialViewState: { longitude: 116.41, latitude: 39.92, zoom: 10.9, pitch: 38, bearing: -12, maxPitch: 60 },
    controller: true,
    layers: layers()
  });

  document.getElementById('base').addEventListener('change', function (e) {
    showBase = e.target.checked;
    deckgl.setProps({ layers: layers() });
  });
  window.__deck = deckgl;
})();
</script>
</body>
</html>