百度地图的轨迹回放和实时监控

一时失言乱红尘 2023-06-12 09:56 15阅读 0赞

最近写了两个页面，是跟百度地图有关的，本来以为是用的鹰眼的轨迹，才发现没那么麻烦，直接用的是百度地图自带的api。

# 1 轨迹回放 #

<template>
     <div class="map">
         
        <span class="content_span">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>后台管理</el-breadcrumb-item>
                <el-breadcrumb-item>人员管理</el-breadcrumb-item>
                <el-breadcrumb-item>{
       {this.$route.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </span>
    
         <div class="left">
              
              <div class="she_bei">
                  <h5>设备信息</h5>
                  <el-form ref="form" :model="form1" label-width="80px">
                        <el-form-item label="所属班组:">
                            <el-select v-model="form2.class1" placeholder="请选择" @change="change1">
                                <el-option
                                v-for="item in class1"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备编号:">
                            <el-select v-model="form2.number" placeholder="请选择" @change="change2">
                                <el-option
                                v-for="item in number"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                  </el-form>
              </div>
    
              
              <div class="time">
                 <h5>时间</h5>
                 <el-form ref="form" :model="form2" label-width="80px">
                        <el-form-item label="开始时间:">
                             <el-date-picker
                                v-model="form2.value1"
                                type="datetime"
                                placeholder="开始时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间:">
                             <el-date-picker
                                v-model="form2.value2"
                                type="datetime"
                                placeholder="结束时间">
                            </el-date-picker>
                        </el-form-item>
                  </el-form>
                  <el-button size="mini" style="float:right;margin-right:35px;" @click="inquiry">轨迹查询</el-button>
              </div>
    
              
              <div class="hui_fang">
                 <h5>回放控制</h5>
                 <el-button size="mini" @click="play">开始</el-button>
                 <el-button size="mini" @click="pause">暂停</el-button>
                 <el-button size="mini" @click="reset">重放</el-button>
                 <el-button size="mini" @click="clear">清除轨迹</el-button>
                 <strong style="font-size:12px;margin-top:8px;display:block;">播放速率：</strong>
                 <el-slider
                    v-model="value3"
                    :marks="marks"
                    style="width:90%;margin-left:5%;"
                    :step="1">
                </el-slider>
              </div>
    
              
              <div class="status">
                  <h5>状态</h5>
                  <div><span>总里程数:</span>约{
       {totalMi}}公里</div>
                  
                  <div><span>定位类型:</span>GPS+北斗</div>
                  <div><span>当前速度:</span>{
       {speed}}km/h</div>
                  <div><span>当前时间:</span>{
       {date}}</div>
                  <div><span>轨迹时间:</span>约{
       {hour}}时{
       {minute}}分{
       {second}}秒</div>
                  
              </div>
         </div>
         
        <div id="map">
          
        </div>
        
     </div>
     
        
    </template>
    
    <script>
    var _this;
    import axios from '../../apiconfig/index.js';
    import loadMap from '../../../static/js/loadBMap.js';
    import GeoUtils from '../../../static/js/util.js';
    const moment=require('moment');
    export default {
        data(){
            return {
                // 设备信息
                equipment:[],
                form1:{
                    class1:'',
                    number:''
                },
                //所属班组
                class1:[],
                //设备编号
                number:[],
                // 时间
                form2:{
                    value1:'',
                    value2:''
                },
                // 可以调整播放速度
                value3:'',
                //当前速度
                speed:0,
                marks: {
                    0: '0',
                    25: '25',
                    50: '50',
                    75:'75',
                    100:'100'
                },
                // 当前时间
                date:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
                // 总里程数
                totalMi:0,
                // 现里程数
                nowMi:0,
                
                //轨迹的参数
                map:'',
                car:'',
                label:'',
                centerPoint:'',
                driving:'',
                timer:null,
                index:0,
    
                //轨迹时间
                hour:0,
                minute:0,
                second:0
    
            }
        },
        mounted(){
           _this=this;
           _this.baidu();
           _this.getEquipment();
           _this.form2.value1=moment(new Date()).format('YYYY-MM-DD 00:00:00');
           _this.form2.value2=moment(new Date()).format('YYYY-MM-DD 23:59:59');
        },
        methods:{
            //班组改变时
            change1(val){
               _this.form1.class1=val;
            },
            //设备列表改变时
            change2(val){
               _this.form1.number=val;
            },
            //获取设备列表
            getEquipment(){
               axios
               .get('/api/SafetyHat/GetEquipment')
               .then(res=>{
                   console.log(res)
                   if(res.ResultType==0){
                        _this.equipment=res.Data.pu;
                        _this.class1=_this.equipment.map((item)=>{
                            return {
                                value:item.LineID
                            }
                        })
                        _this.number=_this.equipment.map((item)=>{
                            return {
                                value:item.PuID,
                                label:item.PuName
                            }
                        })
                      console.log(_this.class1)
                   }
               })
               .catch(error=>{
                   console.log(error)
               })
            },
            baidu(){
                // panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点
                // new BMap.DrivingRoute(map);创建驾车实例
                loadMap('lGct54QCT9vLZ2b4miQlr5KirsBXI1Du').then(()=>{
                        var map = new BMap.Map("map");    // 创建Map实例
                        var point=new BMap.Point(114.471938,38.071433);
    
                        map.centerAndZoom(point, 11);  // 初始化地图,设置中心点坐标和地图级别
                        //添加地图类型控件
                        map.addControl(new BMap.MapTypeControl({
                            mapTypes:[
                                BMAP_NORMAL_MAP,
                                BMAP_HYBRID_MAP
                            ]}));	  
                        map.setCurrentCity("石家庄");          // 设置地图显示的城市 此项是必须设置的
                        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    
                        var marker=new BMap.Marker(point);  //创建点
                        map.addOverlay(marker);//向地图添加覆盖物 
                })
            },
            // 开始
            play(){
                loadMap('lGct54QCT9vLZ2b4miQlr5KirsBXI1Du').then(()=>{
                    var points = [];
                    axios
                    .get('/api/SafetyHat/GetTrajectory',{
                        params:{
                            LineID:_this.form1.class1,
                            PuID:_this.form1.number,
                            startTime:Date.parse(_this.form2.value1).toString().substr(0,10),
                            endTime:Date.parse(_this.form2.value2).toString().substr(0,10)
                        }
                    })
                    .then(res=>{
                        if(res.ResultType ==0){
                            for(var i=0;i<res.Data.length;i++){
                                points.push(new BMap.Point(res.Data[i].Longitude,res.Data[i].Latidude))
                            }
                            if(_this.index < points.length) {
                                _this.timer = window.setInterval(function(){
                                    //位置的移动
                                    _this.index++;
                                    var point = points[_this.index];
                                    _this.car.setPosition(point);
                                    _this.map.addOverlay(_this.car);
    
                                    //当前时间移动
                                    var arr1=[];
                                    for(var i=0;i<res.Data.length;i++){
                                        arr1.push(res.Data[i].GpsTime)
                                        arr1[i]=moment(arr1[i]*1000).format('YYYY-MM-DD HH:mm:ss')
                                    }
                                    _this.date=arr1[_this.index];
    
                                    // 速度移动
                                    var arr2=[];
                                    for(var i=0;i<res.Data.length;i++){
                                        arr2.push(res.Data[i].Speed)
                                    }
                                    _this.speed=arr2[_this.index];
    
                                    //清除定时器
                                    if(_this.index == points.length){
                                        window.clearInterval(_this.timer)
                                        _this.date=arr1[arr1.length-1];
                                        _this.speed=0;
                                    }
                                }, 500);
                            }
                        }
                    })
                    .catch(error=>{
                        console.log(error)
                    })
                })
            },
            // 暂停
            pause(){
                if(_this.timer) {  
                    window.clearInterval(_this.timer);  
                }
            },
            // 重放
            reset(){
                loadMap('lGct54QCT9vLZ2b4miQlr5KirsBXI1Du').then(()=>{
                    var points = [];
                    axios
                    .get('/api/SafetyHat/GetTrajectory',{
                        params:{
                            LineID:_this.form1.class1,
                            PuID:_this.form1.number,
                            startTime:Date.parse(_this.form2.value1).toString().substr(0,10),
                            endTime:Date.parse(_this.form2.value2).toString().substr(0,10)
                        }
                    })
                    .then(res=>{
                        if(res.ResultType ==0){
                            for(var i=0;i<res.Data.length;i++){
                                points.push(new BMap.Point(res.Data[i].Longitude,res.Data[i].Latidude))
                            }
                            
                            points = _this.driving.getResults().getPlan(0).getRoute(0).getPath();
                            if(_this.timer) {  
                                window.clearInterval(_this.timer);  
                            }  
                            _this.index = 0;  
                            _this.car.setPosition(points[0]);
                            _this.play();
                            _this.centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
                            _this.map.panTo(_this.centerPoint);
                        }
                    })
                    .catch(error=>{
                        console.log(error)
                    })
                })
            },
            // 清除轨迹
            clear(){
               _this.map.clearOverlays();
               window.clearInterval(_this.timer);
            },
            // 查询
            inquiry(){
                 loadMap('lGct54QCT9vLZ2b4miQlr5KirsBXI1Du').then(()=>{
                        var points = [];
                        axios
                        .get('/api/SafetyHat/GetTrajectory',{
                            params:{
                                LineID:_this.form1.class1,
                                PuID:_this.form1.number,
                                startTime:Date.parse(_this.form2.value1).toString().substr(0,10),
                                endTime:Date.parse(_this.form2.value2).toString().substr(0,10)
                            }
                        })
                        .then(res=>{
                            console.log(res)
                            if(res.ResultType ==0){
                                for(var i=0;i<res.Data.length;i++){
                                    points.push(new BMap.Point(res.Data[i].Longitude,res.Data[i].Latidude))
                                }
    
                                //初始化地图,选取第一个点为起始点  
                                _this.map = new BMap.Map("map");  
                                _this.map.centerAndZoom(points[0],11);  
                                _this.map.enableScrollWheelZoom();  
                                _this.map.addControl(new BMap.NavigationControl());  
                                _this.map.addControl(new BMap.ScaleControl());  
                                _this.map.addControl(new BMap.OverviewMapControl({isOpen: true}));  
    
    
                                //通过DrivingRoute获取一条路线的point  
                                _this.driving = new BMap.DrivingRoute(_this.map);  
                                _this.driving.search(new BMap.Point(points[0].lng,points[0].lat), new BMap.Point(points[points.length-1].lng,points[points.length-1].lat));
                                _this.driving.setSearchCompleteCallback(function() { 
                                    //画面移动到起点和终点的中间  
                                    _this.centerPoint = new BMap.Point(points[0].lng,points[0].lat);  
                                    _this.map.panTo(_this.centerPoint);  
                                    //连接所有点  
                                    _this.map.addOverlay(new BMap.Polyline(points, {strokeColor: "blue", strokeWeight:4, strokeOpacity: 1}));  
                                    
                                    //显示安全帽
                                    _this.label = new BMap.Label("安全帽", {offset: new BMap.Size(-10, -20)}); 
                
                                    var icon = new BMap.Icon('../../../static/imgs/cap.png', new BMap.Size(25, 20), {
                                        anchor: new BMap.Size(10, 20)
                                    });
                                    _this.car = new BMap.Marker(points[0],{icon:icon});
                                    _this.car.setLabel(_this.label);  
                                    _this.map.addOverlay(_this.car);
                                });
                                
                                //计算总里程数
                                var point1=new BMap.Polyline(points);//BMapLib.GeoUtils
                                _this.totalMi=(BMapLib.GeoUtils.getPolylineDistance(points).toFixed(0)/1000).toFixed(1);
                                console.log(points)
    
                                var end=res.Data[0].GpsTime-res.Data[res.Data.length-1].GpsTime;
                                _this.hour= parseInt((end % (60 * 60 * 24)) / ( 60 * 60));
                                _this.minute= parseInt((end % ( 60 * 60)) / ( 60));
                                _this.second= (end % (60));
    
                            }else{
                                _this.$message.error('获取轨迹失败!您所选时间暂时没有轨迹或者未选择班组和设备编号!');
                            }
                        })
                        .catch(error=>{
                            console.log(error)
                        })
                 })
            }
        }
    }
    </script>
    
    <style scoped>
    /* .map{
      width:89%;
      height:900px;
      float:right;
    } */
    #map{
        width:81%;
        height:980px;
        float:right;
    }
    .left{
        width:19%;
        height:980px;
        float:left;
        background: #e0eeee;
        padding:10px 5px;
    }
    h5{
        position: relative;
    }
    h5:after{
        position: absolute;
        bottom:-6px;
        left:0;
        background: #ccc;
        width:100%;
        content:'';
        height:1px;
    }
    .she_bei,.time{
        font-size:13px;
    }
    .status{
        margin-top: 15px;
    }
    .status div{
        margin-top: 10px;
        font-size:13px;
        color:#999;
        padding-left: 10px;
        box-sizing: border-box;
    }
    .status div span{
        color:black;
        margin-right: 10px;
    }
    .hui_fang{
        margin-top: 15px;
    }
    </style>

# 2 实时监控 #

<template>
        <div class="monitor">
            
            <span class="content_span">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>后台管理</el-breadcrumb-item>
                    <el-breadcrumb-item>人员管理</el-breadcrumb-item>
                    <el-breadcrumb-item>{
       {this.$route.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </span>
            
            <div class="left">
                <el-tree 
                  :data="data" 
                  :props="defaultProps"
                  show-checkbox
                  @check-change="handleCheckChange">
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>
                        <i :class="node.icon"></i>{
       { node.label }}
                    </span>              
                </span>
                </el-tree>
            </div>
    
            
            <div id="map">
            
            </div>
    
            
            <div class="bottom">
                  <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="Name"
                        label="设备名称"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="Address"
                        label="地理位置">
                    </el-table-column>
                    <el-table-column
                        prop="Speed"
                        label="速度"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="Time"
                        label="上报时间"
                        width="300">
                    </el-table-column>
                    <el-table-column
                        prop="IsStatus"
                        label="是否在线"
                        width="200">
                    </el-table-column>
                 </el-table>
            </div>
        </div>
    </template>
    
    <script>
    var _this;
    import axios from '../../apiconfig/index.js';
    import loadMap from '../../../static/js/loadBMap';
    const moment=require('moment');
    export default {
        data(){
            return {
               data:[{
                    label: '设备列表',
                    children: [{
                        label: 'HBWS',
                            children: [{
                                label:"1095001"
                            }]
                    }]
               }],
               defaultProps: {
                  children: 'children',
                  label: 'label'
               },
    
               map:'',
               point:'',
               marker:'',
               label:'',
               icon:'',
               timer:null,
    
               description:{
                    type:String,
                    default:'天安门'
               },
               pu:[],
               
               tableData:[]
               
            }
        },
        mounted(){
           _this=this;
           _this.getPuName();
           window.localStorage.removeItem('PuID');
           _this.baidu();
        },
        beforeDestroy(){
          clearInterval(_this.timer);
        },
        methods:{
           //获取getPuName
           getPuName(){
                axios
                .get('/api/SafetyHat/GetEquipment')
                .then(res=>{
                    console.log(res)
                    if(res.ResultType==0){
                        _this.pu=res.Data.pu;
                        _this.data[0].children[0].children=res.Data.pu.map((item)=>{
                            return {
                                label:item.PuName
                            }
                        })
                    }
                })
                .catch(error=>{
                    console.log(error)
                })
           },
           //设置定时器
           setDing(){
                if(localStorage.getItem('PuID') != undefined && localStorage.getItem('PuID') != null){
                    //封装函数
                    function move(){
                        console.log('666')                    
                            _this.map.removeOverlay(_this.marker);
                            axios
                            .get('/api/SafetyHat/Monitor',{
                                params:{
                                    PuID:localStorage.getItem('PuID') || ''
                                }
                            })
                            .then(res=>{
                                console.log(res)
                                var PuName=_this.pu.find(itm=>{return itm.PuID==localStorage.getItem('PuID')}).PuName
                                if(res.ResultType==0){
                                    _this.point=new BMap.Point(res.Data[0].Longitude,res.Data[0].Latidude);
                                    if(res.Data[0].State == 1){
                                        _this.icon=new BMap.Icon('../../../static/imgs/map1.png', new BMap.Size(25, 20), {
                                                anchor: new BMap.Size(10, 20)
                                        });
                                    }else{
                                        _this.icon=new BMap.Icon('../../../static/imgs/cap.png', new BMap.Size(25, 20), {
                                                anchor: new BMap.Size(10, 20)
                                        });
                                    }
                                    _this.map.centerAndZoom(_this.point, 17);
                                    _this.label = new BMap.Label(PuName, {offset: new BMap.Size(-10, 25)});
                                    _this.marker=new BMap.Marker(_this.point,{icon:_this.icon});
                                    _this.marker.setLabel(_this.label)
                                    _this.map.addOverlay(_this.marker);
                                    
                                    //点击出现框框
                                    var opts ={
                                            width :250,
                                            height:200,
                                            title :"地址：",
                                    }
                                    var infoWindow =new BMap.InfoWindow('aaaaa',opts);// 创建信息窗口对象
                                    _this.marker.addEventListener("click",function(){
                                        _this.map.openInfoWindow(infoWindow,_this.point);
                                    });
                                    //根据经纬度获取地址
                                    var geolocation = new BMap.Geolocation();
                                    var gc = new BMap.Geocoder();
                                    var pointAdd = new BMap.Point(res.Data[0].Longitude, res.Data[0].Latidude);
                                    gc.getLocation(pointAdd, function(rs){
                                        //console.log(rs.address)
                                        //点击给底部赋值
                                        _this.tableData=res.Data.map((item)=>{
                                            return {
                                                Name:PuName,
                                                Address:rs.address,
                                                Speed:item.Speed+'km/h',
                                                Time:moment(item.GpsTime*1000).format('YYYY-MM-DD HH:mm:ss'),
                                                IsStatus:item.State == 0 ? '在线':'不在线'
                                            }
                                        })
                                    })
    
                                }
                            })
                            .catch(error=>{
                                console.log(error)
                            })                    
                    }
                    move();
                    //调用定时器
                    _this.timer=setInterval(move,20000);
                }
           },
           baidu(){
                // panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点
                // new BMap.DrivingRoute(map);创建驾车实例
                loadMap('lGct54QCT9vLZ2b4miQlr5KirsBXI1Du').then(()=>{
                        _this.map = new BMap.Map("map");    // 创建Map实例
                        _this.point=new BMap.Point(114.471938,38.071433);
    
                        _this.map.centerAndZoom(_this.point, 15);  // 初始化地图,设置中心点坐标和地图级别
                        //添加地图类型控件
                        _this.map.addControl(new BMap.MapTypeControl({
                            mapTypes:[
                                BMAP_NORMAL_MAP,
                                BMAP_HYBRID_MAP
                            ]}));	  
                        _this.map.setCurrentCity("石家庄");          // 设置地图显示的城市 此项是必须设置的
                        _this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                        
                        //调用定时器
                        _this.setDing();
                        
                })
            },
            //多选框点击时
            handleCheckChange(data, checked, indeterminate) {
                    if(checked==true){
                            var PuID=_this.pu.find(itm=>{return itm.PuName==data.label}).PuID;
                            window.localStorage.setItem('PuID',PuID);
                            axios
                            .get('/api/SafetyHat/Monitor',{
                                params:{
                                    PuID:localStorage.getItem('PuID') || ''
                                }
                            })
                            .then(res=>{
                                console.log(res)
                                if(res.ResultType==0){
                                        _this.setDing();
                                    } 
                            })
                            .catch(error=>{
                                console.log(error)
                            })
                    }else{
                        window.localStorage.removeItem('PuID')
                        clearInterval(_this.timer);
                        _this.map.removeOverlay(_this.marker);
                    }
            },
        }
    }
    </script>
    
    <style scoped>
     /* .monitor{
        width:89%;
        height:900px;
        float:right;
     } */
     .left{
        width:15%;
        height:980px;
        float:left;
        background: #e0eeee;
        padding:10px 5px;
    }
    #map{
        width:85%;
        height:980px;
        float:right;
     }
    .el-tree{
        background: #e0eeee;
        font-size:13px;
    }
    .bottom{
        width:89%;
        height:100px;
        position: absolute;
        left:11%;
        bottom:0;
    }
    .bottom .el-table{
        background: #eee;
    }
    </style>