一：给map添加车辆运动轨迹以及上车点和下车点，以及展示在每个位置的具体信息
- 通过polyline属性画出车辆运动的轨迹，路线重车用红色线表示，空车用蓝色线表示
- 通过markers属性把车辆以及开始结束标记点显示到指定位置，车辆图标有4种，分别是空车、重车、报警、离线
- 每毫秒调用小车位置到下一个位置
- 并且获取所有信息展示在页面上
- 前端转化上车点和下车点，根据传入的数据有人在车上就是重车，无人就是空车，空车到重车,上车坐标点，重车到空车,下车坐标点。获取到坐标点后并把坐标点展示在地图上
- 其中可以调试车辆速度
- 实现如下图所示的效果
二：具体代码分析如下
1.调用map组件
<map class="map" id="map" :latitude="latitude" :longitude="longitude" :scale="11" :polyline="polyline" :markers="markers">
2.在computed函数里面，首先调用polyline属性，画出地图的路线，并且路线分为两部分重车和空车，路线重车用红色线表示，空车用蓝色线表示，并且把上车下车的坐标点打上
- 先通过polyline属性画出车辆运动的轨迹
- 先把车辆定位到开始位置，根据vflag判断如果大于0就是重车路线，等于0就是空车路线，在地图上显示路线重车用红色线表示，空车用蓝色线表示，数据前后端处理都可以（这里说下前端处理方式）吧数据处理成一段一段的数组放入polyline中，处理完如果给的数据中间有断裂的点，需要获取下一组第一个点放入到上一组的最后一个位置链接起来后台数据如下：
- 在重车路线中判断前一个坐标点跟后一个坐标点是否一样，如果不一样就是下车标记点
- 在空车路线中判断前一个坐标点跟后一个坐标点是否一样，如果不一样就是上车标记点
- 最后把这些标记点添加到markers属性中，
- 本接口目前只有空车、重车，代码如下：
polyline() {
let points = []
let result = [];
let numobj = {}
let numobjtow = {}
let arr = [];
let iiiii = 1
let that = this
that.mapLiat = []
if(that.mapnew && that.mapnew.length > 0) {
let mapnewData = JSON.parse(JSON.stringify(that.mapnew))
let f = mapnewData[0].vflag
mapnewData.forEach((item, index, arrMap) => {
let playNumber = []
let markNew = {}
if(item.vflag > 0) {
// 重车
var result1 = util.transformFromWGSToGCJ(item.lat * 1, item.lon * 1);
that.mapLiat.push({
latitude: result1.latitude,
longitude: result1.longitude,
carImg: imgUrl.mapIconz,
rotate: item.head
})
//重车到空车,下车坐标点
if(item.vflag !== f) {
markNew.nameId = 0
markNew.latitude = result1.latitude
markNew.longitude = result1.longitude
markNew.iconPath = imgUrl.staticTrain
markNew.width = 18
markNew.height = 18
markNew.id = index + '0'
markNew.anchor = {
x: 0.5,
y: 0.5
}
arr.push(markNew)
iiiii = iiiii + 1
points.push({
'number': iiiii,
'result': result1,
'car': '1'
})
f = item.vflag
} else {
points.push({
'number': iiiii,
'result': result1,
'car': '1'
})
}
} else if(item.vflag == 0) {
// 空车
var result2 = util.transformFromWGSToGCJ(item.lat * 1, item.lon * 1);
that.mapLiat.push({
latitude: result2.latitude,
longitude: result2.longitude,
carImg: imgUrl.mapIconk,
rotate: item.head
})
//空车到重车,上车坐标点
if(item.vflag !== f) {
markNew.nameId = 1
markNew.latitude = result2.latitude
markNew.longitude = result2.longitude
markNew.iconPath = imgUrl.staticOffCar
markNew.width = 18
markNew.height = 18
markNew.id = index + '0'
markNew.anchor = {
x: 0.5,
y: 0.5
}
arr.push(markNew)
iiiii = iiiii + 1
points.push({
'number': iiiii,
'result': result2,
'car': '0'
})
f = item.vflag
} else {
points.push({
'number': iiiii,
'result': result2,
'car': '0'
})
}
}
})
const numArr = [...new Set(points.map(item => item.number))]
numArr.forEach(item => {
numobj[`points${item}`] = []
numobjtow[`points${item}`] = []
})
let g = points[0].car
for(const k in numobj) {
if(numobj.hasOwnProperty(k)) {
points.forEach((item, index, arr) => {
if(k.split('s')[1] == item.number) {
if(item.car !== g) {
//需要获取下一组第一个点放入到上一组的最后一个位置链接起来,把两个没有连接的点连接起来
if(arr[index - 1]) {
numobj[`points${k.split('s')[1]-1}`].push({
car: arr[index - 1].car,
number: arr[index - 1].number,
result: item.result
})
numobjtow[`points${k.split('s')[1]-1}`].push(item.result)
}
g = item.car
}
numobj[k].push(item)
numobjtow[k].push(item.result)
}
})
//最终组合成不同颜色的线段
result.push({
points: numobjtow[k],
color: numobj[k][0].car == '1' ? '#e90011' : '#28f',
width: 2,
arrowLine: true
})
}
}
that.markersArr = arr
}
that.debounceTime = '1'
uni.hideLoading();
return result
},
- markers坐标点显示
- 车辆轨迹运动，先设置车辆运动的速度
// 判断移动速度是多少,默认3，1000毫秒移动一个坐标点
valueSliderData(itemStar) {
let num = 3
switch (itemStar) {
case 3000:
num = 1
break;
case 2000:
num = 2
break;
case 1000:
num = 3
break;
case 800:
num = 4
break;
case 500:
num = 5
break;
default:
num = 3
break;
}
this.$data.valueSlider = num
},
- 轨迹运动代码:
handleStart() {
this.isStart = !this.isStart //点击开始动画运动按钮，判断是否打开轨迹动画运动
let itemStar = this.itemStar //获取用户自己选择的动画的运动数值
this.valueSliderData(itemStar) //把获取用户自己选择的动画的运动数值，传入获取多少毫秒移动一个坐标点
if (this.isStart) { //如果点击的是开始动画的按钮就运行下方代码
this.timer = setInterval(() => {
this.index = this.index + 1
if (this.index == this.mapLiat.length - 1) {
clearInterval(this.timer)
this.timer = null
}
}, itemStar)
} else {
clearInterval(this.timer)
this.timer = null
}
},
