# 3D地图 **Repository Path**: he-meiyi/3d-map ## Basic Information - **Project Name**: 3D地图 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-03-11 - **Last Updated**: 2025-03-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README **目录** [👋 前言](https://blog.csdn.net/Pan_peter/article/details/137976969#t0) [🚀 项目包](https://blog.csdn.net/Pan_peter/article/details/137976969#t1) [⚒️ 字体制作](https://blog.csdn.net/Pan_peter/article/details/137976969#t2) [🌐 地图制作](https://blog.csdn.net/Pan_peter/article/details/137976969#t3) [💡 参考视频 & 项目](https://blog.csdn.net/Pan_peter/article/details/137976969#t4) [开源项目（Vue3+ts+Windcss+Echart+Three.js大屏案例）](https://blog.csdn.net/Pan_peter/article/details/137976969#t5) [开源（教程）](https://blog.csdn.net/Pan_peter/article/details/137976969#t6) [UI风格学习（ www.shuzixs.com ）](https://blog.csdn.net/Pan_peter/article/details/137976969#t7) [💎知名的Three.js的项目Orillusion：https://space.bilibili.com/1006136755（打造完全开源WebGPU轻量级渲染引擎）VIS-THREE衍生：https://space.bilibili.com/3048588【零代码编辑器（Web3D编辑器）】](https://blog.csdn.net/Pan_peter/article/details/137976969#t8) ------ ## 👋 前言 **效果图：** ![img](https://cdn.nlark.com/yuque/0/2025/png/35561102/1741686752492-61d300d4-33af-4902-9486-63c6f3c7586c.png) ![img](https://cdn.nlark.com/yuque/0/2025/png/35561102/1741686752565-aa4ddac1-e184-4f3a-8101-657d09412d58.png) - **因为做大屏需要，所以搞了一个3D地图的效果** - **我本人对Three.js根本不熟，就靠着GPT和百度，磨出来的** - **感谢大佬们的开源和案例（我会把参考项目的链接放在最后）** ## 🚀 项目包 [my-datiew-3D-map.zip - 蓝奏云文件大小：74.4 M|https://wwm.lanzout.com/iUEoE1vq153i](https://wwm.lanzout.com/iUEoE1vq153i)**启动项目：****（node版本大于等于 16.20.2）** **不用下载包了，因为我把第三方包都打包在里面了** ```plain npm run dev ``` ## ⚒️ 字体制作 **导出的.ttf文件转成json格式** **转换工具：http://gero3.github.io/facetype.js/** ![img](https://cdn.nlark.com/yuque/0/2025/png/35561102/1741686752222-256523ef-79e1-4c62-99ed-27163e94c951.png) **注意：这些资源，得放在public这里面！** ## 🌐 地图制作 [DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。http://datav.aliyun.com/portal/school/atlas/area_selector](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 **在绘制中心点的时候，有些时候，解析中心点的时候，有些偏差，得自己手动修改** ![img](https://cdn.nlark.com/yuque/0/2025/png/35561102/1741686752383-74c66c9a-7d9f-4694-b148-326d726cb0b5.png) ## 💡 参考视频 & 项目 ### [开源项目](https://so.csdn.net/so/search?q=开源项目&spm=1001.2101.3001.7020)（Vue3+ts+Windcss+Echart+Three.js大屏案例） [PublicbigScreenPage: 公开3d大屏PublicbigScreenPagehttps://gitee.com/shaohqfspace/PublicbigScreenPage?_from=gitee_search](https://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](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](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）**【要钱】** 来自: [3D地图大屏 附源码（Three.js + Vue3）_threejs 网页3d json地图特效源码-CSDN博客](https://blog.csdn.net/Pan_peter/article/details/137976969)