g6 缩略图技术

G6 是一个基于图形语法的可视化图形编辑引擎，提供了丰富的图形交互和图形编辑功能。G6 支持缩略图的展示，通过缩略图可以快速浏览和定位大型图形。

G6 的缩略图技术主要是通过 `graph.getThumbnail()` 方法生成缩略图，以及 `graph.addPlugin()` 方法添加缩略图插件。

下面是一个简单的示例：

import G6 from '@antv/g6';

const graph = new G6.Graph({
  container: 'container',
  width: 800,
  height: 600,
  modes: {
    default: ['drag-canvas', 'zoom-canvas']
  }
});

// 添加缩略图插件
graph.addPlugin({
  id: 'thumbnail',
  after: 'minimap',
  constructor: G6.Plugins['tool.thumbnail'],
  options: {
    title: '缩略图',
    container: 'container',
    width: 200,
    height: 150,
    showLabel: false
  }
});

// 渲染图形
graph.data(data);
graph.render();

// 生成缩略图并显示
const thumbnail = graph.getThumbnail();
document.getElementById('thumbnail').appendChild(thumbnail);

在上面的代码中，我们添加了一个缩略图插件，并使用 `getThumbnail()` 方法生成缩略图。缩略图插件会在画布上显示一个缩略图，可以通过拖拽缩略图来移动画布。

缩略图插件的配置项包括：

- `title`：缩略图标题
- `container`：缩略图容器的 DOM 元素 ID
- `width`：缩略图宽度
- `height`：缩略图高度
- `showLabel`：是否显示节点标签

可以根据实际需求进行配置。

需要注意的是，在使用缩略图插件时，需要在 G6 的基础上额外引入 `@antv/g6-plugin` 库。