|
|
@@ -1,5 +1,6 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
+ <!-- 实时路径 -->
|
|
|
<div class="btnx">
|
|
|
<el-button type="primary" class="" @click="openInfo"
|
|
|
>打开信息窗体</el-button
|
|
|
@@ -87,9 +88,13 @@ export default {
|
|
|
let regExp = /(^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)/;
|
|
|
if (that.carNumber == "") {
|
|
|
this.$message.error("车牌号不能为空！");
|
|
|
+ //清除旧的定时器
|
|
|
+ clearTimeout(this.timer);
|
|
|
return;
|
|
|
} else if (!regExp.test(that.carNumber)) {
|
|
|
this.$message.error("请输入正确的车牌号！");
|
|
|
+ //清除旧的定时器
|
|
|
+ clearTimeout(this.timer);
|
|
|
return;
|
|
|
}
|
|
|
that.axios
|
|
|
@@ -133,6 +138,8 @@ export default {
|
|
|
this.lat = res.data.data.result.lat;
|
|
|
} else {
|
|
|
this.$message.error("车辆暂时无GPS");
|
|
|
+ //清除定时器
|
|
|
+ clearTimeout(this.timer);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
@@ -164,7 +171,31 @@ export default {
|
|
|
var pointmarker = new AMap.Marker({
|
|
|
position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
|
|
icon: pointicon,
|
|
|
- title: title
|
|
|
+ title: title,
|
|
|
+ });
|
|
|
+ // 将创建的点标记添加到已有的地图实例：
|
|
|
+ that.pointmarker = pointmarker;
|
|
|
+ that.map.add(pointmarker);
|
|
|
+ },
|
|
|
+ initPoint(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, 10), // 图像相对展示区域的偏移量，适于雪碧图等
|
|
|
+ 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,
|
|
|
+ label: {
|
|
|
+ direction: 'top',
|
|
|
+ content: title,
|
|
|
+ offset: new AMap.Pixel(-2,10),
|
|
|
+ }
|
|
|
});
|
|
|
// 将创建的点标记添加到已有的地图实例：
|
|
|
that.pointmarker = pointmarker;
|
|
|
@@ -216,10 +247,13 @@ export default {
|
|
|
clearTimeout(this.timer);
|
|
|
that.startTime=that.formatDate(new Date(),"yyyy年MM月dd日 hh:mm:ss");
|
|
|
that.endTime=that.formatDate(new Date(),"yyyy年MM月dd日 hh:mm:ss");
|
|
|
+ console.log(that.startTime+"至"+that.endTime);
|
|
|
//清除path
|
|
|
that.path=[];
|
|
|
//清除所有覆盖物
|
|
|
that.map.clearMap();
|
|
|
+ //设置所有的门岗和汽车衡
|
|
|
+ that.setPoints();
|
|
|
//设置定时器
|
|
|
that.timer=setInterval(()=>{
|
|
|
//清除之前车的图标
|
|
|
@@ -228,8 +262,26 @@ export default {
|
|
|
that.endTime=that.formatDate(new Date(),"yyyy年MM月dd日 hh:mm:ss");
|
|
|
},5000);
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+ //初始化厂内标记点
|
|
|
+ setPoints(){
|
|
|
+ //请求所有汽车衡和门岗
|
|
|
+ let that=this;
|
|
|
+ that.axios.get("/api/v1/otms/mapvertexs/findSelections").then((res)=>{
|
|
|
+ console.log(res.data.data);
|
|
|
+ if(res.data.data){
|
|
|
+ res.data.data.forEach(vertex => {
|
|
|
+ that.initPoint(
|
|
|
+ 20,
|
|
|
+ 25,
|
|
|
+ require("@/assets/img/map_site.png"),
|
|
|
+ vertex.longitude,
|
|
|
+ vertex.latitude,
|
|
|
+ vertex.addressName
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
//初始化窗体
|
|
|
initCustomMarkes(title, details, lon, lat) {
|
|
|
let that = this;
|
|
|
@@ -261,37 +313,6 @@ export default {
|
|
|
console.log(this.lat);
|
|
|
this.infoClose=false;
|
|
|
infoWindow.open(this.map, [this.lon, this.lat]);
|
|
|
- },
|
|
|
- //初始化轨迹
|
|
|
- initPolyline() {
|
|
|
- let that = this;
|
|
|
- // 创建一个 Polyline 实例：
|
|
|
- var polyline = new AMap.Polyline({
|
|
|
- path: that.path,
|
|
|
- borderWeight: 2, // 线条宽度，默认为 1
|
|
|
- strokeColor: "#18BFA6", // 线条颜色
|
|
|
- lineJoin: "round" // 折线拐点连接处样式
|
|
|
- // arrowIconPath: require("@/assets/img/traffic_texture_darkred-pass.png")//箭头图片，似乎不支持
|
|
|
- });
|
|
|
- // 将创建的线路添加到已有的线路中去：
|
|
|
- that.map.add(polyline);
|
|
|
- },
|
|
|
-
|
|
|
- //定时取得当前位置并加入轨迹中去，点击查询时触发，同时清除path和旧的定时器
|
|
|
- initTimer() {
|
|
|
- let that = this;
|
|
|
- //清除旧的定时器
|
|
|
- clearTimeout(this.timer);
|
|
|
- //清除path
|
|
|
- that.path = [];
|
|
|
- //清除所有覆盖物
|
|
|
- that.map.clearMap();
|
|
|
- //设置定时器
|
|
|
- that.timer = setInterval(() => {
|
|
|
- //清除之前车的图标
|
|
|
- that.map.remove(that.pointmarker);
|
|
|
- that.initData();
|
|
|
- }, 4000);
|
|
|
}
|
|
|
}
|
|
|
};
|
