数字复原平安京项目中的可视化地图界面开发

在数字复原平安京的公益项目中，开发者面临一个有趣的需求：制作一个可视化地图界面，用于实时查看复原进度。平安京的地图规整，可以分割为大小相同的格子，为开发提供了便利。开发者首先尝试将静态图片中的格子转化为可点击的元素，但效果不佳。随后，他选择了使用高度定制化的CSS-grid技术，通过坐标系统来定位单元格，并实现了合并单元格的功能，使得大单元格可以跨越多个小单元格。此外，还加入了数据映射和交互功能，如快捷键、多选等，以及进度视图的切换。最终，这个可视化地图界面得到了开发者和朋友的满意。