首页 实战
收藏

Vue3 + TS + Leafletjs 打造企业级原神大地图

从0到1全流程落地web游戏大地图项目，熟练掌握绘制地图技术Leaflet，成为 WebGlS 稀缺人才

已完结
|
难度：中级
|
时长：共 13 小时
前端畅销榜第 6 名
￥199.00
满599减100 满299减30
立即购买
加购物车
已有 138 人在学
  • Web地图开发全流程实战经验
  • 运用数学解决实际问题的能力
  • 系统掌握 leaflet 组件和API
  • 高难度地图渲染类封装经验
  • 高效解决游戏地图类开发问题
  • 掌握 GIS 技术成为抢手人才
试看本节课 09:59
试看本节课 05:42
试看本节课 07:03
1-1 导学
1-2 如何收获让面试官眼前一亮的作品？
2-1 原神大地图企业级项目分析，这是一个什么样的项目
检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
前端开发道路艰难，怎么破局？唯有掌握稀缺技能，提升综合能力，形成差异化优势，才好跳出同质化竞争，获得更大的发展空间，拥有更多的选择权。这门课程带你复刻企业级一线创新型H5需求，使用最新前端技术栈 + Leafletjs 打造原神大地图H5。相比于传统前端项目更能突出难点（复杂逻辑开发经验，流程拆解、变量通信、数学计算），让你简历项目优势更突出，面试官眼前一亮，大大提升面试成功率。
展开所有

本章介绍：

课程介绍

第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

本章介绍：

本章节开始带大家初步实现绘制大地图，整理大地图资源，设计项目架构，学习leafletjs库使用，提升大家的文档阅读能力，以及地图渲染类封装，提升大家的代码封装能力。

第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

本章介绍：

本章节带大家使用Vue3开发UI交互层，同时教会大家大厂分工合作理念、Vue3与地图控制类通信接口流程，掌握Vue组件开发技巧与封装。

第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

本章介绍：

本章节带大家实现完整大地图功能，这是最核心的一部分，实现地图控制类核心接口，Vue3 UI层与地图控制类接口通信，地图标点动态生成、通用请求类封装、mock数据开发、loading页面开发、串起完整功能。

第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

本章介绍：

本章节带大家进行项目打包工作，到此章节所有功能都已经实现，最后一步该打包发布了，本章节会给大家介绍Vite项目打包与发布流程。

第7章 项目打包与发布介绍（打包发布交付流程介绍）
1 节｜7分钟
展开
  • 视频：
    7-1 生产流程-Vite打包与发布
    06:27

本章介绍：

本章节带大家回顾整个项目课程，做一个总结，同时为大家送来本项目的面试建议，助力大家简历、面试加分。

第8章 项目总结与面试建议（最终章，助力大家面试加分）
1 节｜14分钟
展开
  • 视频：
    8-1 项目总结与面试建议
    13:59
本课程已完结
适合人群
前端开发人员
互联网从业者
对游戏地图类项目感兴趣的人员
技术储备
熟悉 HTML CSS JS
了解 Vue3 技术栈
了解 TS4 技术栈
环境参数
Vue 3.3
Meo
高级前端开发高级， 已有138个学生
前端及客户端开发工程师，有多年在国内知名大厂工作的经验，有大量C端项目开发经验、跨端、游戏类项目开发经验，资深Vue、Uniapp 用户，善于总结经验与文档输出，乐于分享。
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
慕沐6011780给了 中评
比较基础，适合了解一下
Vue从入门到进阶，实战电商&游戏
活动到手价：¥517.00 领券加购减30
2门课 总价：¥547.00
加购物车
 课程介绍

从0到1全流程落地web游戏大地图项目，成为WebGlS专家

中级  · 138人报名 ¥199.00
课程介绍 

Vue3入门与项目实战 掌握完整知识体系

初级  · 3360人报名 ¥348.00
查看更多
我要提问
查看更多好课
《Vue3 + TS + Leafletjs 打造企业级原神大地图》的真实评价
内容实用：
8.00分
通俗易懂：
10.00分
逻辑清晰：
10.00分
综合评分：9.33分，共 1 人参与
慕沐6011780
给了 中评
比较基础，适合了解一下
篇幅原因，只展示最近100条评价
￥199.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题

微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号