13. 交互：图层控制与地图联动实战

一个优秀的 GIS 系统，不仅要能“画”出地图，更要能“听”懂用户的指令。当用户在左侧面板勾选一个图层时，地图是如何在毫秒间响应并重新绘制的？当用户点击地图上的某个要素时，属性弹窗又是如何精准定位的？今天，我们将深入light-mvt-server的前端交互核心，看看如何利用 Vue3 的响应式系统与 MapLibre GL JS 的事件机制，实现丝滑的图层控制、透明度调节以及视图联动。一、 状态驱动：图层可见性的双重过滤在之前的文章中我们提到过，本项目的图层管理采用了一种双状态模型。这种设计在处理复杂的业务逻辑（如批量开关图层、样式预览）时显得尤为强大。1.1 后端状态 vs 前端状态Backend Status (active/inactive)：代表数据是否已经过处理并准备好切片。这是“硬”状态。Frontend Visibility (visible/hidden)：代表用户当前是否在地图上看到了它。这是“软”状态。