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

以前专题的中心/半径只用来定视图，迷雾图层一直是全局的；管理页那句「迷雾由地图按视野自动呈现，不需要单独圈选」其实是把「没做」写成了「不用做」。现在专题圈了区域时，迷雾只在那个圆内显示。做法是给迷雾单独一个 pane（zIndex 250，底图 200 之上）再对该 pane 做 clip-path: circle()——不能直接裁 tilePane，底图也在里面，会把地图一起挖空。两个坑： - 圆心必须先 project() 到底图坐标系（与 fitCircle 一致），否则整体偏移； - 裁剪圆的注册必须排在 applyFit() 之后：视图未定时 latLngToContainerPoint() 会抛「Set map center and zoom first.」，把后续图层添加一起打断——实测表现是 pane 建好了、迷雾瓦片一张都不出来，而且不报错。迷雾是累积快照、没有时间维度，所以只按区域收口，不按专题的时间范围收口。守卫 TestTopicFogIsClippedToArea 钉住两端与注册顺序。
2026-10-10 10:41:27 +08:00
parent cd69efe8f1
commit eb35abb7f2
7 changed files with 122 additions and 4 deletions
@@ -82,6 +82,8 @@
        fitCircle: {{.FitCircleJSON}},
        fitBBox: {{.FitBBoxJSON}},
        showFog: {{if .Topic.ShowFog}}true{{else}}false{{end}},
+        {{/* 圈了区域的专题：迷雾只在该圆内显示（rond-map.js 里给迷雾单独一个 pane 做 clip-path） */}}
+        {{if .Topic.HasArea}}fogArea: {lat: {{.Topic.CenterLat}}, lon: {{.Topic.CenterLon}}, radiusKm: {{.Topic.RadiusKm}}},{{end}}
        back: '{{.BackQS}}'
      });
    }