支持动态筛选路线

frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue

@@ -118,6 +118,7 @@ import {
 } from "matrix-middle-service-web/src/views/record/logic/login";
 import {fixedLocationHandler} from "matrix-middle-service-web/src/views/record/logic/location";
 import {drawMarkers} from "matrix-middle-service-web/src/views/record/logic/markers";
+import {drawLines} from "matrix-middle-service-web/src/views/record/logic/lines";
 const $q = useQuasar();
 const scrollArea = reactive({
     thumbStyle: {
@@ -135,7 +136,6 @@ const scrollArea = reactive({
         opacity: "0.2"
     }
 })
-let canvasDir = createCanvasDir();
 
 function login(){
     loginRequest(authModel).finally(()=>{
@@ -157,7 +157,6 @@ const feature = reactive({
 let map = {}
 const data = {
     data: [],
-    polyline: {},
     polylines: [],
     fixedPolyline: {},
     labelsLayer: null,
@@ -249,7 +248,10 @@ function toggleTraffic() {
 }
 
 function changeShowLines(){
+    console.log("options.showLines",options.showLines)
+    console.log("view.lines",view.lines)
     drawMarkers(map,data,options,view.lines.filter((_,index)=>options.showLines.includes(index)))
+    drawLines(map,data,view.lines.filter((_,index)=>options.showLines.includes(index)))
 }
 
 AMapLoader.load({
@@ -332,7 +334,6 @@ AMapLoader.load({
 function clearMap(){
     view.lines = []
     map.remove(data.polylines)
-    map.remove(data.polyline)
     map.remove(data.markers)
     map.remove(data.infoWindow)
 }
@@ -388,39 +389,8 @@ function drawMap(autoSelect=false){
     console.log("lines", view.lines)
 
     drawMarkers(map,data,options,view.lines.filter((_,index)=>options.showLines.includes(index)))
+    drawLines(map,data,view.lines.filter((_,index)=>options.showLines.includes(index)))
 
-    let colorList = randomColorList(view.lines.length)
-    data.polylines = []
-    view.lines.forEach((_data,index) => {
-        let path = _data.map((item) => {
-            return new AMap.LngLat(item.longitude, item.latitude)
-        })
-
-        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' // 折线拐点连接处样式})
-        })
-        data.polylines.push(polyline)
-    })
-    console.log("polylines",data.polylines)
-    // polyline = new AMap.Polyline({
-    //     path: path,
-    //     showDir: true,
-    //     dirImg: canvasDir,
-    //     borderWeight: 6, // 线条宽度，默认为 1
-    //     strokeWeight: 6,
-    //     strokeColor: 'red', // 线条颜色
-    //     dirColor: 'white',
-    //     lineJoin: 'round' // 折线拐点连接处样式})
-    // })
-    map.add(data.polylines)
     setTimeout(()=>{
         if(!options.autoScaling){
             return

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

@@ -0,0 +1,32 @@
+import {randomColorList} from "matrix-middle-service-web/src/views/record/logic/color";
+import {createCanvasDir} from "matrix-middle-service-web/src/views/record/logic/icon";
+
+const canvasDir = createCanvasDir();
+
+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 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' // 折线拐点连接处样式})
+        })
+        data.polylines.push(polyline)
+    })
+
+    console.log("polylines",data.polylines)
+    map.add(data.polylines)
+}