arcgis js for JavaScript 4.X 小车(图片)移动轨迹动画

/**
 * 车辆轨迹回放
 * paths为小车经纬度坐标列表，格式[[115.21947154300005, 32.735979284000052],[115.21947154300005, 32.735979284000052]]
*data为车辆信息
 */
let moveLayer = null,moveCarGra = null,startingPoint ={},carPaths = [],carGraphic = null;
window.top.trackPlayback = function(paths,data) {
    carPaths = paths
    myMenuVue.carData = data
    require([
        "esri/Map",
        "app/appConfig",
        "esri/views/MapView",
        "esri/geometry/Extent",
        "esri/Color",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/PictureMarkerSymbol",
        "dojo/domReady!"
    ], function (Map, appConfig, MapView, Extent, Color, Graphic,GraphicsLayer, Point, SimpleMarkerSymbol,PictureMarkerSymbol) {
        layer.close(detailLayer);
        map.findLayerById('XFC') && (map.findLayerById('XFC').visible = false)
        carGraphic = Graphic;
        // 播放按钮面板显示
        myMenuVue.showCar = true
        $('#showCar').css('display', 'flex')
        view.when(
            () => {
                // 地图加载完成
                setTimeout(() => {
                    view.goTo({
                        // 视角切换动画
                        center: [carPaths[0][0], carPaths[0][1]], //终点坐标
                        heading: 360, // 面向正南
                        z: 10000,
                        tilt: 40, //视图角度cos
                        zoom: 18, //放大等级
                    })
                }, 1000)
            },
            function (error) {
                console.error(error)
            }
        )
        let polyline = {
            type: 'polyline', // autocasts as new Polyline()
            paths: carPaths,
        }
        let lineSymbol = {
            type: 'simple-line', // autocasts as SimpleLineSymbol()
            color: [226, 119, 40],
            width: 2,
        }
        var polylineGraphic = new Graphic({
            geometry: polyline,
            symbol: lineSymbol,
        })
        view.graphics.add(polylineGraphic)
        // // 开始创建小车
        // // 初始化车辆
        let modelCar = initModelCar()
        moveLayer = new GraphicsLayer({
            id: 'moveLayer',
        })
        map.add(moveLayer)
        moveCarGra = new Graphic({
            geometry: startingPoint,
            symbol: modelCar,
        })
        moveLayer.add(moveCarGra)
        moveLayer.removeAll();
        // start()
    })
}
// 开始播放
let moving;
let startNum=0, endNum=0;
function start() {
    if (moving != undefined) {
        clearInterval(moving) //清除移动
    }
    moveCarGra.geometry = startingPoint
    move(0, 1)
}
function move(start, end) {
    let x1 = carPaths[start][0]
    let y1 = carPaths[start][1]
    let x2 = carPaths[end][0]
    let y2 = carPaths[end][1]

    //斜率
    let p = (y2 - y1) / (x2 - x1)
    //速度
    let v = 0.00006 // 过小会导致线路偏移
    moving = setInterval(() => {
        moveLayer.removeAll()
        startNum = start
        endNum = end
        //分别计算 x,y轴的方向和速度
        if (Math.abs(p) == Number.POSITIVE_INFINITY) {
            //垂直的时候斜率无穷大
            moveCarGra.geometry.y += v
        } else {
            if (x2 < x1) {
                moveCarGra.geometry.x -= (1 / Math.sqrt(1 + p * p)) * v
                moveCarGra.geometry.y -= (p / Math.sqrt(1 + p * p)) * v
                // 创建行驶车辆
                let modelNewCar = setModelCar(x1, y1, x2, y2)
                moveLayer.add(
                    new carGraphic(moveCarGra.geometry,modelNewCar)
                )
            } else {
                moveCarGra.geometry.x += (1 / Math.sqrt(1 + p * p)) * v
                moveCarGra.geometry.y += (p / Math.sqrt(1 + p * p)) * v
                // 创建行驶车辆
                let modelNewCar = setModelCar(x1, y1, x2, y2)
                moveLayer.add(
                    new carGraphic(moveCarGra.geometry,modelNewCar)
                )
            }
        }
        if (Math.abs(moveCarGra.geometry.x - x2) <= v && Math.abs(moveCarGra.geometry.y - y2) <= v) {
            clearInterval(moving)
            startNum = start++
            endNum = end++
            if (end < carPaths.length) {
                move(start, end)
            }
        }
    }, 500)
}
// 创建车辆
function setModelCar(x1, y1, x2, y2) {
    let modelNewCar = {
        type: 'picture-marker',
        url: "/awater_ln/image/layerIcon/car.png",
        color: '#eb3941',
        width: "25px",
        height: "25px",
        yoffset: 4,
        xoffset: 2,
        angle:calcAngle(x1, y1, x2, y2) + 90, //朝向
    }
    return modelNewCar
}
// 初始化车辆
function initModelCar() {
    let x1 = carPaths[0][0]
    let y1 = carPaths[0][1]
    let x2 = carPaths[1][0]
    let y2 = carPaths[1][1]
    // 设置起点
    startingPoint = {
        type: 'point',
        longitude: carPaths[0][0],
        latitude: carPaths[0][1],
    }
    const modelNewCar =  {
        type: 'picture-marker',
        url: "/awater_ln/image/layerIcon/car.png",
        color: '#eb3941',
        width: "25px",
        height: "25px",
        yoffset: 4,
        xoffset: 2,
        angle:calcAngle(x1, y1, x2, y2) + 90, //朝向
    }
    // let modelNewCar = {
    //     type: 'point-3d',
    //     symbolLayers: [
    //         {
    //             type: 'object',
    //             // width: 300, //模型宽度ssss
    //             height: 468, //模型高度
    //             resource: {
    //                 href: 'gltf/red_car.gltf',
    //             },
    //             heading: calcAngle(x1, y1, x2, y2) + 180, //朝向
    //         },
    //     ],
    // }
    return modelNewCar
}
// 根据坐标计算角度
function calcAngle(x1, y1, x2, y2) {
    let tan = (Math.atan(Math.abs((y2 - y1) / (x2 - x1))) * 180) / Math.PI + 90
    if (x2 > x1 && y2 > y1) {
        return -tan + 180
    } else if (x2 > x1 && y2 < y1) {
        return tan
    } else if (x2 < x1 && y2 > y1) {
        return tan - 180
    } else {
        return -tan
    }
}