基于视频当前时间从KML文件获取时间戳坐标的问题排查

我开发了一款自定义视频播放器，逻辑是读取KML文件后，将视频已播放时长与KML指定的初始时间相加，生成目标时间戳，再从KML中提取对应坐标。但目前仅能获取初始时间对应的位置，无法匹配其他播放时间的坐标。

现有代码片段 #

const extractCoordsKml = () => {
        const kmlDocument = parser.parseFromString(kmlInfo?.kml, "application/xml");
        if (!kmlDocument) return null;
        const errors = kmlDocument.getElementsByTagName("parsererror");
        if (errors.length > 0) return null;
        const placemark: any = kmlDocument.querySelector('Placemark');
        if (!placemark) return null;
        const timestampsStr = placemark.querySelector('Data[name="timestamp"] value').textContent;
        const latitudesStr = placemark.querySelector('Data[name="LATITUDE"] value').textContent;
        const longitudesStr = placemark.querySelector('Data[name="LONGTITUDE"] value').textContent;
        const altitudesStr = placemark.querySelector('Data[name="ALTITUDE"] value').textContent;
        const timestamps = timestampsStr.split(',');
        const latitudes = latitudesStr.split(',').map(parseFloat);
        const longitudes = longitudesStr.split(',').map(parseFloat);
        const altitudes = altitudesStr.split(',').map(parseFloat);
        const currentTime = media?.currentTime;
        if (!currentTime) return null;
        if (!kmlInfo?.data_voo) return null;
        const voo_data = parseISO(kmlInfo.data_voo);
        const currentTimeInMilliseconds = currentTime * 1000;
        const currentTimeISO:Date = addMilliseconds(voo_data, currentTimeInMilliseconds);
        const currentTimeISOFormatted:string= format(currentTimeISO, "yyyy-MM-dd'T'HH:mm:ss.SSS");
        for(let i = 0; i < timestamps.length; i++) {
         if(timestamps[i].includes(currentTimeISOFormatted) ) {
           return {
            latitude: latitudes[i],
            longitude: longitudes[i],
            altitude: altitudes[i]
         };
    }
}
     
    }

问题原因 #

1. 字符串匹配精度问题：代码用includes做字符串精确匹配，但KML中的时间戳格式可能和生成的currentTimeISOFormatted存在精度差异（比如KML时间没有毫秒、毫秒位数不同），导致除初始时间外的其他时间点无法匹配。
2. 离散时间点的匹配逻辑缺陷：视频播放时间是连续变化的，但KML中的坐标是离散的时间点，精确匹配几乎只能命中刚好完全一致的初始时间，其他时间点根本无法触发匹配。
3. 无 fallback 逻辑：如果当前播放时间对应的时间戳不在KML列表中，遍历结束后直接返回null，没有处理找最近时间点或插值的逻辑。

修复方案 #

核心思路

• 把时间字符串统一转为毫秒时间戳，用数值比较代替字符串匹配，彻底解决格式精度问题。
• 针对离散时间点，找到最接近当前播放时间的KML时间戳，或在相邻时间点间做线性插值（实现平滑坐标过渡）。

修改后的代码

const extractCoordsKml = () => {
    const kmlDocument = parser.parseFromString(kmlInfo?.kml, "application/xml");
    if (!kmlDocument) return null;
    const errors = kmlDocument.getElementsByTagName("parsererror");
    if (errors.length > 0) return null;
    const placemark: any = kmlDocument.querySelector('Placemark');
    if (!placemark) return null;

    // 提取KML中的原始数据
    const timestampsStr = placemark.querySelector('Data[name="timestamp"] value').textContent;
    const latitudesStr = placemark.querySelector('Data[name="LATITUDE"] value').textContent;
    const longitudesStr = placemark.querySelector('Data[name="LONGTITUDE"] value').textContent;
    const altitudesStr = placemark.querySelector('Data[name="ALTITUDE"] value').textContent;

    // 解析为数组
    const timestamps = timestampsStr.split(',');
    const latitudes = latitudesStr.split(',').map(parseFloat);
    const longitudes = longitudesStr.split(',').map(parseFloat);
    const altitudes = altitudesStr.split(',').map(parseFloat);

    const currentTime = media?.currentTime;
    if (!currentTime || !kmlInfo?.data_voo) return null;

    // 计算当前播放对应的毫秒时间戳
    const vooData = parseISO(kmlInfo.data_voo);
    const currentTimeMs = vooData.getTime() + (currentTime * 1000);

    // 将KML中的所有时间转成毫秒时间戳
    const kmlTimeStamps = timestamps.map(ts => new Date(ts.trim()).getTime());

    // 找到最接近当前时间戳的索引
    let closestIndex = 0;
    let minDiff = Math.abs(currentTimeMs - kmlTimeStamps[0]);
    for (let i = 1; i < kmlTimeStamps.length; i++) {
        const diff = Math.abs(currentTimeMs - kmlTimeStamps[i]);
        if (diff < minDiff) {
            minDiff = diff;
            closestIndex = i;
        }
    }

    // 返回最接近的坐标点（默认逻辑）
    return {
        latitude: latitudes[closestIndex],
        longitude: longitudes[closestIndex],
        altitude: altitudes[closestIndex]
    };

    // ------------------------------
    // 可选：启用线性插值实现平滑坐标过渡
    // ------------------------------
    // // 找到前后相邻的时间点
    // let prevIndex = closestIndex;
    // let nextIndex = closestIndex;
    // if (currentTimeMs > kmlTimeStamps[closestIndex] && closestIndex < kmlTimeStamps.length - 1) {
    //     nextIndex = closestIndex + 1;
    // } else if (currentTimeMs < kmlTimeStamps[closestIndex] && closestIndex > 0) {
    //     prevIndex = closestIndex - 1;
    // }

    // // 如果是同一个点，直接返回
    // if (prevIndex === nextIndex) {
    //     return {
    //         latitude: latitudes[prevIndex],
    //         longitude: longitudes[prevIndex],
    //         altitude: altitudes[prevIndex]
    //     };
    // }

    // // 计算插值比例
    // const prevTime = kmlTimeStamps[prevIndex];
    // const nextTime = kmlTimeStamps[nextIndex];
    // const ratio = (currentTimeMs - prevTime) / (nextTime - prevTime);

    // // 线性插值计算坐标
    // return {
    //     latitude: latitudes[prevIndex] + (latitudes[nextIndex] - latitudes[prevIndex]) * ratio,
    //     longitude: longitudes[prevIndex] + (longitudes[nextIndex] - longitudes[prevIndex]) * ratio,
    //     altitude: altitudes[prevIndex] + (altitudes[nextIndex] - altitudes[prevIndex]) * ratio
    // };
};

说明 #

• 默认逻辑返回最接近当前时间的坐标点，适合离散的位置数据场景。
• 如果需要更平滑的坐标过渡效果，可以去掉注释启用线性插值逻辑，在两个相邻时间点之间计算中间坐标。

内容的提问来源于stack exchange，提问作者shiru-kun