国清寺

这张图是怎么做出来的

从景区牌示照片到可交互的矢量地图，五步。没有用任何图片资源 —— 全部由数据实时绘制，所以能无限缩放不糊、每个元素都能点。

1. 把图读成数据，而不是描图

   先把牌示上每个标注抄成一条记录：中文名、英文名、分类、层级、坐标。坐标以图幅左上角为原点，量出的像素除以图宽再乘画布宽即可。这一步做对，后面全部能程序化生成。

2. 分两层坐标系，而不是一张大图

   景区全域用 viewBox="0 0 1200 1260"；寺院内部另有一套自己的坐标，整体套在一个 <g transform="translate() scale()"> 里。两层各自独立编辑，寺内布局调整不会牵动全域路网。

3. 用分级显示解决「挤成一团」

   全域尺度下三十多个殿堂名字必然重叠。做法是按缩放倍数切换详略：低倍只显示路网、周边景点和一个「国清寺」标记；越过阈值才淡入寺内殿名与十景编号。这是纸质导览图做不到、也是交互化最值的一件事。

4. 把建筑抽象成可复用图元

   殿堂 = 起翘檐口的实心剪影 + 台身 + 台基；塔 = 若干层收分的檐；亭 = 顶加四柱；碑 = 圆首方趺。写成几个参数化函数，按分类自动上色，几十个点位就都画得出来，且风格统一。

5. 交互挂在结构上，不挂在像素上

   每个点位是一个 <g class="poi" data-id>，天然可点、可高亮、可筛选。路线动画用 getPointAtLength() 沿真实路径推进，配合 stroke-dashoffset 让线一段段延伸。搜索只是对数据数组做匹配，再把命中点居中并自动放大到对应层级。

换成你自己的景区：只改 AREA / TEMPLE / ROADS / WATER 四个数组，渲染与交互代码不用动。
图上位置为示意性还原，表达点位关系与游览顺序，不作导航依据；文字简介为参考内容，以景区现场牌示为准。牌示上的咨询、投诉、救援电话未收录 —— 照片辨认可能出错，请以现场号码为准。
景点照片：站内自摄，并采 Wikimedia Commons 共享素材（CC 授权）。