首页 前端知识 3D地图大屏 附源码(Three.js Vue3)

3D地图大屏 附源码(Three.js Vue3)

2024-05-12 17:05:46 前端知识 前端哥 93 192 我要收藏

目录

👋 前言

🚀 项目包

⚒️ 字体制作

🌐 地图制作

💡 参考视频 & 项目

开源项目(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|icon-default.png?t=N7T8https://wwm.lanzout.com/iUEoE1vq153i启动项目:(node版本大于等于 16.20.2)

npm run dev

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

⚒️ 字体制作

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

注意:这些资源,得放在public这里面!

🌐 地图制作

DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品,多年深耕数据可视化领域,数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言,让更多人读懂大数据,受惠数据驱动的决策方式。icon-default.png?t=N7T8http://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大屏PublicbigScreenPageicon-default.png?t=N7T8https://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数字展馆项目正式开源啦!icon-default.png?t=N7T8https://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图源分享,今天给大家简单亲测一下,喜欢的三连支持一下谢谢,拒绝爆肝,我不允许前端还在为地图开发加班icon-default.png?t=N7T8https://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)【要钱】

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8341.html
标签
评论
发布的文章

Newtonsoft.Json

2024-05-23 20:05:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!