Angular+Leaflet应用中如何对照片EXIF时间戳数组排序？

嘿，这个场景我之前做类似的地图轨迹项目时碰到过！核心问题就是把EXIF返回的DateTimeOriginal字符串转换成JavaScript能正确比较的日期对象，然后用数组的sort方法就能轻松搞定排序，让Leaflet的路径按拍摄顺序正确连接。

步骤1：处理EXIF日期格式 #

EXIF返回的DateTimeOriginal通常是类似"2023:10:05 14:30:22"的格式（年份、月份、日期之间用冒号分隔），直接传给new Date()可能会解析失败，所以我们先写一个小函数把格式转成JS能识别的：

/**
 * 把EXIF的日期字符串转换成标准Date对象
 * @param dateStr EXIF返回的DateTimeOriginal，如"2023:10:05 14:30:22"
 */
private parseExifDate(dateStr: string): Date {
  // 把前两个冒号替换成横杠，变成"2023-10-05 14:30:22"
  const formattedDate = dateStr.replace(/^(\d{4}):(\d{2}):(\d{2})/, '$1-$2-$3');
  return new Date(formattedDate);
}

步骤2：对照片数组按时间排序 #

假设你的照片数组结构大概是这样的（包含坐标和EXIF时间）：

interface PhotoWaypoint {
  coords: { lat: number; lng: number };
  dateTimeOriginal: string;
  // 其他属性比如图片URL、EXIF信息等
}

// 你的数组变量
photoWaypoints: PhotoWaypoint[] = [];

接下来用数组的sort方法，基于转换后的日期对象进行排序：

// 按拍摄时间升序排序（早拍的在前，对应地图路径的正确顺序）
this.photoWaypoints.sort((a, b) => {
  // 处理无时间信息的照片：把它们放到数组末尾
  if (!a.dateTimeOriginal) return 1;
  if (!b.dateTimeOriginal) return -1;

  const dateA = this.parseExifDate(a.dateTimeOriginal);
  const dateB = this.parseExifDate(b.dateTimeOriginal);

  // 用getTime()获取时间戳数值，相减得到排序依据
  return dateA.getTime() - dateB.getTime();
});

步骤3：排序后绘制Leaflet路径 #

排序完成后，你就可以基于这个有序数组来创建Leaflet的标记和路径了，比如：

// 示例：创建路径
const pathCoords = this.photoWaypoints.map(point => [point.coords.lat, point.coords.lng]);
L.polyline(pathCoords, { color: 'blue' }).addTo(this.map);

// 添加标记
this.photoWaypoints.forEach(point => {
  L.marker([point.coords.lat, point.coords.lng]).addTo(this.map);
});

这样处理后，地图上的标记就会按照片拍摄的时间顺序排列，路径也能正确连接起来啦！

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