|
@@ -84,7 +84,7 @@ export default {
|
|
|
],
|
|
],
|
|
|
intersectionData: [],
|
|
intersectionData: [],
|
|
|
statusIntersections: {},
|
|
statusIntersections: {},
|
|
|
- currentZoomSize: 14, // 保存当前的动态尺寸
|
|
|
|
|
|
|
+ currentZoomSize: 20, // 保存当前的动态尺寸(与 zoom=15 基准一致)
|
|
|
markerById: {}, // ID → marker 索引,加速 focusById 查找
|
|
markerById: {}, // ID → marker 索引,加速 focusById 查找
|
|
|
subAreaOverlays: [], // 子区蒙层覆盖物
|
|
subAreaOverlays: [], // 子区蒙层覆盖物
|
|
|
};
|
|
};
|
|
@@ -190,9 +190,9 @@ export default {
|
|
|
const specialSize = Math.max(16, size * 1.5);
|
|
const specialSize = Math.max(16, size * 1.5);
|
|
|
return {
|
|
return {
|
|
|
'--dot-size': `${size}px`,
|
|
'--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`
|
|
'--special-size': `${specialSize}px`
|
|
|
};
|
|
};
|
|
|
}
|
|
}
|
|
@@ -314,6 +314,7 @@ export default {
|
|
|
|
|
|
|
|
this.map.on('complete', () => {
|
|
this.map.on('complete', () => {
|
|
|
if (!this.isComponentDestroyed) {
|
|
if (!this.isComponentDestroyed) {
|
|
|
|
|
+ this.currentZoomSize = this.getDotSizeByZoom();
|
|
|
this.drawStaticRoutes();
|
|
this.drawStaticRoutes();
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
@@ -939,9 +940,9 @@ export default {
|
|
|
getDotSizeByZoom() {
|
|
getDotSizeByZoom() {
|
|
|
if (!this.map) return 14;
|
|
if (!this.map) return 14;
|
|
|
const zoom = this.map.getZoom();
|
|
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 {
|
|
} else {
|
|
|
markerContent = `
|
|
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);">
|
|
<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>
|
|
</div>
|
|
|
`;
|
|
`;
|
|
|
}
|
|
}
|