第15章 - 热力图聚合与符号可视化

map.addSource('orders', { type: 'geojson', data: ordersGeoJSON });
map.addLayer({
  id: 'orders-heat',
  type: 'heatmap',
  source: 'orders',
  paint: {
    // 半径随缩放放大：低缩放看分布，高缩放看细节
    'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 20, 15, 40],
    'heatmap-weight': 1,
    'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
    'heatmap-opacity': 0.8,
    'heatmap-color': [
      'interpolate', ['linear'], ['heatmap-density'],
      0, 'rgba(33,102,172,0)',
      0.2, 'rgb(103,169,207)',
      0.4, 'rgb(209,229,240)',
      0.6, 'rgb(253,219,199)',
      0.8, 'rgb(239,138,98)',
      1, 'rgb(178,24,43)'
    ]
  }
});

map.addLayer({
  id: 'orders-points',
  type: 'circle',
  source: 'orders',
  minzoom: 12,
  paint: {
    'circle-radius': ['interpolate', ['linear'], ['zoom'], 12, 2, 18, 12],
    'circle-color': '#d73027',
    'circle-opacity': ['interpolate', ['linear'], ['zoom'], 12, 0, 14, 0.9]
  }
});
// heatmap 同步淡出
map.setPaintProperty('orders-heat', 'heatmap-opacity',
  ['interpolate', ['linear'], ['zoom'], 12, 0.8, 14, 0]);

map.addSource('sites', {
  type: 'geojson',
  data: 'https://example.com/sites.geojson',
  cluster: true,
  clusterRadius: 60,
  clusterMaxZoom: 14,
  clusterProperties: {
    // 累加每个点的 capacity 字段，簇上得到总容量
    total_capacity: ['+', ['get', 'capacity']]
  }
});

// 1) 小簇：一个圆 + 数字
map.addLayer({
  id: 'clusters',
  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'], 18, 100, 24, 750, 30]
  }
});

// 2) 簇内数字
map.addLayer({
  id: 'cluster-count',
  type: 'symbol',
  source: 'sites',
  filter: ['has', 'point_count'],
  layout: {
    'text-field': ['get', 'point_count_abbreviated'],
    'text-size': 12,
    'text-allow-overlap': true
  }
});

// 3) 未聚合的单点
map.addLayer({
  id: 'unclustered',
  type: 'circle',
  source: 'sites',
  filter: ['!', ['has', 'point_count']],
  paint: { 'circle-color': '#11b4da', 'circle-radius': 4, 'circle-stroke-width': 1, 'circle-stroke-color': '#fff' }
});

// 点击簇：放大到该簇散开的级别
map.on('click', 'clusters', async (e) => {
  const feature = e.features[0];
  const clusterId = feature.properties.cluster_id;
  const source = map.getSource('sites');

  // 1) 该簇完全散开所需的 zoom
  const zoom = await source.getClusterExpansionZoom(clusterId);
  map.easeTo({ center: feature.geometry.coordinates, zoom });

  // 2) 也可以先取子要素，自己决定怎么展示
  const children = await source.getClusterChildren(clusterId);
  console.log('子要素', children.length, children.map((c) => c.properties));
});

// 点击单点：列出簇内原始点
map.on('click', 'unclustered', async (e) => {
  const f = e.features[0];
  console.log('点位属性', f.properties);
});

const source = map.getSource('sites');
const { point_count } = clusterFeature.properties;
const leaves = await source.getClusterLeaves(clusterFeature.properties.cluster_id, point_count, 0);
console.log('原始点', leaves.map((f) => f.properties.name));

await map.getSource('sites').setClusterOptions({ cluster: true, clusterRadius: 80, clusterMaxZoom: 16 });
const opts = map.getSource('sites').getClusterOptions();  // {cluster, clusterMaxZoom, clusterRadius}

map.addLayer({
  id: 'poi-labels',
  type: 'symbol',
  source: 'poi',
  layout: {
    'text-field': ['get', 'name'],
    'text-size': ['interpolate', ['linear'], ['zoom'], 10, 11, 16, 15],
    'text-overlap': 'cooperative',     // 同类只避让自己人
    'text-ignore-placement': false,    // 允许其他图层压上来
    'symbol-sort-key': ['-', 0, ['get', 'rank']]   // rank 小的优先放置
  },
  paint: { 'text-color': '#222', 'text-halo-color': '#fff', 'text-halo-width': 1.2 }
});

map.on('click', 'clusters', handlerA);       // 只对簇生效
map.on('click', 'unclustered', handlerB);    // 只对单点生效
// 鼠标样式
map.on('mouseenter', 'clusters', () => { map.getCanvas().className = 'maplibregl-canvas-pointing'; });
map.on('mouseleave', 'clusters', () => { map.getCanvas().className = 'maplibregl-canvas'; });