给显示区编辑器补上长度参照:比例尺 + 直径标注

用户反馈「专题里的圆无论怎么缩放大小都一样,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:
tamakyi
2026-10-13 10:37:10 +08:00
parent 9cf3d89c3c
commit 6aee7e441b
6 changed files with 116 additions and 1 deletions
+33
View File
@@ -572,3 +572,36 @@ func TestTopicAreaRadiusInputAllowsAnyStep(t *testing.T) {
t.Error("topic-areas.js 里半径输入框的 step 别写死数字(见 step 相对 min 递增那条)")
}
}
// 编辑器必须给出长度参照:地图上要有比例尺,半径旁边要标出「约多宽」。
//
// 起因:2026-10-13 用户反馈「这个圆无论怎么缩放大小都一样,20km 却覆盖了整个南宁」。
// 实测三处画圆(编辑器 L.circle、改半径把手、前台迷雾裁剪)全都是地理锚定、随缩放正确
// 变化的,半径值也确实生效 —— 真正缺的是**参照物**:编辑器地图以前没有比例尺
// (前台专题页一直有),圈圆时只能靠地名猜,自然觉得「不对」。
// 所以这条守卫钉的是「别再把这个参照物弄丢」。
func TestTopicAreaEditorGivesSizeReference(t *testing.T) {
js, err := staticFS.ReadFile("static/js/topic-areas.js")
if err != nil {
t.Fatalf("读取 topic-areas.js 失败: %v", err)
}
src := string(js)
if !strings.Contains(src, "L.control.scale(") {
t.Error("topic-areas.js 必须给编辑器地图加比例尺(L.control.scale)—— " +
"没有它,圈圆时没有任何长度参照,「20 公里到底多大」只能拍脑袋")
}
if !strings.Contains(src, "spanLabel") {
t.Error("topic-areas.js 必须在半径旁标出跨度(spanLabel)")
}
b, err := tmplFS.ReadFile("templates/admin/topics.html")
if err != nil {
t.Fatalf("读取 admin/topics.html 失败: %v", err)
}
body := string(b)
for _, need := range []string{`id="area-new-span"`, "spanId"} {
if !strings.Contains(body, need) {
t.Errorf("admin/topics.html 里缺 %q —— 「新圆半径」旁边要显示它会有多宽", need)
}
}
}