globe-gl

当您需要使用Globe.GL进行3D地球数据可视化，借助WebGL/ThreeJS实现可视化效果时使用，包括设置、数据图层（点、弧线、多边形、标签），以及在纯HTML或React中实现集成模式时使用。

SKILL.md

--- frontmatter

name: globe-gl
description: Use when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.

Globe.GL Skill

Workflow

•Confirm environment (plain HTML, framework, React bindings) and the data layers needed.
•Provide a minimal quick-start snippet plus the layer-specific fields.
•Add interactions or extra layers only if requested.
•Call out container sizing and performance considerations.

Quick start (ESM)

html

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

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

Quick start (script tag)

html

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

Common layers to mention

•Points
•Arcs
•Polygons
•Paths
•Heatmaps and hex bins
•Labels or HTML elements
•3D objects and custom layers

Practical tips

•Size the container with CSS; the globe fills its parent element.
•Reduce point count or size for performance on mobile.
•Use a darker globe texture for neon-style data overlays.

Questions to ask when specs are missing

•Which layers do you need (points, arcs, polygons, labels)?
•What should the globe size be on desktop vs mobile?
•Do you want drag/rotate interactions or a static globe?
•Is this plain HTML, React (react-globe.gl), or another framework?