Explorar el Código

调整地图标记点大小和文字可读性

  - 标记点基准尺寸从 14px 提升到 20px(zoom=15),最大值从 28px 调整为 32px
  - 圆形内边距从 2px 增加到 4px,文字与边缘间距更大
  - 移除文字 transform:scale(0.8) 缩放,字号改为 size-4px,保持清晰可读
  - 修复初始尺寸问题:currentZoomSize 初始值同步为 20px,地图 complete 事件中主动计算尺寸
画安 hace 1 semana
padre
commit
0b5c876aa4
Se han modificado 1 ficheros con 9 adiciones y 8 borrados
  1. 9 8
      src/components/TongzhouTrafficMap.vue

+ 9 - 8
src/components/TongzhouTrafficMap.vue

@@ -84,7 +84,7 @@ export default {
       ],
       intersectionData: [],
       statusIntersections: {},
-      currentZoomSize: 14, // 保存当前的动态尺寸
+      currentZoomSize: 20, // 保存当前的动态尺寸(与 zoom=15 基准一致)
       markerById: {}, // ID → marker 索引,加速 focusById 查找
       subAreaOverlays: [], // 子区蒙层覆盖物
     };
@@ -190,9 +190,9 @@ export default {
       const specialSize = Math.max(16, size * 1.5);
       return {
         '--dot-size': `${size}px`,
-        '--dot-padding': size >= 12 ? '2px' : '0px',
-        '--text-display': size >= 12 ? 'flex' : 'none',
-        '--text-size': `${Math.max(10, size - 2)}px`,
+        '--dot-padding': size >= 14 ? '4px' : '0px',
+        '--text-display': size >= 14 ? 'flex' : 'none',
+        '--text-size': `${Math.max(10, size - 4)}px`,
         '--special-size': `${specialSize}px`
       };
     }
@@ -314,6 +314,7 @@ export default {
 
         this.map.on('complete', () => {
           if (!this.isComponentDestroyed) {
+            this.currentZoomSize = this.getDotSizeByZoom();
             this.drawStaticRoutes();
           }
         });
@@ -939,9 +940,9 @@ export default {
     getDotSizeByZoom() {
       if (!this.map) return 14;
       const zoom = this.map.getZoom();
-      // 基准:zoom=15时是14px。每缩小一级减小3px。
-      const size = 14 + (zoom - 15) * 3;
-      return Math.min(Math.max(6, size), 28); // 最小值设为 6px
+      // 基准:zoom=15时是20px。每缩小一级减小3px。
+      const size = 20 + (zoom - 15) * 3;
+      return Math.min(Math.max(6, size), 32); // 最小值设为 6px
     },
 
     /**
@@ -993,7 +994,7 @@ export default {
         } else {
           markerContent = `
             <div class="pure-light-node ${isRoute ? 'route-node' : ''}" style="width: var(--dot-size); height: var(--dot-size); background: ${config.color || '#999'}; box-shadow: ${isRoute ? 'none' : `0 0 8px ${config.color}`}; border: ${isRoute ? 'none' : '1.5px solid rgba(255,255,255,0.7)'}; box-sizing: border-box; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 50%; cursor: pointer; padding: var(--dot-padding);">
-              <span style="display: var(--text-display); transform: scale(0.8); font-weight: bold; font-size: var(--text-size);">${displayText}</span>
+              <span style="display: var(--text-display); font-weight: bold; font-size: var(--text-size);">${displayText}</span>
             </div>
           `;
         }