leafer-x-minimap

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

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

安装

npm install leafer-x-minimap
# or
pnpm add leafer-x-minimap

快速开始

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();
</script>

配置项 (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(): 清理资源并移除事件监听。