首页 实战

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

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

难度：入门
|
时长：共 13 小时
前端畅销榜第 1 名
￥169.00
￥199.00
上新特惠
距离活动结束
立即购买
加购物车
  • 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
第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
本课程已完结
适合人群
前端开发人员
互联网从业者
对游戏地图类项目感兴趣的人员
技术储备
熟悉 HTML CSS JS
了解 Vue3 技术栈
了解 TS4 技术栈
环境参数
Vue 3.3
Meo
高级前端开发高级
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
查看更多
数据加载中...
查看更多好课
《Vue3 + TS + Leafletjs 打造企业级原神大地图》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
上新特惠
￥169.00
￥199.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

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

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

意见反馈 帮助中心 APP下载
官方微信