第19章 - 前端地图集成实践

import * as maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const TITILER = 'https://titiler.example.com';
const COG_URL = 's3://bucket/scene.tif';

const tilejsonUrl =
  `${TITILER}/cog/WebMercatorQuad/tilejson.json?url=${encodeURIComponent(COG_URL)}&tilesize=256`;

const map = new maplibregl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {
      ortho: {
        type: 'raster',
        url: tilejsonUrl,   // 由 MapLibre 拉取 TileJSON 并套用 bounds/minzoom/maxzoom
        tileSize: 256       // 必须与 tilesize 查询参数一致
      }
    },
    layers: [
      {id: 'bg', type: 'background', paint: {'background-color': '#0b0f14'}},
      {id: 'ortho', type: 'raster', source: 'ortho', paint: {'raster-opacity': 1}}
    ]
  },
  center: [116.39, 39.9],
  zoom: 11
});

async function addCogLayer(map, {titiler, cogUrl, layerId, tilesize = 256, headers = {}}) {
  const tilejsonUrl =
    `${titiler}/cog/WebMercatorQuad/tilejson.json?url=${encodeURIComponent(cogUrl)}&tilesize=${tilesize}`;

  const res = await fetch(tilejsonUrl, {headers});
  if (!res.ok) throw new Error(`TileJSON 请求失败：${res.status}`);
  const tj = await res.json();

  if (map.getLayer(layerId)) map.removeLayer(layerId);
  if (map.getSource(layerId)) map.removeSource(layerId);

  map.addSource(layerId, {
    type: 'raster',
    tiles: tj.tiles,
    tileSize: tilesize,
    bounds: tj.bounds,
    minzoom: tj.minzoom,
    maxzoom: Math.min(tj.maxzoom, 20),
    attribution: tj.attribution || ''
  });

  map.addLayer({
    id: layerId,
    type: 'raster',
    source: layerId,
    paint: {
      'raster-opacity': 1,
      'raster-fade-duration': 150
    }
  });

  return tj;
}

const scenes = [
  {id: 'S2_20240101', url: 's3://bucket/S2_20240101.tif', time: '2024-01-01'},
  {id: 'S2_20240201', url: 's3://bucket/S2_20240201.tif', time: '2024-02-01'},
  {id: 'S2_20240301', url: 's3://bucket/S2_20240301.tif', time: '2024-03-01'}
];

let current = null;

async function showScene(scene) {
  const tj = await fetch(
    `https://titiler.example.com/cog/WebMercatorQuad/tilejson.json?url=${encodeURIComponent(scene.url)}&tilesize=256`
  ).then((r) => r.json());

  const source = map.getSource('scene-layer');
  if (!source) {
    map.addSource('scene-layer', {
      type: 'raster', tiles: tj.tiles, tileSize: 256,
      bounds: tj.bounds, minzoom: tj.minzoom, maxzoom: tj.maxzoom
    });
    map.addLayer({id: 'scene', type: 'raster', source: 'scene-layer'});
  } else {
    // 直接改 tiles 模板，避免删层重建
    source.setTiles(tj.tiles);
    source.setBounds(tj.bounds);
  }
  current = scene;
  document.getElementById('scene-time').textContent = scene.time;
}

// 时间轴拖动时加防抖，避免快速拖动触发大量请求
let timer = null;
document.getElementById('timeline').addEventListener('input', (e) => {
  const index = Number(e.target.value);
  clearTimeout(timer);
  timer = setTimeout(() => showScene(scenes[index]), 150);
});

showScene(scenes[0]);

// 服务端做拉伸与色带，前端只负责显示
const params = new URLSearchParams({
  url: 's3://bucket/dem.tif',
  rescale: '0,3000',
  colormap_name: 'terrain',
  tilesize: '256'
});

map.addSource('dem', {
  type: 'raster',
  tiles: [`https://titiler.example.com/cog/tiles/WebMercatorQuad/{z}/{x}/{y}?${params}`],
  tileSize: 256
});

// 方式一：走服务端内置的 access_token 查询参数（配置 TITILER_API_GLOBAL_ACCESS_TOKEN）
const token = 'signed-token-or-api-key';
const tiles = [`https://titiler.example.com/cog/tiles/WebMercatorQuad/{z}/{x}/{y}`];
const source = {
  type: 'raster',
  tiles: tiles.map((t) => `${t}?url=${encodeURIComponent(cogUrl)}&access_token=${token}`),
  tileSize: 256
};

// 方式二：加自定义头需要使用 transformRequest（MapLibre 在请求前改写）
const map = new maplibregl.Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  transformRequest: (url, resourceType) => {
    if (resourceType === 'Tile' && url.startsWith('https://titiler.example.com')) {
      return {url, headers: {Authorization: `Bearer ${token}`}};
    }
  }
});

// item 来自 stac-fastapi 的 /search 结果
const item = await fetch(
  'https://stac.example.com/collections/sentinel-2-l2a/items/S2B_20240101'
).then((r) => r.json());

// /stac 端点接受 item 的 URL，多资产通过 assets 筛选
const itemHref = item.links.find((l) => l.rel === 'self').href;
const params = new URLSearchParams({
  url: itemHref,
  assets: 'red,green,blue',
  rescale: '0,3000',
  tilesize: '256'
});

map.addSource('stac-scene', {
  type: 'raster',
  tiles: [`https://titiler.example.com/stac/tiles/WebMercatorQuad/{z}/{x}/{y}?${params}`],
  tileSize: 256
});

map.addSource('stac-scene', {
  type: 'raster',
  tiles: [tilesUrl],
  tileSize: 256,
  bounds: item.bbox // [west, south, east, north]
});

map.on('error', (e) => {
  const status = e.error?.status;
  if (status) {
    console.warn('瓦片请求失败', status, e.error.url);
  }
});