轨迹的平滑移动

        本篇重在记录自己开发时遇到的问题和解决的思路，专业浓度不高，希望自己以后回头看，还能有收获，亦或有所感慨。内容如有错误欢迎指正，或里面的某些方法有更好的方案代替，欢迎讨论。

        2021.9月份底，有一份视频轨迹的需求，具体为：在视频播放的同时，左上角显示一个小地图，并且地图中有个点与视频中无人机位置同步移动。（类似于cs、cf那种显示位置的小地图），该视频是由无人机拍摄录制而成。

        地图使用了openlayers，由于最大的放大级数限制原因，这里需要比较大的地图放大级数，默认地图图层不适合，经过多次更换，最后选择了BingMaps。

layers: [
    new TileLayer({
        source: new source.BingMaps({
            key:"xxxxxxxx",
            imagerySet: "AerialWithLabelsOnDemand",
            culture: "zh-cn",
        }),
    }),
],

        接下来比较顺利，因为后台接口有无人机移动的轨迹点数据，每秒一个点，记录了经纬度、方向等数据。我只要获取了该无人机在该时间段的点集，再与视频同步就行。

        于是我先获取了对应数据，画出轨迹，因为视频用了videojs插件，所以我用里面的loadedmetadata方法获取了视频的长度，将视频时长0对应了第一个点&