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