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

用户反馈「专题里的圆无论怎么缩放大小都一样，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 报错。

internal/web/static/js/topic-areas.test.js

@@ -124,6 +124,22 @@ console.log('=== 几何换算 ===');
      '半径换算自洽：按 lonDelta 摆的把手量回来仍是 ' + km + ' 公里');
 })();
 
+console.log('=== 半径的「人话版」跨度（直径）===');
+(function () {
+  eq(api.spanLabel(20), '约 40 公里宽', '半径 20 → 约 40 公里宽');
+  eq(api.spanLabel(25), '约 50 公里宽', '半径 25 → 约 50 公里宽');
+  eq(api.spanLabel(3.5), '约 7 公里宽', '半径 3.5 → 约 7 公里宽');
+  eq(api.spanLabel(0.5), '约 1 公里宽', '半径 0.5 → 约 1 公里宽');
+  eq(api.spanLabel(2000), '约 4000 公里宽', '大半径不带小数');
+  // 小于 1 公里改用米，否则会写成「约 0.1 公里宽」这种别扭说法
+  eq(api.spanLabel(0.05), '约 100 米宽', '半径 0.05 → 约 100 米宽');
+  eq(api.spanLabel(0.3), '约 600 米宽', '半径 0.3 → 约 600 米宽');
+  ok(api.spanLabel(0) === '', '半径 0 → 空串（调用方直接不显示）');
+  ok(api.spanLabel(-1) === '', '负半径 → 空串');
+  ok(api.spanLabel(NaN) === '', 'NaN → 空串');
+  ok(api.spanLabel('abc') === '', '非数字 → 空串');
+})();
+
 console.log('\n=== 汇总 ===');
 console.log('  pass=' + pass + ' fail=' + fail);
 process.exit(fail === 0 ? 0 : 1);