![](attachments/banner.png)
# 数据结构课程设计题目2——校园导航图的实现
## 一、设计内容与要求
1. 设计一个学校的校园平面图,所选结点不少于30个。以图中顶点表示校园各景点,存放景点名称、代号、简介等信息;以边表示路径,存放路径长度等相关信息。
2. 为来往客人提供图中任意景点相关信息的查询。
3. 为来往客人提供图中任意景点的问路查询,即任意2个景点间的最短路径,给出具体路径和路径长度。
4. 除了完成基本功能外,最好能提供实时实时路径查询,例如某条路径的临时关闭(需在程序中实现)后的最短路径的计算。
5. 提交设计报告,报告包括代码、设计思路(流程图)和实现界面截图等。
## 二、需求分析
在设计内容和要求中,重点是对两点之间最短路径的计算和显示。此外,为了更好的呈现校园导航的结果,我准备设计一个图形化的用户界面用于展示结果。
此外,需要提供一个“管理员模式”。当用户打开管理员模式后,有权限禁用一部分路径。
## 三、成品展示
![](attachments/校园导航系统主视图.png)
### 1. 景点信息查询
可以通过三种方式选择景点。
- 点击地图上的红色标点;
- 在右侧“起点”或“终点”下拉框中选择;
- 在右侧“起点”或“终点”下拉框中输入景点名,景点名需存在。
选择完毕景点后,右侧“介绍”标签页内会显示**景点名**和景点的**描述信息**。
![](attachments/景点信息查询.png)
### 2. 景点之间最短路径查询
当您选择了两个景点分别作为起点和终点后,您可以点击“计算路径”按钮。
![](attachments/点击“计算路径”按钮.png)
在这之后,程序会自动跳转到“路线”标签页,并显示两点之间的距离。
![](attachments/跳转到“路线”并显示距离.png)
### 3. 管理员模式
鼠标右键点击标题栏**紫金学院Logo**将切换至管理员模式(再右键点一次会切回普通模式)。
![](attachments/右键点击紫金学院Logo.png)
进入管理员模式后,标题栏的颜色会改为醒目的蓝色,以作区分。
![](attachments/管理员模式界面.png)
此时,将显示全部路线。以绿色标注的表示可用,以红色标注的表示禁用。
用鼠标点击一条路线后,会切换该路线的可用状态。
![](attachments/切换路线可用状态.png)
程序会对其状态进行实时保存。您不必担心意外关闭程序后修改会丢失。
## 四、快速上手
本项目使用 C# 语言编写主体程序,使用 Python 语言编写辅助脚本。
在您拿到源代码后,推荐使用 Visual Studio 2022 打开解决方案 `SchoolNavigator.sln`。
### 1. 安装 C# 环境依赖
> [!warning] 注意
> 以下操作基于您已安装 `.NET Core SDK 6.0` ,以及在 Visual Studio 2022 中安装了 C# 相关的工作负载。
>
> - 如需安装 .NET Core SDK 6.0,请前往[微软官方下载](https://dotnet.microsoft.com/zh-cn/download/dotnet/6.0);
> - 如果还没有安装C#工作负载,请使用 `Win + S` 在已安装应用内搜索 `Visual Studio Installer`,再在打开后的选择菜单中进行设置。详细步骤如有需要可以上网查询。
请在 Visual Studio 内置的 NuGet 包管理工具内安装以下依赖:
- `Newtonsoft.Json`
- `MaterialDesignThemes`
### 2. 安装 Python 环境依赖
> [!warning] 注意
> 以下操作基于您已安装 `Python 3.6` 及以上的任意 Python 环境。
>
> - 如需安装 Python,请前往官方网站下载,推荐安装最新版本的 Python。
请在支持 Python 的 IDE 或者编辑器,如 Visual Studio Code, PyCharm 或者另起一个 Visual Studio 窗口,打开项目所在文件夹 `SchoolNavigator`。
您应该能在文件夹内看到两个 Python 文件,分别是:
- `JsonDataScripts.py`
- `certificate_all_paths.py`
在当前文件夹中,新建 Python 虚拟环境:
```cmd
py -m venv venv
```
> [!important]- 本教程以 Windows 10/11 系统为例
> 此处激活指令会随着您使用的**操作系统**或**控制台**类型而变化。如有安装失败的情况,请在确保您已正确安装 Python 的前提下,使用搜索引擎查找解决方案。
随后激活 Python 虚拟环境 venv:
```cmd
.\venv\Scripts\Activate.ps1
```
在虚拟环境 venv 中,安装以下 Python 包:
- `svgpathtools`
即,使用命令:
```cmd
pip install svgpathtools
```
### 3. 启动 Python 脚本生成数据
本项目中,C#代码需要一个位于 `.\data\graph.json` 的数据文件。这个文件由 `JsonDataScripts.py` 使用 `SchoolMap.svg` 生成。因此,先启动 Python 脚本生成数据:
```cmd
py JsonDataScripts.py
```
如果看到输出 `Success.` 即证明生成完毕。
此时,位于 `.\SchoolNavigator\data\` 目录下应该可以看到 `graph.json` 文件。
### 4. 启动 C# 程序
回到 Visual Studio 当中,在安装完毕依赖的前提下,按下 `F5` 或点击“SchoolNavigator"进行 Debug 模式启动。
弹出主窗口即为启动成功。请开始使用吧。
## 五、概要设计
概要设计涉及到前期的技术学习和测试。在最终确定下来的架构中,涵盖了如下几个核心技术点:
- 图形化界面
- 数据采集与数据处理(重点)
- 最短路径算法实现(重点)
- 在用户界面展示路线和节点信息
- 管理员模式
### 1. 图形化界面设计和实现
#### 技术选型
在项目初期,我计划使用 C++ 语言编写后端,并使用 Qt 框架制作图形界面。C++ 是我第一擅长的语言,但奈何经过我一番学习和评估,我发现 C++ Qt 这套开发模式并不能帮助我快速制作出美观简洁的界面。相反,使用 C++ 还会使得我花费更多的精力在一些晦涩的语法和不必要的底层实现上。
因此,最终我选择了 C# 语言进行开发,前端使用有比较成熟体系的 WPF 进行开发。
#### 界面设计
界面设计部分,首先是位于左侧的一张紫金学院大地图。右侧是主功能区,承担了选择景点、显示景点信息和显示景点之间距离的全部功能。
![校园导航系统主视图](attachments/校园导航系统主视图.png)
为了优化使用体验,我把在地图上显示的景点的标点也做成了可点击的。用户可以选择多种输入起点、终点的方式。
#### 景点信息动态展示
除此之外,我尽可能让用户体验和交互体验更加友好和直观。比如:
- 当选择起点、终点时,将自动展示景点详细信息;
- 当点击计算路径后,将自动跳转到“路线”标签页并显示两点间的距离。
### 2. 从地图获取信息:数据采集与数据处理
地图上的点不是凭空出现的。尤其是对于有图形化界面需求的导航系统,精确的描绘每一个节点所在位置十分必要。
#### 从画板导入节点和路径
第一步,先从高德地图、百度地图等软件拉取一张覆盖学校全域的大地图。先在 Adobe Illustrator 中将所有路线描下来,作为路径;同时也要描出每个路口,作为节点。
将画板中的内容以 `.svg` 格式导出后,使用算法提取路径和节点的关键信息。
#### 用脚本提取数据并转化成对象信息
在 Python 中编程,把 `.svg` 格式提供的路径信息:路径起点、终点、途径点;和节点信息:坐标x、坐标y,按照自己对库表的约定写入 `.json` 文件。
#### 在最终程序启动时读入所有数据
在程序初始化的时候,将 `.json` 文件中的所有数据读入并存储到内存中。
至此,对地图信息的采集和处理已经完成。我们已经得到了:
- 所有的节点:包括坐标x,坐标y;
- 所有的路径:包括起点、终点、途径路线、距