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

摘要

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

主要实现功能

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

在线预览

点击 在线预览

背景

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

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

关于入门的话我是从 郭隆邦博客这里开始学习的，技术文档和讲解较为全面（虽然个别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",
    });

功能

1、支持GeoJSON 格式的数据渲染地图

2、支持2D平面地图和3D地球渲染

3、支持地图区域配色，边界线配色，地球配色，鼠标滚轮放大缩小，区域高亮

4、支持飞线、涟漪的颜色配置和增删操作。

5、支持鼠标交互事件

注：具体配置请查看文档

后续功能

1、为了节约性能，3D地球支持贴图功能，无需通过geojson数据实现渲染，设计师可自由发挥解放前端同胞。（2023-07-05 已完成）

2、支持更细粒度的配置，如飞线速度，弧度，动画频率等。(已完成)

3、支持点位自定义图形标记。（研发中）

目标

在完成需求的前提下给大家节约更多的时间提高效率（用来划水）。

最后

本项目非玩票项目，目前功能尚可（场景基本覆盖），希望各位前端同胞多多支持提出issue，本人会抽出划水时间继续优化，最终实现本来遇到此类项目共同划水的伟大目标。