openlayer 利用overlay实现动画效果

思路:分割线段后 利用定时器控制gif图片的位置

import Overlay from 'ol/Overlay';
import Feature from 'ol/Feature';
import {LineString} from 'ol/geom.js';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Point from 'ol/geom/Point';
/**
 * 直升机取水
 * coord : 起点
 * targetCoord : 终点
 * */
export function showQuShui(map,coord,targetCoord){

    targetCoord =  targetCoord || [115.83137799360136, 40.43483229118801];
    //创建直升机div
    let div = document.createElement("div");
    div.className = "mhzsj";
    let span = document.createElement("span");
    span.className = "mhzsj-title";
    span.innerHTML = "灭火直升机"
    div.appendChild(span);
    let mhzsjOverLay = new Overlay({
        className : "mhzsj-div",
        element : div,
        insertFirst : false,
        stopEvent : false,
        positioning: 'center-center'
    });
    div.onclick = function(){
        console.log("点击灭火取水直升机")
    }
    map.addOverlay(mhzsjOverLay);

    let zjsPath = new Feature({
        geometry:new LineString([coord,targetCoord],"XY")
    });
    let distance = zjsPath.getGeometry().getLength();
    let pathCoords = [];
    for(let i= 0; i< distance; i+= 0.0001){
        let  c =zjsPath.getGeometry().getCoordinateAt(i/distance);
        pathCoords.push(c);
    }
    mhzsjOverLay.setPosition(pathCoords[0]);
    let length = pathCoords.length;
    let idx = 0;
    //直升机状态 1：前往取水途中 2：取水中  3：返程  4：放水灭火中
    let zStatus = 1;

    let timer = setInterval(()=>{
        quShuiTimer();
    },1000/60);

    function quShuiTimer(){
        mhzsjOverLay.setPosition(pathCoords[idx]);
        if(zStatus === 1){
            idx ++ ;
            if(idx === length){
                zStatus = 2;//终点取水中
                span.innerHTML = "取水中";
                clearInterval(timer);
                setTimeout(()=>{
                    zStatus = 3;//取水完毕 返程
                    span.innerHTML = "灭火直升机";
                    timer =  setInterval(()=>{
                        quShuiTimer();
                    },1000/60)
                },3000)
            }
        }else if(zStatus === 3){
            idx --;
            if(idx === 0){
                zStatus = 4;//起点灭火中
                span.innerHTML = "灭火中";
                clearInterval(timer);
                setTimeout(()=>{
                    zStatus = 1;//洒水完毕 继续取水
                    span.innerHTML = "灭火直升机";
                    timer =  setInterval(()=>{
                        quShuiTimer();
                    },1000/60)
                },3000)
            }
        }
    }
}