基于threejs开发的3D地球大屏可视化，支持2D地图模式，飞线，涟漪，配置简单易上手-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于threejs开发的3D地球大屏可视化，支持2D地图模式，飞线，涟漪，配置简单易上手。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

摘要

基于threejs 封装的3D可视化地球组件，开箱即用

主要实现功能

根据geojson格式的json文件，渲染平面2D 和3D地图,地图可配置区域色，边界色
支持以贴图的方式实现用户设计的个性化地图图片的3D地球渲染（2D的支持正在开发）
通过本组件提供的方法可实现新增飞线动画和标记涟漪 ，并支持动态增删（“改”后续实现）

在线预览

点击在线预览

背景

大屏项目看起来相当酷炫，客户喜欢(但是研发不喜欢~~包括我~~)，展示效果看似高大上，但部分研发同事们兴趣不高（也有那么一点点技术壁垒），为了在做牛马期间碰到同类型项目节约时间提高效率（划水）。

还有一个重要且根本原因：一直以来是伸手党，也该回馈一下社区了。感谢社区那些无私大佬。

关于入门的话我是从郭隆邦博客这里开始学习的，技术文档和讲解较为全面（虽然个别api更新不及时），从了解threejs快速入门到中高级进阶而言是相当不错的，万分推荐，万分感谢。

开始

查看项目地址（感觉有用的话,给个star多谢）

技术：vite+threejs+ts

使用难度：一星 (会用echarts 基本也会用这个)

纯js组件，可以在react、vue、angular、html/css/js 等前端场景渲染

使用

npm i earth-flyline

import earthFlyLine from "earth-flyline";
//请先下载geojson格式的地图文件（可去第三方下载） 然后注册地图，也可以在我的项目src/map路径下查找并下载
//也可通过贴图方式实现，具体详情参考文档说明
import geojson from 'xxx/path/world.json'
earthFlyLine.registerMap("world", geojson);
//获取dom节点作为容器 注：该节点请设置宽高
const dom = document.getElementById("container");
const chart = earthFlyLine.init({
      dom,
      map: "world",
    });