根据视频的当前时间从KML文件中获取时间戳的坐标

Question

我创建了一个自定义视频播放器，在播放视频时，它会根据视频的当前时间从 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]
         };
    }
}
     
    }

Answer 1

 I recreated the method for reading the kml, i checked that each timestamp matches the a specific position on the coordinates, so i got first item of the timestamps and add by the seconds on the video, and found the position that corresponded to that answer.             

            useEffect(() => {
        if (path && kml) {
            const kmlDocument = parser.parseFromString(kml, "application/xml");
            if (!kmlDocument) return;
            const errors = kmlDocument.getElementsByTagName("parsererror");
            if (errors.length > 0) return;
            const placemark: any = kmlDocument.querySelector('Placemark');
            if (!placemark) return;
            const timestampsStr = placemark.querySelector('Data[name="timestamp"] value').textContent;
            const coordinatesStr = placemark.querySelector('LineString coordinates').textContent;
            const timestamps: string[] = timestampsStr.split(',');
            const coordinates: string[] = coordinatesStr.split(/\s+/);
            setKmlData(() => (
                { coordinates, timestamps }
            ))
        }
    }, [kml])
        
        
        const extractCurrentPositionKml = () => {
        const currentTime = media?.currentTime;
        if (!currentTime) return null;
        const voo_data = parseISO(kmlData?.timestamps[0]); 
        const currentTimeInMilliseconds = currentTime * 1000;
        const currentTimeISO: Date = addMilliseconds(voo_data, currentTimeInMilliseconds);
        let closestIndex = -1;
        let closestTimestampDiff = Number.MAX_SAFE_INTEGER;
        kmlData?.timestamps.forEach((t:any, index:number) => {
            const timestamp = parseISO(t);
            const timestampDiff = Math.abs(timestamp.getTime() - currentTimeISO.getTime());
            
            if (timestampDiff < closestTimestampDiff) {
                closestIndex = index;
                closestTimestampDiff = timestampDiff;
            }
        });
        if (closestIndex === -1) return null;
        const coords = kmlData?.coordinates[closestIndex].split(',').map(parseFloat);
        if (coords.length >= 3) {
            return {
                latitude: coords[1],
                longitude: coords[0],
                altitude: coords[2]
            };
        }
    
        return null;
    }

在使用效果中并获取它