← All templates

弧线地球 <ArcGlobe />

离线点阵地球上,从一个中心点向 2–8 个地点画发光大圆弧,右侧是对应列表;逐条展开时弧线一条条画出来。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
数据 · 从一处到多处
Component
ArcGlobe · #arc-globe
Interaction
每按一次 → 画出一条弧线并点亮对应列表行

Good for

  • 一个中心向各地分发:源站和缓存、总部和分部、出口目的地
  • 地点分布在同一个半球

Avoid when

  • 地点遍布全球两侧:用 DotMap
  • 要比较各地数值:用 DotMap 或 BarChart

Content limits

1places 2–8 个,name ≤ 6 字,note ≤ 14 字
2hub.name ≤ 6 字
3listTitle ≤ 10 字
4所有地点要在 center 朝向的半球,否则弧线绕到背面
5地图精度 2°,只适合城市级以上的位置

Fields

FieldType
kicker · requiredstring标题上方的小节名,2–8 字
title · requiredstring | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
hub · required{ name, lon, lat, note? }起点
places · required{ name, lon, lat, note? }[]终点,每个一步
center[lon, lat]地球朝向,默认对准 hub
listTitlestring列表标题

Example

<ArcGlobe kicker="示意" title="…" hub={{ name: '源站', lon: -77.5, lat: 39 }} center={[-25, 22]} places={[{ name: '伦敦', lon: -0.1, lat: 51.5 }, …]} />