亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:pc轨迹回放制作

主要内容:制作车辆轨迹操作页,包括查询条件、动态轨迹回放、车辆轨迹详情表单等

应用场景:车辆轨迹应用设计、其他移动类轨迹设计

案例展示:

pc轨迹回放制作


正文内容:

步骤一:建立一个基本页面背景矩形1920*1080,表头1920*70;

步骤二:分别创建页面组成,条件查询、回放速度、查询记录、车辆轨迹详情、地图区;

步骤三:录入车辆和车辆轨迹表单页面,交互时使用;轨迹详情表单我们在实际场景中是从表中取值,那么我们就参照表单的形式建立多个表单详情页面,交互调用使用;轨迹详情表单采用内联框架调用,以新页面的形式出现;

录入车辆(三辆车:京X12345、京X23456、京X34567)

分别添加另外两个内联框架对应新增的两个页面

步骤四:添加根据查询条件,车辆轨迹同步显示交互;

同理设置另外两种情形

因为篇幅关系,时间的筛选没有制作,以及另外一种表单的做法(中继器),如有需要可私信我,在做一篇中继器篇;

步骤五:添加车辆轨迹,设定坐标点根据详情地点,设置好坐标点;划出行程轨迹;

步骤六:设置车辆移动交互,由回放速度按钮触发。

继续添加,三个按钮的选中值

本课小结:轨迹回放页面的设计难点:移动轨迹和轨迹详情表单;详情表单采用内联框架快速添加对应车辆的表单,符合代码设计逻辑;车辆移动轨迹设计分段坐标点,画出路线,利用回放按钮调起移动效果;在实际场景中车辆移动轨迹的取数来自于车辆GPS数据,到时候加一下数据获取页面微调即可。


相关课程直通车:

中继器实现时间读取和修改-CSDN博客

Axure横向菜单高级交互-CSDN博客

Axure垂直菜单展开与折叠-CSDN博客

Axure树形菜单展开与折叠-CSDN博客

app评价弹窗制作-CSDN博客

如有其他相关问题,欢迎私信沟通,关注  结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部