左侧手机壳里跑的是 真实页面样式（取自 H5 构建产物）+ 真实图层配置（/api/ditu/zonghe-ditu/catalog）+ 真实地块瓦片。
右侧可以切换一级图层 / 二级分类，面板开关对应原页面的浮动层。数据来源见页面内的「数据来源」说明，坐标 GCJ-02。
原页面里，这四类面板互斥：点「图层」出面板 + 二级分类，点「图例」出图例条，点「聚焦」出聚焦面板。这里把它们拆成开关方便你逐个看。
| 图层 | 分组 | 类型 | 要素数 | 配色 / 图例 |
|---|
正在读取 /__health …
上游是不可控的第三方服务。服务端已实现「上游 → 本地离线快照 → 空瓦片」三级回退： 上游熔断后页面顶部会出现离线快照角标并标出数据日期，地图仍可用（内容停在快照日）。
| 目录 | GET /api/ditu/zonghe-ditu/catalog（缓存 60s） |
| 行政区 | GET /regions?level=county（缓存 1 天） |
| 搜索 | GET /search?group_id=&subgroup_id=&q=&limit=10 |
| 详情 | GET /features/{layer_id}/{feature_id} → 已带中文 label |
| 圈选 | GET /focus?group_id=&lng=&lat=&shape=circle&range_meters=3000 |
| 矢量瓦片 | /tiles/ditu/{layer}_{overview|lowz|detail}/{z}/{x}/{y}?v={version} |
| 字形 (第31轮本地化) | vendor/fonts/{fontstack}/{range}.pbf（原为 fonts.openmaptiles.org） |
| 健康状态 | GET /__health → 模式 / 熔断 / 快照数据日期 / 凭证配置 |
全部无需鉴权，Access-Control-Allow-Origin: *。图层数量、配色、图例、瓦片档位(minzoom/maxzoom)都是服务端下发，客户端不该写死 —— 这正是照抄时最值得学的一点。