分布图增加管线的显示及点击弹窗事件

src/utils/map.ts

@@ -40,18 +40,15 @@ export function setMarker(markers: any[], map: any) {
   return points
 }
 
-export function setMarker2(markers: any[], map: any) {
-  const points: any = []
-  markers.forEach((item) => {
-    const { lat, lnt: lng } = item.stationInfo;
-    const point = new BMapGL.Point(lng, lat);
-    points.push(point)
+export function setLine(lines: any[], map: any) {
+  lines.forEach((item) => {
+    const polyline = new BMapGL.Polyline(item.loopViaPointInfo.map((item: any) => {
+      return new BMapGL.Point(item.lnt, item.lat)
+    }), { strokeColor: "blue", strokeWeight: 10, strokeOpacity: 0.5 });   //创建折线
 
-    const marker = new BMapGL.Marker(point);
+    map.addOverlay(polyline);
 
-    map.addOverlay(marker);
-
-    marker.addEventListener("click", function () {
+    polyline.addEventListener("click", function (e: any) {
       const infoWindow = new BMapGL.InfoWindow(
         `
       <div class="map-hover-box">
@@ -77,11 +74,13 @@ export function setMarker2(markers: any[], map: any) {
         {
           width: 200, // 信息窗口宽度
           height: 100, // 信息窗口高度
-          title: item.stationName,
+          title: item.name,
         }
       );
-      map.openInfoWindow(infoWindow, point); //开启信息窗口
+      // map.closeInfoWindow()
+      setTimeout(() => {
+        map.openInfoWindow(infoWindow, e.latLng); //开启信息窗口
+      }, 100)
     });
   });
-  return points
 }

src/views/heating/monitor/map.vue

@@ -98,7 +98,7 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch, nextTick } from 'vue';
 import api from '/@/api/heatStation';
-import { setMarker } from '/@/utils/map';
+import { setMarker, setLine } from '/@/utils/map';
 import { useStore } from '/@/store/index';
 
 const mapRef = ref();
@@ -132,9 +132,9 @@ onMounted(() => {
 
   // 获取环路列表
   api.heatStation.getAll().then((res: any) => {
-    const list = res.filter((item: any) => item.loopViaPointInfo > 1)
-    console.log(list)
-    //  setLine(list, map);
+    const list = res.filter((item: any) => item.loopViaPointInfo?.length > 1)
+    // console.log(list)
+    setLine(list, map);
   });
   // 获取换热站列表
   api.heatStation.getList({