Project-Annex/operationSupport/src/views/patrolManagement/popups/pathSimplifierIns.js

export default {
    data() {
        return {
            lineArr: [],
            // 巡航轨迹
            AMap: null,
            map: null,
            PathSimplifier: null,
            beforeInit: true,
            isPlay: true,
            sliderVal: 0, // 进度条
            times: 1, // 倍速
            maxSpeed: 40, // 最高倍速
            navgtrSpeed: 1000, // 速度
            isMinSpeed: true,
            isMaxSpeed: false,
            navgtr: null,
            pathSimplifierIns: null,
            actualList: [],
            defaultRenderOptions: {
                renderAllPointsIfNumberBelow: -1, // 描绘路径点，如不需要设为-1
                pathTolerance: 2,
                keyPointTolerance: 0,
                pathLineStyle: {
                    lineWidth: 6,
                    strokeStyle: '#409eff',
                    borderWidth: 1,
                    borderStyle: '#eeeeee',
                    dirArrowStyle: false
                },
                pathLineHoverStyle: {
                    lineWidth: 6,
                    strokeStyle: '#ff0000',
                    borderWidth: 1,
                    borderStyle: '#cccccc',
                    dirArrowStyle: false
                },
                dirArrowStyle: {
                    stepSpace: 30,
                    strokeStyle: '#ffffff',
                    lineWidth: 2
                },
                pathLineSelectedStyle: {
                    lineWidth: 6,
                    strokeStyle: '#409eff',
                    borderWidth: 1,
                    borderStyle: '#cccccc',
                    dirArrowStyle: true
                },
                keyPointStyle: {
                    radius: 0,
                    fillStyle: 'rgba(8, 126, 196, 1)',
                    lineWidth: 1,
                    strokeStyle: '#eeeeee'
                },
                keyPointHoverStyle: {
                    radius: 0,
                    fillStyle: 'rgba(0, 0, 0, 0)',
                    lineWidth: 2,
                    strokeStyle: '#ffa500'
                },
                keyPointOnSelectedPathLineStyle: {
                    radius: 0,
                    fillStyle: 'rgba(8, 126, 196, 1)',
                    lineWidth: 2,
                    strokeStyle: '#eeeeee'
                }
            },
            isCursorAtPathEnd: false,
            palyStayus: 0, //0->未开始  1->行驶中  2->暂停
            value: 0, // 进度条初始化

            // signMarker: null,
            currentPoint: null,

            timeValue: '',
            trackData: []
        };
    },
    methods: {
        initLineArr() {
            let _this = this;
            let that = this;

            AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {
                if (!PathSimplifier.supportCanvas) {
                    alert('当前环境不支持 Canvas！');
                    return;
                }

                // 如果已存在巡航轨迹，则删除
                if (window.pathSimplifierIns && that.pathSimplifierIns) {
                    //通过该方法清空上次传入的轨迹
                    that.pathSimplifierIns.setData([]);
                }

                // 初始化坐标点
                if (_this.lineArr.length > 0) {
                    that.actualList = _this.lineArr;

                    //创建一个巡航轨迹路线
                    that.pathSimplifierIns = new PathSimplifier({
                        zIndex: 100, //地图层级，
                        map: this.map, //所属的地图实例
                        //巡航路线轨迹列表
                        getPath: (pathData, pathIndex) => {
                            return pathData.path;
                        },
                        //hover每一个轨迹点，展示内容
                        getHoverTitle: function (pathData, pathIndex, pointIndex) {
                            return '';
                        },
                        //自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档 renderOptions:{}
                        //绘制路线节点
                        renderOptions: that.defaultRenderOptions
                    });
                    window.pathSimplifierIns = that.pathSimplifierIns;
                    //设置数据
                    that.pathSimplifierIns.setData([
                        {
                            name: '轨迹路线',
                            path: that.actualList
                        }
                    ]);
                    that.pathSimplifierIns.setSelectedPathIndex(0);

                    function onload() {
                        that.pathSimplifierIns.renderLater();
                    }

                    function onerror(e) {
                        console.log('图片加载失败！');
                    }

                    //对第一条线路（即索引 0）创建一个巡航器
                    let image = PathSimplifier.Render.Canvas.getImageContent('https://webapi.amap.com/images/car.png', onload, onerror);
                    that.navgtr = that.pathSimplifierIns.createPathNavigator(0, {
                        loop: false, //循环播放
                        speed: that.navgtrSpeed, //巡航速度，单位千米/小时
                        pathNavigatorStyle: {
                            width: 20,
                            height: 30,
                            //使用图片
                            content: image, // 自定义巡航样式
                            strokeStyle: null,
                            fillStyle: null,
                            //经过路径的样式
                            pathLinePassedStyle: {
                                lineWidth: 6,
                                strokeStyle: '#69f81e',
                                dirArrowStyle: {
                                    stepSpace: 15,
                                    strokeStyle: '#FFF'
                                }
                            }
                        }
                    });

                    that.navgtr.on('start resume', function () {
                        that.navgtr._startTime = Date.now();
                        that.navgtr._startDist = this.getMovedDistance();
                    });
                    that.navgtr.on('stop pause', function () {
                        that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
                        that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
                    });
                    that.navgtr.on('move', function (data, position) {
                        that.isCursorAtPathEnd = false;
                        let idx = position.dataItem.pointIndex; //走到了第几个点
                        let tail = position.tail; //至下一个节点的比例位置
                        let totalIdx = idx + tail;
                        let len = position.dataItem.pathData.path.length - 1;
                        // 设置当前点位
                        that.currentPoint = that.actualList[idx];
                        if (idx < len - 1) {
                            that.navgtr.setSpeed(that.navgtrSpeed * that.times);
                        }
                        // 进度条实时展示tail
                        !that.isOnSlider && (that.sliderVal = (totalIdx / len) * 100);

                        // 如果到头了，回到初始状态
                        if (that.navgtr.isCursorAtPathEnd()) {
                            that.isCursorAtPathEnd = true;
                            that.initPlayBox();
                        }
                    });

                    // 加载完成
                    that.beforeInit = false;
                }
            });
        },
        initPlayBox() {
            // 暂停
            this.navgControl('pause');
            this.playIcon = 'start';
            this.isPlay = true; // 播放图标
            this.palyStayus = 0; // 继续状态
        },
        // 控制播放按钮
        navgControl(type) {
            if (!this.navgtr || !type) {
                return;
            }
            if (type === 'start' || type === 'resume') {
                this.isPlay = false;
                this.palyStayus = 2;
                // 如果已经到了终点，重新定位坐标
                if (this.isCursorAtPathEnd && this.actualList.length > 0) {
                    this.map.setCenter(this.actualList[0]);

                }
            } else if (type === 'pause') {
                this.isPlay = true;
                this.palyStayus = 1;
            }
            this.navgtr[type]();
            this.map.setFitView();
        },
        // carReLocate() {
        //     // 鼠标从滑动条抬起时，重新定位
        //     if (this.currentPoint) {
        //         let timeout = setTimeout(() => {
        //             clearTimeout(timeout)
        //             this.map.setCenter(this.currentPoint)
        //         }, 0)
        //     }
        // },
    },
    created() {
        // const s = document.createElement('script');
        // s.style = 'text/javascript';
        // s.src = 'https://webapi.amap.com/ui/1.1/main.js';
        // document.body.appendChild(s);

    }
};