- 分组
- 数据 · 从一处到多处
- 组件
ArcGlobe·#arc-globe- 交互
- 每按一次 → 画出一条弧线并点亮对应列表行
适合
- 一个中心向各地分发：源站和缓存、总部和分部、出口目的地
- 地点分布在同一个半球
不适合
- 地点遍布全球两侧：用 DotMap
- 要比较各地数值：用 DotMap 或 BarChart
内容上限
| 1 | places 2–8 个，name ≤ 6 字，note ≤ 14 字 |
| 2 | hub.name ≤ 6 字 |
| 3 | listTitle ≤ 10 字 |
| 4 | 所有地点要在 center 朝向的半球，否则弧线绕到背面 |
| 5 | 地图精度 2°，只适合城市级以上的位置 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
hub · 必填 | { name, lon, lat, note? } | 起点 |
places · 必填 | { name, lon, lat, note? }[] | 终点，每个一步 |
center | [lon, lat] | 地球朝向，默认对准 hub |
listTitle | string | 列表标题 |
示例代码
<ArcGlobe kicker="示意" title="…" hub={{ name: '源站', lon: -77.5, lat: 39 }} center={[-25, 22]} places={[{ name: '伦敦', lon: -0.1, lat: 51.5 }, …]} />