第16章 - 动态数据动画与时间维度

options = extend({
    offset: [0, 0],
    speed: 1.2,     // 每秒飞过 1.2 个屏幕跨度
    curve: 1.42,    // 飞行弧线的"隆起"程度
    easing: defaultEasing
}, options);

// 平滑飞过去
map.flyTo({ center: [121.47, 31.23], zoom: 12, pitch: 45, bearing: 30, speed: 0.8 });

// 固定时长、自定义曲线
map.easeTo({
  center: [121.47, 31.23],
  zoom: 12,
  duration: 1200,
  easing: (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2  // easeInOutQuad
});

// 打断：任何新的相机调用都会中断正在进行的动画
map.stop();

map.setPaintProperty('area-fill', 'fill-color', '#e63946', { duration: 600, delay: 0 });

// 按数据值渐变的颜色切换，同样有过渡
map.setPaintProperty('buildings', 'fill-extrusion-height',
  ['interpolate', ['linear'], ['get', 'floors'], 1, 3, 30, 90],
  { duration: 800 });

let rafId = null;
let start = null;

function pulse(now) {
  if (start === null) start = now;
  const t = (now - start) / 1000;             // 秒
  const phase = (Math.sin(t * Math.PI * 2) + 1) / 2;   // 0..1，1 秒一个周期

  map.setPaintProperty('pulse-dot', 'circle-radius', 6 + phase * 10);
  map.setPaintProperty('pulse-dot', 'circle-opacity', 0.9 - phase * 0.6);

  rafId = requestAnimationFrame(pulse);
}

function startPulse() {
  if (rafId === null) rafId = requestAnimationFrame(pulse);
}
function stopPulse() {
  if (rafId !== null) cancelAnimationFrame(rafId);
  rafId = null;
  start = null;
}

// 前提：源上的要素有 id（数据里带 id，或源上配 promoteId）
map.setFeatureState({ source: 'sites', id: 42 }, { hover: true });

// 图层里用 feature-state 读
map.addLayer({
  id: 'sites-hl',
  type: 'circle',
  source: 'sites',
  paint: {
    'circle-radius': ['case', ['boolean', ['feature-state', 'hover'], false], 12, 5],
    'circle-color': ['case', ['boolean', ['feature-state', 'hover'], false], '#e63946', '#1d3557']
  }
});

// 方案 A：数据里带时间字段，用 filter 切换（最轻，不重建源）
let currentHour = 8;
function showHour(h) {
  currentHour = h;
  map.setFilter('sensor-points', ['==', ['get', 'hour'], h]);
}

// 方案 B：GeoJSON 源换数据（会重建瓦片索引，几十万点慎用）
async function loadHour(h) {
  const data = await fetch('/api/sensors?hour=' + h).then((r) => r.json());
  map.getSource('sensors').setData(data);
}

// 方案 C：动画播放，按时间片轮播
const hours = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
let i = 0;
const timer = setInterval(() => {
  showHour(hours[i % hours.length]);
  i += 1;
}, 800);

// 1) 入站合并：不管推多快，最多每 200ms 合成一次
const pending = new Map();
let flushTimer = null;

function onPosition(msg) {
  pending.set(msg.id, msg);
  if (flushTimer === null) {
    flushTimer = setTimeout(flush, 200);
  }
}

function flush() {
  flushTimer = null;
  const batch = Array.from(pending.values());
  pending.clear();

  // 2) 只更新变化的部分：setFeatureState 比 setData 便宜
  for (const p of batch) {
    map.setFeatureState({ source: 'vehicles', id: p.id }, { lon: p.lon, lat: p.lat });
  }
  // 3) 位置类移动仍需改几何，用 source.updateData diff 或按帧降频 setData
  map.triggerRepaint();
}

// 路线 1：样式过渡，交给 MapLibre 插值，一次调用即可
map.setPaintProperty('area-fill', 'fill-color', '#e63946', { duration: 600 });

// 路线 2：自己逐帧算，适合需要非线性节奏、需要与其他动画同步的场景
const from = [0, 0, 0], to = [230, 57, 70];
let t0 = performance.now();
function step(now) {
  const p = Math.min((now - t0) / 600, 1);
  const c = 'rgb(' + from.map((v, i) => Math.round(v + (to[i] - v) * p)).join(',') + ')';
  map.setPaintProperty('area-fill', 'fill-color', c);
  if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);