---
title: "SigmaMiniMap"
description: "缩略图与视口框，点击任意位置把相机平移过去。"
canonical_url: "https://sigma.mhaibaraai.cn/docs/components/mini-map"
---
# SigmaMiniMap

> 缩略图与视口框，点击任意位置把相机平移过去。

## 用法

放进 `SigmaControls` 即可。放大后视口框出现，点缩略图任意位置把相机移过去。

组件自己画一张 `canvas`，不再创建 sigma 实例——所以它**不占用额外的 WebGL 上下文**，可以放心和多张图一起用。

`getNodeDisplayData()` 返回的是 framed 坐标，相机的 `x` / `y` 也在这个坐标系，但它和画布像素之间隔着一次 y 轴翻转（framed 的 y 向上，canvas 2D 的 y 向下）、一次等比缩放和一次长宽比修正。这套换算不自己推导：矩阵取自 sigma 公开导出的 `matrixFromCamera`，像素映射照抄 `framedGraphToViewport`，和 sigma 渲染主画布走的是同一套公式，因此缩略图上的方位与主画布严格一致。

投影基准是 sigma 归一化后的 framed 单位方块，等比铺满缩略图的较短边——归一化保证所有节点都落在 `[0, 1]²` 内，所以缩放、拖拽、reducer 隐藏节点时缩略图上的点位恒定不漂。视口框由 `viewportToFramedGraph()` 取画布两个对角点得到，走同一套投影；框完整覆盖缩略图时说明全图已在视野内，此时不绘制。节点被 reducer 标为 `hidden` 时不绘制，全图没有可见节点时缩略图整个清空。

重绘经 `requestAnimationFrame` 合并，由画布重绘、容器缩放两个信号驱动。画布按 `devicePixelRatio` 放大后备存储，高分屏上不糊。

### `nodeRadius`

节点在缩略图上的半径，单位像素：

```vue [MiniMapExample.vue]
<script setup lang="ts">
defineProps<{ nodeRadius: number, padding: number }>()

const { data } = await useFetch('/api/data.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaControls position="bottom-left">
      <SigmaMiniMap :node-radius="Number(nodeRadius)" :padding="Number(padding)" />
    </SigmaControls>

    <SigmaControls position="top-right">
      <SigmaZoomControl />
    </SigmaControls>
  </SigmaGraph>
</template>
```

### `padding`

图内容与缩略图边缘的留白，单位像素。它同时参与投影的缩放系数计算，调大之后整张缩略图会往里收。

### `clickToMove`

点击缩略图把相机移动到对应位置。触发的是相机的 `animate({ x, y })`——只改位置，**不改 ratio**。缩略图上点一下不会顺带改变缩放级别，这样它和 `SigmaZoomControl` 各管各的：

```vue [MiniMapClickExample.vue]
<script setup lang="ts">
defineProps<{ clickToMove: boolean, duration: number }>()

const { data } = await useFetch('/api/data.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaControls position="bottom-left">
      <SigmaMiniMap :click-to-move="clickToMove" :duration="Number(duration)" />
    </SigmaControls>

    <SigmaControls position="top-right">
      <SigmaZoomControl />
    </SigmaControls>
  </SigmaGraph>
</template>
```

### `duration`

点击后相机移动的动画时长，单位毫秒，`clickToMove` 为 `false` 时无效。

## 示例

### CSS 变量

绘制时经 `getComputedStyle` 读变量，三项都**没有对应的 prop**，改色与改尺寸只有这一条通道：

**--sigma-minimap-node** (`color`): 节点的填充色，默认 var(--sigma-color-muted)。

**--sigma-minimap-viewport** (`color`): 视口框的描边色，默认 var(--sigma-color-accent)。

**--sigma-minimap-size** (`length`): 缩略图的边长，默认 140px。缩略图是正方形。

```vue [MiniMapStyleExample.vue]
<script setup lang="ts">
const { data } = await useFetch('/api/data.json')

const style = {
  '--sigma-minimap-size': '180px',
  '--sigma-minimap-node': '#94a3b8',
  '--sigma-minimap-viewport': '#e11d48'
}
</script>

<template>
  <SigmaGraph :data="data" :style="style">
    <SigmaControls position="bottom-left">
      <SigmaMiniMap />
    </SigmaControls>

    <SigmaControls position="top-right">
      <SigmaZoomControl />
    </SigmaControls>
  </SigmaGraph>
</template>
```

> [!NOTE]
> 
> 组件没有插槽。需要完全不同的缩略图（比如带节点标签、带热力叠加）时，自己用 
> 
> useSigma()
> 
>  拿实例画一张，这个组件不打算做成通用画布。

## API

### Props

```ts
/**
 * Props for the SigmaMiniMap component
 */
interface SigmaMiniMapProps {
  /**
   * 节点在缩略图上的半径，单位像素
   * @default 1.5
   */
  nodeRadius?: number | undefined;
  /**
   * 图内容与缩略图边缘的留白，单位像素
   * @default 6
   */
  padding?: number | undefined;
  /**
   * 点击缩略图把相机移动到对应位置
   * @default true
   */
  clickToMove?: boolean | undefined;
  /**
   * 相机移动动画时长，单位毫秒
   * @default 300
   */
  duration?: number | undefined;
}
```


## Sitemap

See the full [sitemap](https://sigma.mhaibaraai.cn/sitemap.md) for all pages.