feat：完善功能

src/views/home/components/box-2.vue

@@ -125,7 +125,7 @@
   import countup from 'vue-countup-v3'
   import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
   import ScrollNumber from '@/components/ScrollNumber/index.vue'
-  import { getSpotListApi, getBaiduMapCrowdedApi } from '@/api/home'
+  import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi } from '@/api/home'
 
   import icon8 from '@/assets/images/icon-8.png'
   import icon9 from '@/assets/images/icon-9.png'
@@ -139,7 +139,7 @@
 
   let emit = defineEmits(['switch-spot'])
 
-  const { map, initMap, addMarker } = useMap()
+  const { map, initMap } = useMap()
 
   let spotList = ref([])
 
@@ -161,6 +161,7 @@
       icon: icon11
     }
   ])
+  let current = ref(0)
   const handleMap = (e) => {
     emit('switch-spot', e)
     // map.value.centerAndZoom(new BMapGL.Point('108.704166', '30.94776'), 16)
@@ -168,26 +169,17 @@
   const getSpotList = async () => {
     let res = await getSpotListApi()
     spotList.value = res.data
-    let res1 = await getBaiduMapCrowdedApi({
-      nodeId: res.data[0].nodeid
-    })
-    console.log(res1, 'res1')
+    getBaiduMap()
   }
-
-  watch(
-    () => homeStore?.baiduMapData,
-    (val) => {
-      if (val) {
-        setTimeout(() => {
-          init(val)
-        }, 1000)
-      }
-    },
-    { immediate: true }
-  )
-  const init = (val) => {
-    initMap('map', val.index.lng, val.index.lat, 15, false)
-    val.list.map((item) => {
+  const getBaiduMap = async () => {
+    let res = await getBaiduMapApi({
+      nodeid: 7162
+    })
+    initMap('map', res.data.index.lng, res.data.index.lat, 15, false)
+    map.value.setMapStyleV2({
+      styleId: 'd1e61f575b3ef4e2df71ab6a5690ddab' // 23c9fb8e1c604995f97f0f1cebd7036fF
+    })
+    res.data.list.map((item) => {
       item.map((i) => {
         // 创建折线
         let arr = []
@@ -195,14 +187,94 @@
           arr.push(new BMapGL.Point(j[0], j[1]))
         })
         var polyline = new BMapGL.Polyline(arr, {
-          strokeColor: '#38DBFF',
-          strokeWeight: 4,
+          strokeColor: '#9AFF02',
+          strokeWeight: 8,
           strokeOpacity: 0.8
         })
         map.value.addOverlay(polyline)
       })
     })
+    getBaiduMapCrowded()
   }
+  const getBaiduMapCrowded = async () => {
+    let res = await getBaiduMapCrowdedApi({
+      nodeid: spotList.value[current.value].nodeid
+    })
+    let data = res.data
+    if (data) {
+      data.forEach((bmci) => {
+        let linkStates = JSON.parse(bmci.link_states)
+        for (let key in linkStates) {
+          let bmciArr = []
+          if (linkStates.hasOwnProperty(key)) {
+            let bm = []
+            if (key == 1) {
+              bm = linkStates[key].split(';')
+              bm.forEach((bmItem) => {
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
+                var bmciPolyline = new BMapGL.Polyline(bmciArr, {
+                  strokeColor: 'red',
+                  strokeWeight: 8,
+                  strokeOpacity: 0.8
+                })
+                map.value.addOverlay(bmciPolyline)
+              })
+            } else if (key == 2) {
+              bm = linkStates[key].split(';')
+              bm.forEach((bmItem) => {
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
+                var bmciPolyline = new BMapGL.Polyline(bmciArr, {
+                  strokeColor: 'red',
+                  strokeWeight: 8,
+                  strokeOpacity: 0.8
+                })
+                map.value.addOverlay(bmciPolyline)
+              })
+            } else if (key == 3) {
+              bm = linkStates[key].split(';')
+              bm.forEach((bmItem) => {
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
+                var bmciPolyline = new BMapGL.Polyline(bmciArr, {
+                  strokeColor: 'red',
+                  strokeWeight: 8,
+                  strokeOpacity: 0.8
+                })
+                map.value.addOverlay(bmciPolyline)
+              })
+            } else if (key == 4) {
+              bm = linkStates[key].split(';')
+              bm.forEach((bmItem) => {
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
+                var bmciPolyline = new BMapGL.Polyline(bmciArr, {
+                  strokeColor: 'red',
+                  strokeWeight: 8,
+                  strokeOpacity: 0.8
+                })
+                map.value.addOverlay(bmciPolyline)
+              })
+            } else {
+              bm = linkStates[key].split(';')
+              bm.forEach((bmItem) => {
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[0], bmItem.split(',')[1]))
+                bmciArr.push(new BMapGL.Point(bmItem.split(',')[2], bmItem.split(',')[3]))
+                var bmciPolyline = new BMapGL.Polyline(bmciArr, {
+                  strokeColor: 'red',
+                  strokeWeight: 8,
+                  strokeOpacity: 0.8
+                })
+                map.value.addOverlay(bmciPolyline)
+              })
+            }
+          }
+        }
+      })
+    }
+  }
+
   onMounted(() => {
     getSpotList()
   })