给显示区编辑器补上长度参照:比例尺 + 直径标注
用户反馈「专题里的圆无论怎么缩放大小都一样,20km 却覆盖了整个南宁」。实测 三处画圆(编辑器 L.circle、改半径把手、前台迷雾裁剪圆)**全都是地理锚定的**: 编辑器圆直径 z9/z11/z13 = 178/710/2842px(期望 177/711/2847)、同一缩放下改半径 3/10/25/50km → 42/142/356/710px(期望 43/142/355/711)、把手距圆心 20.038km (该圆半径 20km)、前台裁剪圆换算始终 ≈20km。也就是**复现不出「大小不变」**。 真正的问题是缺**参照物**:编辑器地图以前没有比例尺(前台专题页一直有), 圈圆时只能靠地名猜。用他自己的数据验证「20km 覆盖南宁」是对的——圆心 20km 内 落了他 477 个地点中的 45 个,最远到西乡塘的广西民族大学相思湖校区(14.5km) 与良庆的五象万象汇(10.2km),正是南宁建成区的跨度。 所以这一版补的是参照物,不改任何几何逻辑: - 编辑器地图加 L.control.scale(跟前台一致,公制)。 - 半径旁边标出跨度:`spanLabel()` 把半径换成「约 40 公里宽」(<1 公里改用米, 免得出「约 0.1 公里宽」这种别扭说法);圆列表每行也标,新圆半径旁边实时跟着变。 - 守卫 TestTopicAreaEditorGivesSizeReference 钉住这两样(变异验证过:去掉比例尺立刻红)。 它顺手抓到我自己的疏漏——模板的 init 调用漏传了 spanId,靠脚本默认值兜着,已补上显式传参。 验证:topic-areas.test.js 55 条(新增 11 条 spanLabel 边界);无头实测比例尺在 (z10 显示 10 km)、新圆半径 3→「约 6 公里宽」/25→「约 50 公里宽」实时更新、 圆列表 20→「约 40 公里宽」,全程无 JS 报错。
This commit is contained in:
@@ -1166,6 +1166,8 @@ label.f > span.span-actions { display: flex; align-items: center; justify-conten
|
||||
#area-map { height: 380px; border-radius: var(--r-md); background: var(--line-soft); }
|
||||
.area-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
|
||||
.area-tools #area-hint { flex: 1 1 240px; font-size: var(--fs-sm); }
|
||||
/* 半径旁边的「约 N 公里宽」:不许折行,否则圆列表每行高度会跳 */
|
||||
.area-span { white-space: nowrap; font-size: var(--fs-sm); }
|
||||
#area-hint.err { color: var(--err-fg); }
|
||||
#area-list { margin-top: 4px; }
|
||||
#area-list:empty { display: none; }
|
||||
|
||||
Reference in New Issue
Block a user