专题页的迷雾按专题圈的区域收口

以前专题的中心/半径只用来定视图,迷雾图层一直是全局的;管理页那句
「迷雾由地图按视野自动呈现,不需要单独圈选」其实是把「没做」写成了
「不用做」。现在专题圈了区域时,迷雾只在那个圆内显示。

做法是给迷雾单独一个 pane(zIndex 250,底图 200 之上)再对该 pane 做
clip-path: circle()——不能直接裁 tilePane,底图也在里面,会把地图一起挖空。

两个坑:
- 圆心必须先 project() 到底图坐标系(与 fitCircle 一致),否则整体偏移;
- 裁剪圆的注册必须排在 applyFit() 之后:视图未定时 latLngToContainerPoint()
  会抛「Set map center and zoom first.」,把后续图层添加一起打断——实测
  表现是 pane 建好了、迷雾瓦片一张都不出来,而且不报错。

迷雾是累积快照、没有时间维度,所以只按区域收口,不按专题的时间范围收口。
守卫 TestTopicFogIsClippedToArea 钉住两端与注册顺序。
This commit is contained in:
tamakyi
2026-10-10 10:41:27 +08:00
parent cd69efe8f1
commit eb35abb7f2
7 changed files with 122 additions and 4 deletions
+41
View File
@@ -265,6 +265,47 @@ func TestDateInputsGoThroughAttachAll(t *testing.T) {
}
}
// ---------- 专题的迷雾要和「区域」成对:模板传 fogArea、地图脚本认 fogArea ----------
//
// 2026-10-10 用户实测发现:专题圈了区域,迷雾却还是全局的。而管理页原本的说明写的是
// 「区域内的世界迷雾由地图按视野自动呈现,不需要单独圈选」—— **文档与实现不一致**
// (迷雾一直是全局瓦片,完全不认区域),这种「说明写了、实现没做」最容易蒙混过关。
//
// 这条守卫钉住两端与一处顺序:
// ① topic.html 必须把专题区域传给地图;
// ② rond-map.js 必须实现圆形收口(单独 pane + clip-path,不能裁默认 tilePane——底图在里面);
// ③ 裁剪圆的注册必须排在 applyFit() 之后:视图还没定时 latLngToContainerPoint() 会抛
// 「Set map center and zoom first.」,那行异常会把后面的图层添加一起打断
// (实测:pane 建好了、迷雾瓦片一张都没有)。
func TestTopicFogIsClippedToArea(t *testing.T) {
tpl, err := tmplFS.ReadFile("templates/topic.html")
if err != nil {
t.Fatalf("读取 topic.html 失败: %v", err)
}
if !strings.Contains(string(tpl), "fogArea:") {
t.Error("topic.html 没把专题区域(fogArea)传给地图 —— 迷雾不会被收口到那个圆内")
}
js, err := staticFS.ReadFile("static/js/rond-map.js")
if err != nil {
t.Fatalf("读取 rond-map.js 失败: %v", err)
}
src := string(js)
for _, needle := range []string{"opts.fogArea", "createPane('rondFog')", "clipPath"} {
if !strings.Contains(src, needle) {
t.Errorf("rond-map.js 里缺 %q —— 迷雾的圆形收口没实现或被改掉了", needle)
}
}
// 顺序:注册点必须排在 `var applyFit = function` 之后 —— 放早了(比如塞在迷雾图层那段里)
// 就是在视图定下来之前算裁剪圆,会抛「Set map center and zoom first.」并打断后续图层添加。
reg := strings.Index(src, "map.on('move zoom viewreset resize', applyFogClip)")
fitDef := strings.Index(src, "var applyFit = function")
if reg < 0 || fitDef < 0 || reg < fitDef {
t.Error("applyFogClip 的注册必须排在 applyFit 定义(也就是视图设定)之后 —— " +
"视图未定时算裁剪圆会抛错,并把后面的图层添加一起打断")
}
}
// ---------- 字阶纪律:app.css 与模板内联样式都只走令牌 ----------
//
// 改前 app.css 里散着 10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 12.8 / 13 / 13.5 / 14 / 14.5 / 15 /