优化地图组件，添加设备筛选下拉框，调整样式，清理无用代码

node_modules/.vue-global-types/vue_3.5_0.d.ts

@@ -2,6 +2,8 @@
 export {};
 
 ; declare global {
+	var __VLS_PROPS_FALLBACK: Record<string, unknown>;
+
 	const __VLS_directiveBindingRestFields: { instance: null, oldValue: null, modifiers: any, dir: any };
 	const __VLS_unref: typeof import('vue').unref;
 	const __VLS_placeholder: any;
@@ -35,7 +37,7 @@ export {};
 			attrs?: any;
 			slots?: T extends { $slots: infer Slots } ? Slots : Record<string, any>;
 			emit?: T extends { $emit: infer Emit } ? Emit : {};
-			props?: (T extends { $props: infer Props } ? Props : {}) & Record<string, unknown>;
+			props?: typeof props;
 			expose?: (exposed: T) => void;
 		};
 	};

src/assets/styles/_variables.scss

 // 深蓝色主题变量
-$primary-color: #1890FF;         // 主蓝色
+$primary-color: #1890ff; // 主蓝色
 $secondary-color: #003a8c; // 次级蓝色
-$text-color: #FFFFFF;            // 白色文字
+$text-color: #ffffff; // 白色文字
 $dark-blue-bg: #001529; // 深蓝背景
 $dark-blue-border: #004d99; // 边框蓝色
-$light-gray-text: #D9D9D9;       // 浅灰色文字
+$light-gray-text: #d9d9d9; // 浅灰色文字
 $blue-hover: #40a9ff; // 悬停蓝色
 
 // 扩展的颜色变量
@@ -19,7 +19,7 @@ $sidebar-width: 200px;
 $container-padding: 20px;
 
 // 字体变量
-$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 $font-size-base: 14px;
 $font-size-lg: 16px;
 $font-size-sm: 12px;

src/style.css

@@ -80,6 +80,7 @@ button:focus-visible {
   height: 100%;
   padding: 20px;
 }
+
 /* 全局字体 */
 @font-face {
   font-family: "PangMen";

src/views/components/Map.vue

 <template>
-  <!-- map-container上面加一个下拉框 -->
-  <div class="map-container w-full h-full relative" id="container">
-    <div class="absolute top-2 left-2 z-10">
+  <div class="w-full h-full relative">
+    <div class="map-container w-full h-full" id="container"></div>
+    <div class="absolute top-2 left-2 z-[999]">
       <el-tree-select
         style="width: 150px"
         v-model="treeDataValue"
@@ -35,13 +35,19 @@ let infoWindow = null;
 var points = ref([]);
 const treeDataValue = ref([]);
 const treeDataList = ref([]);
+const treeDataAllList = ref([]);
 const oneTypeId = ref("");
 const twoTypeId = ref("");
 const threeTypeId = ref("");
 const fourTypeId = ref("");
 const fiveTypeId = ref("");
 const sixTypeId = ref("");
-
+const map_opt = [
+  {
+    city: "太原",
+    color: "red",
+  },
+];
 const props = defineProps({
   deptId: {
     type: Number,
@@ -56,7 +62,7 @@ onMounted(() => {
 });
 
 function handleSceneChange(val) {
-  treeDataList.value.forEach((item) => {
+  treeDataAllList.value.forEach((item) => {
     if (item.id === val) {
       const parentIds = item.parentIds;
       const ids = parentIds
@@ -83,7 +89,11 @@ function handleSceneChange(val) {
       }
     }
   });
-  // getDeviceList();
+  // 先清除现有地图（如果存在）
+  if (map) {
+    map.clearMap(); // 清除覆盖物而不是销毁地图
+  }
+  getDeviceList();
 }
 
 function initMap() {
@@ -106,6 +116,7 @@ function initMap() {
         extensions: "all",
         level: "province",
       });
+
       district.search("山西", function (status, result) {
         // 查询成功时，result即为对应的行政区信息
         const bounds = result.districtList[0].boundaries;
@@ -113,6 +124,7 @@ function initMap() {
         for (let i = 0; i < bounds.length; i++) {
           mask.push([bounds[i]]);
         }
+
         const map = new AMap.Map("container", {
           pitch: 30, // 倾斜角度
           zoom: 6.7, // 设置当前显示级别
@@ -133,6 +145,8 @@ function initMap() {
             strokeColor: "blue", // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
             strokeWeight: 5, // 轮廓线宽度,默认为:2
             // map:map // 这种方式相当于: polyline.setMap(map);
+            fillColor: "#80d8ff", // 填充颜色，使用16进制颜色代码赋值。默认值为#00D3FC
+            strokeColor: "blue", // 轮廓线颜色，使用16进制颜色代码赋值。默认值为#00D3FC
           });
           polyline.setMap(map);
         }
@@ -230,46 +244,7 @@ var closeInfoWindow = function () {
   infoWindow.close();
 };
 //聚合点样式
-var _renderClusterMarker = function (context) {
-  // debugger;
-  // let clusterCount = context.count; //聚合点内点数量
-  // let clusterData = context.clusterData; //聚合点数组
-  // let mainKey = context.index.mainKey; //聚合点对应索引
-
-  // let constData = clusterData[0][mainKey]; //当前层级（市/区）展示名
-
-  // 构建聚合点的显示内容
-  let content;
-
-  content = `
-  		  <div style="display: flex; align-items: center; justify-content: center; text-align: center;">
-  		    <img style="width:60px; height: 60px;" src="http://webapi.amap.com/theme/v1.3/m1.png"/>
-  		    <div style="font-size: 12px; text-align: center;">${111}</div>
-  		  </div>`;
-  context.marker.setContent(content);
-
-  // 自定义点击事件
-  context.marker.on("click", function (e) {
-    // touchend 移动端点击事件；mouseup pc点击
-    // let clickType = e.originEvent.type;
-    //创建窗体实例
-    // let infoWindow = new AMap.InfoWindow({
-    //   content: "test", //窗体内容,支持插入dom.innerHTML
-    //   anchor: "top-right", //锚点，窗体相对鼠标点击位置
-    // });
-    // //显示窗体
-    // //map:地图实例，[lng,lat]:窗体在地图中位置
-    // infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat]);
-    // let infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
-    // infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat]);
-    // 移动端
-    // if (clusterData.length != 0 && mainKey == "building") {
-    //   setTimeout(() => {
-    //     emits("pointsClick", clusterData); //向父组件传递点位信息
-    //   }, 100);
-    // }
-  });
-};
+var _renderClusterMarker = function (context) {};
 
 onUnmounted(() => {
   map?.destroy();
@@ -290,12 +265,13 @@ function getDeviceList() {
       item.lnglat = [item.longitude, item.latitude];
       item.weight = 1;
     });
-    initMap(); //
+    initMap();
   });
 }
 
 function getDeviceTypeList() {
   deviceTypeList().then((res) => {
+    treeDataAllList.value = res.data;
     treeDataList.value = handleTree(res.data, "id");
   });
 }
@@ -319,4 +295,11 @@ getDeviceTypeList();
   margin-top: 3px;
   font-family: "YouSheBiaoTiHei";
 }
+.amap-copyright {
+  display: none !important;
+}
+
+.amap-logo {
+  display: none !important;
+}
 </style>