分布图：有的放大到一定程度后，展示两遍数据

src/views/heating/monitor/map.vue

@@ -1,58 +1,58 @@
 <template>
-	<div class="page page-full">
-		<div style="position: relative; flex: 1;">
-			<div class="map" ref="mapRef" style="height: 100%"></div>
+  <div class="page page-full">
+    <div style="position: relative; flex: 1;">
+      <div class="map" ref="mapRef" style="height: 100%"></div>
 
-			<!-- 显示弹层区域 -->
-			<div class="view">
-				<div class="view-div" v-for="(item, index) in viewList" :key="index">
-					<div class="view-div-head">
-						<div class="title">{{ item.name }}环路</div>
-						<div class="info">
-							<div class="">
-								环路编号：{{ item.code }}
-							</div>
-							<div class="ml-4">
-								所属换热站：{{ item.stationInfo.name }}
-							</div>
-						</div>
-					</div>
-					<div class="view-div-content">
-						<div>路线信息</div>
-						<div class="mt-1 pl-4">
-							<p v-for="(point, index) in item.loopViaPointInfo" :key="index">
-								{{ point.position }}
-							</p>
-						</div>
-						<div class="mt-1">实时温度</div>
-						<el-table :data="[{
+      <!-- 显示弹层区域 -->
+      <div class="view">
+        <div class="view-div" v-for="(item, index) in viewList" :key="index">
+          <div class="view-div-head">
+            <div class="title">{{ item.name }}环路</div>
+            <div class="info">
+              <div class="">
+                环路编号：{{ item.code }}
+              </div>
+              <div class="ml-4">
+                所属换热站：{{ item.stationInfo.name }}
+              </div>
+            </div>
+          </div>
+          <div class="view-div-content">
+            <div>路线信息</div>
+            <div class="mt-1 pl-4">
+              <p v-for="(point, index) in item.loopViaPointInfo" :key="index">
+                {{ point.position }}
+              </p>
+            </div>
+            <div class="mt-1">实时温度</div>
+            <el-table :data="[{
 							outTemperature1: item.outTemperature1,
 							inTemperature1: item.inTemperature1,
 							outTemperature2: item.outTemperature2,
 							inTemperature2: item.inTemperature2
 						}]" :border="true" class="mt-1">
-							<el-table-column label="一网供水温度" prop="outTemperature1" :show-overflow-tooltip="true" />
-							<el-table-column label="一网回水温度" prop="inTemperature1" :show-overflow-tooltip="true" />
-							<el-table-column label="二网供水温度" prop="outTemperature2" :show-overflow-tooltip="true" />
-							<el-table-column label="二网回水温度" prop="inTemperature2" :show-overflow-tooltip="true" />
-						</el-table>
-						<div class="mt-1">实时压力(MPa)</div>
-						<el-table :data="[{
+              <el-table-column label="一网供水温度" prop="outTemperature1" :show-overflow-tooltip="true" />
+              <el-table-column label="一网回水温度" prop="inTemperature1" :show-overflow-tooltip="true" />
+              <el-table-column label="二网供水温度" prop="outTemperature2" :show-overflow-tooltip="true" />
+              <el-table-column label="二网回水温度" prop="inTemperature2" :show-overflow-tooltip="true" />
+            </el-table>
+            <div class="mt-1">实时压力(MPa)</div>
+            <el-table :data="[{
 							outPressure1: item.outPressure1,
 							inPressure1: item.inPressure1,
 							outPressure2: item.outPressure2,
 							inPressure2: item.inPressure2,
 						}]" :border="true" class="mt-1">
