suojin
/
physical_distribution
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

车辆定位

Browse Source
main
xuechunyuan 3 years ago
parent b28502f6d7
commit 02a98b972b
3 changed files with 121 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      public/index.html
  2. 6
      src/views/components/carMile.vue
  3. 164
      src/views/components/pathMap.vue

4
public/index.html
Unescape View File

@ -6,8 +6,10 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
<!-- <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script> -->
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=FLPUL1102GNBvV2nVDy5kDIjYM9VGyYl"></script>
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
<script src="https://unpkg.com/mapvgl@1.0.0-beta.168/dist/mapvgl.min.js"></script>
<style>
*{
padding: 0;

6
src/views/components/carMile.vue
Unescape View File

@ -27,7 +27,7 @@
<tbody>
<tr v-for="(item, index) in carMile" :key="'car' + index">
<td>{{ index+ 1}}</td>
<td>{{ item.cardNo }}</td>
<td @click="queryMap(item)"><a href="javascript:;">{{ item.cardNo }}</a></td>
<td>{{ item.mile }}</td>
<td><a :href="`https://lcrm3.lunz.cn/#/Equipment/LocatMonitor/Path/${item.key}`" target="_blank">查询</a></td>
</tr>
@ -50,6 +50,10 @@ export default {
this.queryYesterdayMile();
},
methods: {
//定位
queryMap(item) {
this.$emit('queryLunz')
},
//昨日里程
queryYesterdayMile() {
lunzApi.getYesterdayMile(key).then(res => {

164
src/views/components/pathMap.vue
Unescape View File

@ -20,6 +20,7 @@ export default {
carList: carList,//车辆设备
markList: [],//标注点记录
polyline: null,//昨日轨迹
viewData: [],//点聚合坐标集合
}
},
beforeDestroy() {
@ -47,25 +48,15 @@ export default {
var point = new BMapGL.Point(118.880278, 35.649947);
this.baiduMap.centerAndZoom(point, 11);
this.baiduMap.enableScrollWheelZoom(true);
this.baiduMap.setMapStyleV2({
this.baiduMap.setMapStyleV2({
styleId: 'ec6ebc8ad35bcfbd56a424a29f325360'//'ef4f05652d24d0f23332710fbacad245'//
});
// this.baiduMap.setMapType(BMAP_SATELLITE_MAP);
this.view = new mapvgl.View({
map: this.baiduMap
});
var bdary = new BMapGL.Boundary();
bdary.get("日照市莒县", rs => {
var count = rs.boundaries.length;
// var EN_JW = "180, 90;";//东北角
// var NW_JW = "-180, 90;";//西北角
// var WS_JW = "-180, -90;";//西南角
// var SE_JW = "180, -90;";//东南角
// //添加环形遮罩层
// var ply1 = new BMapGL.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
// strokeColor: "none",
// fillColor: "#0e94eb",
// fillOpacity: 0.5,
// strokeOpacity: 0.5
// }); //建立多边形覆盖物
// this.baiduMap.addOverlay(ply1);
for (var i = 0; i < count; i++) {
var xyArr = rs.boundaries[i].split(';');
var ptArr = [];
@ -91,61 +82,132 @@ export default {
// this.baiduMap.addOverlay(ply); //添加覆盖物
}
})
this.carList.map((item, index) => {
this.markList.map(mark => {
this.baiduMap.removeOverlay(mark);
this.baiduMap.addEventListener('tilesloaded', () => {
this.carList.map((item, index) => {
this.markList = [];
this.queryLunz(item.deviceId, item.key, item.cardNo, index);
})
this.markList = [];
this.queryLunz(item.deviceId, item.key);
this.setInterval = setInterval(() => {
this.view.removeAllLayers();
this.markList.map(mark => {
this.baiduMap.removeOverlay(mark);
})
this.markList = [];
this.queryLunz(item.deviceId, item.key);
// this.viewData = [];
this.carList.map((item, index) => {
this.queryLunz(item.deviceId, item.key, item.cardNo, index);
})
}, 20 * 1000)
})
},
//查询定位
queryLunz(deviceId, key) {
lunzApi.getCarUserSimpleByImei(this.appKey, deviceId).then(res1 => {
let carInfo = res1.Data;
lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
// 创建小车图标
var myIcon = new BMapGL.Icon(require("@/assets/images/car.png"), new BMapGL.Size(25, 25));
lunzApi.getBaiduNear(this.appKey, res.Data.BaiduLat, res.Data.BaiduLng).then(res2 => {
// 创建Marker标注，使用小车图标
let lng = res.Data.BaiduLng;
let lat = res.Data.BaiduLat;
let pt = new BMapGL.Point(lng, lat);
var marker = new BMapGL.Marker(pt, {
icon: myIcon
});
// 将标注添加到地图
this.baiduMap.addOverlay(marker);
this.markList.push(marker);
let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
<div>车牌号：${carInfo.PlateNumber}</div>
queryLunz(deviceId, key, carNo, index) {
// lunzApi.getCarUserSimpleByImei(this.appKey, deviceId).then(res1 => {
// let carInfo = res1.Data;
lunzApi.getCurrentDeviceInfoByIMEI(this.appKey, deviceId).then(res => {
// 创建小车图标
var myIcon = new BMapGL.Icon(require("@/assets/images/car.png"), new BMapGL.Size(25, 25));
lunzApi.getBaiduNear(this.appKey, res.Data.BaiduLat, res.Data.BaiduLng).then(res2 => {
// 创建Marker标注，使用小车图标
let lng = res.Data.BaiduLng;
let lat = res.Data.BaiduLat;
let pt = new BMapGL.Point(lng, lat);
var marker = new BMapGL.Marker(pt, {
icon: myIcon
});
// 将标注添加到地图
this.baiduMap.addOverlay(marker);
// this.viewData.push({
// geometry: {
// type: 'Point',
// coordinates: [lng, lat]
// },
// 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_${carInfo.DeviceNumber}">行车轨迹</div>
<div style="display: inline-block;border: 1px solid #eee;border-radius: 3px;padding: 3px 8px;color: #0e94eb;cursor: pointer;" id="btnPath_${key}">行车轨迹</div>
</div>`;
let infoWindow = new BMapGL.InfoWindow(sContent);
// marker添加点击事件
infoWindow.addEventListener('open', () => {
document.getElementById('btnPath_' + carInfo.DeviceNumber).addEventListener('click', () => {
this.queryPath(carInfo.DeviceNumber)
})
});
marker.addEventListener('click', () => {
this.openInfo(infoWindow, pt);
});
})
let infoWindow = new BMapGL.InfoWindow(sContent);
// marker添加点击事件
infoWindow.addEventListener('open', () => {
document.getElementById('btnPath_' + key).addEventListener('click', () => {
this.queryPath(key)
})
});
marker.addEventListener('click', () => {
this.openInfo(infoWindow, pt);
});
//最后一个调用点聚合
// if (index == this.carList.length - 1) {
// console.log('点聚合')
// let clusterLayer = new mapvgl.ClusterLayer({
// // minSize: 1, // 聚合点显示的最小直径
// // maxSize: 15, // 聚合点显示的最大直径
// // clusterRadius: 150, // 聚合范围半径
// // gradient: { 0: 'blue', 0.5: 'green', 1.0: 'red' }, // 聚合点颜色梯度
// // maxZoom: 19, // 聚合的最大级别，当地图放大级别高于此值将不再聚合
// // minZoom: 5, // 聚合的最小级别，当地图放大级别低于此值将不再聚合
// // // 是否显示文字
// // showText: true,
// // // 开始聚合的最少点数，点数多于此值才会被聚合
// minPoints: 1,
// // 设置非聚合的点的icon
// iconOptions: {
// width: 25,
// height: 25,
// icon: require("@/assets/images/car.png"),
// },
// enablePicked: true,
// onClick: (e) => {
// if (e.dataItem) {
// // 可通过dataItem下面的children属性拿到被聚合的所有点
// console.log(e.dataItem);
// if (e.dataItem.children == undefined) {
// let obj = e.dataItem.objdata;
// let lng = obj.resData.BaiduLng;
// let lat = obj.resData.BaiduLat;
// let pt = new BMapGL.Point(lng, lat);
// let sContent = `<div style="padding:0 10px 10px;font-size:14px;line-height:22px;">
// <div>车牌号：${obj.carNo}</div>
// <div>设备位置：${obj.res2Data}</div>
// <div>最后定位时间：${obj.resData.GPSTimeStamp.replace("T", " ")}</div>
// <div>状态：${this.locationStatus[obj.resData.SbcStatus]}</div>
// <div>时速：${obj.resData.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_${obj.deviceId}">行车轨迹</div>
// </div>`;
// this.openWindow(sContent, pt, obj.deviceId);
// }
// }
// },
// });
// this.view.addLayer(clusterLayer);
// clusterLayer.setData(this.viewData);
// }
})
})
// })
},
//信息窗口
openWindow(sContent, pt, DeviceNumber) {
let infoWindow = new BMapGL.InfoWindow(sContent);
// marker添加点击事件
infoWindow.addEventListener('open', () => {
document.getElementById('btnPath_' + DeviceNumber).addEventListener('click', () => {
this.queryPath(DeviceNumber)
})
});
this.openInfo(infoWindow, pt);
},
//昨日轨迹
queryPath(deviceId) {

Write Preview
Loading…
Cancel
Save