|
|
|
|
@ -1,11 +1,9 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="map_warp"> |
|
|
|
|
<div id="container" style="width:100%;height:100%"></div> |
|
|
|
|
</div> |
|
|
|
|
<div id="container" style="width:100%;height:100%;"></div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { lunzApi, appKey, key, carList } from "@/api/data"; |
|
|
|
|
import { lunzApi, appKey, key, carList, styleJson } from "@/api/data"; |
|
|
|
|
import { dateFormat } from "@/util/date"; |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
@ -21,6 +19,7 @@ export default { |
|
|
|
|
markList: [],//标注点记录 |
|
|
|
|
polyline: null,//昨日轨迹 |
|
|
|
|
viewData: [],//点聚合坐标集合 |
|
|
|
|
// endPointMarker:null,//轨迹终点标记 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
beforeDestroy() { |
|
|
|
|
@ -43,14 +42,22 @@ export default { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
//回到原中心点 |
|
|
|
|
backMap() { |
|
|
|
|
var point = new BMapGL.Point(118.880278, 35.649947); |
|
|
|
|
this.baiduMap.centerAndZoom(point, 11); |
|
|
|
|
}, |
|
|
|
|
initMap() { |
|
|
|
|
this.baiduMap = new BMapGL.Map('container'); |
|
|
|
|
var point = new BMapGL.Point(118.880278, 35.649947); |
|
|
|
|
this.baiduMap.centerAndZoom(point, 11); |
|
|
|
|
this.baiduMap.enableScrollWheelZoom(true); |
|
|
|
|
// this.baiduMap.setMapStyleV2({ |
|
|
|
|
// styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'// |
|
|
|
|
// }); |
|
|
|
|
this.baiduMap.setMapStyleV2({ |
|
|
|
|
styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'// |
|
|
|
|
}); |
|
|
|
|
styleJson |
|
|
|
|
}) |
|
|
|
|
// this.view = new mapvgl.View({ |
|
|
|
|
// map: this.baiduMap |
|
|
|
|
// }); |
|
|
|
|
@ -70,6 +77,10 @@ export default { |
|
|
|
|
// isPoiMask: true, |
|
|
|
|
// isMapMask: true, |
|
|
|
|
// showRegion: 'inside', |
|
|
|
|
// topFillColor: '#5679ea', |
|
|
|
|
// topFillOpacity: 0.5, |
|
|
|
|
// sideFillColor: '#5679ea', |
|
|
|
|
// sideFillOpacity: 0.9 |
|
|
|
|
// }); |
|
|
|
|
// this.baiduMap.addOverlay(mapmask); |
|
|
|
|
var border = new BMapGL.Polyline(ptArr, { |
|
|
|
|
@ -139,15 +150,17 @@ export default { |
|
|
|
|
// objdata: { carNo: carNo, deviceId: key, resData: res.Data, res2Data: res2.Data } |
|
|
|
|
// }) |
|
|
|
|
this.markList.push(marker); |
|
|
|
|
let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;"> |
|
|
|
|
<div>车牌号：${carNo}</div> |
|
|
|
|
<div>设备位置：${res2.Data}</div> |
|
|
|
|
<div>最后定位时间：${res.Data.GPSTimeStamp.replace("T", " ")}</div> |
|
|
|
|
<div>状态：${this.locationStatus[res.Data.SbcStatus]}</div> |
|
|
|
|
<div>时速：${res.Data.spd}km/h</div> |
|
|
|
|
<div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${deviceId}">行车轨迹</div> |
|
|
|
|
let sContent = `<div style="font-size:14px;line-height:22px;padding:0 0 0 25px;"> |
|
|
|
|
<div style="display:flex;align-items:center;margin-bottom:20px;font-style: italic;font-size:20px;font-family: FZSK;"> |
|
|
|
|
<div style="color: #ffffff;margin-right:15px;">${carNo}</div> |
|
|
|
|
<div style="display:inline-block;color:${res.Data.SbcStatus==3?"#ffffff":"#062766"};background:${res.Data.SbcStatus==3?"#1dd58e":"#9ab3c6"};width:50px;height:24px;line-height:24px;text-align:center;border-radius:12px;font-size:16px;">${this.locationStatus[res.Data.SbcStatus]}</div> |
|
|
|
|
<div style="margin-left:45px;color: #fff;font-style: italic;font-size:20px;margin-right:15px;">${res.Data.spd}km/h</div> |
|
|
|
|
</div> |
|
|
|
|
<div style="display:flex;margin-bottom:10px;"><div style="color: #ffffff;width:80px;">设备位置：</div><div style="color: #ffffff;flex:1;">${res2.Data}</div></div> |
|
|
|
|
<div style="display:flex;"><div style="color: #ffffff;width:100px;">最后定位时间：</div><div style="color: #ffffff;flex:1;">${res.Data.GPSTimeStamp.replace("T", " ")}</div></div> |
|
|
|
|
<div style="text-align:center;margin:15px 0 0;"> <div style="display: inline-block;width:88px;height:30px;line-height:30px;border-radius: 15px;text-align:center;color: #1b2f57;font-style: italic;font-family: FZSK;cursor: pointer;background:#facd89;font-size:18px;font-weight:bold;" id="btnPath_${deviceId}">行车轨迹</div></div> |
|
|
|
|
</div>`; |
|
|
|
|
let infoWindow = new BMapGL.InfoWindow(sContent); |
|
|
|
|
let infoWindow = new BMapGL.InfoWindow(sContent,{width:367,height:220}); |
|
|
|
|
// marker添加点击事件 |
|
|
|
|
infoWindow.addEventListener('open', () => { |
|
|
|
|
document.getElementById('btnPath_' + deviceId).addEventListener('click', () => { |
|
|
|
|
@ -248,8 +261,19 @@ export default { |
|
|
|
|
this.baiduMap.removeOverlay(this.polyline); |
|
|
|
|
this.polyline = null; |
|
|
|
|
} |
|
|
|
|
this.polyline = new BMapGL.Polyline(point, { strokeColor: '#F5533D', strokeWeight: 5, strokeOpacity: 1, }) |
|
|
|
|
this.polyline = new BMapGL.Polyline(point, { strokeColor: '#ffe954', strokeWeight: 4, strokeOpacity: 1, }) |
|
|
|
|
this.baiduMap.addOverlay(this.polyline); |
|
|
|
|
//终点标注maker |
|
|
|
|
if(this.endPointMarker){ |
|
|
|
|
this.baiduMap.removeOverlay(this.endPointMarker); |
|
|
|
|
this.endPointMarker = null; |
|
|
|
|
} |
|
|
|
|
// var myIcon = new BMapGL.Icon(require("@/assets/images/end_point_icon.png"), new BMapGL.Size(37, 44)); |
|
|
|
|
// this.endPointMarker = new BMapGL.Marker(point[point.length-1], { |
|
|
|
|
// icon: myIcon |
|
|
|
|
// }); |
|
|
|
|
// console.log('最后一个坐标',point[point.length-1]) |
|
|
|
|
// this.baiduMap.addOverlay(this.endPointMarker); |
|
|
|
|
this.baiduMap.centerAndZoom(point[0], 15); |
|
|
|
|
this.baiduMap.closeInfoWindow(); |
|
|
|
|
// this.polyline = new BMapGL.Polyline(point, { |
|
|
|
|
|
jinna
3 years ago
