icore-pass/src/views/sale/components/offSiteTransportation/mapTest.vue

<template>
    <div class="container">
        <div id="amap-container"></div>
         <div class="mapcontroller">
             <div class="in_transit_information">
                 <label class="item_details">起点:{{startPointName}}</label>
                 <br/>
                 <label class="item_details">收货地址:{{endPointName}}</label>
                 <br/>
             </div>
             <div class="driving_information2">  
                <label class="item_details">时间:{{runRoute.gtm}}</label>
                <br/>
                <label class="item_details">车速:{{runRoute.spd}}千米/小时</label>
                <br/>
                <br/> 
                <!--控制条-->
                <div class="map-control" v-show="isActual">
                    <!--播放暂停按钮-->
                    <Icon v-if="!isPlay" class="play-icon play"  type="ios-play" @click="isPlay=true;play();navgControl(playIcon)"/>
                    <Icon v-else class="play-icon pause" type="ios-pause" @click="isPlay=false;stop();navgControl('pause')"/>
                    <Icon class="play-icon quickly"  type="ios-play" @click="addIndex()"/>
                    <!--已播放时间-->
                    <!--进度条-->
                    <div class="mySlider"><Slider class="map-slider" v-model="sliderVal" :tip-format="hideFormat" :step="0.0001"></Slider></div>
                </div>
             </div>
         </div>
        <el-row>
                <el-button type="primary" @click="slow">慢速</el-button>
                <el-button type="success" @click="middle">中速</el-button>
                <el-button type="danger" @click="fast">快速</el-button>
                <el-button type="success" @click="addIndex" plain>快进</el-button> 
                <el-button type="danger" @click="stop" plain>暂停</el-button>
                <el-button type="success" @click="play" plain>开始</el-button>
                <el-select style="width:100px" @change="changeParkingTime"  v-model="parkingTime"  placeholder="停车" >
                    <el-option  v-for="item in parkingOptions" :key="item.value" :label="item.label" :value="item.value" >
                    </el-option>
                </el-select>
                <el-select  style="width:100px" @change="changeLeaveTime"  v-model="leaveTime" placeholder="离线" >
                    <el-option v-for="item in parkingOptions" :key="item.value" :label="item.label" :value="item.value" >
                    </el-option>
                </el-select>
     </el-row>

    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity'
