globe-gl

Globe.GL 技能

工作流

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>

常见图层

• 点
• 弧线
• 多边形
• 路径
• 热力图和六边形网格
• 标签或 HTML 元素
• 3D 对象和自定义图层

实用技巧

• 使用 CSS 设置容器尺寸；地球仪会填满其父元素。
• 在移动设备上，减少点的数量或尺寸以提升性能。
• 使用较暗的地球仪纹理，以突出霓虹风格的数据叠加层。

缺少规格时要询问的问题

• 需要哪些图层（点、弧线、多边形、标签）？
• 桌面端和移动端的地球仪尺寸应分别是多少？
• 需要拖动／旋转交互，还是静态地球仪？
• 使用的是纯 HTML、React（react-globe.gl）还是其他框架？