摘要
基于threejs 封裝的3D可視化地球組件，開箱即用
主要實現(xiàn)功能
- 根據(jù)geojson格式的json文件，渲染平面2D 和3D地圖,地圖可配置區(qū)域色，邊界色
- 支持以貼圖的方式實現(xiàn)用戶設(shè)計的個性化地圖圖片的3D地球渲染（2D的支持正在開發(fā)）
- 通過本組件提供的方法可實現(xiàn)新增飛線動畫和標(biāo)記漣漪 ，并支持動態(tài)增刪 （“改”后續(xù)實現(xiàn)）
在線預(yù)覽
點擊 在線預(yù)覽
背景
大屏項目看起來相當(dāng)酷炫，客戶喜歡(但是研發(fā)不喜歡包括我)，展示效果看似高大上，但部分研發(fā)同事們興趣不高（也有那么一點點技術(shù)壁壘），為了在做牛馬期間碰到同類型項目節(jié)約時間提高效率（劃水）。
還有一個重要且根本原因：一直以來是伸手黨，也該回饋一下社區(qū)了。感謝社區(qū)那些無私大佬。
關(guān)于入門的話我是從 郭隆邦博客這里開始學(xué)習(xí)的，技術(shù)文檔和講解較為全面（雖然個別api更新不及時），從了解threejs快速入門到中高級進(jìn)階而言是相當(dāng)不錯的，萬分推薦，萬分感謝。
開始
查看 項目地址（感覺有用的話,給個star多謝）
技術(shù)：vite+threejs+ts
使用難度：一星 (會用echarts 基本也會用這個)
純js組件，可以在react、vue、angular、html/css/js 等前端場景渲染
使用
npm i earth-flyline
import earthFlyLine from "earth-flyline";
//請先下載geojson格式的地圖文件（可去第三方下載） 然后注冊地圖，也可以在我的項目src/map路徑下查找并下載
//也可通過貼圖方式實現(xiàn)，具體詳情參考文檔說明
import geojson from 'xxx/path/world.json'
earthFlyLine.registerMap("world", geojson);
//獲取dom節(jié)點作為容器 注：該節(jié)點請設(shè)置寬高
const dom = document.getElementById("container");
const chart = earthFlyLine.init({
dom,
map: "world",
});
功能
1、支持GeoJSON 格式的數(shù)據(jù)渲染地圖
2、支持2D平面地圖和3D地球渲染
3、支持地圖區(qū)域配色，邊界線配色，地球配色，鼠標(biāo)滾輪放大縮小，區(qū)域高亮
4、支持飛線、漣漪的顏色配置和增刪操作。
5、支持鼠標(biāo)交互事件
注：具體配置請查看文檔
后續(xù)功能
1、為了節(jié)約性能，3D地球支持貼圖功能，無需通過geojson數(shù)據(jù)實現(xiàn)渲染，設(shè)計師可自由發(fā)揮解放前端同胞。（2023-07-05 已完成）
2、支持更細(xì)粒度的配置，如飛線速度，弧度，動畫頻率等。(已完成)
3、支持點位自定義圖形標(biāo)記。（研發(fā)中）
目標(biāo)
在完成需求的前提下給大家節(jié)約更多的時間提高效率（用來劃水）。文章來源：http://www.zghlxwxcb.cn/news/detail-714304.html
最后
本項目非玩票項目，目前功能尚可（場景基本覆蓋），希望各位前端同胞多多支持提出issue，本人會抽出劃水時間繼續(xù)優(yōu)化，最終實現(xiàn)本來遇到此類項目共同劃水的偉大目標(biāo)。文章來源地址http://www.zghlxwxcb.cn/news/detail-714304.html
到了這里，關(guān)于基于threejs開發(fā)的3D地球大屏可視化，支持2D地圖模式，飛線，漣漪，配置簡單易上手的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
