3D地球绘制

1.e-charts GL
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。echarts扩展插件ECharts GL,实现3d地球酷炫动画。
ECharts GL新增了三维的笛卡尔坐标系、地理坐标系,并且在这些新的三维坐标系基础上提供了六个新的系列类型,包括 散点图 scatter3D、折线图 line3D、柱状图 bar3D、曲面图 surface、飞线图 lines3D以及地图 map3D。
ECharts 遵循 Apache-2.0 开源协议,免费商用。

  • flights-gl
    可用来展示全球供应链、物资运转、航班等信息,地球为平面
    在这里插入图片描述

  • flights
    可以只显示某个区域的航班,适合用来展示供应链、物资运转等,地球为3D形状
    在这里插入图片描述

  • GL散点图
    可用来展示全球各地区疫情人数分布等
    在这里插入图片描述
    其他详见官方示例

  1. three.js(https://threejs.org/)
    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面。
    使用three.js绘制3D地球,在网上看到大多数例子为使用地球贴纸,再通过绘制函数在地球上绘制轨迹。
    个人觉得元素周期表这个demo的交互效果很好:
    地址:
    http://www.webgl3d.cn/threejs/examples/#css3d_periodictable
    在这里插入图片描述

  2. Gio.js
    Gio.js 是一个基于 Three.js 的 web 3D 地球数据可视化的开源组件库。使用 Gio.js 的网页应用开发者,可以快速地以申明的方式创建自定义的 Web3D 数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。 Github 地址: https://github.com/syt123450/giojs
    中文官网: https://giojs.org/index_zh.html
    Codepen 在线例子: https://codepen.io/collection/DkBobG/
    特性:提供API,可以周期性地从一个数据源加载数据
    在这里插入图片描述

  3. Planetary.js (地址:http://planetaryjs.com/)
    Planetary.js 是一个 JavaScript 库,用于构建互动球体效果。它使用 D3 和 TopoJSON 解析和渲染地理数据。Planetary.js 采用了基于插件的架构,即使是默认的功能是作为插件实现的,这使得 Planetary.js 非常灵活。Planetary.js 是完全可定制,包括颜色,旋转等等。
    一些截图:
    在这里插入图片描述

在这里插入图片描述

  1. cesium.js (https://cesium.com/blog/categories/userstories/)
    官方地址:https://cesium.com/cesiumjs/
    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。
    通过Cesium提供的JS API,可以实现以下功能:
  • 全球级别的高精度的地形和影像服务
  • 矢量以及模型数据
  • 基于时态的数据可视化
  • 多种场景模式(3D,2.5D以及2D场景)的支持,真正的二三维一体化
    来自官方的一些截图:
    在这里插入图片描述
    在这里插入图片描述 优点:丰富的官方示例,详细的API开发文档