高德地图marker车辆实时移动

高德地图marker车辆实时移动

2020-12-05

高德地图基础总结

socket实时移动marker
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
//初始化地图添加实时移动的车辆
addVehicle(data){
    var hasVehicle = false;//没有实时行驶的车辆
    //循环marker图层
    this.markerList.forEach(item=>{
       this.map.setZoomAndCenter(15, item.getPosition());
         //如果id相同是当前车辆
        if (item.getExtData().id === data.vehicleId) {
            hasVehicle = true;
            if (item.getExtData().id === data.vehicleId) {
               hasVehicle = true;
               if (item.getExtData().time !== data.time) {
                   item.getExtData().time = data.time;
                   let hea = Math.round(data.hea);

                   item.setContent('<div class="iwrap">' +
                        '<span class="textW">' + item.getExtData().vehicleNum + '</span>'+
                       '<img src="/monitor/static/img/car_icon.png" alt=""  >' +
                       '</div>')
                   //车头可以拐弯 hea 角度
                   item.setContent(item.getContent().replace(/rotate\((\w)*\)/, 'rotate(' + hea + 'deg)'))
                   if (this.carList.length != 0) {
                       if (item.getExtData().SN == this.carList[this.carList.length - 1]) {
                           item.moveTo([data.lon, data.lat], (item.getPosition().distance([data.lon, data.lat])) * 1.6)
                       } else {
                           item.moveTo([data.lon, data.lat], (item.getPosition().distance([data.lon, data.lat])) * 1.6)
                       }
                   }else {
                       item.moveTo([data.lon, data.lat], (item.getPosition().distance([data.lon, data.lat])) * 1.6)
                   }
               }
           }
        }
    })
    if (!hasVehicle) {
        let vehicleId = data.vehicleId;//车辆id
        let vehicleNum = data.vehicleNum;
        let vehicleStatus = 0 //车辆状态
        var html = '<div  class="iwrap">' +
            '<span class="textW">' + vehicleNum + '</span>'+
            '<img src="/monitor/static/img/car_icon.png" alt=""  >' +
            '</div>'
        var testMark = new AMap.Marker({
            position: [data.lon, data.lat],
            content: html,
            offset: new AMap.Pixel(0, -72),
            extData: {
                id: vehicleId,
                vehicleNum: vehicleNum,
                selectStatus: vehicleStatus,
                currentSpd: data.spd,
                SN: data.deviceSn,
                time: data.time,
                data:data,
                emergencyStatus: data.emergencyStatus
            }
        });
        this.markerList.push(testMark);
        this.map.add(testMark);
    }

}
posted @ 2021-03-15 10:07  lianggl  阅读(177)  评论(0)    收藏  举报