globe-gl

name	globe-gl
description	当需要用 globe.gl (Globe.GL) 配合 WebGL/ThreeJS 实现 3D 地球数据可视化时使用，涵盖初始化、数据图层（点、弧线、多边形、标签），以及在纯 HTML 或 React 中的集成模式。

Globe.GL Skill

工作流程

1. 确认环境（纯 HTML、框架、React 绑定）与所需的数据图层。
2. 提供一段最小化的快速上手代码，加上各图层特定的字段。
3. 仅在有请求时才添加交互或额外图层。
4. 指出容器尺寸与性能方面的注意事项。

快速上手（ESM）

<script type="module">
  import Globe from 'globe.gl';

  const myGlobe = new Globe(document.getElementById('globe'))
    .globeImageUrl(myImageUrl)
    .pointsData(myData);
</script>

快速上手（script 标签）

<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<script>
  const myGlobe = new Globe(document.getElementById('globe'))
    .globeImageUrl(myImageUrl)
    .pointsData(myData);
</script>

值得提及的常见图层

• 点（Points）
• 弧线（Arcs）
• 多边形（Polygons）
• 路径（Paths）
• 热力图与六边形分箱（Heatmaps and hex bins）
• 标签或 HTML 元素
• 3D 对象与自定义图层

实用提示

• 用 CSS 设定容器尺寸；地球会填满其父元素。
• 在移动端减少点的数量或尺寸以提升性能。
• 为霓虹风格的数据叠层使用更暗的地球贴图。

规格缺失时应问的问题

• 你需要哪些图层（点、弧线、多边形、标签）？
• 地球在桌面端与移动端应分别多大？
• 你想要拖拽/旋转交互，还是静态地球？
• 这是纯 HTML、React（react-globe.gl），还是其他框架？