从0到1全流程落地web游戏大地图项目，熟练掌握绘制地图技术Leaflet，成为 WebGlS 稀缺人才
前端开发道路艰难，怎么破局？唯有掌握稀缺技能，提升综合能力，形成差异化优势，才好跳出同质化竞争，获得更大的发展空间，拥有更多的选择权。这门课程带你复刻企业级一线创新型H5需求，使用最新前端技术栈 + Leafletjs 打造原神大地图H5。相比于传统前端项目更能突出难点（复杂逻辑开发经验，流程拆解、变量通信、数学计算），让你简历项目优势更突出，面试官眼前一亮，大大提升面试成功率。
适合人群 前端开发人员、互联网从业者、对游戏地图类项目感兴趣的人员
技术储备 熟悉 HTML CSS JS、了解 Vue3 技术栈、了解 TS4 技术栈
环境参数 Vue 3.3
课程目录
-
第1章 课程介绍（2 节｜16分钟）
- 视频：1-1 导学.MP4 09:59
- 视频：1-2 如何收获让面试官眼前一亮的作品？.MP4 05:42
-
第2章 理清需求最重要（大厂必备的需求分析能力）（3 节｜28分钟）
- 视频：2-1 原神大地图企业级项目分析，这是一个什么样的项目.MP4 07:03
- 视频：2-2 项目需求分析.MP4 12:08
- 视频：2-3 项目技术调研、框架选型.MP4 08:06
-
第3章 开发环境搭建（做好准备工作）（1 节｜8分钟）
- 视频：3-1 nodejs、vue3、vscode环境搭建.MP4 07:31
-
第4章 开始绘制你的大地图（让你的页面眼前一亮）（10 节｜106分钟）
- 视频：4-1 大地图资源整理.MP4 03:04
- 视频：4-2 leafletjs文档阅读与梳理-提升文档阅读能力.MP4 12:47
- 视频：4-3 前置工作-大地图瓦片资源生成.MP4 07:57
- 视频：4-4 前置工作-项目目录结构设计.MP4 10:35
- 视频：4-5 如何将大地图展示出来？（tile使用）.MP4 14:46
- 视频：4-6 大地图控制实现（缩放、拖拽及边界限制）.MP4 07:59
- 视频：4-7 地名如何在大地图中展示.MP4 15:58
- 视频：4-8 标点如何在大地图中展示.MP4 10:11
- 视频：4-9 代码重构与封装.MP4 10:15
- 视频：4-10 章节总结与面试指导.MP4 11:36
-
第5章 大地图UI交互层开发（运用Vue3快速开发页面）（10 节｜189分钟）
- 视频：5-1 整体UI搭建.MP4 21:00
- 视频：5-2 交互栏开发-分类滚动区域展示.MP4 25:25
- 视频：5-3 标点列表展示.MP4 21:10
- 视频：5-4 axios及mockjs引入.MP4 21:59
- 视频：5-5 标点列表动态数据接入.MP4 18:57
- 视频：5-6 快速定位展示.MP4 23:25
- 视频：5-7 快速定位接口接入.MP4 08:30
- 视频：5-8 已选中区域开发.MP4 21:05
- 视频：5-9 已选中区域动态逻辑及pinia使用.MP4 17:10
- 视频：5-10 章节总结与面试指导.MP4 09:40
-
第6章 让大地图动起来（UI层与地图层的联动）（12 节｜220分钟）
- 视频：6-1 地名动态渲染逻辑.MP4 29:37
- 视频：6-2 标点动态渲染逻辑.MP4 17:42
- 视频：6-3 缩放UI实现及zoomslider插件使用.MP4 18:52
- 视频：6-4 快速定位逻辑及标点展示优化.MP4 11:25
- 视频：6-5 标点点击激活逻辑.MP4 16:53
- 视频：6-6 标点详情弹窗及popup使用.MP4 24:06
- 视频：6-7 标点详情弹窗动态逻辑.MP4 18:42
- 视频：6-8 屏幕外标点引导（难）（上）.MP4 14:57
- 视频：6-9 屏幕外标点引导（难）（下）.MP4 14:55
- 视频：6-10 屏幕外标点引导（难）（上）.MP4 17:37
- 视频：6-11 屏幕外标点引导（难）（下）.MP4 21:59
- 视频：6-12 章节总结与面试指导.MP4 12:29
-
第7章 项目打包与发布介绍（打包发布交付流程介绍）（1 节｜7分钟）
- 视频：7-1 生产流程-Vite打包与发布.MP4 06:27
-
第8章 项目总结与面试建议（最终章，助力大家面试加分）（1 节｜14分钟）
- 视频：8-1 项目总结与面试建议.MP4 13:59
- 源码素材.zip
