带动画连接的世界地图图

世界地图叠加，带有显示国际关系和快照功能的动画线条。

带动画连接的世界地图图

功能概述

此示例在世界地图上叠加关系图，使用动画线条显示不同地理区域之间的连接。它演示了国际关系可视化以及快照功能。

核心特性实现

1. 动画线条连接

对线条应用不同的动画：

lines: [
    { id: 'l1', from: 'R', to: 'A', animation: 1, lineShape: RGLineShape.Curve3 },
    { id: 'l2', from: 'R', to: 'B', animation: 2 },
    { id: 'l3', from: 'R', to: 'C', animation: 3 },
    { id: 'l4', from: 'R', to: 'D', animation: 4, lineShape: RGLineShape.StandardStraight }
]

2. 世界地图集成

使用世界地图 SVG 作为背景：

<RelationGraph options={graphOptions}>
    <MapSvg4World />
</RelationGraph>

3. 地理坐标映射

将地理位置映射到画布坐标：

nodes: [
    { id: 'R', text: 'R', x: 1070, y: 250 },   // 欧洲
    { id: 'A', text: 'A', x: 460, y: 160 },    // 美洲
    { id: 'B', text: 'B', x: 930, y: 410 },    // 非洲
    { id: 'C', text: 'C', x: 1680, y: 550 },   // 亚太
    { id: 'D', text: 'D', x: 1230, y: 450 }    // 亚洲
]

4. 快照管理

与 US 地图相同的快照系统：

const saveData = () => {
    const allNodesWithPosition = graphInstance.getNodes().map(node => ({
        id: node.id,
        text: node.text,
        x: node.x,
        y: node.y,
        opacity: node.opacity,
        nodeShape: node.nodeShape
    }));

    const allLines = graphInstance.getLinks().map(link => ({
        id: link.line.id,
        from: link.fromNode.id,
        to: link.toNode.id,
        lineShape: link.line.lineShape,
        animation: link.line.animation
    }));

    const graphSnapshotData: RGJsonData = {
        rootId: graphInstance.getOptions().checkedNodeId || 'R',
        nodes: allNodesWithPosition,
        lines: allLines
    };

    setGraphSnapshots([{
        name: new Date().toLocaleTimeString(),
        data: graphSnapshotData
    }, ...graphSnapshots]);
};

5. 动画的视觉区分

不同的动画代表不同类型的连接：

• 动画 1：快速流动（例如，数据传输）
• 动画 2：中等流动（例如，常规流量）
• 动画 3：慢速流动（例如，批量运输）
• 动画 4：脉冲（例如，状态监控）

创意使用场景

• 国际贸易：可视化国家之间的进出口路线
• 全球供应链：显示全球物流网络
• 电信网络：显示国际电缆路线
• 航空公司路线：全球映射航班连接
• 外交关系：显示国家之间的关系
• 数据中心网络：可视化全球服务器连接