增加地图控件

src/views/monitor/map.vue

@@ -1,17 +1,17 @@
 <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>
+	<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>
 
 
@@ -27,36 +27,40 @@ const store = useStore();
 
 let BMapGL = (window as any).BMapGL;
 let map: any = null;
-let getThemeConfig:any = null
+let getThemeConfig: any = null
 
 onMounted(() => {
 
 	// 获取布局配置信息
-	getThemeConfig =  store.state.themeConfig.themeConfig;
+	getThemeConfig = store.state.themeConfig.themeConfig;
 	map = new BMapGL.Map(mapRef.value, {
 	});
 
+
+	map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件
+	map.addControl(new BMapGL.ZoomControl()); // 添加缩放控件
+
 	const testPt = new BMapGL.Point(104.5, 38);
 	map.centerAndZoom(testPt, 5);
 	map.enableScrollWheelZoom();
-	if(getThemeConfig.isIsDark) {
-		map.setMapStyleV2({     
+	if (getThemeConfig.isIsDark) {
+		map.setMapStyleV2({
 			styleId: 'b8d841ee37fd5bd41e742049b6fcd0f5'
 		});
 	}
 
 
-	setTimeout(() => {
-		document.querySelectorAll('.anchorBL')[1].remove();
-		document.querySelectorAll('.anchorBL')[0].remove();
-	}, 100);
+	// setTimeout(() => {
+	// 	document.querySelectorAll('.anchorBL')[1].remove();
+	// 	document.querySelectorAll('.anchorBL')[0].remove();
+	// }, 100);
 
 	// 获取换热站列表
-	api.heatStation.getAll().then((res:any) => {
+	api.heatStation.getAll().then((res: any) => {
 		renderStation(res);
 	});
 	// 获取环路列表
-	api.loop.getList({ pageSize: 50, status: 1 }).then((res) => {
+	api.loop.getList({ pageSize: 50, status: 1 }).then((res: any) => {
 		console.log(res);
 	});
 });
@@ -66,10 +70,10 @@ watch(
 	(isIsDark) => {
 		nextTick(() => {
 			setTimeout(() => {
-				map.setMapStyleV2({     
+				map.setMapStyleV2({
 					styleId: isIsDark ? 'b8d841ee37fd5bd41e742049b6fcd0f5' : '48b5759a53d0d6f607c049543d4c92e4'
 				});
-				
+
 			}, 500);
 		});
 	},
@@ -85,7 +89,7 @@ const renderStation = (list: any[]) => {
 
 <style lang="scss">
 .BMap_bubble_pop {
-  width: 220px;
+	width: 220px;
 	padding: 0 !important;
 	border: none !important;
 	background: transparent !important;
@@ -94,37 +98,44 @@ const renderStation = (list: any[]) => {
 	margin-left: -20px;
 	// pointer-events: none;
 
-	& > img {
+	&>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;
@@ -135,6 +146,5 @@ const renderStation = (list: any[]) => {
 }
 </style>
 <style scoped lang="scss">
-.page {
-}
+.page {}
 </style>