第06章 - 数据源 Source 体系

map.addSource('roads', {
  type: 'vector',
  tiles: ['https://tiles.example.com/roads/{z}/{x}/{y}.pbf'],
  minzoom: 5,
  maxzoom: 14,
  promoteId: 'road_id' // 用属性 road_id 作为 feature id
});

map.on('click', 'road-line', (e) => {
  const id = e.features[0].id; // 有了 promoteId，这里才有稳定的值
  map.setFeatureState({source: 'roads', id}, {selected: true});
});

map.addSource('sensors', {
  type: 'geojson',
  data: '/api/sensors.geojson',
  cluster: true,
  clusterRadius: 50,
  clusterMaxZoom: 14,
  clusterProperties: {
    // 聚合后计数与取最大值
    count: ['+', ['get', 'count']],
    maxValue: ['max', ['get', 'value']]
  }
});

map.addLayer({
  id: 'sensor-clusters',
  type: 'circle',
  source: 'sensors',
  filter: ['has', 'point_count'],
  paint: {
    'circle-radius': ['step', ['get', 'point_count'], 14, 10, 20, 100, 28],
    'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 10, '#f1f075', 100, '#f28cb1']
  }
});

const src = map.getSource('sensors');

// 全量替换：适合数据整体变化，内部会重新切片
await src.setData(newFeatureCollection);

// 增量更新：只传变化的部分，适合高频小改
await src.updateData({
  add: [newFeature],
  update: [{id: 42, newGeometry: newPoint, addOrUpdateProperties: [{key: 'value', value: 9}]}],
  remove: [{id: 7}]
});

const src = map.getSource('sensors');

// 某个聚合点展开后的 zoom
const zoom = await src.getClusterExpansionZoom(clusterId);

// 聚合点下的原始要素（分页）
const leaves = await src.getClusterLeaves(clusterId, 10, 0);

// 聚合点的直接子级
const children = await src.getClusterChildren(clusterId);

map.easeTo({center: leafLngLat, zoom});

// DEM 源单独加，不直接显示
map.addSource('dem', {
  type: 'raster-dem',
  tiles: ['https://dem.example.com/{z}/{x}/{y}.png'],
  encoding: 'terrarium',
  tileSize: 256,
  maxzoom: 12
});

// 作为山体阴影显示
map.addLayer({
  id: 'hillshade',
  type: 'hillshade',
  source: 'dem',
  paint: {'hillshade-exaggeration': 0.5, 'hillshade-shadow-color': '#3b3b3b'}
});

// 作为地形使用（第 14 章展开）
map.setTerrain({source: 'dem', exaggeration: 1.2});

map.addSource('drone-video', {
  type: 'video',
  urls: ['/media/drone.mp4', '/media/drone.webm'],
  coordinates: [
    [116.30, 39.95],
    [116.48, 39.95],
    [116.48, 39.85],
    [116.30, 39.85]
  ]
});

map.addLayer({id: 'drone', type: 'raster', source: 'drone-video'});

// 浏览器要求用户交互后才能播放
document.getElementById('play').addEventListener('click', async () => {
  await map.getSource('drone-video').play();
});

// 添加（重复 id 会抛 Source "xxx" already exists.）
map.addSource('poi', {type: 'geojson', data: '/data/poi.geojson'});

// 取出来做后续操作
const poi = map.getSource('poi');

// 移除前必须先移除引用它的图层，否则后续渲染会报错
map.removeLayer('poi-layer');
map.removeSource('poi');

import {addProtocol} from 'maplibre-gl';

addProtocol('myscheme', async (params, abortController) => {
  const res = await fetch(params.url.replace('myscheme://', 'https://'), {
    signal: abortController.signal
  });
  if (!res.ok) throw new Error('请求失败：' + res.status);
  return {data: await res.arrayBuffer()};
});

// 之后样式里可以直接写 myscheme://host/tiles/{z}/{x}/{y}.pbf

const canvasEl = document.getElementById('overlay');
const ctx = canvasEl.getContext('2d');

// 每帧把内容画到 canvas 上
function draw(t) {
  ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
  ctx.fillStyle = 'rgba(255,80,0,0.4)';
  ctx.fillRect((Math.sin(t / 500) + 1) * 50, 40, 80, 80);
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

map.addSource('overlay', {
  type: 'canvas',
  canvas: canvasEl,
  coordinates: [
    [116.30, 39.95],
    [116.48, 39.95],
    [116.48, 39.85],
    [116.30, 39.85]
  ],
  animate: true // 允许按帧更新纹理
});
map.addLayer({id: 'overlay-layer', type: 'raster', source: 'overlay'});