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

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

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

1 轨迹回放

  1. <template>
  2.  <div class="map">
  3.      <!--面包屑-->
  4.     <span class="content_span">
  5.         <el-breadcrumb separator-class="el-icon-arrow-right">
  6.             <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
  7.             <el-breadcrumb-item>后台管理</el-breadcrumb-item>
  8.             <el-breadcrumb-item>人员管理</el-breadcrumb-item>
  9.             <el-breadcrumb-item>{
  10.    {this.$route.meta.title}}</el-breadcrumb-item>
  11.         </el-breadcrumb>
  12.     </span>
  14.      <div class="left">
  15.           <!-- 设备信息 -->
  16.           <div class="she_bei">
  17.               <h5>设备信息</h5>
  18.               <el-form ref="form" :model="form1" label-width="80px">
  19.                     <el-form-item label="所属班组:">
  20.                         <el-select v-model="form2.class1" placeholder="请选择" @change="change1">
  21.                             <el-option
  22.                             v-for="item in class1"
  23.                             :key="item.value"
  24.                             :label="item.value"
  25.                             :value="item.value">
  26.                             </el-option>
  27.                         </el-select>
  28.                     </el-form-item>
  29.                     <el-form-item label="设备编号:">
  30.                         <el-select v-model="form2.number" placeholder="请选择" @change="change2">
  31.                             <el-option
  32.                             v-for="item in number"
  33.                             :key="item.value"
  34.                             :label="item.label"
  35.                             :value="item.value">
  36.                             </el-option>
  37.                         </el-select>
  38.                     </el-form-item>
  39.               </el-form>
  40.           </div>
  42.           <!-- 时间 -->
  43.           <div class="time">
  44.              <h5>时间</h5>
  45.              <el-form ref="form" :model="form2" label-width="80px">
  46.                     <el-form-item label="开始时间:">
  47.                          <el-date-picker
  48.                             v-model="form2.value1"
  49.                             type="datetime"
  50.                             placeholder="开始时间">
  51.                         </el-date-picker>
  52.                     </el-form-item>
  53.                     <el-form-item label="结束时间:">
  54.                          <el-date-picker
  55.                             v-model="form2.value2"
  56.                             type="datetime"
  57.                             placeholder="结束时间">
  58.                         </el-date-picker>
  59.                     </el-form-item>
  60.               </el-form>
  61.               <el-button size="mini" style="float:right;margin-right:35px;" @click="inquiry">轨迹查询</el-button>
  62.           </div>
  64.           <!-- 回放控制 -->
  65.           <div class="hui_fang">
  66.              <h5>回放控制</h5>
  67.              <el-button size="mini" @click="play">开始</el-button>
  68.              <el-button size="mini" @click="pause">暂停</el-button>
  69.              <el-button size="mini" @click="reset">重放</el-button>
  70.              <el-button size="mini" @click="clear">清除轨迹</el-button>
  71.              <strong style="font-size:12px;margin-top:8px;display:block;">播放速率：</strong>
  72.              <el-slider
  73.                 v-model="value3"
  74.                 :marks="marks"
  75.                 style="width:90%;margin-left:5%;"
  76.                 :step="1">
  77.             </el-slider>
  78.           </div>
  80.           <!-- 状态 -->
  81.           <div class="status">
  82.               <h5>状态</h5>
  83.               <div><span>总里程数:</span>约{
  84.    {totalMi}}公里</div>
  85.               <!-- <div><span>终端名称:</span>{
  86.    {form2.number}}</div> -->
  87.               <div><span>定位类型:</span>GPS+北斗</div>
  88.               <div><span>当前速度:</span>{
  89.    {speed}}km/h</div>
  90.               <div><span>当前时间:</span>{
  91.    {date}}</div>
  92.               <div><span>轨迹时间:</span>约{
  93.    {hour}}时{
  94.    {minute}}分{
  95.    {second}}秒</div>
  96.               <!-- <div><span>现里程数:</span>约{
  97.    {nowMi}}公里</div>
  98.               <div><span>运动时间:</span></div>
  99.               <div><span>停留时间:</span></div> -->
  100.           </div>
  101.      </div>
  102.      <!-- 地图 -->
  103.     <div id="map">
  105.     </div>
  107.  </div>
  110. </template>
  112. <script>
  113. var _this;
  114. import axios from '../../apiconfig/index.js';
  115. import loadMap from '../../../static/js/loadBMap.js';
  116. import GeoUtils from '../../../static/js/util.js';
  117. const moment=require('moment');
  118. export default {
  119.     data(){
  120.         return {
  121.             // 设备信息
  122.             equipment:[],
  123.             form1:{
  124.                 class1:'',
  125.                 number:''
  126.             },
  127.             //所属班组
  128.             class1:[],
  129.             //设备编号
  130.             number:[],
  131.             // 时间
  132.             form2:{
  133.                 value1:'',
  134.                 value2:''
  135.             },
  136.             // 可以调整播放速度
  137.             value3:'',
  138.             //当前速度
  139.             speed:0,
  140.             marks: {
  141.                 0: '0',
  142.                 25: '25',
  143.                 50: '50',
  144.                 75:'75',
  145.                 100:'100'
  146.             },
  147.             // 当前时间
  148.             date:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
  149.             // 总里程数
  150.             totalMi:0,
  151.             // 现里程数
  152.             nowMi:0,
  154.             //轨迹的参数
  155.             map:'',
  156.             car:'',
  157.             label:'',
  158.             centerPoint:'',
  159.             driving:'',
  160.             timer:null,
  161.             index:0,
  163.             //轨迹时间
  164.             hour:0,
  165.             minute:0,
  166.             second:0
  168.         }
  169.     },
  170.     mounted(){
  171.        _this=this;
  172.        _this.baidu();
  173.        _this.getEquipment();
  174.        _this.form2.value1=moment(new Date()).format('YYYY-MM-DD 00:00:00');
  175.        _this.form2.value2=moment(new Date()).format('YYYY-MM-DD 23:59:59');
  176.     },
  177.     methods:{
  178.         //班组改变时
  179.         change1(val){
  180.            _this.form1.class1=val;
  181.         },
  182.         //设备列表改变时
  183.         change2(val){
  184.            _this.form1.number=val;
  185.         },
  186.         //获取设备列表
  187.         getEquipment(){
  188.            axios
  189.            .get('/api/SafetyHat/GetEquipment')
  190.            .then(res=>{
  191.                console.log(res)
  192.                if(res.ResultType==0){
  193.                     _this.equipment=res.Data.pu;
  194.                     _this.class1=_this.equipment.map((item)=>{
  195.                         return {
  196.                             value:item.LineID
  197.                         }
  198.                     })
  199.                     _this.number=_this.equipment.map((item)=>{
  200.                         return {
  201.                             value:item.PuID,
  202.                             label:item.PuName
  203.                         }
  204.                     })
  205.                   console.log(_this.class1)
  206.                }
  207.            })
  208.            .catch(error=>{
  209.                console.log(error)
  210.            })
  211.         },
  212.         baidu(){
  213.             // panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点
  214.             // new BMap.DrivingRoute(map);创建驾车实例
  215.             loadMap('lGct54QCT9vLZ2b4miQlr5KirsBXI1Du').then(()=>{
  216.                     var map = new BMap.Map("map");    // 创建Map实例
  217.                     var point=new BMap.Point(114.471938,38.071433);
  219.                     map.centerAndZoom(point, 11);  // 初始化地图,设置中心点坐标和地图级别
  220.                     //添加地图类型控件
  221.                     map.addControl(new BMap.MapTypeControl({
  222.                         mapTypes:[
  223.                             BMAP_NORMAL_MAP,
  224.                             BMAP_HYBRID_MAP
  225.                         ]}));      
  226.                     map.setCurrentCity("石家庄");          // 设置地图显示的城市 此项是必须设置的
  227.                     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  229.                     var marker=new BMap.Marker(point);  //创建点
  230.                     map.addOverlay(marker);//向地图添加覆盖物 
  231.             })
  232.         },
  233.         // 开始
  234.         play(){
  235.             loadMap('lGct54QCT9vLZ2b4miQlr5KirsBXI1Du').then(()=>{
  236.                 var points = [];
  237.                 axios
  238.                 .get('/api/SafetyHat/GetTrajectory',{
  239.                     params:{
  240.                         LineID:_this.form1.class1,
  241.                         PuID:_this.form1.number,
  242.                         startTime:Date.parse(_this.form2.value1).toString().substr(0,10),
  243.                         endTime:Date.parse(_this.form2.value2).toString().substr(0,10)
  244.                     }
  245.                 })
  246.                 .then(res=>{
  247.                     if(res.ResultType ==0){
  248.                         for(var i=0;i<res.Data.length;i++){
  249.                             points.push(new BMap.Point(res.Data[i].Longitude,res.Data[i].Latidude))
  250.                         }
  251.                         if(_this.index < points.length) {
  252.                             _this.timer = window.setInterval(function(){
  253.                                 //位置的移动
  254.                                 _this.index++;
  255.                                 var point = points[_this.index];
  256.                                 _this.car.setPosition(point);
  257.                                 _this.map.addOverlay(_this.car);
  259.                                 //当前时间移动
  260.                                 var arr1=[];
  261.                                 for(var i=0;i<res.Data.length;i++){
  262.                                     arr1.push(res.Data[i].GpsTime)
  263.                                     arr1[i]=moment(arr1[i]*1000).format('YYYY-MM-DD HH:mm:ss')
  264.                                 }
  265.                                 _this.date=arr1[_this.index];
  267.                                 // 速度移动
  268.                                 var arr2=[];
  269.                                 for(var i=0;i<res.Data.length;i++){
  270.                                     arr2.push(res.Data[i].Speed)
  271.                                 }
  272.                                 _this.speed=arr2[_this.index];
  274.                                 //清除定时器
  275.                                 if(_this.index == points.length){
  276.                                     window.clearInterval(_this.timer)
  277.                                     _this.date=arr1[arr1.length-1];
  278.                                     _this.speed=0;
  279.                                 }
  280.                             }, 500);
  281.                         }
  282.                     }
  283.                 })
  284.                 .catch(error=>{
  285.                     console.log(error)
  286.                 })
  287.             })
  288.         },
  289.         // 暂停
  290.         pause(){
  291.             if(_this.timer) {  
  292.                 window.clearInterval(_this.timer);  
  293.             }
  294.         },
  295.         // 重放
  296.         reset(){
  297.             loadMap('lGct54QCT9vLZ2b4miQlr5KirsBXI1Du').then(()=>{
  298.                 var points = [];
  299.                 axios
  300.                 .get('/api/SafetyHat/GetTrajectory',{
  301.                     params:{
  302.                         LineID:_this.form1.class1,
  303.                         PuID:_this.form1.number,
  304.                         startTime:Date.parse(_this.form2.value1).toString().substr(0,10),
  305.                         endTime:Date.parse(_this.form2.value2).toString().substr(0,10)
  306.                     }
  307.                 })
  308.                 .then(res=>{
  309.                     if(res.ResultType ==0){
  310.                         for(var i=0;i<res.Data.length;i++){
  311.                             points.push(new BMap.Point(res.Data[i].Longitude,res.Data[i].Latidude))
  312.                         }
  314.                         points = _this.driving.getResults().getPlan(0).getRoute(0).getPath();
  315.                         if(_this.timer) {  
  316.                             window.clearInterval(_this.timer);  
  317.                         }  
  318.                         _this.index = 0;  
  319.                         _this.car.setPosition(points[0]);
  320.                         _this.play();
  321.                         _this.centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
  322.                         _this.map.panTo(_this.centerPoint);
  323.                     }
  324.                 })
  325.                 .catch(error=>{
  326.                     console.log(error)
  327.                 })
  328.             })
  329.         },
  330.         // 清除轨迹
  331.         clear(){
  332.            _this.map.clearOverlays();
  333.            window.clearInterval(_this.timer);
  334.         },
  335.         // 查询
  336.         inquiry(){
  337.              loadMap('lGct54QCT9vLZ2b4miQlr5KirsBXI1Du').then(()=>{
  338.                     var points = [];
  339.                     axios
  340.                     .get('/api/SafetyHat/GetTrajectory',{
  341.                         params:{
  342.                             LineID:_this.form1.class1,
  343.                             PuID:_this.form1.number,
  344.                             startTime:Date.parse(_this.form2.value1).toString().substr(0,10),
  345.                             endTime:Date.parse(_this.form2.value2).toString().substr(0,10)
  346.                         }
  347.                     })
  348.                     .then(res=>{
  349.                         console.log(res)
  350.                         if(res.ResultType ==0){
  351.                             for(var i=0;i<res.Data.length;i++){
  352.                                 points.push(new BMap.Point(res.Data[i].Longitude,res.Data[i].Latidude))
  353.                             }
  355.                             //初始化地图,选取第一个点为起始点  
  356.                             _this.map = new BMap.Map("map");  
  357.                             _this.map.centerAndZoom(points[0],11);  
  358.                             _this.map.enableScrollWheelZoom();  
  359.                             _this.map.addControl(new BMap.NavigationControl());  
  360.                             _this.map.addControl(new BMap.ScaleControl());  
  361.                             _this.map.addControl(new BMap.OverviewMapControl({isOpen: true}));  
  364.                             //通过DrivingRoute获取一条路线的point  
  365.                             _this.driving = new BMap.DrivingRoute(_this.map);  
  366.                             _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));
  367.                             _this.driving.setSearchCompleteCallback(function() { 
  368.                                 //画面移动到起点和终点的中间  
  369.                                 _this.centerPoint = new BMap.Point(points[0].lng,points[0].lat);  
  370.                                 _this.map.panTo(_this.centerPoint);  
  371.                                 //连接所有点  
  372.                                 _this.map.addOverlay(new BMap.Polyline(points, {strokeColor: "blue", strokeWeight:4, strokeOpacity: 1}));  
  374.                                 //显示安全帽
  375.                                 _this.label = new BMap.Label("安全帽", {offset: new BMap.Size(-10, -20)}); 
  377.                                 var icon = new BMap.Icon('../../../static/imgs/cap.png', new BMap.Size(25, 20), {
  378.                                     anchor: new BMap.Size(10, 20)
  379.                                 });
  380.                                 _this.car = new BMap.Marker(points[0],{icon:icon});
  381.                                 _this.car.setLabel(_this.label);  
  382.                                 _this.map.addOverlay(_this.car);
  383.                             });
  385.                             //计算总里程数
  386.                             var point1=new BMap.Polyline(points);//BMapLib.GeoUtils
  387.                             _this.totalMi=(BMapLib.GeoUtils.getPolylineDistance(points).toFixed(0)/1000).toFixed(1);
  388.                             console.log(points)
  390.                             var end=res.Data[0].GpsTime-res.Data[res.Data.length-1].GpsTime;
  391.                             _this.hour= parseInt((end % (60 * 60 * 24)) / ( 60 * 60));
  392.                             _this.minute= parseInt((end % ( 60 * 60)) / ( 60));
  393.                             _this.second= (end % (60));
  395.                         }else{
  396.                             _this.$message.error('获取轨迹失败!您所选时间暂时没有轨迹或者未选择班组和设备编号!');
  397.                         }
  398.                     })
  399.                     .catch(error=>{
  400.                         console.log(error)
  401.                     })
  402.              })
  403.         }
  404.     }
  405. }
  406. </script>
  408. <style scoped>
  409. /* .map{
  410.   width:89%;
  411.   height:900px;
  412.   float:right;
  413. } */
  414. #map{
  415.     width:81%;
  416.     height:980px;
  417.     float:right;
  418. }
  419. .left{
  420.     width:19%;
  421.     height:980px;
  422.     float:left;
  423.     background: #e0eeee;
  424.     padding:10px 5px;
  425. }
  426. h5{
  427.     position: relative;
  428. }
  429. h5:after{
  430.     position: absolute;
  431.     bottom:-6px;
  432.     left:0;
  433.     background: #ccc;
  434.     width:100%;
  435.     content:'';
  436.     height:1px;
  437. }
  438. .she_bei,.time{
  439.     font-size:13px;
  440. }
  441. .status{
  442.     margin-top: 15px;
  443. }
  444. .status div{
  445.     margin-top: 10px;
  446.     font-size:13px;
  447.     color:#999;
  448.     padding-left: 10px;
  449.     box-sizing: border-box;
  450. }
  451. .status div span{
  452.     color:black;
  453.     margin-right: 10px;
  454. }
  455. .hui_fang{
  456.     margin-top: 15px;
  457. }
  458. </style>

