feat: 地图路口圆点随缩放级别动态调整大小

src/components/TongzhouTrafficMap.vue

@@ -60,6 +60,8 @@ export default {
 
 
       routeGroups: {},
+      // 存储普通圆点 marker 引用，用于缩放时动态更新大小
+      dotMarkers: [],
       privateStyle: {
         legend: {}
       },
@@ -295,6 +297,13 @@ export default {
             this.drawStaticRoutes();
           }
         });
+
+        // 缩放时动态更新普通圆点大小
+        this.map.on('zoomchange', () => {
+          if (!this.isComponentDestroyed) {
+            this.updateDotMarkerSizes();
+          }
+        });
       } catch (err) {
         console.error('地图加载失败:', err);
       }
@@ -426,6 +435,7 @@ export default {
       });
 
       this.routeGroups = {};
+      this.dotMarkers = [];
     },
 
     sleep(ms) {
@@ -838,6 +848,35 @@ export default {
       return Math.sqrt(dx * dx + dy * dy);
     },
 
+    // 根据当前缩放级别计算普通圆点的尺寸（px）
+    getDotSizeByZoom() {
+      if (!this.map) return 14;
+      const zoom = this.map.getZoom();
+      // zoom 15 基准 14px，每增加1级放大3px，最大28px
+      const base = 14;
+      const extra = Math.max(0, zoom - 15) * 3;
+      return Math.min(base + extra, 28);
+    },
+
+    // 遍历所有已注册的普通圆点 marker，更新其 content 和 offset
+    updateDotMarkerSizes() {
+      if (!this.isMapReady()) return;
+      const size = this.getDotSizeByZoom();
+      const half = Math.round(size / 2) + 2; // padding 2px
+      this.dotMarkers.forEach(({ marker, config, isRoute }) => {
+        if (!marker || typeof marker.setContent !== 'function') return;
+        const displayText = config.name ? config.name.charAt(0) : '';
+        const border = isRoute ? 'none' : '1.5px solid rgba(255,255,255,0.7)';
+        const boxShadow = isRoute ? 'none' : `0 0 8px ${config.color}`;
+        marker.setContent(`
+          <div class="pure-light-node ${isRoute ? 'route-node' : ''}" style="width:${size}px;height:${size}px;background:${config.color || '#999'};box-shadow:${boxShadow};border:${border};box-sizing:content-box;display:flex;justify-content:center;align-items:center;color:#fff;border-radius:50%;cursor:pointer;padding:2px;">
+            <span style="transform:scale(0.8);font-weight:bold;font-size:${Math.max(10, size - 2)}px;">${displayText}</span>
+          </div>
+        `);
+        marker.setOffset(new this.AMap.Pixel(-half, -half));
+      });
+    },
+
     createTrafficLightMarker(position, config, type = 'normal') {
       if (!position || !config) return null;
 
@@ -922,6 +961,12 @@ export default {
           }
         });
 
+        // 注册普通圆点 marker，用于缩放时动态更新大小
+        if (!isStartEnd && !isAbnormal && !isPassed) {
+          const isRoute = ["干线协调", "勤务路线"].includes(config.name);
+          this.dotMarkers.push({ marker, config, isRoute });
+        }
+
         marker.on('click', (e) => {
           if (this.isComponentDestroyed) return;
           const extData = e.target.getExtData();