第20章 - 综合实战与项目落地

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>网点运营看板</title>
  <link href="https://unpkg.com/maplibre-gl@6.17.0/dist/maplibre-gl.css" rel="stylesheet" />
  <style>
    body { margin: 0; }
    #map { height: 100vh; }
    .toolbar { position: absolute; top: 12px; left: 12px; z-index: 5; display: flex; gap: 6px;
      background: #fff; padding: 6px; border-radius: 6px; box-shadow: 0 0 0 2px rgba(0,0,0,.1); }
    .toolbar button { border: 0; background: #f1f3f5; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
    .toolbar button[aria-pressed="true"] { background: #1d3557; color: #fff; }
  </style>
</head>
<body>
  <div id="map"></div>
  <div class="toolbar">
    <button id="btn-base" aria-pressed="false">暗色底图</button>
    <button id="btn-terrain" aria-pressed="false">地形</button>
    <button id="btn-heat" aria-pressed="true">热力</button>
  </div>
  <script src="https://unpkg.com/maplibre-gl@6.17.0/dist/maplibre-gl.js"></script>
  <script>
    const CENTER = [116.39, 39.9];

    // 演示用数据：真实项目从接口取，再做降精度与去属性
    const sites = {
      type: 'FeatureCollection',
      features: Array.from({ length: 2000 }, (_, i) => ({
        type: 'Feature',
        id: i,
        properties: { name: '网点' + i, capacity: 10 + (i % 40) },
        geometry: {
          type: 'Point',
          coordinates: [CENTER[0] + (Math.random() - 0.5) * 0.6, CENTER[1] + (Math.random() - 0.5) * 0.4]
        }
      }))
    };

    const map = new maplibregl.Map({
      container: 'map',
      style: 'https://demotiles.maplibre.org/style.json',
      center: CENTER,
      zoom: 9,
      fadeDuration: 200,
      crossSourceCollisions: false
    });
    map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'top-right');
    map.addControl(new maplibregl.ScaleControl({ maxWidth: 120 }), 'bottom-left');

    let unmountBusiness = null;

    function applyLayers() {
      if (unmountBusiness) unmountBusiness();
      if (!map.getSource('sites')) {
        map.addSource('sites', { type: 'geojson', data: sites, cluster: true, clusterRadius: 60, clusterMaxZoom: 14 });
      }
      if (!map.getLayer('heat')) {
        map.addLayer({
          id: 'heat', type: 'heatmap', source: 'sites',
          paint: {
            'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 4, 9, 20, 15, 40],
            'heatmap-weight': ['get', 'capacity'],
            'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 2.5],
            'heatmap-color': ['interpolate', ['linear'], ['heatmap-density'],
              0, 'rgba(33,102,172,0)', 0.2, 'rgb(103,169,207)', 0.5, 'rgb(253,219,199)', 1, 'rgb(178,24,43)'],
            'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 11, 0.85, 13, 0]
          }
        });
      }
      if (!map.getLayer('sites-cluster')) {
        map.addLayer({ id: 'sites-cluster', type: 'circle', source: 'sites', filter: ['has', 'point_count'],
          paint: {
            'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 750, '#f28cb1'],
            'circle-radius': ['step', ['get', 'point_count'], 16, 100, 22, 750, 28]
          }
        });
        map.addLayer({ id: 'sites-count', type: 'symbol', source: 'sites', filter: ['has', 'point_count'],
          layout: { 'text-field': ['get', 'point_count_abbreviated'], 'text-size': 12, 'text-allow-overlap': true }
        });
        map.addLayer({ id: 'sites-point', type: 'circle', source: 'sites', filter: ['!', ['has', 'point_count']],
          paint: { 'circle-color': '#e63946', 'circle-radius': 5 }
        });
      }
      unmountBusiness = () => { /* 业务图层清理逻辑 */ };
    }

    map.on('style.load', applyLayers);

    // 聚合交互：点簇放大，点单点开弹窗
    const popup = new maplibregl.Popup({ closeOnClick: true, maxWidth: '280px' });
    map.on('click', 'sites-cluster', async (e) => {
      const f = e.features[0];
      const zoom = await map.getSource('sites').getClusterExpansionZoom(f.properties.cluster_id);
      map.easeTo({ center: f.geometry.coordinates, zoom, duration: 500 });
    });
    map.on('click', 'sites-point', (e) => {
      const f = e.features[0];
      popup.setLngLat(f.geometry.coordinates)
        .setDOMContent((() => {
          const div = document.createElement('div');
          const h = document.createElement('b');
          h.textContent = f.properties.name;      // 外部数据走 textContent
          div.appendChild(h);
          return div;
        })())
        .addTo(map);
    });

    // 工具按钮
    document.getElementById('btn-terrain').addEventListener('click', (e) => {
      const btn = e.currentTarget;
      const on = btn.getAttribute('aria-pressed') === 'true';
      if (!on) {
        if (!map.getSource('dem')) {
          map.addSource('dem', { type: 'raster-dem',
            tiles: ['https://demotiles.maplibre.org/terrain-tiles/tiles.json'], tileSize: 256 });
        }
        map.setTerrain({ source: 'dem', exaggeration: 1.3 });
        map.easeTo({ pitch: 62, duration: 600 });
      } else {
        map.setTerrain(null);
        map.easeTo({ pitch: 0, duration: 600 });
      }
      btn.setAttribute('aria-pressed', String(!on));
    });

    document.getElementById('btn-heat').addEventListener('click', (e) => {
      const btn = e.currentTarget;
      const visible = map.getLayoutProperty('heat', 'visibility') !== 'none';
      map.setLayoutProperty('heat', 'visibility', visible ? 'none' : 'visible');
      btn.setAttribute('aria-pressed', String(!visible));
    });

    map.on('error', (err) => console.error('[map]', err.error && err.error.message));
  </script>
</body>
</html>