2 实时监控

  1. <template>
  2.     <div class="monitor">
  3.         <!--面包屑-->
  4.         <span class="content_span">
  5.             <el-breadcrumb separator-class="el-icon-arrow-right">
  6.                 <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
  7.                 <el-breadcrumb-item>后台管理</el-breadcrumb-item>
  8.                 <el-breadcrumb-item>人员管理</el-breadcrumb-item>
  9.                 <el-breadcrumb-item>{
  10.    {this.$route.meta.title}}</el-breadcrumb-item>
  11.             </el-breadcrumb>
  12.         </span>
  13.         <!-- 左侧信息 -->
  14.         <div class="left">
  15.             <el-tree 
  16.               :data="data" 
  17.               :props="defaultProps"
  18.               show-checkbox
  19.               @check-change="handleCheckChange">
  20.               <span class="custom-tree-node" slot-scope="{ node, data }">
  21.                 <span>
  22.                     <i :class="node.icon"></i>{
  23.    { node.label }}
  24.                 </span>              
  25.             </span>
  26.             </el-tree>
  27.         </div>
  29.         <!-- 地图 -->
  30.         <div id="map">
  32.         </div>
  34.         <!-- 下面的展示区域 -->
  35.         <div class="bottom">
  36.               <el-table
  37.                 :data="tableData"
  38.                 style="width: 100%">
  39.                 <el-table-column
  40.                     prop="Name"
  41.                     label="设备名称"
  42.                     width="200">
  43.                 </el-table-column>
  44.                 <el-table-column
  45.                     prop="Address"
  46.                     label="地理位置">
  47.                 </el-table-column>
  48.                 <el-table-column
  49.                     prop="Speed"
  50.                     label="速度"
  51.                     width="200">
  52.                 </el-table-column>
  53.                 <el-table-column
  54.                     prop="Time"
  55.                     label="上报时间"
  56.                     width="300">
  57.                 </el-table-column>
  58.                 <el-table-column
  59.                     prop="IsStatus"
  60.                     label="是否在线"
  61.                     width="200">
  62.                 </el-table-column>
  63.              </el-table>
  64.         </div>
  65.     </div>
  66. </template>
  68. <script>
  69. var _this;
  70. import axios from '../../apiconfig/index.js';
  71. import loadMap from '../../../static/js/loadBMap';
  72. const moment=require('moment');
  73. export default {
  74.     data(){
  75.         return {
  76.            data:[{
  77.                 label: '设备列表',
  78.                 children: [{
  79.                     label: 'HBWS',
  80.                         children: [{
  81.                             label:"1095001"
  82.                         }]
  83.                 }]
  84.            }],
  85.            defaultProps: {
  86.               children: 'children',
  87.               label: 'label'
  88.            },
  90.            map:'',
  91.            point:'',
  92.            marker:'',
  93.            label:'',
  94.            icon:'',
  95.            timer:null,
  97.            description:{
  98.                 type:String,
  99.                 default:'天安门'
  100.            },
  101.            pu:[],
  103.            tableData:[]
  105.         }
  106.     },
  107.     mounted(){
  108.        _this=this;
  109.        _this.getPuName();
  110.        window.localStorage.removeItem('PuID');
  111.        _this.baidu();
  112.     },
  113.     beforeDestroy(){
  114.       clearInterval(_this.timer);
  115.     },
  116.     methods:{
  117.        //获取getPuName
  118.        getPuName(){
  119.             axios
  120.             .get('/api/SafetyHat/GetEquipment')
  121.             .then(res=>{
  122.                 console.log(res)
  123.                 if(res.ResultType==0){
  124.                     _this.pu=res.Data.pu;
  125.                     _this.data[0].children[0].children=res.Data.pu.map((item)=>{
  126.                         return {
  127.                             label:item.PuName
  128.                         }
  129.                     })
  130.                 }
  131.             })
  132.             .catch(error=>{
  133.                 console.log(error)
  134.             })
  135.        },
  136.        //设置定时器
  137.        setDing(){
  138.             if(localStorage.getItem('PuID') != undefined && localStorage.getItem('PuID') != null){
  139.                 //封装函数
  140.                 function move(){
  141.                     console.log('666')                    
  142.                         _this.map.removeOverlay(_this.marker);
  143.                         axios
  144.                         .get('/api/SafetyHat/Monitor',{
  145.                             params:{
  146.                                 PuID:localStorage.getItem('PuID') || ''
  147.                             }
  148.                         })
  149.                         .then(res=>{
  150.                             console.log(res)
  151.                             var PuName=_this.pu.find(itm=>{return itm.PuID==localStorage.getItem('PuID')}).PuName
  152.                             if(res.ResultType==0){
  153.                                 _this.point=new BMap.Point(res.Data[0].Longitude,res.Data[0].Latidude);
  154.                                 if(res.Data[0].State == 1){
  155.                                     _this.icon=new BMap.Icon('../../../static/imgs/map1.png', new BMap.Size(25, 20), {
  156.                                             anchor: new BMap.Size(10, 20)
  157.                                     });
  158.                                 }else{
  159.                                     _this.icon=new BMap.Icon('../../../static/imgs/cap.png', new BMap.Size(25, 20), {
  160.                                             anchor: new BMap.Size(10, 20)
  161.                                     });
  162.                                 }
  163.                                 _this.map.centerAndZoom(_this.point, 17);
  164.                                 _this.label = new BMap.Label(PuName, {offset: new BMap.Size(-10, 25)});
  165.                                 _this.marker=new BMap.Marker(_this.point,{icon:_this.icon});
  166.                                 _this.marker.setLabel(_this.label)
  167.                                 _this.map.addOverlay(_this.marker);
  169.                                 //点击出现框框
  170.                                 var opts ={
  171.                                         width :250,
  172.                                         height:200,
  173.                                         title :"地址：",
  174.                                 }
  175.                                 var infoWindow =new BMap.InfoWindow('aaaaa',opts);// 创建信息窗口对象
  176.                                 _this.marker.addEventListener("click",function(){
  177.                                     _this.map.openInfoWindow(infoWindow,_this.point);
  178.                                 });
  179.                                 //根据经纬度获取地址
  180.                                 var geolocation = new BMap.Geolocation();
  181.                                 var gc = new BMap.Geocoder();
  182.                                 var pointAdd = new BMap.Point(res.Data[0].Longitude, res.Data[0].Latidude);
  183.                                 gc.getLocation(pointAdd, function(rs){
  184.                                     //console.log(rs.address)
  185.                                     //点击给底部赋值
  186.                                     _this.tableData=res.Data.map((item)=>{
  187.                                         return {
  188.                                             Name:PuName,
  189.                                             Address:rs.address,
  190.                                             Speed:item.Speed+'km/h',
  191.                                             Time:moment(item.GpsTime*1000).format('YYYY-MM-DD HH:mm:ss'),
  192.                                             IsStatus:item.State == 0 ? '在线':'不在线'
  193.                                         }
  194.                                     })
  195.                                 })
  197.                             }
  198.                         })
  199.                         .catch(error=>{
  200.                             console.log(error)
  201.                         })                    
  202.                 }
  203.                 move();
  204.                 //调用定时器
  205.                 _this.timer=setInterval(move,20000);
  206.             }
  207.        },
  208.        baidu(){
  209.             // panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点
  210.             // new BMap.DrivingRoute(map);创建驾车实例
  211.             loadMap('lGct54QCT9vLZ2b4miQlr5KirsBXI1Du').then(()=>{
  212.                     _this.map = new BMap.Map("map");    // 创建Map实例
  213.                     _this.point=new BMap.Point(114.471938,38.071433);
  215.                     _this.map.centerAndZoom(_this.point, 15);  // 初始化地图,设置中心点坐标和地图级别
  216.                     //添加地图类型控件
  217.                     _this.map.addControl(new BMap.MapTypeControl({
  218.                         mapTypes:[
  219.                             BMAP_NORMAL_MAP,
  220.                             BMAP_HYBRID_MAP
  221.                         ]}));      
  222.                     _this.map.setCurrentCity("石家庄");          // 设置地图显示的城市 此项是必须设置的
  223.                     _this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  225.                     //调用定时器
  226.                     _this.setDing();
  228.             })
  229.         },
  230.         //多选框点击时
  231.         handleCheckChange(data, checked, indeterminate) {
  232.                 if(checked==true){
  233.                         var PuID=_this.pu.find(itm=>{return itm.PuName==data.label}).PuID;
  234.                         window.localStorage.setItem('PuID',PuID);
  235.                         axios
  236.                         .get('/api/SafetyHat/Monitor',{
  237.                             params:{
  238.                                 PuID:localStorage.getItem('PuID') || ''
  239.                             }
  240.                         })
  241.                         .then(res=>{
  242.                             console.log(res)
  243.                             if(res.ResultType==0){
  244.                                     _this.setDing();
  245.                                 } 
  246.                         })
  247.                         .catch(error=>{
  248.                             console.log(error)
  249.                         })
  250.                 }else{
  251.                     window.localStorage.removeItem('PuID')
  252.                     clearInterval(_this.timer);
  253.                     _this.map.removeOverlay(_this.marker);
  254.                 }
  255.         },
  256.     }
  257. }
  258. </script>
  260. <style scoped>
  261.  /* .monitor{
  262.     width:89%;
  263.     height:900px;
  264.     float:right;
  265.  } */
  266.  .left{
  267.     width:15%;
  268.     height:980px;
  269.     float:left;
  270.     background: #e0eeee;
  271.     padding:10px 5px;
  272. }
  273. #map{
  274.     width:85%;
  275.     height:980px;
  276.     float:right;
  277.  }
  278. .el-tree{
  279.     background: #e0eeee;
  280.     font-size:13px;
  281. }
  282. .bottom{
  283.     width:89%;
  284.     height:100px;
  285.     position: absolute;
  286.     left:11%;
  287.     bottom:0;
  288. }
  289. .bottom .el-table{
  290.     background: #eee;
  291. }
  292. </style>

这里边包含了轨迹回放和实时监控。轨迹回访里包括查询轨迹，开始，暂停，重放和清除轨迹；实时监控里包括了设备的实时查看监控。

写的备注有点不是很多，但是都是百度地图的api，还有一些js逻辑，没有别的东西。

发表评论

表情：
评论列表 （有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

    相关 百度地图的使用教程

    内容介绍 1.了解地图的使用场景 2.百度地图介绍 3.显示公司地址案例 4.展示到公司路线案例 一、使用场景 地图的使用场景非常广泛。地图定位可以更直观

    忘是亡心i忘是亡心i/ 0 赞/ 246 阅读