3D地图大屏 附源码（Three.js + Vue3）

目录

👋 前言

🚀 项目包

⚒️ 字体制作

🌐 地图制作

💡 参考视频 & 项目

开源项目（Vue3+ts+Windcss+Echart+Three.js大屏案例）

开源（教程）

UI风格学习（ www.shuzixs.com ）

 💎知名的Three.js的项目Orillusion：https://space.bilibili.com/1006136755（打造完全开源WebGPU轻量级渲染引擎）VIS-THREE衍生：https://space.bilibili.com/3048588【零代码编辑器（Web3D编辑器）】

---

👋 前言

效果图：

• 因为做大屏需要，所以搞了一个3D地图的效果
• 我本人对Three.js根本不熟，就靠着GPT和百度，磨出来的
• 感谢大佬们的开源和案例（我会把参考项目的链接放在最后）

🚀 项目包

my-datiew-3D-map.zip - 蓝奏云文件大小：74.4 M|https://wwm.lanzout.com/iUEoE1vq153i启动项目：（node版本大于等于 16.20.2）

npm run dev

不用下载包了，因为我把第三方包都打包在里面了

⚒️ 字体制作

导出的.ttf文件转成json格式
转换工具：http://gero3.github.io/facetype.js/

注意：这些资源，得放在public这里面！

🌐 地图制作

DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。http://datav.aliyun.com/portal/school/atlas/area_selector

获取全部数据：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json

获取边界线：https://geo.datav.aliyun.com/areas_v3/bound/100000.json

在绘制中心点的时候，有些时候，解析中心点的时候，有些偏差，得自己手动修改

💡 参考视频 & 项目

开源项目（Vue3+ts+Windcss+Echart+Three.js大屏案例）

PublicbigScreenPage: 公开3d大屏PublicbigScreenPagehttps://gitee.com/shaohqfspace/PublicbigScreenPage?_from=gitee_search

开源（教程）

【开源】用 three.js 制作你的第一个 3D 地图吧！_哔哩哔哩_bilibilireact-three-fiber 真的会帮你节省很多精力！在线预览地址(或许需科学上网)：https://3d-geo-map.vercel.app/ github 项目地址：https://github.com/xiaogua-bushigua/3d-geoMap阿里地图小工具：https://datav.aliyun.com/portal/school/atlas/area_selector, 视频播放量 8944、弹幕量 3、点赞数 233、投硬币枚数 148、收藏人数 639、转发人数 46, 视频作者 小瓜不是瓜h, 作者简介 我不做抽奖号啦，相关视频：我的第一个three.js地图项目，react+framer motion+threejs实现个人网站介绍，Three.js - 智能3D房屋模型展开效果，不要再说这个地图效果开发不出来了，3D地图可视化three.js三维地图vue下钻地图GIS地图大屏源码，three.js地图可视化项目-贵阳模型，three.js教程+cesium教程 实战开源项目-智慧机场-数字孪生三维可视化教程(已经上线)（2022.8.7效果更新），three.js 实现机房可视化 源码，【D3.js】03. 绘制地图，threejs数字展馆项目正式开源啦！https://www.bilibili.com/video/BV1ku4y1X7wU

UI风格学习（ www.shuzixs.com ）

下全国下钻地图有了，科技感中国三维地图Three.js+vue前端源码_哔哩哔哩_bilibili科技感中国三维地图Three.js+vue前端源码更新，除区域交互、柱状图、飞线动效、散点图、数据标牌、粒子特效、路径轨迹、倒影功能特效外，增加了地图下钻功能，支持全国34个省级行政区，包括23个省、5个自治区、4个直辖市、2个特别行政区1地图区间3级下钻，转需。, 视频播放量 1389、弹幕量 0、点赞数 18、投硬币枚数 14、收藏人数 31、转发人数 4, 视频作者 数字像素, 作者简介 www.shuzixs.com 构建可视化所需要的一切，相关视频：不要再说这个地图效果开发不出来了，牛！Unity3D主视觉地图源码来了，事半功倍，Unity智慧物流园区可视化源码来了，最新！数字孪生可视化UI设计作品，贴心，大佬新素材又来了！，Unity双十一销量可视化大屏源码，Unity智慧园区项目源码来了，数据传输可视化源码都有了，你还在加班？，奥维互动地图最新二维码图源，奥维地图2024图源分享，今天给大家简单亲测一下，喜欢的三连支持一下谢谢，拒绝爆肝，我不允许前端还在为地图开发加班https://www.bilibili.com/video/BV1TF411S7wZ

 💎知名的Three.js的项目
Orillusion：https://space.bilibili.com/1006136755（打造完全开源WebGPU轻量级渲染引擎）
VIS-THREE衍生：https://space.bilibili.com/3048588【零代码编辑器（Web3D编辑器）】

thing.js：https://www.thingjs.com/guide/?m=sample（搞物联网+web3D）【要钱】