weixin_46243251的博客

本篇文章是对整个项目前端部分的总结性概括前端应用层即前端软件，由前端界面，数据接口，坐标转换模块构成，实现了用户输入坐标，对坐标点进行图形化显示以供用户查看，将坐标汇总后以固定格式发送给算法模块，接受算法模块的数据并以图形化方式显示路径，用户选择路径发送到数据服务器存储的功能。坐标转换模块提供将室内动作捕捉系统坐标系下的坐标转换为无人机 NED 坐标系下坐标的功能。前端应用基于 React 框架开发，通过接口与云函数连接，进行数据传输等功能。

使用react-router提供的组件，在app.jsx中整体布局使用了antd的栅格布局，Row组件代表一行，Col代表一列，span表示宽度NavLink标签的作用是改变浏览器的地址栏的路径，而Switch标签则是根据浏览器地址栏的路径，选择对应的Route标签对应的组件。点击菜单同时会修改当前的菜单状态值，当前选中的菜单项会高亮显示Point-list遍历redux的point数组显示，每个列表项显示一个坐标的基本信息，并包含一个删除按钮。删除按钮绑定了redux中的删除点操作。Path-lis

redux的作用是，管理在多个组件之间共享的状态数据组件之间共享的数据共有两种：分别为坐标点数组、路径数组首先需要梳理状态数据的操作类型，添加到action-types.js文件中共有六种数据操作，其中前三种是坐标点数组的操作，后三种是路径数组的操作将每种数据对应的操作逻辑，添加到reducers.js文件中，需要为每一种数据写一个函数Point函数为坐标点的操作逻辑Add_point - 使用push方法，将新的点添加到当前状态中 需要传入的数据为坐标Remove_point –

本篇主要记载了开发过程中需求的进一步明确以及技术选型和模块划分页面结构包含两个部分，列表和画布页面菜单有两个选项，坐标点和路径菜单切换时不改变页面结构，只改变显示的内容在坐标点页面，可以手动添加坐标点坐标点列表和路径列表均可删除任意数据react框架 – 显示页面redux – 状态管理react-router – 内容切换antd – UI库echart – 图表绘制App.jsx – 主模块Components – 组件Containers –容器（react-redux）Redux – 状态管理Api

经过会议讨论与分工，我主要负责项目前端部分的相关工作。对本次项目的需求分析初步规划如下：

无人机多任务寻径仿真软件与实验平台（1）