leafer-x-minimap

轻量的 Minimap 插件，为 leaferjs 提供鹰眼迷你地图。

!输入图片说明

demo 链接：http://minimap.scory.top

安装

``bash
npm install leafer-x-minimap


or


pnpm add leafer-x-minimap
`

快速开始

`ts
import { App } from 'leafer'
import { LeaferMap } from "leafer-x-minimap";

const app = App({ / ... / });

// 初始化鹰眼图
const map = new LeaferMap({
target: app.tree, // 控制 tree 层
width: 200,
height: 150,
bgColor: "#1E2125",
stroke: "#7D69EF",
fill: "#cccccc",
strokeWidth: 2,
});

// 设置位置
map.x = 20;
map.y = 20;

// 添加到 Sky 层 (HUD)
--------------------
app.sky.add(map);
// 或者自定义挂载view
const leafer = new Leafer({
view: "*",
});
leafer.add(map);
--------------------

app.destroy();

`

配置项 (Options)

| 选项 | 类型 | 默认值 | 描述 |
| :----------- | :------------------- | :---------- | :------------------------------------ |
| target | ILeafer \| Group | 必填 | 需要监控/控制的 Leafer 实例或 Group。 |
| width | number | 200 | 鹰眼图的宽度。 |
| height | number | 150 | 鹰眼图的高度。 |
| bgColor | string | #ffffff | 鹰眼图的背景颜色。 |
| fill | string | undefined | 内容预览图形的填充颜色。 |
| stroke | string | #409EFF | 视口矩形边框的颜色。 |
| strokeWidth | number | 2 | 视口矩形边框的宽度。 |
| showTags?: | string[] | [] | 显示的 tag 类型 |
| hiddenTags?: | string[] | [] | 隐藏的 tag 类型 |

方法 (Methods)

- map.open(): 显示鹰眼图并启用交互。
- map.close(): 隐藏鹰眼图并禁用交互。
- map.destroy()`: 清理资源并移除事件监听。