globe-gl
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseGlobe.GL Skill
Globe.GL 技能指南
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.
- 确认开发环境（纯HTML、框架、React绑定）以及所需的数据图层。
- 提供最简快速入门代码片段以及图层专属配置项。
- 仅在用户要求时添加交互功能或额外图层。
- 提醒容器尺寸设置和性能注意事项。
Quick start (ESM)
快速入门（ESM方式）
html
<script type="module">
import Globe from 'globe.gl';
const myGlobe = new Globe(document.getElementById('globe'))
.globeImageUrl(myImageUrl)
.pointsData(myData);
</script>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>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
- 点图层
- 弧线图层
- 多边形图层
- 路径图层
- 热力图与六边形分箱图层
- 标签或HTML元素图层
- 3D对象与自定义图层
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.
- 使用CSS设置容器尺寸；地球会填充其父元素。
- 为了移动端性能，减少点的数量或尺寸。
- 若要实现霓虹风格的数据叠加层，使用深色地球纹理。
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 (), or another framework?
react-globe.gl
- 你需要哪些图层（点、弧线、多边形、标签）？
- 桌面端和移动端的地球尺寸分别是多少？
- 你需要拖拽/旋转交互还是静态地球？
- 是使用纯HTML、React（）还是其他框架？
react-globe.gl