地图接入路线数据

src/components/map.vue

@@ -11,6 +11,7 @@ import { onMounted, watch } from 'vue'
 import useStore from '@/pages/store/index'
 import { useNotification } from 'naive-ui'
 import img36 from '@/assets/img/36.png'
+import path from 'path'
 
 const store = useStore()
 const notification = useNotification()
@@ -24,6 +25,7 @@ let AMaps = null as Any
 window._AMapSecurityConfig = {
   securityJsCode: '184c86be3bbd9a8a941bcaaf6b09c7cd'
 }
+const lines = {} as Any
 
 function getAllRings(feature: { geometry: { coordinates: Any[]; }; }) {
   const coords = feature.geometry.coordinates
@@ -69,6 +71,7 @@ function addLine(path:number[][], color?:string, width?:number) {
     geodesic: true
   })
   Maps.add(polyline)
+  return polyline
 }
 
 onMounted(() => {
@@ -200,6 +203,19 @@ onMounted(() => {
 watch(() => store.socektData, (v) => {
   if (v && v.BUS_LINE_INFO) {
     console.log('line', v)
+    for (let k = 0; k < v.BUS_LINE_INFO.length; k++) {
+      const el = v.BUS_LINE_INFO[k]
+      const paths = el.inboundAndOutboundStations.map((es: { lat: number; lng: number }) => [ es.lng, es.lat ])
+      if (lines[el.lineId]) {
+        // 更新
+        console.log('更新', lines[el.lineId].lineMap)
+        lines[el.lineId].lineMap.setPath(paths)
+      } else {
+        // 添加
+        console.log('添加', paths)
+        lines[el.lineId] = { ...el, lineMap: addLine(paths) }
+      }
+    }
   }
 }, { deep: true })
 </script>