Flutter 框架跨平台鸿蒙开发 - 旅行足迹地图

旅行足迹地图应用欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net一、项目概述运行效果图1.1 应用简介旅行足迹地图是一款旅行探索类应用核心理念是打造专属旅行地图。通过可视化技术将用户的旅行足迹以地图形式呈现配合照片关联和旅行故事记录让每一次旅行都成为珍贵的数字记忆。旅行不仅是身体的移动更是心灵的探索。本应用将地理信息、视觉记忆、文字叙事三者融合构建一个立体的旅行档案系统。用户可以在地图上标记到访过的地点关联旅行照片撰写旅行故事最终形成独一无二的个人旅行地图。1.2 核心功能功能模块功能描述实现方式足迹地图可视化展示旅行足迹CustomPainter 经纬度映射地点标记在地图上标记到访地点坐标转换 脉冲动画照片墙展示旅行照片集合GridView 照片关联旅行故事记录旅行经历和感悟文字编辑 时间线展示统计数据旅行数据统计分析数据聚合 图表可视化成就系统解锁旅行成就徽章条件判断 徽章展示1.3 旅行类型序号类型Emoji颜色典型场景1城市️#2196F3都市观光、城市漫步2自然️#4CAF50山川湖泊、森林公园3海滩️#FF9800海滨度假、沙滩游玩4古迹️#9C27B0历史遗迹、文化景点5探险️#E91E63户外徒步、野外露营6美食#F44336美食之旅、特色餐饮1.4 评分等级序号等级星级分值颜色1一般⭐1#9E9E9E2还行⭐⭐2#8BC34A3不错⭐⭐⭐3#CDDC394很棒⭐⭐⭐⭐4#FFC1075难忘⭐⭐⭐⭐⭐5#FF98001.5 技术栈技术领域技术选型版本要求开发框架Flutter 3.0.0编程语言Dart 2.17.0设计规范Material Design 3-状态管理setState-动画控制AnimationController-地图绘制CustomPainter-目标平台鸿蒙OS / WebAPI 21二、项目结构lib/ ├── main_travel_footprint.dart # 应用主入口 │ ├── TravelFootprintApp # 根应用组件 │ ├── TravelType # 旅行类型枚举 │ ├── TravelRating # 评分等级枚举 │ ├── TravelFootprint # 旅行足迹模型 │ ├── WorldMapPainter # 世界地图绘制器 │ ├── TypeChartPainter # 类型分布图表 │ └── TravelFootprintHomePage # 主页面三、数据模型3.1 TravelType 枚举enumTravelType{city(城市,️,Color(0xFF2196F3)),nature(自然,️,Color(0xFF4CAF50)),beach(海滩,️,Color(0xFFFF9800)),historical(古迹,️,Color(0xFF9C27B0)),adventure(探险,️,Color(0xFFE91E63)),food(美食,,Color(0xFFF44336));finalStringlabel;finalStringemoji;finalColorcolor;}3.2 TravelRating 枚举enumTravelRating{one(一般,⭐,1,Color(0xFF9E9E9E)),two(还行,⭐⭐,2,Color(0xFF8BC34A)),three(不错,⭐⭐⭐,3,Color(0xFFCDDC39)),four(很棒,⭐⭐⭐⭐,4,Color(0xFFFFC107)),five(难忘,⭐⭐⭐⭐⭐,5,Color(0xFFFF9800));finalStringlabel;finalStringstars;finalint value;finalColorcolor;}3.3 TravelFootprint 模型classTravelFootprint{finalStringid;// 唯一标识finalStringplaceName;// 地点名称finalStringlocation;// 所在地区finaldouble latitude;// 纬度finaldouble longitude;// 经度finalTravelTypetype;// 旅行类型finalTravelRatingrating;// 评分finalStringstory;// 旅行故事finalListStringphotos;// 照片列表finalDateTimevisitDate;// 访问日期finalint days;// 旅行天数finaldouble cost;// 花费金额}四、核心功能实现4.1 世界地图绘制classWorldMapPainterextendsCustomPainter{finalListTravelFootprintfootprints;finaldouble animationValue;finaldouble pulseValue;overridevoidpaint(Canvascanvas,Sizesize){_drawBackground(canvas,size);_drawGridLines(canvas,size);_drawContinents(canvas,size,center);_drawFootprints(canvas,size);}void_drawContinents(Canvascanvas,Sizesize,Offsetcenter){// 使用贝塞尔曲线绘制简化的大陆轮廓// 北美洲、亚洲、非洲、南美洲、澳大利亚}}4.2 经纬度坐标转换double_longitudeToX(double longitude,double width){returnwidth*(longitude180)/360;}double_latitudeToY(double latitude,double height){returnheight*(90-latitude)/180;}4.3 足迹标记绘制void_drawFootprints(Canvascanvas,Sizesize){for(varfootprintinfootprints){finalx_longitudeToX(footprint.longitude,size.width);finaly_latitudeToY(footprint.latitude,size.height);// 绘制脉冲光晕效果finalpulseSize1.0pulseValue*0.3;finalglowPaintPaint()..colorfootprint.type.color.withValues(alpha:0.3)..maskFilterconstMaskFilter.blur(BlurStyle.normal,10);canvas.drawCircle(Offset(x,y),20*pulseSize,glowPaint);// 绘制标记点canvas.drawCircle(Offset(x,y),12,markerPaint);canvas.drawCircle(Offset(x,y),12,borderPaint);}}4.4 类型分布图表classTypeChartPainterextendsCustomPainter{finalMapTravelType,inttypeCount;overridevoidpaint(Canvascanvas,Sizesize){// 绘制环形饼图for(vartypeintypes){finalsweepAngle2*pi*count/total;canvas.drawArc(rect,startAngle,sweepAngle,true,paint);startAnglesweepAngle;}// 绘制中心圆canvas.drawCircle(center,radius*0.35,innerPaint);}}五、界面设计5.1 页面结构页面功能设计要点足迹地图展示世界地图和足迹标记渐变背景 动态标记照片墙展示所有旅行照片九宫格布局 悬浮标签旅行故事展示旅行故事列表卡片式设计 时间信息统计数据展示旅行统计数据数据卡片 图表展示5.2 配色方案元素颜色值用途主色调#00BCD4品牌色、强调色地图背景#E3F2FD → #90CAF9渐变背景大陆颜色#81C784陆地区域海洋颜色#BBDEFB海洋区域5.3 交互设计// 添加足迹弹窗void_showAddFootprintDialog(){showModalBottomSheet(context:context,isScrollControlled:true,builder:(context)_AddFootprintSheet(onAdd:(footprint){setState((){_footprints.add(footprint);});}),);}// 查看足迹详情void_showFootprintDetail(TravelFootprintfootprint){showModalBottomSheet(context:context,isScrollControlled:true,builder:(context)_FootprintDetailSheet(footprint:footprint),);}六、动画效果6.1 地图动画_mapAnimationControllerAnimationController(vsync:this,duration:constDuration(seconds:20),)..repeat();// 持续旋转动画6.2 脉冲动画_pulseControllerAnimationController(vsync:this,duration:constDuration(milliseconds:1500),)..repeat(reverse:true);// 往返脉冲效果6.3 动画应用动画类型效果描述应用场景地图旋转缓慢旋转的世界地图地图背景脉冲光晕足迹标记的呼吸效果地点标记渐变背景多色渐变过渡页面背景七、运行与调试7.1 运行命令# 运行应用flutter run-dharmonyos lib/main_travel_footprint.dart# 代码分析flutter analyze lib/main_travel_footprint.dart# 构建HAP包flutter build hap--targetlib/main_travel_footprint.dart7.2 调试要点调试项检查内容解决方案地图显示大陆轮廓是否正常调整贝塞尔曲线参数坐标转换经纬度映射是否正确验证转换公式动画性能脉冲动画是否流畅调整动画时长八、扩展方向8.1 功能扩展扩展功能实现思路技术要点真实地图集成地图SDK高德/百度地图API照片上传本地图片选择image_picker插件数据持久化本地数据存储SharedPreferences云端同步数据备份恢复云存储服务分享功能生成分享图片截图 社交分享8.2 界面优化优化项优化方案预期效果地图精度使用矢量地图数据更精确的地图显示照片展示支持真实照片上传更真实的旅行记录路线绘制连接相邻足迹点展示旅行路线九、使用场景9.1 个人旅行记录用户可以将每次旅行的足迹记录在地图上形成个人专属的旅行地图。通过照片和故事的关联让旅行记忆更加立体和生动。9.2 旅行规划参考查看自己过去的旅行足迹分析旅行偏好和消费习惯为未来的旅行规划提供数据支持。9.3 社交分享将旅行足迹地图分享给朋友展示自己的旅行经历交流旅行心得和推荐目的地。十、总结旅行足迹地图应用通过地图可视化技术将用户的旅行经历以直观的方式呈现。应用采用Flutter框架开发使用CustomPainter实现世界地图绘制和足迹标记配合动画效果增强视觉体验。核心亮点包括可视化地图使用贝塞尔曲线绘制简化世界地图直观展示旅行足迹脉冲动画足迹标记采用脉冲光晕效果增强视觉吸引力多维记录支持地点、照片、故事、评分等多维度旅行记录数据统计提供旅行天数、花费、评分等数据统计和图表展示成就系统根据旅行数据解锁成就徽章增加趣味性该应用为旅行爱好者提供了一个记录和展示旅行经历的数字平台让每一段旅程都留下独特的印记。