Maplibre Overlay

<!--
  示例：deck.gl 叠加 MapLibre 底图
  核心逻辑：MapboxOverlay 把 deck 图层挂到 MapLibre 的相机上，两者共享视角
  数据：页面内生成的 24 条城市航线与对应端点
  依赖：deck.gl 9.0 · MapLibre GL JS 4 · 均为 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>叠加 MapLibre 底图</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
<style>
  html,body{height:100%;margin:0}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#16181d}
  .bar{flex:0 0 auto;display:flex;gap:14px;align-items:center;padding:8px 12px;
       background:#f6f7f9;border-bottom:1px solid #e3e6ea;font-size:12px;color:#58606e;flex-wrap:wrap}
  .bar b{color:#16181d;font-weight:600}
  #map{flex:1 1 auto;min-height:0}
</style>
</head>
<body>
<div class="bar">
  <span>deck 图层 <b>2</b></span>
  <span>航线 <b id="n">—</b></span>
  <span>底图 demotiles · 视角由 MapLibre 驱动</span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/deck.gl@9.0.35/dist.min.js"></script>
<script>
(function () {
  'use strict';

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

  /* 枢纽城市，作为航线的起点和终点 */
  var hubs = [
    ['北京', 116.39, 39.90], ['上海', 121.47, 31.23], ['广州', 113.26, 23.12],
    ['成都', 104.06, 30.57], ['西安', 108.94, 34.34], ['昆明', 102.71, 25.04],
    ['乌鲁木齐', 87.61, 43.82], ['哈尔滨', 126.64, 45.75], ['武汉', 114.30, 30.59]
  ].map(function (d) { return { name: d[0], lng: d[1], lat: d[2] }; });

  /* 以北京为核心向外辐射，再补几条区域间的连线 */
  var routes = [];
  for (var i = 1; i < hubs.length; i++) {
    routes.push({ from: hubs[0], to: hubs[i], w: 1 + (i % 3) });
  }
  for (var j = 1; j < hubs.length; j++) {
    routes.push({ from: hubs[j], to: hubs[(j % (hubs.length - 1)) + 1], w: 1 });
  }
  document.getElementById('n').textContent = routes.length;

  var map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [104.2, 35.5],
    zoom: 3.2,
    pitch: 40,
    bearing: -12,
    attributionControl: { compact: true, customAttribution: 'MapLibre demo tiles' }
  });

  map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'top-right');

  var arcs = new deck.ArcLayer({
    id: 'routes',
    data: routes,
    getSourcePosition: function (d) { return [d.from.lng, d.from.lat]; },
    getTargetPosition: function (d) { return [d.to.lng, d.to.lat]; },
    getSourceColor: [46, 134, 222, 200],
    getTargetColor: [250, 130, 49, 220],
    getWidth: function (d) { return d.w; },
    widthUnits: 'pixels',
    greatCircle: true
  });

  var points = new deck.ScatterplotLayer({
    id: 'hubs',
    data: hubs,
    getPosition: function (d) { return [d.lng, d.lat]; },
    getRadius: 5,
    radiusUnits: 'pixels',
    getFillColor: [255, 255, 255, 230],
    stroked: true,
    lineWidthMinPixels: 2,
    getLineColor: [46, 134, 222, 255],
    pickable: true
  });

  /* interleaved 为 false 时 deck 画在底图之上，用独立画布，兼容性最好 */
  var overlay = new deck.MapboxOverlay({
    interleaved: false,
    layers: [arcs, points],
    getTooltip: function (info) {
      if (!info.object) return null;
      if (info.object.from) return info.object.from.name + ' → ' + info.object.to.name;
      return info.object.name;
    }
  });

  map.addControl(overlay);

  map.on('error', function (e) {
    if (e.error) console.warn('地图错误：' + e.error.message);
  });
})();
</script>
</body>
</html>