路线绘制体现速度变化

frontend/matrix-middle-service-web/src/views/record/logic/lines.ts

@@ -1,32 +1,72 @@
 import {randomColorList} from "matrix-middle-service-web/src/views/record/logic/color";
 import {createCanvasDir} from "matrix-middle-service-web/src/views/record/logic/icon";
+import {getAvgSpeed, getMaxSpeed} from "matrix-middle-service-web/src/views/record/logic/speed";
 
 const canvasDir = createCanvasDir();
-
+const SLOW = "#ff0036"
+const NORMAL = "#ff8119"
+const FAST = "#AF5"
 export function drawLines(map,data,lines){
     map.remove(data.polylines)
     data.polylines = []
     let colorList = randomColorList(lines.length)
 
     lines.forEach((_data,index) => {
-        let path = _data.map((item) => {
-            return new AMap.LngLat(item.longitude, item.latitude)
-        })
+        let max = getMaxSpeed(_data)
+        let avg = getAvgSpeed(_data)
 
-        let polyline = new AMap.Polyline({
-            path: path,
-            showDir: true,
-            dirImg: canvasDir,
-            borderWeight: 6, // 线条宽度，默认为 1
-            strokeWeight: 6,
-            strokeOpacity: 0.9, // 透明度
-            strokeColor: colorList[index], // 线条颜色
-            dirColor: 'white',
-            lineJoin: 'round' // 折线拐点连接处样式})
+        let p:any = []
+        for (let i = 0; i < _data.length; i++) {
+            let item = _data[i]
+            let speed = item.speed || 0
+            let type
+            if(speed < avg / 2){
+                type= SLOW
+            } else if(speed >= avg/2 && speed < avg){
+                type = NORMAL
+            } else {
+                type = FAST
+            }
+
+            if(p.length === 0){
+                p.push({
+                    path: [new AMap.LngLat(item.longitude, item.latitude)],
+                    strokeColor: type,
+                })
+            } else {
+                if(p[p.length - 1].strokeColor === type){
+                    p[p.length - 1].path.push(new AMap.LngLat(item.longitude, item.latitude))
+                } else {
+                    let prevPath = p[p.length - 1].path
+                    let prev = prevPath[prevPath.length - 1]
+                    p.push({
+                        path: [prev, new AMap.LngLat(item.longitude, item.latitude)],
+                        strokeColor: type,
+                    })
+                }
+            }
+        }
+        console.log("p",p)
+
+        let polylineArr:any[] = []
+        p.forEach((item)=>{
+            let polyline = new AMap.Polyline({
+                path: item.path,
+                showDir: true,
+                dirImg: canvasDir,
+                borderWeight: 6, // 线条宽度，默认为 1
+                strokeWeight: 6,
+                strokeOpacity: 0.9, // 透明度
+                strokeColor: item.strokeColor, // 线条颜色
+                dirColor: 'white',
+                lineJoin: 'round' // 折线拐点连接处样式})
+            })
+            polylineArr.push(polyline)
         })
-        data.polylines.push(polyline)
+        data.polylines.push(polylineArr)
     })
 
+    data.polylines = data.polylines.flat()
     console.log("polylines",data.polylines)
     map.add(data.polylines)
 }