vue实现百度地图轨迹平台

实现效果是这样的

功能如下

1. 选择某个定位硬件时,默认加载该行程的轨迹记录,并且将对应的轨迹按照时间展示在下列的时间轴中
2. 可进行轨迹的播放,播放可加速或者减速播放
3. 时间轴两端可拖动展示某一段时间的轨迹
4. 地图中将时间轴选择好的轨迹进行连线展示,不同的速度,以不同的颜色进行区分

1,时间轴的计算初始点与有轨迹的时间展示代码

   // 在24小时时间内，以返回的时间段为中心显示
    setTimeRuler: function (e) {
        this.startPt = this.originalPointArr[0]; // 初始化播放段设置的起点
        this.endPt = this.originalPointArr[this.originalPointArr.length - 1]; // 初始化播放段设置的终点
        // console.log(this.startPt, this.endPt);
        var sp = this.startPt;
        var ep = this.endPt;
        // var wTime = ep.loc_time_stamp - sp.loc_time_stamp;
        var wTime = new Date(ep.loc_time.slice(0, -6) + ":00:00").getTime() - new Date(sp.loc_time.slice(0, -6) + ":00:00").getTime();
        if (ep.loc_time_stamp - sp.loc_time_stamp > 86400000) { // 超过一天的时间无法处理
            alert("超过一天的时间无法处理");
            return;
        }
        this.rulerStartTime = new Date(sp.loc_time.slice(0, -6) + ":00:00").getTime() - ((86400000 - wTime) / 2);
        this.rulerEndTime = this.rulerStartTime + 86400000;
        var rulerUnits = this.$rulerControlDom.find(".timeNumber");
        for (var i = 0, len = rulerUnits.length; i < len; i++) { // .add(1, "hour")
            rulerUnits[i].innerHTML = this.moment(this.moment(this.rulerStartTime + 3600000 * i)).format("YYYY-MM-DD HH:mm:ss").slice(11, 13);
            rulerUnits[i].style.left = i * this.rulerWidth / 24 - 1 + "px";
        }

        // 设置时间轴内显示轨迹的路段
        for (i = 0, len = this.pointsArr.length; i < len; i++) {
            var left = Math.ceil((this.pointsArr[i][0].loc_time_stamp - this.rulerStartTime) / 86400000 * this.rulerWidth);
            var width = Math.ceil((this.pointsArr[i][this.pointsArr[i].length - 1].loc_time_stamp - this.pointsArr[i][0].loc_time_stamp) / 86400000 * this.rulerWidth);
            this.$timeRulerDom.append('<div class="runPart" style="left: ' + left + 'px; width: ' + width + 'px;"></div>');
            if (i === 0) {
                this.setTimePoint(left); // 初始化播放的默认开始位置
            }
        }
        this.endTime = this.rulerEndTime; // 初始化终点
        this.setStart(0);
        this.setEnd(this.rulerWidth);
    },
    // 设置播放段的起点
    setStart: function (target) {
        // console.log("setStart");
        var left = parseInt(this.$caliperBDom.css("left"));
        target = target <= 0 ? 0 : target; // 防止移动过程中左边超界限
        target = target >= left ? left : target;
        this.$caliperADom.css({
            left: target
        });
        this.$beforeTimeDom.css({
            width: target
        });
        this.startPt = this.getPoint(target);
        this.startTime = this.getPixelTime(target); // 设置播放的截止时间戳
        // console.log(this.startPt);

    },
    // 设置播放段的终点
    setEnd: function (target) {
        // console.log("setEnd");
        var left = parseInt(this.$caliperADom.css("left"));
        target = target >= this.rulerWidth ? this.rulerWidth : target; // 防止移动过程中右边超界限
        target = target <= left ? left : target;
        this.$caliperBDom.css({
            left: target
        });
        this.$afterTimeDom.css({
            width: this.rulerWidth - target
        });
        this.endPt = this.getPoint(target); // 设置播放的终点
        this.endTime = this.getPixelTime(target); // 设置播放的截止时间戳
    },

2,播放轨迹的代码

    /**
     * 开始播放 计算按10s进行计算
     * 10s 中播放 1小时时间内的所有轨迹
     * 3600 / 10 360秒 --> 1秒钟播放 360秒=6min 的路程
     * 1 秒钟播放 10次，每次播放 3600000 / this.speed / step 的时间间隔的坐标
     * 播放的起点是
     */
    startPlay: function () {
        if (this.currentPtMarker) {
            this.$palyDom.removeClass().addClass("timelinePause");
            this.playFlag = true;
            var step = 10; // 1秒钟播放多少次
            var go = function () {
                // 1秒钟播放10次 每秒播放的轨迹时间跨度 3600000 / this.speed
                // 每次播放的时间跨度 3600000 / this.speed / step
                var newTime = this._startTime + 3600000 / this.speed / step;
                if (newTime > this.endTime) {
                    this.stopPlay();
                    return;
                }
                this._startTime = newTime;
                this.setTimePoint(this.getTimePixel(this._startTime));
                if (this.playFlag) {
                    setTimeout(go, 1000 / step);
                }
            }.bind(this);
            go();
        }
    },
    // 关闭播放
    stopPlay: function () {
        // console.log("stopPlay");
        this.$palyDom.removeClass().addClass("timelinePlay");
        this.playFlag = false;
    },