mapbox+turf+requestAnimationFrame方法实现轨迹巡航

     /**
     利用mapbox（js）+turf（js）+requestAnimationFrame方法 实现轨迹巡航
    */
    //点数据源
    let carPoint = {
        "type":"FeatureCollection",
        "features":[{
            "type":"Feature",
            "properties":{"bearing":""},
            "geometry":{
                "type":"point",
                "coordinates":[121.123342,106.3456787]
            }
        }]
    }
    //线数据源
    let carLine = {
        "type":"FeatureCollection",
        "features":[{
            "type":"Feature",
            "properties":{},
            "geometry":{
                "type":"LineString",
                "coordinates":[[121.3456,108.34566],[122.45678,104.345789]]
            }
        }]
    }
    //添加线图层
    this.map.addSource("routeLineGuiJi",{
        "type":"geojson",
        "data":carLine
    })
    this.map.addLayer({
        "id":"routeLineGuiJi",
        "source":"routeLineGuiJi",
        "type":"line",
        "paint":{
            "line-width":5,
            "line-color":"#2DD090"
        }
    })
    let counter = 0;
    let requestAnimation = null;
    let k = 0;
    //计算两点之间距离
    let lineDistance = turf.lineDistance(carLine.features[0],"kilometers");//公里
    if(lineDistance>80){
        this.map.setZoom(4);
    }else if(20<lineDistance && lineDistance<=50){
        this.map.setZoom(16);
    }else{
        this.map.setZoom(21);
    }
    this.map.loadImage(require("@/assets/image/car.png"),function(error,image){
        if(error) throw error;
        if(this.map.hasImage("imageCarSource")){
            this.map.addImage("imageCarSource",image1);//起点图标
        }
    })
    this.map.addSource("carImageGuiJi",{
        "type":"geojson",
        "data":carPoint
    })
    this.map.addLayer({
        "id":"carImageGuiJi",
        "source":"carImageGuiJi",
        "type":"symbol",
        "layout":{
            "icon-image":"imageCarSource",//使用图片资源
            "icon-rotate":["get","bearing"],//旋转角度
            "icon-size":1,//缩放
            "icon-rotation-alignment":"map",
            "icon-allow-overlap":true,
            "icon-ignore-placement":true
        }
    })


    if(lineDistance>80){
        this.$store.state.cruisemode.steps = lineDistance/2;
        for(let i=0;i<lineDistance;i+=2){
            let segment = turf.along(carLine.features[0],i,"kilometers");
            this.$store.state.cruisemode.arc.push(segment.geometry.coordinates);
        }
        carLine.features[0].geometry.coordinates = this.$store.state.cruisemode.arc;
    }else if(20<lineDistance && lineDistance<=50){
        this.fly(carLine.features[0].geometry.coordinates[0],16);
        this.$store.state.cruisemode.steps = lineDistance/0.0008;
        for(let i=0;i<lineDistance;i+=0.0008){
            let segment = turf.along(carLine.features[0],i,"kilometers");
            this.$store.state.cruisemode.arc.push(segment.geometry.coordinates);
        }
        carLine.features[0].geometry.coordinates = this.$store.state.cruisemode.arc;
    }else{
        this.fly(carLine.features[0].geometry.coordinates[0],21);
        this.$store.state.cruisemode.steps = lineDistance/0.0001;
        for(let i=0;i<lineDistance;i+=0.0001){
            let segment = turf.along(carLine.features[0],i,"kilometers");
            this.$store.state.cruisemode.arc.push(segment.geometry.coordinates);
        }
        carLine.features[0].geometry.coordinates = this.$store.state.cruisemode.arc;
    }
    animation();

    animation(){
        carPoint.features[0].geometry.coordinates = carLine.features[0].geometry.coordinates[counter];
        carPoint.features[0].geometry.coordinates.bearing = turf.bearing(
            turf.point(carLine.features[0].geometry.coordinates[counter>=this.$store.state.cruisemode.steps?counter-1:counter]),
            turf.point(carLine.features[0].geometry.coordinates[counter>=this.$store.state.cruisemode.steps?counter:counter+1])
        )
        if(this.map.getSource("carImageGuiJi")){
            this.map.getSource("carImageGuiJi").setData(carPoint);
        }
        if(counter<this.$store.state.cruisemode.steps){
            requestAnimation = requestAnimationFrame(this.animation);
        }
        counter+=1;
        if(this.$store.state.cruisemode.arc.length){
            if(lineDistance>80){
                this.map.flyTo({
                    center:mapboxgl.LngLat.convert([this.$store.state.cruisemode.arc[k][0]],this.$store.state.cruisemode.arc[k][1]),
                    curve:1,
                    duration:100,
                    easing:function(t){
                        return t;
                    }
                })
                k++;
            }else if(20<lineDistance && lineDistance<=50){
                this.map.flyTo({
                    center:mapboxgl.LngLat.convert([this.$store.state.cruisemode.arc[k][0]],this.$store.state.cruisemode.arc[k][1]),
                    zoom:16,
                    curve:1,
                    duration:100,
                    easing:function(t){
                        return t;
                    }
                })
                k++;
            }else{
                this.map.flyTo({
                    center:mapboxgl.LngLat.convert([this.$store.state.cruisemode.arc[k][0]],this.$store.state.cruisemode.arc[k][1]),
                    zoom:21,
                    curve:1,
                    duration:100,
                    easing:function(t){
                        return t;
                    }
                })
                k++;
            }
        }

    }

    exitGuiJi(){
        //对于已经存在图层移除
        if(this.map.getLayer("routeLineGuiJi")){
            this.map.removeLayer("routeLineGuiJi");
        }
        if(this.map.getSource("routeLineGuiJi")){
            this.map.removeSource("routeLineGuiJi");
        }
        if(this.map.hasImage("imageCarSource")){
            this.map.removeImage("imageCarSource");
            carPoint.features[0].properties.bearing = "";
            carPoint.features[0].properties.geometry.coordinates = [];
            if(this.map.getLayer("carImageGuiJi")){
                this.map.removeLayer("carImageGuiJi");
            }
            if(this.map.getSource("carImageGuiJi")){
                this.map.getSource("carImageGuiJi");
            }
            if(requestAnimation){
                cancelAnimationFrame(requestAnimation);//清楚动画
                requestAnimation = null;
                this.$store.state.cruisemode.arc = [];
                counter = 0;
                k = 0;
            }

        }
    }
    fly(end,zoom){
        this.map.flyTo({
            center:end,
            zoom:zoom,
            curve:1,
            duration:1000,
            easing:function(t){
                return t;
            }
        })
    }