如何获取卫星影像/数据瓦片日期并在Leaflet中展示？

嘿，这个问题我之前做Mapbox+Leaflet项目的时候也碰到过！刚好整理过一些可行的方案，分享给你：

一、能不能拿到瓦片/数据的日期？ #

得分两种情况来看：

• Mapbox官方图层：
  比如Mapbox Satellite这类影像图层，Mapbox其实提供了获取影像拍摄日期的途径——你可以用他们的Tilequery API查询特定位置的瓦片元数据，里面包含了影像的拍摄时间戳。如果是基于OSM的矢量瓦片（比如Mapbox Streets），瓦片本身的生成日期可以从HTTP响应头的Last-Modified字段里拿到，而图层里的OSM要素编辑日期则可以通过OSM的API单独查询。
• 自定义/开放数据图层：
  要是你用的是自己托管的开放数据瓦片，那在生成瓦片的时候就可以把日期元数据嵌进去，或者配套一个简单的API来提供日期查询接口，灵活性更高。

二、Leaflet里优雅展示的最优方案 #

推荐几种不突兀的展示方式，你可以根据需求选：

方案1：右下角固定提示控件（最常用） #

就像地图自带的版权提示一样，放在角落不遮挡视野，用户随时能看到当前视图的日期信息。

先写个自定义控件的代码：

// 自定义日期信息控件
const DateControl = L.Control.extend({
  options: {
    position: 'bottomright' // 和版权信息挤在右下角，风格统一
  },

  onAdd: function(map) {
    // 创建控件容器
    const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
    container.style.backgroundColor = '#fff';
    container.style.padding = '2px 6px';
    container.style.fontSize = '12px';
    container.style.borderRadius = '3px';
    container.id = 'tile-date-info';
    
    // 初始状态提示加载中
    container.textContent = '加载日期信息...';
    
    // 地图移动/缩放完成后更新日期
    map.on('moveend', () => this.updateMapDate(map));
    
    return container;
  },

  updateMapDate: async function(map) {
    const center = map.getCenter();
    // 替换成你的Mapbox Access Token
    const accessToken = 'YOUR_MAPBOX_TOKEN';
    // 调用Tilequery API获取中心位置的影像日期
    const queryUrl = `https://api.mapbox.com/v4/mapbox.satellite/tilequery/${center.lng},${center.lat}.json?radius=10&access_token=${accessToken}`;
    
    try {
      const res = await fetch(queryUrl);
      const data = await res.json();
      if (data.features.length > 0) {
        const shootDate = new Date(data.features[0].properties.timestamp);
        document.getElementById('tile-date-info').textContent = `影像日期: ${shootDate.toLocaleDateString()}`;
      } else {
        document.getElementById('tile-date-info').textContent = '无法获取日期';
      }
    } catch (err) {
      document.getElementById('tile-date-info').textContent = '日期加载失败';
      console.error('日期请求出错:', err);
    }
  }
});

// 把控件添加到地图上
map.addControl(new DateControl());

可以再加一点CSS让它更和谐：

#tile-date-info {
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
  margin-left: 8px;
}

方案2：鼠标悬停时显示日期 #

如果不想一直显示，只在用户关注某个位置时展示，可以用鼠标移动事件触发弹窗：

// 创建一个无关闭按钮的轻量弹窗
const datePopup = L.popup({
  autoClose: false,
  closeButton: false,
  className: 'date-tooltip',
  offset: [0, -15]
});

// 监听鼠标移动事件
map.on('mousemove', async (e) => {
  const latlng = e.latlng;
  const accessToken = 'YOUR_MAPBOX_TOKEN';
  const queryUrl = `https://api.mapbox.com/v4/mapbox.satellite/tilequery/${latlng.lng},${latlng.lat}.json?radius=10&access_token=${accessToken}`;
  
  try {
    const res = await fetch(queryUrl);
    const data = await res.json();
    if (data.features.length > 0) {
      const shootDate = new Date(data.features[0].properties.timestamp);
      datePopup.setContent(`<small>影像拍摄于: ${shootDate.toLocaleDateString()}</small>`)
        .setLatLng(latlng)
        .openOn(map);
    } else {
      datePopup.close();
    }
  } catch (err) {
    datePopup.close();
    console.error('日期请求出错:', err);
  }
});

// 鼠标移出地图时关闭弹窗
map.on('mouseout', () => datePopup.close());

方案3：读取瓦片响应头的生成日期 #

如果是矢量瓦片或者自定义瓦片，还可以直接请求瓦片的URL，读取Last-Modified响应头来获取瓦片的生成日期：

async function getTileGenerateDate(map) {
  const zoom = map.getZoom();
  const center = map.getCenter();
  // 计算中心位置对应的瓦片xyz坐标
  const tilePoint = map.project(center, zoom).floor();
  const x = tilePoint.x;
  const y = tilePoint.y;
  
  // 替换成你的瓦片URL模板
  const tileUrl = `https://api.mapbox.com/v4/mapbox.streets/${zoom}/${x}/${y}.png?access_token=YOUR_MAPBOX_TOKEN`;
  
  // 发送HEAD请求获取响应头
  const res = await fetch(tileUrl, { method: 'HEAD' });
  const lastModified = res.headers.get('Last-Modified');
  return lastModified ? new Date(lastModified).toLocaleDateString() : '未知生成日期';
}

// 之后可以在控件或者其他事件里调用这个函数更新日期

几个注意点 #

• API配额：用Mapbox的API记得用有效的Access Token，并且加个防抖逻辑（比如用setTimeout延迟500ms再请求），避免频繁调用超出配额。
• 性能优化：不要每次地图动都请求API，比如可以设置一个标志位，短时间内只请求一次。
• 体验细节：提示文字尽量简洁，字体和背景色和地图控件保持一致，别太突兀。

内容的提问来源于stack exchange，提问作者user9254166