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

用户反馈「专题里的圆无论怎么缩放大小都一样,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
+35
View File
@@ -0,0 +1,35 @@
# 2026-10-13
## 排查「专题里的圆大小不随缩放变化」(结论:未能复现,行为是对的)
用户反馈:专题里的圆无论怎么缩放,屏幕上的大小都一样;而且「新圆半径 25km 居然覆盖了整个南宁」。
库里实际存的是 3 个 `radiusKm: 20`(北海 / 南宁 22.815547,108.367767 / 柳州)。
四处实测(无头 CDP,全部换算回地面公里):
| 位置 | 结果 |
|---|---|
| 编辑器 `L.circle`(半径 25) | z9=178px / z11=710px / z13=2842px(每级翻倍),反算始终 25 km,期望 177/711/2847 —— 吻合 |
| 编辑器「改半径」把手 vs 圆心 | 20.038 km(该圆半径 20 km)—— 位置准确 |
| 前台专题页的迷雾裁剪圆 | z7→z10 像素半径 17→141(应 142),换算始终 ≈20 km |
| 同一缩放改「新圆半径」 | 3→42px、10→142、25→356、50→710,与反算 43/142/355/711 一致 |
⇒ **三处画圆全都是地理锚定的、都随缩放正确变化,半径值也确实生效**,复现不出「大小不变」。
「20 km 覆盖整个南宁」是**对的**——用他自己的数据验证:圆心 20 km 内落了他 477 个地点中的
**45 个**,最远的是西乡塘的广西民族大学相思湖校区(14.5 km)与良庆的五象万象汇(10.2 km),
也就是从相思湖一直盖到五象新区,正是南宁建成区的跨度(约 20~25 km)。
20 km 半径 = 40 km 直径;只想圈市中心得用 5~8 km。
### 找到一处真实缺口
**后台编辑器的地图没有比例尺**(`L.control.scale`):`scaleBar=0`(前台专题页 `=1`)。
画圆时没有任何长度参照,很容易得出现「这个圆怎么这么大/怎么没变化」的判断 ——
大概率就是这次困惑的来源。待办:给它加比例尺;圆列表里把半径的后果写出来(如「20 公里(约 40 公里宽)」)。
### 排查时的两个自坑(记下来省时间)
- 地图与迷雾 pane 在 `load` 之后还要等 `/api/map-config` 回来才初始化:`--wait 5` 会拍到
「pane 不存在」,`--wait 8` 才稳。别把「还没初始化」当成「功能没生效」。
- `--eval-file` 里写 `(async function(){...})()` 却**不加 `--await`**,CDP 拿到的是 Promise,
`returnByValue` 序列化成 `{}` —— 看着像脚本没执行,其实是漏了参数。