fix: 修改地图红绿灯展现形式，除了干线协调和勤务路线外，其他路线之显示红绿灯，不显示路线

src/components/TongzhouTrafficMap.vue

@@ -92,7 +92,7 @@ export default {
         });
 
         this.map = new this.AMap.Map(this.$refs.mapContainer, {
-          zoom: 14,
+          zoom: 13.5,
           mapStyle: "amap://styles/darkblue",
           center: [116.663, 39.905],
         });
@@ -104,100 +104,105 @@ export default {
     drawStaticRoutes() {
       const AMap = this.AMap;
 
-      this.legendConfig.forEach((config) => {
-        const driving = new AMap.Driving({
-          map: null,
-          hideMarkers: true,
-          autoFitView: false
-        });
-
-        driving.search(config.start, config.end, (status, result) => {
-          let markers = [];
-          let path = [];
-
-          if (status === 'complete' && result.routes[0]) {
-            // --- 情况 A: 规划成功，获取精确路网线条 ---
-            const route = result.routes[0];
-            route.steps.forEach(step => { path = path.concat(step.path); });
-          } else {
-            // --- 情况 B: 规划失败，使用保底策略（直接连接起终点） ---
-            console.warn(`${config.name} 路径规划失败，切换为保底直线模式`);
-            path = [config.start, config.end];
-          }
-
-          // 1. 统一绘制路线（无论是精确路网还是直线）
-          const polyline = new AMap.Polyline({
-            path: path,
-            strokeColor: config.color,
-            strokeWeight: 8,
-            strokeOpacity: 0.8,
-            showDir: false,      // 【修改】去掉白色方向箭头
-            lineJoin: 'round',   // 【新增】使拐角更圆润
-            zIndex: 15,          // 【新增】层级设为 15，高于路况图层
-            map: null
+      this.legendConfig.forEach((config, index) => {
+        setTimeout(() => {
+          const driving = new AMap.Driving({
+            map: null,
+            hideMarkers: true,
+            autoFitView: false
           });
 
-          // 2. 在路径上分布点
-          // 如果只有两个点（直线），就只取起点和终点；如果有路网，取起中终
-          const points = path.length > 2
-            ? [path[0], path[Math.floor(path.length / 2)], path[path.length - 1]]
-            : [path[0], path[1]];
-
-          points.forEach(pos => {
-            markers.push(this.createTrafficLightMarker(pos, config));
+          driving.search(config.start, config.end, (status, result) => {
+            let markers = [];
+            let path = [];
+
+            if (status === 'complete' && result.routes[0]) {
+              const route = result.routes[0];
+              route.steps.forEach(step => { path = path.concat(step.path); });
+            } else {
+              path = [config.start, config.end];
+            }
+
+            // --- 【关键修改】：注释掉以下 Polyline 的定义 ---
+            /*
+            const polyline = new AMap.Polyline({
+              path: path,
+              strokeColor: config.color,
+              strokeWeight: 8,
+              strokeOpacity: 0.8,
+              showDir: false,
+              lineJoin: 'round',
+              zIndex: 15,
+              map: null
+            });
+            */
+
+            // 1. 只有“干线协调”和“勤务路线”才创建路线对象
+            let polyline = null;
+            const needRouteLine = ["干线协调", "勤务路线"].includes(config.name);
+
+            if (needRouteLine) {
+              polyline = new AMap.Polyline({
+                path: path,
+                strokeColor: config.color,
+                strokeWeight: 8,
+                strokeOpacity: 0.8,
+                showDir: false,
+                lineJoin: 'round',
+                zIndex: 15,
+                map: null
+              });
+            }
+
+
+            // 2. 在路径上分布点 (保持原样)
+            // 修改 points 的采样逻辑，例如每隔 10 个坐标点取一个点
+            const points = [];
+            const step = 10; // 步长越大，点越稀疏
+            for (let i = 0; i < path.length; i += step) {
+              points.push(path[i]);
+            }
+            // 确保终点也被加上
+            if ((path.length - 1) % step !== 0) {
+              points.push(path[path.length - 1]);
+            }
+
+            // const points = path.length > 2
+            //   ? [path[0], path[Math.floor(path.length / 2)], path[path.length - 1]]
+            //   : [path[0], path[1]];
+
+            points.forEach(pos => {
+              markers.push(this.createTrafficLightMarker(pos, config));
+            });
+
+            // 3. 【关键修改】：overlays 数组只存放 markers，不再存放 polyline
+            const overlays = [...markers, polyline].filter(Boolean);
+            this.routeGroups[config.name] = overlays;
+
+            // if (this.activeLegends.includes(config.name)) {
+            //   this.map.add(overlays);
+            //   // 这里的 setFitView 会根据点的位置自动聚焦
+            //   this.map.setFitView(overlays, false, [60, 60, 60, 60]);
+            // }
+
+            if (this.activeLegends.includes(config.name)) {
+              this.map.add(overlays);
+            }
           });
-
-          // 3. 捆绑入组
-          const group = new AMap.OverlayGroup([...markers, polyline]);
-          this.map.add(group);
-          this.$set(this.routeGroups, config.name, group);
-
-          // 初始化显隐
-          if (!this.activeLegends.includes(config.name)) group.hide();
-        });
+        }, index * 250);
       });
     },
 
-    // 创建交通灯点
-    // createTrafficLightMarker(position, config) {
-    //   console.log(config.name);
-    //   // Mock 红绿灯实时数据
-    //   const states = [
-    //     { color: '#ff4d4f', label: '红灯锁定' },
-    //     { color: '#3ee68d', label: '绿灯通行' },
-    //     { color: '#D9C13B', label: '降级黄闪' }
-    //   ];
-    //   const currentState = states[Math.floor(Math.random() * states.length)];
-    //   const countdown = Math.floor(Math.random() * 50) + 10;
-
-    //   const marker = new this.AMap.Marker({
-    //     position: position,
-    //     // 去掉了数字显示，仅保留呼吸灯效果
-    //     content: `<div class="pure-light-node ${['离线', '降级', '故障'].includes(config.name) ? 'breathe' : ''}" style="background: ${config.color}; box-shadow: 0 0 15px ${config.color}; font-size: 12px; display: flex; justify-content: center; align-items: center; color: #fff; padding: 8px;"><span>${config?.name?.charAt(0)}</span></div>`,
-    //     offset: new this.AMap.Pixel(-10, -10),
-    //     extData: {
-    //       ...config,
-    //       statusColor: currentState.color,
-    //       statusLabel: currentState.label,
-    //       road: '北京路与南京路',
-    //       time: '2026.1.23.12:00'
-    //     }
-    //   });
-
-    //   marker.on('click', (e) => this.openLightInfo(e.target.getExtData(), e.lnglat));
-    //   return marker;
-    // },
-
     createTrafficLightMarker(position, config) {
       // 根据业务需求：离线、降级、故障需要闪烁，其他保持静止
       const needsFlash = ["离线", "降级", "故障"].includes(config.name);
-
-      // 统一颜色：直接使用图例配置的 config.color
-      // 弹窗状态文本：如果不是异常状态，统一显示为“正常运行”或根据业务自定义
       const displayStatus = needsFlash ? config.name : "正常运行";
+      const lng = Number(position[0] || position.lng);
+      const lat = Number(position[1] || position.lat);
 
       const marker = new this.AMap.Marker({
-        position: position,
+        position: [lng, lat],
+        zIndex: 100,
         content: `
           <div class="pure-light-node ${needsFlash ? 'breathe' : ''}" 
               style="background: ${config.color}; box-shadow: 0 0 15px ${config.color}; font-size: 12px; display: flex; justify-content: center; align-items: center; color: #fff; padding: 8px;">
@@ -286,30 +291,77 @@ export default {
     },
 
     // 全选/全不选逻辑
+    // toggleAll() {
+    //   if (this.isAllSelected) {
+    //     // 如果当前是全选，则清空激活列表，并隐藏地图上所有组
+    //     this.activeLegends = [];
+    //     Object.values(this.routeGroups).forEach(group => group && group.hide());
+    //     if (this.infoWindow) this.infoWindow.close();
+    //   } else {
+    //     // 如果当前不是全选，则填充所有图例名称，并显示地图上所有组
+    //     this.activeLegends = this.legendConfig.map(item => item.name);
+    //     Object.values(this.routeGroups).forEach(group => group && group.show());
+    //   }
+    // },
+
+    // 全选/全不选逻辑修正版
     toggleAll() {
-      if (this.isAllSelected) {
-        // 如果当前是全选，则清空激活列表，并隐藏地图上所有组
+      const targetState = !this.isAllSelected; // 获取点击后的目标状态（true为全选，false为全不选）
+
+      if (targetState) {
+        // --- 情况 1：执行“全选” ---
+        // 1. 更新激活列表
+        this.activeLegends = this.legendConfig.map(item => item.name);
+
+        // 2. 遍历所有已经生成的路线数组，将其全部添加到地图上
+        Object.keys(this.routeGroups).forEach(name => {
+          const overlays = this.routeGroups[name]; // 此时 routeGroups 存储的是数组
+          if (overlays && overlays.length > 0) {
+            this.map.add(overlays);
+          }
+        });
+      } else {
+        // --- 情况 2：执行“全不选” ---
+        // 1. 清空激活列表
         this.activeLegends = [];
-        Object.values(this.routeGroups).forEach(group => group && group.hide());
+
+        // 2. 遍历所有路线数组，从地图上移除
+        Object.keys(this.routeGroups).forEach(name => {
+          const overlays = this.routeGroups[name];
+          if (overlays && overlays.length > 0) {
+            this.map.remove(overlays);
+          }
+        });
+
+        // 3. 关闭当前可能打开的弹窗
         if (this.infoWindow) this.infoWindow.close();
-      } else {
-        // 如果当前不是全选，则填充所有图例名称，并显示地图上所有组
-        this.activeLegends = this.legendConfig.map(item => item.name);
-        Object.values(this.routeGroups).forEach(group => group && group.show());
       }
     },
 
     // 保留你原有的单个切换方法，但确保逻辑一致
+    // toggleRouteVisible(name) {
+    //   const group = this.routeGroups[name];
+    //   const index = this.activeLegends.indexOf(name);
+    //   if (index > -1) {
+    //     this.activeLegends.splice(index, 1);
+    //     group && group.hide();
+    //     this.infoWindow && this.infoWindow.close();
+    //   } else {
+    //     this.activeLegends.push(name);
+    //     group && group.show();
+    //   }
+    // },
+
     toggleRouteVisible(name) {
-      const group = this.routeGroups[name];
+      const overlays = this.routeGroups[name] || []; // 获取的是数组
       const index = this.activeLegends.indexOf(name);
       if (index > -1) {
         this.activeLegends.splice(index, 1);
-        group && group.hide();
-        this.infoWindow && this.infoWindow.close();
+        this.map.remove(overlays); // 改用 remove
+        if (this.infoWindow) this.infoWindow.close();
       } else {
         this.activeLegends.push(name);
-        group && group.show();
+        this.map.add(overlays); // 改用 add
       }
     }
   }