shuding/cobe

这是什么？

核心功能

• 01基于 canvas 渲染 WebGL 地球，无外部依赖。
• 02在经纬度坐标之间放置标记点和弧线。
• 03通过 CSS 锚点定位，将任意 DOM 元素绑定到标记上。
• 04提供可见性变量，便于用 CSS 控制地球背面标签的透明度或模糊效果。
• 05通过 onRender 回调逐帧更新地球参数。

适用场景

• 在落地页上展示服务器或客户的地理分布。
• 用 HTML 标签制作活动或办公地点的交互式地图。
• 以城市之间的弧线可视化航线或数据流向。

快速上手

1. 1

   在 HTML 页面中添加一个 canvas 元素

2. 2

   从 cobe 导入 createGlobe，并传入画布和配置选项调用它

   import createGlobe from 'cobe'

使用前须知

• !需要浏览器支持 WebGL。
• !地球渲染通过单一配置对象进行设置，超出其参数的自定义视觉效果需要额外编码。

标签

常见问题

cobe 是什么？

一个约 5KB、零依赖的 WebGL 地球库，可将任意 DOM 元素绑定为地球上的标记。 COBE 是一个小型 TypeScript 库，用于在 canvas 上渲染可交互的 WebGL 地球。调用 createGlobe 并传入 canvas 元素和配置对象，即可绘制地球、标记点以及连接两个地点的弧线。自转角度、颜色、光照和标记大小都可以通过配置项控制，每一帧还会调用 onRender 回调更新参数。

cobe 可以免费使用吗？用的什么许可证？

cobe 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

cobe 还在维护吗？

活跃维护中。cobe 最近一次提交是在 2026年9月22日。

cobe 适合用来做什么？

在落地页上展示服务器或客户的地理分布。 用 HTML 标签制作活动或办公地点的交互式地图。 以城市之间的弧线可视化航线或数据流向。

cobe 怎么安装和运行？

在 HTML 页面中添加一个 canvas 元素 从 cobe 导入 createGlobe，并传入画布和配置选项调用它: import createGlobe from 'cobe'

在哪里获取 cobe？

源代码和安装说明在 GitHub 上：https://github.com/shuding/cobe