增加地图中换热站坐标显示及点击显示信息窗口

src/api/heatStation/index.ts

@@ -9,6 +9,7 @@ export default {
     detail: (id: number) => get('/region/loop/getInfoById', { id }),
   },
   heatStation: {
+    getAll: (params?: object) => get('/region/monitor/getAllHeatStation', params),
     getList: (params: object) => get('/region/heatStation/tree', params),
     add: (data: object) => post('/region/heatStation/add', data),
     edit: (data: object) => put('/region/heatStation/edit', data),

src/utils/map.ts

@@ -0,0 +1,50 @@
+
+let BMapGL = (window as any).BMapGL;
+
+export function setMarker(markers: any[], map: any) {
+  markers.forEach((item) => {
+    const { lat, lnt: lng } = item;
+    const point = new BMapGL.Point(lng, lat);
+
+    const marker = new BMapGL.Marker(point);
+    // const marker = new BMapGL.Marker(point, {
+    //   icon: new BMapGL.Icon("/imgs/station.svg", new BMapGL.Size(24, 24), {
+    //     // anchor: new BMapGL.Size(10, 25),
+    //     // imageOffset: new BMapGL.Size(0, 0 - 25),
+    //   }),
+    // });
+    map.addOverlay(marker);
+
+    marker.addEventListener("click", function () {
+      const infoWindow = new BMapGL.InfoWindow(
+        `
+      <div class="map-hover-box">
+        <div class="map-hover-title">环路名称：${item.name}</div>
+        <div class="map-hover-row-item">
+          <div class="map-hover-label">环路编号：</div>
+          <div class="map-hover-value">SJIWW786</div>
+        </div>
+        <div class="map-hover-row-item">
+          <div class="map-hover-label">所属换热站：</div>
+          <div class="map-hover-value">**换热站1</div>
+        </div>
+        <div class="map-hover-row-item">
+          <div class="map-hover-label">一网供水温度：</div>
+          <div class="map-hover-value"></div>
+        </div>
+        <div class="map-hover-row-item">
+          <div class="map-hover-label">一网回水温度：</div>
+          <div class="map-hover-value">24℃</div>
+        </div>
+      </div>
+    `,
+        {
+          width: 200, // 信息窗口宽度
+          height: 100, // 信息窗口高度
+          title: item.stationName,
+        }
+      );
+      map.openInfoWindow(infoWindow, point); //开启信息窗口
+    });
+  });
+}

src/views/monitor/map.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="page page-full">
+    <el-checkbox-group v-model="checkList">
+      <el-checkbox label="一网供水温度" />
+      <el-checkbox label="一网回水温度" />
+      <el-checkbox label="一网供水压力" />
+      <el-checkbox label="一网回水压力" />
+      <el-checkbox label="二网供水温度" />
+      <el-checkbox label="二网回水温度" />
+      <el-checkbox label="二网供水压力" />
+      <el-checkbox label="二网回水压力" />
+    </el-checkbox-group>
     <div class="map flex1 mt-2" ref="mapRef"></div>
   </div>
 </template>
@@ -7,8 +17,11 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
+import api from '/@/api/heatStation';
+import { setMarker } from '/@/utils/map';
 
 const mapRef = ref();
+const checkList = ref([]);
 
 let BMapGL = (window as any).BMapGL;
 let map: any = null;
@@ -24,9 +37,73 @@ onMounted(() => {
 		document.querySelectorAll('.anchorBL')[1].remove();
 		document.querySelectorAll('.anchorBL')[0].remove();
 	}, 100);
+
+	// 获取换热站列表
+	api.heatStation.getAll().then((res:any) => {
+		renderStation(res);
+	});
+	// 获取环路列表
+	api.loop.getList({ pageSize: 50, status: 1 }).then((res) => {
+		console.log(res);
+	});
 });
+
+const renderStation = (list: any[]) => {
+	setMarker(list, map);
+};
 </script>
 
+<style lang="scss">
+.BMap_bubble_pop {
+  width: 220px;
+	padding: 0 !important;
+	border: none !important;
+	background: transparent !important;
+	color: #fff !important;
+	margin-top: 20px;
+	margin-left: -20px;
+	// pointer-events: none;
+
+	& > img {
+		display: none !important;
+	}
+}
+.BMap_bubble_content,
+.BMap_bubble_center {
+	height: 150px !important;
+}
+.BMap_bubble_content {
+	height: auto !important;
+	background: rgba(0, 29, 122, 0.6) !important;
+	border-radius: 3px;
+}
+.BMap_bubble_top,
+.BMap_bubble_bottom {
+	display: none !important;
+}
+.map-hover-box {
+	color: #fff;
+	font-size: 12px;
+	padding: 10px 14px;
+	.map-hover-title {
+		line-height: 18px;
+		font-size: 14px;
+		font-weight: 500;
+	}
+	.map-hover-row-item {
+		display: flex;
+		align-items: center;
+		margin-top: 4px;
+		line-height: 1.2;
+		// gap: 20px;
+		.map-hover-value {
+			// font-size: 22px;
+			color: #ffd228;
+			font-weight: 500;
+		}
+	}
+}
+</style>
 <style scoped lang="scss">
 .page {
 }