-							<el-table-column label="一网供水压力" prop="outPressure1" :show-overflow-tooltip="true" />
-							<el-table-column label="一网回水压力" prop="inPressure1" :show-overflow-tooltip="true" />
-							<el-table-column label="二网供水压力" prop="outPressure2" :show-overflow-tooltip="true" />
-							<el-table-column label="二网回水压力" prop="inPressure2" :show-overflow-tooltip="true" />
-						</el-table>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+              <el-table-column label="一网供水压力" prop="outPressure1" :show-overflow-tooltip="true" />
+              <el-table-column label="一网回水压力" prop="inPressure1" :show-overflow-tooltip="true" />
+              <el-table-column label="二网供水压力" prop="outPressure2" :show-overflow-tooltip="true" />
+              <el-table-column label="二网回水压力" prop="inPressure2" :show-overflow-tooltip="true" />
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 
@@ -74,91 +74,90 @@ let getThemeConfig: any = null
 let points: any = []
 
 onMounted(() => {
-	// 获取布局配置信息
-	getThemeConfig = store.state.themeConfig.themeConfig;
-	map = new BMapGL.Map(mapRef.value, {
-	});
+  // 获取布局配置信息
+  getThemeConfig = store.state.themeConfig.themeConfig;
+  map = new BMapGL.Map(mapRef.value, {
+  });
 
-	map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件
-	map.addControl(new BMapGL.ZoomControl()); // 添加缩放控件
+  map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件
+  map.addControl(new BMapGL.ZoomControl()); // 添加缩放控件
 
-	const testPt = new BMapGL.Point(124.383044, 40.124296);
-	map.centerAndZoom(testPt, 5);
-	map.enableScrollWheelZoom();
-	if (getThemeConfig.isIsDark) {
-		map.setMapStyleV2({
-			styleId: 'b8d841ee37fd5bd41e742049b6fcd0f5'
-		});
-	}
+  const testPt = new BMapGL.Point(124.383044, 40.124296);
+  map.centerAndZoom(testPt, 5);
+  map.enableScrollWheelZoom();
+  if (getThemeConfig.isIsDark) {
+    map.setMapStyleV2({
+      styleId: 'b8d841ee37fd5bd41e742049b6fcd0f5'
+    });
+  }
 
-	// 获取换热站列表
-	api.heatStation.getAll().then((res: any) => {
-		heatList.value = res
-		renderStation(res);
-	});
-	// 获取环路列表
-	api.loop.getList({ pageSize: 50, status: 1 }).then((res: any) => {
-		console.log(res);
-	});
-	// 地图缩放事件	
-	// map.addEventListener('zoomstart', (e: any) => {
-	// 	console.log('zoomstart', e)
-	// })
-	map.addEventListener('zoomend', (e: any) => {
-		// console.log('zoomend', e)
-		console.log('zoomend', map.getZoom())
-		let zoom = map.getZoom()
-		if (zoom > 20.5 && points.length) {
-			let arr: any = []
-			let viewArr: any = []
-			points.forEach((point: any) => {
-				if (map.getBounds().containsPoint(point)) {
-					arr.push(point)
-				}
-			})
-			console.log(arr)
-			arr.forEach((point: any) => {
-				let item = heatList.value.find((item: any) => (point.lat === item.stationInfo.lat && point.lng === item.stationInfo.lnt))
-				console.log(item)
-				viewArr.push(item)
-			})
-			viewList.value = viewArr
-		} else {
-			viewList.value = []
-		}
-	})
-	// 获取当前视图内的点
-	// map.getBounds().containsPoint({
+  // 获取换热站列表
+  api.heatStation.getAll().then((res: any) => {
+    heatList.value = res
+    renderStation(res);
+  });
+  // 获取环路列表
+  api.loop.getList({ pageSize: 50, status: 1 }).then((res: any) => {
+    console.log(res);
+  });
+  // 地图缩放事件	
+  // map.addEventListener('zoomstart', (e: any) => {
+  // 	console.log('zoomstart', e)
+  // })
+  map.addEventListener('zoomend', (e: any) => {
+    // console.log('zoomend', e)
+    // console.log('zoomend', map.getZoom())
+    let zoom = map.getZoom()
+    if (zoom > 20.5 && points.length) {
+      let arr: any = []
+      let viewArr: any = []
+
+      points.forEach((point: any) => {
+        if (map.getBounds().containsPoint(point)) {
+          arr.push(point)
+        }
+      })
+      arr.forEach((point: any) => {
+        let item = heatList.value.find((item: any) => (point.lat === item.stationInfo.lat && point.lng === item.stationInfo.lnt))
+        item && viewArr.push(item)
+      })
+      viewList.value = viewArr
+    } else {
+      viewList.value = []
+    }
+  })
+  // 获取当前视图内的点
+  // map.getBounds().containsPoint({
   //   "lng": 124.41798,
   //   "lat": 40.149303
-	// })
+  // })
 
-	// window._map = map
+  // window._map = map
 });
 // 监听 vuex 中是否开启深色主题
 watch(
-	() => store.state.themeConfig.themeConfig.isIsDark,
-	(isIsDark) => {
-		nextTick(() => {
-			setTimeout(() => {
-				map.setMapStyleV2({
-					styleId: isIsDark ? 'b8d841ee37fd5bd41e742049b6fcd0f5' : '48b5759a53d0d6f607c049543d4c92e4'
-				});
+  () => store.state.themeConfig.themeConfig.isIsDark,
+  (isIsDark) => {
+    nextTick(() => {
+      setTimeout(() => {
+        map.setMapStyleV2({
+          styleId: isIsDark ? 'b8d841ee37fd5bd41e742049b6fcd0f5' : '48b5759a53d0d6f607c049543d4c92e4'
+        });
 
-			}, 500);
-		});
-	},
-	{
-		deep: true,
-		immediate: true,
-	}
+      }, 500);
+    });
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
 );
 const renderStation = (list: any[]) => {
-	points = setMarker(list, map);
-	// 控制标点显示在最佳视野内
-	if (points && points.length) {
-		map.setViewport(points)
-	}
+  points = setMarker(list, map);
+  // 控制标点显示在最佳视野内
+  if (points && points.length) {
+    map.setViewport(points)
+  }
 };
 </script>
 
@@ -173,7 +172,7 @@ const renderStation = (list: any[]) => {
 	margin-left: -20px;
 	// pointer-events: none;
 
-	&>img {
+	& > img {
 		display: none !important;
 	}
 }