# Vue3 + TS + Leafletjs 打造企业级原神大地图视频课程 *Published:* 2024-07-14 *Author:* 客服001 #### 温馨提醒 如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢 本文最后更新于2024年12月29日，已超过 180天没有更新 从0到1全流程落地web游戏大地图项目，熟练掌握绘制地图技术Leaflet，成为 WebGlS 稀缺人才！ [![](https://www.xarjtc.com/wp-content/uploads/2024/07/6db1022c04d820a.webp)](https://www.xarjtc.com/wp-content/uploads/2024/07/6db1022c04d820a.webp) **将学到：** 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 本课程已完结