带固定位置布局的美国地图图

在 US 地图上叠加关系图，具有用于保存和恢复状态的快照功能。

带固定位置布局的美国地图图

功能概述

此示例演示了如何在 US 地图上叠加关系图，使用固定定位将节点放置在地理位置。它包括用于保存和恢复图状态的快照功能。

核心特性实现

1. 带绝对定位的固定布局

使用带有显式坐标的固定布局：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'fixed'  // 节点直接使用 x、y 坐标
    }
};

const myJsonData: RGJsonData = {
    rootId: 'R',
    nodes: [
        { id: 'R', text: 'R', x: 670, y: 250 },
        { id: 'A', text: 'A', x: 260, y: 160 },
        { id: 'B', text: 'B', x: 530, y: 310 },
        { id: 'C', text: 'C', x: 830, y: 450 },
        { id: 'D', text: 'D', x: 530, y: 450 }
    ]
};

2. 地图背景集成

在视图槽中添加 SVG 地图作为背景：

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

3. 快照保存功能

捕获当前图状态：

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]);
};

4. 快照恢复

从保存的快照恢复图：

const redrawSnapshot = (theSnapshot: { data: RGJsonData }) => {
    graphInstance.clearGraph();
    graphInstance.addNodes(theSnapshot.data.nodes);
    graphInstance.addLines(theSnapshot.data.lines);
};

5. 地图上的不同线条形状

使用各种线条形状以增加视觉趣味：

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

创意使用场景

• 地理网络：可视化交通或通信网络
• 区域分析：显示地理实体之间的关系
• 物流规划：在地图上显示供应链路线
• 基础设施映射：在地理地图上叠加公用事业网络
• 销售区域：可视化区域销售连接
• 应急响应：显示资源部署位置