import { Loading } from 'element-ui';
import { lazyAMapApiLoaderInstance } from 'vue-amap';
import Slider from './slider.vue'
Vue.use(Slider)
import AMapJS from "amap-js";
import Vue from 'vue';
export default {
    name: "PathView",
    props:{
        orderNumber:'',
        capacityNumber:'',
        startPointName:'',
        endPointName:'',
        startTime:'',
        endTime:'',
    },
    setup(){
        const map = shallowRef(null);
        return{
            map,
        }
    },
     watch:{
        //监听车牌号变化
        orderNumber:{
            deep: true,
            handler(val, oldVal) {
                console.log(val)
                this.initData(val);
            }
        }
    },
    data() {
        return {
            ///che
            isTimesChoose:false,
            isActual:true,
            isPlay:false,
            passedTime:"12:02:10",
            sliderVal:0,
            times:1,
            totalTime:"11",
            speed:10000,
             //选择停车时长
            parkingTime: null,
            //停车时长选择区间
            parkingOptions: [
                {
                value: 600000,
                label: "10分钟"
                },
                {
                value: 1200000,
                label: "20分钟"
                },
                {
                value: 1800000,
                label: "30分钟"
                },
                {
                value: 2400000,
                label: "40分钟"
                },
                {
                value: 3000000,
                label: "50分钟"
                },
                {
                value: 3600000,
                label: "60分钟"
                },
                {
                value: 36000000,
                label: "关闭"
                }
            ],
            //离线图标
            leaveMark: [],
            //停车图标
            parkMark: [],
            //选择离线时长
            leaveTime: null,
            //离线时长选择区间
            leaveOptions: [
                {
                value: 600000,
                label: "10分钟"
                },
                {
                value: 1200000,
                label: "20分钟"
                },
                {
                value: 1800000,
                label: "30分钟"
                },
                {
                value: 2400000,
                label: "40分钟"
                },
                {
                value: 3000000,
                label: "50分钟"
                },
                {
                value: 3600000,
                label: "60分钟"
                },
                {
                value: 36000000,
                label: "关闭"
                }
            ],
            //已行驶轨迹
            runRoute:
            {
                agl: "",
                gtm: "",
                hgt: "",
                lat: "",
                lon: "",
                mil: "",
                spd: ""
            },
            point:"",
            pointNext:"",
            loading : null,
            navgtrSpeed:1,
            //地图中心位置
            centerPoint:{
                    pointLat:"",
                    pointLon:""
            },
            //自定义窗体信息
            ctmarkes:{
                lat:"33.015888071433764",
                lon : "115.96995235868168",
                title:"豫SE8888",
                details:"安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米"
            },
            //运输详情
            transportDetail:{
                //车牌号
                capacityNumber:'',
                //规划路线
                estimateRoute:[
                    {
                        lat:"33.015888071433764",
                        lon : "115.96995235868168"
                    }
                ],
                //规划线路
                estimatePath:[
                    [
                        114.03046212985384,
                        32.49786984660489
                    ],
                    
                ],
                //已行驶轨迹
                runRoute:[
                      {
                        agl: "44",
                        gtm: "2022年03月09日 16:47:24",
                        hgt: "13",
                        lat: "32.906411535084985",
                        lon: "115.76177868692135",
                        mil: "429409.2",
                        spd: "17.0"
                    },
                ],
                runPath: [
                    [
                        114.03922119568348,
                        32.49746162481379
                    ],
                ],
                //当前位置
                currentPointName:"中国达州市通川区",
                //当前位置经纬度
                currentPoint:{
                    lat:"",
                    lon:""
                },
                //起点位置
                startPointName:"中国达州市通川区", 
                //起点位置经纬度
                startPoint:{
                    lon:"114.03922119568348",
                    lat:"32.49746162481379"
                },
                //终点位置
                endPointName:"中国成都萧山",
                //终点位置经纬度   
                endPoint:{
                    lon:"115.96995737755431",
                    lat:"33.01595479752097"
                },
                //自定义标记
                content:[],
                //异常位置
                abnormalLocation:[],
            
            },
            listPath:[
                
            ],
            //组件
            pathSimplifierIns:{},
            pathNavigator:{},
            //地图解析
            geocoder:null,
            currentPointName:""
        };
    },
    created(){
        let that=this;
         that.initData(that.orderNumber)
    },
    mounted() {
        
    },
    methods: {
        //停车时间改变
        changeParkingTime() {
            let that = this;
            //清除之前的停车点
            that.hideParkingMark();
            //计算时间的点
            let calculationPoint = null;
            that.listPath[0].runRoute.forEach(function(item, indexOf) {
                if (indexOf + 1 < that.listPath[0].runRoute.length) {
                //判断calculationPoint是否为空，如果是空的说明当前没有在计算停车时间
                if (calculationPoint == null && item.spd == "0.0") {
                    calculationPoint = item;
                } else if (calculationPoint != null && item.spd != "0.0") {
                    let beforeTime = that.stringToDate(calculationPoint.gtm);
                    let item2 = that.listPath[0].runRoute[indexOf];
                    let afterTime = that.stringToDate(item2.gtm);
                    let second = afterTime - beforeTime;
                    if (second > that.parkingTime) {
                        let message = "停车:" + second / 60000;
                        that.initParkingMarkes(
                            20,
                            35,
                            require("@/assets/img/park.png"),
                            calculationPoint.lon,
                            calculationPoint.lat,
                            message.split(".")[0] + "分钟"
                        );
                    }
                    calculationPoint = null;
                }
            }
        });
        },
         //字符串转为Date
        stringToDate(dateString) {
            console.log(dateString)
            let dateStr = dateString.replace("年", "-").replace("月", "-").replace("日", "");
            return Date.parse(dateStr);
    
            
        },
        //停车所有离线图标
        hideParkingMark() {
        let that = this;
        
        that.parkMark.forEach(function(item, indexOf) {
            item.hide();
        });
        },
        //离线时间改变时获得超过时间的点信息
        changeLeaveTime() {
            let that = this;
            //关闭所有图标
            that.hideLeaveMark();
           that.listPath[0].runRoute.forEach(function(item, indexOf) {
                if (indexOf + 1 < that.listPath[0].runRoute.length) {
                    let beforeTime = that.stringToDate(item.gtm);
                    let item2 = that.listPath[0].runRoute[indexOf + 1];
                    let afterTime = that.stringToDate(item2.gtm);
                    let second = afterTime - beforeTime;
                    if (second > that.leaveTime) {
                        let message = "离线:" + second / 60000;
                        that.initLeaveMarkes(
                        20,
                        35,
                        require("@/assets/img/leave.png"),
                        item2.lon,
                        item2.lat,
                        message.split(".")[0] + "分钟"
                        );
                    }
                }
            });
        },
        //关闭所有离线图标
        hideLeaveMark() {
        let that = this;
        that.leaveMark.forEach(function(item, indexOf) {
            item.hide();
        });
        },
        slow(){
             console.log("slow")
            let that=this;
            that.pathNavigator.setSpeed(1000);
        },
        middle(){
             console.log("middle")
            let that=this;
           that.pathNavigator.setSpeed(10000);
        },
        fast(){
            console.log("fast")
            let that=this;
            that.pathNavigator.setSpeed(100000);
        },
        play(){
            let that =this;
            that.pathNavigator.resume();
        },
        stop(){
            let that =this;
            that.pathNavigator.pause();
        },
        addIndex(){

            let that =this;
            let increment=(that.listPath[0].runPath.length*0.1)
            that.pathNavigator.start(((that.point+increment)%that.listPath[0].runPath.length))
        },
        ///che
        navgControl(){

        },
        hideFormat(value){
            let that=this;
            that.sliderVal=value;
        },
        initParkingMarkes(weight, height, image, lon, lat, title) {
            let that = this;
            //图标标记点
            let pointicon = new AMap.Icon({
                size: new AMap.Size(weight, height), // 图标尺寸
                image: image, // Icon的图像
                imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
            });
            // 创建一个 Marker 实例：
            var pointmarker = new AMap.Marker({
                position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                icon: pointicon,
                title: title
            });
            that.parkMark.push(pointmarker);
            // 将创建的点标记添加到已有的地图实例：
            that.map.add(pointmarker);
        },
        //创建离线和停车的标记
        initLeaveMarkes(weight, height, image, lon, lat, title) {
        let that = this;
        //图标标记点
        let pointicon = new AMap.Icon({
            size: new AMap.Size(weight, height), // 图标尺寸
            image: image, // Icon的图像
            imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
        });
        // 创建一个 Marker 实例：
        var pointmarker = new AMap.Marker({
            position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            icon: pointicon,
            title: title
        });
        that.leaveMark.push(pointmarker);
        // 将创建的点标记添加到已有的地图实例：
        that.map.add(pointmarker);
        },
        initData(orderNumber){
            let that=this;
             that.axios.post("/api/v1/otms/fullPath?orderNumber="+orderNumber).then((res) => {
                 console.log(res.data)
                 if(res.data.data=='-1'){
                     this.$message.error('自提车辆无权查看!');
                 }else if(res.data.data.startAndEndRoutes!=null){
                     that.listPath=res.data.data.startAndEndRoutes
                    that.initMap();
                 }else{
                     that.listPath=[];
                     this.$message.error('车辆没有开启GPS');
                 }
            });
        },
        endline(){
            let that=this;
            that.initPolyline(that.listPath[0].estimatePath,"#FF0000");
        },
        //创建起点终点当前点
        threeMarker(){
            let that=this;
            that.listPath.forEach((element,index) => {
                //开始标记点
                if(element.startPoint.lon!=''&&element.startPoint.lat!=''){
                    that.initMarkes(20,35,require('@/assets/img/start.png'),element.startPoint.lon,element.startPoint.lat,'起点');
                }
                //当前点
                that.getCurrentPointName([element.runRoute[element.runRoute.length-1].lon,element.runRoute[element.runRoute.length-1].lat])
                //结束标记点
                if(element.endPoint.lon!=''&&element.endPoint.lat!=''){
                    that.initMarkes(20,35,require('@/assets/img/end.png'),element.endPoint.lon,element.endPoint.lat,'终点');
                }
            });
        },
        //获得结束地址
        getCurrentPointName(lnglatXY){
            let that=this;
            that.geocoder.getAddress(lnglatXY, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    that.currentPointName = result.regeocode.formattedAddress;
                    that.initCustomMarkes(that.capacityNumber,"位置："+that.currentPointName+"<br/>"+"距离："+that.listPath[0].miled,lnglatXY[0],lnglatXY[1])
                }
            });  
        },
        //defualt数据
        defaultDate(){
            // let that=this;
            // that.pathNavigator.start(that.listPath[0].runPath.length)
            // that.pathNavigator.pause();
            
        },
        //初始化地图
        initMap(){
            lazyAMapApiLoaderInstance.load().then(() => {
                let that=this;
                that.map = new AMap.Map("amap-container",{  //设置地图容器id
                    viewMode:"2D",    //是否为2D地图模式
                    zoom:10,           //初始化地图级别
                    center:[105.602725,37.076636], //初始化地图中心点位置
                });
                that.initGeocoder();
                that.initPathSimplifier();
                that.threeMarker();
                //that.initCustomMarkes(that.capacityNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
                that.endline();
                
            });
        },
        initCustomMarkes(title,details,lon,lat){
             let that=this;
            //自定义窗体内容
            var content = [
                "<div  style='top:1px;width: 180px; background-color: rgba(22, 160, 133, 1);' ><font color='white'>"+title+"</font>",
                "<div style='background-color:(22, 160, 133, 1); ;'><font color='white'>"+details+"</font></div></div>"
            ];
            // 创建 infoWindow 实例	
            var infoWindow = new AMap.InfoWindow({
                content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
            });
            // 打开信息窗体
            infoWindow.open(that.map,[lon,lat]);
        },
        initPolyline(path,color){
            let that=this;
             //预计轨迹
            var endLine = new AMap.Polyline({
                map:that.map,
                path: path,
                isOutline: true,
                outlineColor: color,
                borderWeight: 0,
                strokeColor: "#FF0000", 
                strokeOpacity: 1,
                strokeWeight: 5,
                // 折线样式还支持 'dashed'
                strokeStyle: "solid",
                // strokeStyle是dashed时有效
                strokeDasharray: [10, 5],
                lineJoin: 'round',
                lineCap: 'round',
                zIndex: 50,
            })
            that.map.setFitView([[ endLine ]])
        },
        //创建简单的标记
        initMarkes(weight,height,image,lon,lat,title){
            let that=this;
            //图标标记点
            let pointicon = new AMap.Icon({
                size: new AMap.Size(weight, height), // 图标尺寸
                image: image, // Icon的图像
                imageOffset: new AMap.Pixel(0,0), // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
            });
            // 创建一个 Marker 实例：
            var pointmarker = new AMap.Marker({
                position: new AMap.LngLat(lon, lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                icon: pointicon, 
                title: title
            });
            // 将创建的点标记添加到已有的地图实例：
            that.map.add(pointmarker);
        },
        //创建轨迹和巡航器
        initPathSimplifier() {
            let that=this;
            // ...你的操作
            new AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
                if (!PathSimplifier.supportCanvas) {
                    alert('当前环境不支持 Canvas！')
                    return
                }
                //创建轨迹和巡航器
                // 创建组件实例
                that.pathSimplifierIns = new PathSimplifier({
                    map: that.map,
                    zIndex: 100, // 图层叠加顺序
                    data: that.listPath, // 巡航路径
                    // 获取巡航路径中的路径坐标数组
                    getPath: (pathData, pathIndex) => {
                        return pathData.runPath;
                    },
                    //鼠标悬浮停时显示消息
                    getHoverTitle: function(pathData, pathIndex, pointIndex) {
                        //返回鼠标悬停时显示的信息
                        if (pointIndex >= 0) {
                            if(pathData.runRoute[pointIndex].gtm!=='undefined'){
                                 //鼠标悬停在某个轨迹节点上
                                return pathData.runRoute[pointIndex].gtm + '，速度'+ pathData.runRoute[pointIndex].spd+'千米/小时' ;
                            }
                        }
                    },
                    //设置轨迹样式
                    renderOptions: {
                        //轨迹线的样式
                        pathLineStyle: {
                            strokeStyle: 'black',
                            lineWidth: 6,
                            dirArrowStyle: true
                        }
                    }
                })
                // 创建巡航器
                that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
                    loop: true, // 是否循环
                    speed: that.speed ,// 速度(km/h)
                    pathNavigatorStyle: {
                        width: 20,
                        height: 40,
                        content:PathSimplifier.Render.Canvas.getImageContent( require('@/assets/img/smallcar.png'), onload, onerror),
                        strokeStyle: null,
                        fillStyle: null
                    }
                })
                //开启巡航
                that.pathNavigator.start()
                that.defaultDate();
                
                //开始事件
                that.pathNavigator.on("start resume", function() {
                    // that.navgtr._startTime = Date.now();
                    // that.navgtr._startDist = this.getMovedDistance();
                });
                //暂停
                that.pathNavigator.on("stop pause", function() {
                    // that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
                    // that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
                });
                that.pathNavigator.on('move', function (data,value) {
                    that.updateLable(value)
                });
            })
        },
        updateLable(value){
            let that=this;
            that.point=value.dataItem.pointIndex;
            that.runRoute=value.dataItem.pathData.runRoute[that.point];
            that.sliderVal=(value.dataItem.pointIndex/value.dataItem.pathData.runRoute.length)*100;
        },
        changeSpeed(value){
            // console.log(value)
            // let that=this;
            // that.times=value;
            
        },
        playIcon(){
            console.log("nihoa")
        },
        //逆解码函数
        initGeocoder(){
            let that=this;
            console.log("initGeocoder") ;
            AMap.plugin('AMap.Geocoder',function(){   
                that.geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                });  
                
                console.log(that.geocoder)    
            })    
        },
                  
    }
};
</script>
<style>
.mapcontroller{
    width: 250px; height: 260px; 
    background: white;
   position: absolute;z-index:99;top:0;left:0
}
.container{
    width: 100%;
	height: 100%;
    
}
.item_details {
    display: block;
    margin-top: 20px;
    position: relative;
    left: 30px;
    width: 200px;
    height: 0px;
}
#amap-container {
    position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}
.driving_information2 {
    position: relative;
    top: 70px;
}
.driving_information3 {
    position: absolute;z-index:99;top:0;left:0;
    position: relative;
    top: 50px;
}

/* 进度条 */
.mySlider {

    width: 150px;
    height: 20px;
    display: inline-block;
    position: relative;
    left: 32px;
}
.play {
    position: relative;
    left: 28px;
}
.quickly
{
    float: right;
    position: relative;
    left: -20px;
    top: 10px;
}
.pause {
    position: relative;
    left: 28px;
}
.passed-time{
    position: relative;
    left: 5px;
}
.end-time{
    position: relative;
    left: 5px;
}
.map-times {
    position: relative;
    background-color: red;
    width: 40px;
}



</style>