给显示区编辑器补上长度参照：比例尺 + 直径标注
用户反馈「专题里的圆无论怎么缩放大小都一样，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
@@ -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; }
|
||||
|
||||
@@ -86,6 +86,16 @@
|
||||
return km / (111.32 * c);
|
||||
}
|
||||
|
||||
// 半径的「人话版」跨度：半径 20 公里 ⇒「约 40 公里宽」。
|
||||
// 光写「半径 20 公里」很容易被读小 —— 直径才是眼睛看到的那个宽度。
|
||||
function spanLabel(radiusKm) {
|
||||
var d = num(radiusKm) * 2;
|
||||
if (!isFinite(d) || d <= 0) return '';
|
||||
if (d < 1) return '约 ' + Math.round(d * 1000) + ' 米宽';
|
||||
if (d < 10) return '约 ' + (Math.round(d * 10) / 10) + ' 公里宽';
|
||||
return '约 ' + Math.round(d) + ' 公里宽';
|
||||
}
|
||||
|
||||
// 两点距离（公里），球面公式；拖把手时用它反推半径
|
||||
function kmBetween(a, b) {
|
||||
var dLat = (b[0] - a[0]) * Math.PI / 180, dLon = (b[1] - a[1]) * Math.PI / 180;
|
||||
@@ -99,7 +109,8 @@
|
||||
MAX_AREAS: MAX_AREAS, MIN_KM: MIN_KM, MAX_KM: MAX_KM,
|
||||
normalize: normalize, validate: validate, serialize: serialize, parse: parse,
|
||||
add: add, remove: remove, setCenter: setCenter, setRadius: setRadius,
|
||||
latDelta: latDelta, lonDelta: lonDelta, kmBetween: kmBetween
|
||||
latDelta: latDelta, lonDelta: lonDelta, kmBetween: kmBetween,
|
||||
spanLabel: spanLabel
|
||||
};
|
||||
|
||||
// ---------- 以下需要 DOM 与 Leaflet ----------
|
||||
@@ -126,6 +137,7 @@
|
||||
var listBox = document.getElementById(opts.listId || 'area-list');
|
||||
var hint = document.getElementById(opts.hintId || 'area-hint');
|
||||
var radiusIn = document.getElementById(opts.radiusId || 'area-new-km');
|
||||
var newSpan = document.getElementById(opts.spanId || 'area-new-span');
|
||||
var saveBtn = form.querySelector('button[type=submit]');
|
||||
if (!hidden || !listBox) return;
|
||||
|
||||
@@ -149,6 +161,9 @@
|
||||
L.tileLayer(def.url, {
|
||||
subdomains: subs, maxZoom: def.maxZoom || 18, minZoom: 3, attribution: def.attr || ''
|
||||
}).addTo(map);
|
||||
// 比例尺是必须的：没有它，圈圆时手上没有任何长度参照，只能靠地名猜，
|
||||
// 「20 公里到底多大」就变成了拍脑袋（前台的地图一直有，这里以前漏了）。
|
||||
L.control.scale({ imperial: false, position: 'bottomleft' }).addTo(map);
|
||||
if (crsIn) crsIn.value = def.crs || 'gcj02';
|
||||
|
||||
var layer = L.layerGroup().addTo(map);
|
||||
@@ -164,6 +179,11 @@
|
||||
if (!isFinite(v) || v < MIN_KM || v > MAX_KM) return 3;
|
||||
return v;
|
||||
}
|
||||
// 「新圆半径」旁边实时显示它会画多大：落点之前就能判断合不合适
|
||||
function syncNewSpan() {
|
||||
if (newSpan) newSpan.textContent = spanLabel(newRadius());
|
||||
}
|
||||
if (radiusIn) radiusIn.addEventListener('input', syncNewSpan);
|
||||
|
||||
// 整块重画：圆最多 20 个，重建比增量对齐简单得多，也不会漏掉「删了中间一个」的下标错位
|
||||
function redraw() {
|
||||
@@ -222,6 +242,7 @@
|
||||
hidden.value = serialize(areas);
|
||||
redraw();
|
||||
renderList();
|
||||
syncNewSpan();
|
||||
var msg = validate(areas);
|
||||
if (hint) {
|
||||
if (msg) {
|
||||
@@ -289,6 +310,12 @@
|
||||
lab.appendChild(unit);
|
||||
row.appendChild(lab);
|
||||
|
||||
// 「半径 20 公里」旁边补一句直径 —— 眼睛量的是宽度，光看半径容易读小
|
||||
var span = document.createElement('span');
|
||||
span.className = 'muted area-span';
|
||||
span.textContent = spanLabel(a.radiusKm);
|
||||
row.appendChild(span);
|
||||
|
||||
var go = document.createElement('button');
|
||||
go.type = 'button';
|
||||
go.className = 'btn sm';
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
{{/* step 必须是 any：它是相对 min 递增的，min=0.05 + step=0.5 的合法值只有
|
||||
0.05/0.55/1.05…，用户填 3 或 3.5 会被浏览器判非法并弹原生提示。 */}}
|
||||
<input type="number" id="area-new-km" min="0.05" max="2000" step="any" value="3"></label>
|
||||
<span class="muted area-span" id="area-new-span"></span>
|
||||
<button class="btn" type="button" id="area-clear">清除全部</button>
|
||||
<span class="muted" id="area-hint"></span>
|
||||
</div>
|
||||
@@ -110,6 +111,7 @@
|
||||
window.rondTopicAreas.init({
|
||||
mapId: 'area-map', formId: 'topic-form', listId: 'area-list',
|
||||
hintId: 'area-hint', radiusId: 'area-new-km', clearId: 'area-clear',
|
||||
spanId: 'area-new-span',
|
||||
home: {{if .MapHomeJSON}}{{.MapHomeJSON}}{{else}}null{{end}}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user