使用supermap实现轨迹动态回放功能

• 引入地图的方式详见另一篇文章在vue项目中使用supermap，基于 SuperMap iClient 8C(2017) for JavaScript，底图为天地图
• 第一个节点做了单独的处理

<template>
    <div>
        <div id="mymap" style="width:100%; height:100%;position:absolute;"></div>
        <div style="position:absolute;left:10px;top:120px;z-index:999;">
            <div style="margin-bottom: 5px;"><el-button type="primary" @click="start">开始动画</el-button></div>
            <div><el-button type="primary" @click="pause">暂停动画</el-button></div>
        </div>
    </div>
</template>

<script>
    import '@supermap/iclient-classic/libs/SuperMap-8.1.1-17729'
    import '@supermap/iclient-classic/libs/SuperMap_OGC-8.1.1-17729'
    require('@/supermap/js/Tianditu.js');

    export default {
        name: "index",
        data(){
            return{
                Map:null,
                vector:null,
                animatorVector:null,
                labelLayer:null,
                pointLayer:null,
                firstP:{},   //存储第一个轨迹点
                flag:0
            }
        },
        mounted(){
            this.init();
        },
        beforeDestroy(){
            this.animatorVector.destroy();
            this.labelLayer.destroy();
            this.pointLayer.destroy();
            this.Map.destroy();
        },
        methods:{
            init(){
                this.Map = new SuperMap.Map("mymap", {
                    controls: [
                        new SuperMap.Control.Navigation(),
                        new SuperMap.Control.Zoom(),
                        new SuperMap.Control.ScaleLine(),
                    ],
                    allOverlays: true
                });
                let tiandituLayer = new SuperMap.Layer.Tianditu();
                let tianMarkerLayer;
                tianMarkerLayer = new SuperMap.Layer.Tianditu();
                tianMarkerLayer.layerType = "cva";
                tianMarkerLayer.isLabel = true;
                this.vector = new SuperMap.Layer.Vector("轨迹");
                this.animatorVector = new SuperMap.Layer.AnimatorVector("轨迹动画", {rendererType: "StretchLine"},{
                    repeat:false,
                    speed: 0.02,
                    startTime: 0,
                    endTime: 5
                });
                this.animatorVector.events.on({"drawfeaturestart": this.drawfeaturestart});
                this.animatorVector.animator.events.on({"firstframestart": this.framestart});
                //新建一个策略
                let strategy = new SuperMap.Strategy.GeoText();
                strategy.style = {
                    fontColor: "#fff",
                    fill: true,
                    fillColor: "#000",
                    fillOpacity: 0.6,
                    stroke: false,
                    labelAlign: "cm",
                    labelXOffset: 0,
                    labelYOffset: 14,
                    fontSize: "12px"
                };
                //新建一个标签专题图层
                this.labelLayer = new SuperMap.Layer.Vector("Label", {strategies: [strategy]});
                this.pointLayer = new SuperMap.Layer.Vector("Point");
                this.Map.addLayers([tiandituLayer,tianMarkerLayer,this.vector,this.animatorVector,this.labelLayer,this.pointLayer]);
                this.Map.setCenter(new SuperMap.LonLat(115.89961,28.67673),12);
                this.addGjAnimator();
                this.animatorVector.events.on({"featurerendered": (fea)=>{
                    this.vector.addFeatures([fea])
                }});
            },
            start(){
                this.animatorVector.animator.start();
            },
            pause(){
                this.animatorVector.animator.pause();
            },
            framestart(){
                if (!this.animatorVector.animator.getRunning()) {
                    return;
                }
                this.labelLayer.removeAllFeatures();
                this.pointLayer.removeAllFeatures();
                this.vector.removeAllFeatures();
                this.flag=0;
            },
            addFirst(){
                this.flag=1;
                let label = new SuperMap.Geometry.GeoText(this.firstP.x, this.firstP.y, this.firstP.dwsj);
                this.labelLayer.addFeatures([new SuperMap.Feature.Vector(label)]);
                let pointFeas = [];
                let point = new SuperMap.Geometry.Point(this.firstP.x, this.firstP.y);
                pointFeas.push(new SuperMap.Feature.Vector(point, {
                        },
                        {
                            fill: true,
                            fillColor: "#f00",
                            fillOpacity: 1,
                            stroke:false,
                            pointRadius:6
                        }
                ));
                this.pointLayer.addFeatures(pointFeas);
            },
            drawfeaturestart(feature){
                if (!this.animatorVector.animator.getRunning()) {
                    return;
                }
                if(this.flag===0){  //控制只增加一次首节点
                    this.addFirst();
                }
                let dwsj = feature.attributes["dwsj"];
                let pointFeas = [];
                let m=feature.geometry.components[1];
                let point = new SuperMap.Geometry.Point(m.x, m.y);
                pointFeas.push(new SuperMap.Feature.Vector(point, {
                    },
                    {
                        fill: true,
                        fillColor: "#f00",
                        fillOpacity: 1,
                        stroke:false,
                        pointRadius:6
                    }
                ));
                this.pointLayer.addFeatures(pointFeas);
                let label = new SuperMap.Geometry.GeoText(m.x, m.y, dwsj);
                this.labelLayer.addFeatures([new SuperMap.Feature.Vector(label)]);
            },
            addGjAnimator(){
                let data= [
                    {
                        "dwsj": "2021-04-01 15:19:25",
                        "jd": "115.861148",
                        "wd": "28.600492"
                    },
                    {
                        "dwsj": "2021-04-02 15:19:49",
                        "jd": "115.871141",
                        "wd": "28.700482"
                    },
                    {
                        "dwsj": "2021-04-03 11:44:06",
                        "jd": "115.717267",
                        "wd": "28.661957"
                    },
                    {
                        "dwsj": "2021-04-04 11:48:15",
                        "jd": "115.717267",
                        "wd": "28.651957"
                    },
                    {
                        "dwsj": "2021-04-05 11:48:15",
                        "jd": "116.717267",
                        "wd": "28.661957"
                    },
                    {
                        "dwsj": "2021-04-06 11:48:15",
                        "jd": "115.817267",
                        "wd": "28.671957"
                    }
                ];
                this.firstP={x:data[0].jd,y:data[0].wd,dwsj:data[0].dwsj};
                let feas=[];
                for(let i=0;i<data.length-1;i++)
                {
                    let  line= new SuperMap.Geometry.LineString([new SuperMap.Geometry.Point(data[i].jd,data[i].wd),new SuperMap.Geometry.Point(data[i+1].jd,data[i+1].wd)]);
                    let fea=new SuperMap.Feature.Vector(line,
                            {
                                FEATUREID:0,
                                TIME:i+1,
                                dwsj:data[i+1].dwsj
                            },
                            {
                                strokeColor: "#00005e",
                                strokeWidth: 4
                            }
                    );
                    feas.push(fea)
                }
                this.animatorVector.animator.setEndTime(feas.length);
                this.animatorVector.addFeatures(feas);
                this.start();
            }
        }
    }
</script>

<style scoped>

</style>

• 效果图如下所示：

动态轨迹效果图