digital-map
digital-map copied to clipboard
福州大学计算机与大数据学院2024寒假社会实践“古厝新数,行迹福州”数字地图


数字照亮文脉之光,技术护航古厝保护
福州大学计算机与大数据学院2024寒假社会实践“古厝新数,行迹福州”数字地图项目
以三坊七巷为例,通过数字化技术记录古厝的前世今生与历史变迁,提供一个交互式的在线平台,让用户能够通过数字地图探索三坊七巷的每一处古建筑,了解其独特的建筑风格、历史故事和文化价值。
🌟 项目特色
- 互动地图:详细的互动式地图展示三坊七巷的古建筑布局。
- 丰富内容:每个建筑配有详细的图片展示、历史背景、文化意义和现状介绍。
- 教育资源:为学校和研究机构提供丰富的教育和研究资源。
🛠 技术栈
- 采用GitHub Page托管及自动化部署,并采用定制域名和CDN加速。
- 重构ScrollBar样式,采用MacOS风格,简洁美观。
- 组件封装合理,接收相关Prop和暴露相关func。
- 将景点信息封装成json文件,可维护性强。
- 采用ElementPlus隐藏组件el-image-viewer,实现定制化查看大图功能。
- 缩放、拖拽地图后地标无错位问题,交互丝滑直观。
- 采用响应式设计,适配各PC和Laptop。
📸 项目展示




🔧 安装
本项目已托管部署到GitHub Page,并采用西二在线工作室二级域名和CDN加速。如果你想在本地运行,那么请在终端运行如下代码:
git clone https://github.com/ROBINRUGAN/digital-map.git
cd digital-map
yarn install
🚀 使用
在终端输入如下命令即可启动:
yarn dev
📄 许可证
本项目采用 MIT 许可证。
💼 本项目域名和CDN加速由福州大学西二在线工作室支持
