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|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)【要钱】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/653.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java调用讯飞星火认知模型

前往讯飞开发平台选择产品,获取appId、apiKey、APISecret,这里我选择的是v3.0模型。 java后端实现 本项目以及实现了基本的会话功能,小伙伴可以自己扩充其他的例如绘画功能。 注意:星火模型的api使用的是websocket协议&#xf…

c 多文件编程

1.结构目录 声明类:用于声明方法,方便方法管理和调用; 实现类:用于实现声明的方法; 应用层:调用方法使用 写过java代码的兄弟们可以这么理解: 声明类 为service层 实现类 为serviceimpl层 应用层 为conlloter层 2.Dome 把函数声明放在头文件xxx.h中&…

与上级意见不合时如何恰当地表达自己的观点?

在工作中与上级意见不合时,恰当表达自己的观点并寻求共识是一个需要谨慎处理的问题。以下是一些建议: 1. **尊重与礼貌**:在任何情况下,都应保持对上级的尊重和礼貌。即使在意见不合时,也要避免情绪化,保持…

200页图解国标《数据分类分级规则》正式稿,强化重要数据识别

GB/T 43697-2024《数据安全技术 数据分类分级规则》正式稿发布,并于2024年10月1日实施。2024年4月17日,国家标准全文公开系统公布了国标最终版。《数据分类分级规则》是全国网安标委更名后,发布的第一部以“数据安全技术”命名的国家标准&…

Python-VBA函数之旅-enumerate函数

目录 1、enumerate函数: 1-1、Python: 1-2、VBA: 2、相关文章: 个人主页:非风V非雨-CSDN博客 enumerate函数在Python中是一个强大的内置函数,用于将一个可迭代对象转换为一个索引序列,同时返…

java-spring 图灵 04 doscan

01.本次的重点依旧是扫描函数,这次是spring中的源码: 02.第一步,构造AnnotationConfigApplicationContext 主方法: public static void main(String[] args) {// 创建一个Spring容器AnnotationConfigApplicationContext applica…

C#基础|Debug程序调试学习和技巧总结

哈喽,你好啊,我是雷工! 在程序的开发过程中,可能绝大部分时间是用来调试程序, 当完成了某个功能的编程,都需要调试一下程序,看编程是否存在问题。 01 为什么需要程序调试 无论是电气工程师还…

深入探究图像增强(C语言实现)

我们将从基础出发使用C语言进行图像处理与分析,重点讨论图像增强和平滑技术。图像增强技术旨在通过增加对比度、亮度和整体清晰度来改善图像的视觉质量。另一方面,图像平滑方法则用于减少噪声并减少图像中的突变,使图像更加均匀和视觉上吸引人…

2024新版淘宝客PHP网站源码

源码介绍 2024超好看的淘客PHP网站源码,可以做优惠券网站,上传服务器,访问首页进行安装 安装好了之后就可以使用了,将里面的信息配置成自己的就行 喜欢的朋友们拿去使用把 效果截图 源码下载 2024新版淘宝客网站源码

高精度算法(1)

前言 今天来讲一讲高精度算法,我们说一个数据类型,有它的对应范围比如int类型最多 可以包含到负2的31次方到2的31次方减一 其实大概就是20亿左右那么其他的类型也同样如此 那么,如何解决一个很大很大的数的运算呢? 我们今天介…

OSPF综合大实验

1、R4为ISP,其上只配置IP地址;R4与其他所直连设备间均使用公有IP; 2、R3-R5、R6、R7为MGRE环境,R3为中心站点; 3、整个OSPF环境IP基于172.16.0.0/16划分;除了R12有两个环回,其他路由器均有一个环…

局域网管理软件,适合在局域网内的管理软件有哪些?

信息技术的不断发展,局域网在企业、学校等机构中得到了广泛应用。 局域网不仅能够提高数据传输效率,还能实现资源共享和协同工作。 为了更好地管理和维护局域网,需要使用一些专业的局域网管理软件。 一、局域网的应用范围 局域网&#xff…

【算法一则】分隔链表

题目 给你一个链表的头节点 head 和一个特定值 x ,请你对链表进行分隔,使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你应当 保留 两个分区中每个节点的初始相对位置。 示例 1: 输入:head [1,4,3,2,5,2], x …

做一个图像分类任务(一)准备数据集

文章目录 环境准备准备数据集爬取数据代码删除多余的文件fruit81水果数据图像分类数据集下载统计图像的尺寸和比例分布代码划分训练集和数据集代码可视化图像代码统计各类别的数量 环境准备 推荐按照原作者推荐的环境:代码测试云GPU环境:GPU RTX 3060、…

如何安全、高速、有效地利用IP代理爬取数据

陈老老老板🧙‍♂️ 👮‍♂️本文专栏:生活(主要讲一下自己生活相关的内容)生活就像海洋,只有意志坚强的人,才能到达彼岸。 🤴本文简述:如何安全、高速、有效地利用IP代理爬取数据 &#x1f473…

多模态AnyGPT——整合图像、语音和文本多模态大规模语言模型算法原理与实践

概述 大规模语言模型在理解和生成人类语言方面具有非凡的能力,但迄今为止,它们的能力主要局限于文本处理。然而,现实世界是一个多模式的环境,信息通过视觉、听觉和触觉等多种感官进行交换。融入这种多样性是开发下一代系统的主要…

云原生Kubernetes: K8S 1.29版本 部署Jenkins

目录 一、实验 1.环境 2.K8S 1.29版本 部署Jenkins 服务 3.jenkins安装Kubernetes插件 二、问题 1.创建pod失败 2.journalctl如何查看日志信息 2.容器内如何查询jenkins初始密码 3.jenkins离线安装中文包报错 4.jenkins插件报错 一、实验 1.环境 (1&…

上位机图像处理和嵌入式模块部署(树莓派4b固件功能设计)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 前面我们说过,上位机的功能都是基于插件进行开发的。但是上位机的成本比较贵,一般的企业不一定愿意接接受。这个时候另外一…

【第三版 系统集成项目管理工程师】 十五至尊图

持续更新。。。。。。。。。。。。。。。 【第三版】十五至尊图 十五至尊图【必会】1.整合(7)2.范围 (6)3.进度 (6)4.成本 (4)5.质量(3)6.资源(6&…

【LeetCode: 3117. 划分数组得到最小的值之和 + 动态规划】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…