基于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,本人会抽出划水时间继续优化,最终实现本来遇到此类项目共同划水的伟大目标。

你可能感兴趣的:(javascript,typescript,数据可视化,大屏端)