@movk/maplibre 1.0.0 → 1.2.0

package/dist/runtime/components/controls/Control.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { nextTick, shallowRef, useId, useTemplateRef } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { useControl } from "../../domains/map/control";
+const props = defineProps({
+  position: { type: String, required: false },
+  group: { type: Boolean, required: false, default: true },
+  collapsible: { type: Boolean, required: false, default: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  label: { type: String, required: false }
+});
+defineSlots();
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const el = shallowRef();
+const panelId = useId();
+const trigger = useTemplateRef("trigger");
+function createControl() {
+  let container;
+  return {
+    onAdd() {
+      container = document.createElement("div");
+      container.className = ["maplibregl-ctrl", props.group && "maplibregl-ctrl-group", "movk-maplibre-control"].filter(Boolean).join(" ");
+      el.value = container;
+      return container;
+    },
+    onRemove() {
+      container?.remove();
+      if (el.value === container) el.value = void 0;
+    }
+  };
+}
+useControl(createControl, () => props.position, () => props.group);
+function close() {
+  if (!open.value) return;
+  open.value = false;
+  nextTick(() => trigger.value?.focus());
+}
+onClickOutside(el, () => {
+  if (props.collapsible && props.dismissible && open.value) open.value = false;
+});
+function onKeydown(event) {
+  if (props.collapsible && event.key === "Escape") close();
+}
+</script>
+
+<template>
+  <Teleport v-if="el" :to="el">
+    <template v-if="collapsible">
+      <button
+        v-show="!open"
+        ref="trigger"
+        type="button"
+        class="movk-maplibre-control__trigger"
+        :aria-label="label"
+        :title="label"
+        :aria-expanded="open"
+        :aria-controls="panelId"
+        @click="open = true"
+      >
+        <slot name="trigger" />
+      </button>
+      <div
+        v-show="open"
+        :id="panelId"
+        class="movk-maplibre-control__panel"
+        @keydown="onKeydown"
+      >
+        <button
+          type="button"
+          class="movk-maplibre-control__close"
+          aria-label="Close"
+          title="Close"
+          @click="close"
+        >
+          <svg viewBox="0 0 24 24" width="12" height="12" aria-hidden="true">
+            <path
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M18 6L6 18M6 6l12 12"
+            />
+          </svg>
+        </button>
+        <slot />
+      </div>
+    </template>
+    <slot v-else />
+  </Teleport>
+</template>
+
+<style>
+.movk-maplibre-control .movk-maplibre-control__trigger{align-items:center;background:transparent;border:0;color:#333;cursor:pointer;display:flex;height:29px;justify-content:center;padding:0;width:29px}.movk-maplibre-control .movk-maplibre-control__trigger:hover{background:rgba(0,0,0,.05)}:where(.movk-maplibre-control__panel){color:#333;font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;padding:8px 24px 8px 10px;position:relative}.movk-maplibre-control .movk-maplibre-control__close{align-items:center;background:transparent;border:0;border-radius:3px;color:#666;cursor:pointer;display:flex;height:18px;justify-content:center;padding:0;position:absolute;right:4px;top:4px;width:18px}.movk-maplibre-control .movk-maplibre-control__close:hover{background:rgba(0,0,0,.05);color:#333}
+</style>

package/dist/runtime/components/controls/Control.vue.d.ts

@@ -0,0 +1,51 @@
+import type { ControlPosition } from 'maplibre-gl';
+/** 通用控件容器：把任意 Vue 内容挂到 maplibre 控件槽位，可选折叠为图标按钮。 */
+type __VLS_Props = {
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+    /**
+     * 是否使用 maplibre 控件组样式（白底圆角卡片）
+     * @defaultValue true
+     */
+    group?: boolean;
+    /**
+     * 是否可折叠：收起时只显示触发按钮，点击展开，面板内关闭按钮或 Esc 收起
+     * @defaultValue false
+     */
+    collapsible?: boolean;
+    /**
+     * 可折叠时点击控件外部是否收起；常驻展示的内容（如图例）应关闭
+     * @defaultValue true
+     */
+    dismissible?: boolean;
+    /** 折叠按钮的无障碍标签 */
+    label?: string;
+};
+type __VLS_Slots = {
+    /** 控件内容；可折叠时为展开后的面板 */
+    default?: () => unknown;
+    /** 折叠按钮内容（通常是图标） */
+    trigger?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** 可折叠时的展开状态 */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    group: boolean;
+    collapsible: boolean;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/controls/GlobeControl.d.vue.ts

@@ -0,0 +1,18 @@
+import type { ControlPosition } from 'maplibre-gl';
+type __VLS_Props = {
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/controls/GlobeControl.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { GlobeControl } from "maplibre-gl";
+import { useControl } from "../../domains/map/control";
+const props = defineProps({
+  position: { type: String, required: false }
+});
+useControl(
+  () => new GlobeControl(),
+  () => props.position
+);
+</script>
+
+<template>
+  <slot />
+</template>

package/dist/runtime/components/controls/GlobeControl.vue.d.ts

@@ -0,0 +1,18 @@
+import type { ControlPosition } from 'maplibre-gl';
+type __VLS_Props = {
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/controls/LayerControl.d.vue.ts

@@ -0,0 +1,44 @@
+import type { ControlPosition } from 'maplibre-gl';
+import type { LayerTreeItem } from '../../types';
+/** 图层控件：列出带 title 的 MaplibreLayerGroup，勾选控制显隐、滑块控制透明度，读写即写回各组的 v-model。 */
+type __VLS_Props = {
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+    /**
+     * 是否显示透明度滑块
+     * @defaultValue true
+     */
+    opacity?: boolean;
+    /**
+     * 折叠按钮的无障碍标签
+     * @defaultValue 'Layers'
+     */
+    label?: string;
+};
+type __VLS_Slots = {
+    /** 自定义单个图层组的行内容 */
+    item?: (props: {
+        item: LayerTreeItem;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** 面板是否展开 */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    opacity: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/controls/LayerControl.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { useLayerTree } from "../../composables/useLayerTree";
+import MaplibreControl from "./Control.vue";
+const props = defineProps({
+  position: { type: String, required: false },
+  opacity: { type: Boolean, required: false, default: true },
+  label: { type: String, required: false, default: "Layers" }
+});
+defineSlots();
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const items = useLayerTree();
+function onToggle(item, event) {
+  item.setVisible(event.target.checked);
+}
+function onOpacity(item, event) {
+  item.setOpacity(Number(event.target.value));
+}
+</script>
+
+<template>
+  <MaplibreControl
+    v-model:open="open"
+    :position="position"
+    :label="label"
+    collapsible
+  >
+    <template #trigger>
+      <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+          <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
+          <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
+          <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
+        </g>
+      </svg>
+    </template>
+    <ul class="movk-maplibre-layer-control" :aria-label="label">
+      <li v-for="item in items" :key="item.id" class="movk-maplibre-layer-control__item">
+        <slot name="item" :item="item">
+          <label class="movk-maplibre-layer-control__toggle">
+            <input type="checkbox" :checked="item.visible" @change="onToggle(item, $event)">
+            <span class="movk-maplibre-layer-control__title">{{ item.title }}</span>
+          </label>
+          <input
+            v-if="props.opacity"
+            class="movk-maplibre-layer-control__opacity"
+            type="range"
+            min="0"
+            max="1"
+            step="0.05"
+            :value="item.opacity"
+            :disabled="!item.visible"
+            :aria-label="`${item.title} opacity`"
+            @input="onOpacity(item, $event)"
+          >
+        </slot>
+      </li>
+    </ul>
+  </MaplibreControl>
+</template>
+
+<style>
+:where(.movk-maplibre-layer-control){display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;min-width:160px;padding:0}:where(.movk-maplibre-layer-control__toggle){align-items:center;cursor:pointer;display:flex;gap:6px}:where(.movk-maplibre-layer-control__opacity){display:block;margin:2px 0 0;width:100%}
+</style>

package/dist/runtime/components/controls/LayerControl.vue.d.ts

@@ -0,0 +1,44 @@
+import type { ControlPosition } from 'maplibre-gl';
+import type { LayerTreeItem } from '../../types';
+/** 图层控件：列出带 title 的 MaplibreLayerGroup，勾选控制显隐、滑块控制透明度，读写即写回各组的 v-model。 */
+type __VLS_Props = {
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+    /**
+     * 是否显示透明度滑块
+     * @defaultValue true
+     */
+    opacity?: boolean;
+    /**
+     * 折叠按钮的无障碍标签
+     * @defaultValue 'Layers'
+     */
+    label?: string;
+};
+type __VLS_Slots = {
+    /** 自定义单个图层组的行内容 */
+    item?: (props: {
+        item: LayerTreeItem;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** 面板是否展开 */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    opacity: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/controls/Legend.d.vue.ts

@@ -0,0 +1,47 @@
+import type { ControlPosition } from 'maplibre-gl';
+import type { LayerTreeItem, LegendItem } from '../../types';
+/** 图例：展示可见图层组的图例项，图例来自 MaplibreLayerGroup 的 legend 或子图层颜色推导。 */
+type __VLS_Props = {
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+    /** 只展示这些标题的图层组；省略展示全部 */
+    groups?: string[];
+    /**
+     * 是否可折叠
+     * @defaultValue true
+     */
+    collapsible?: boolean;
+    /**
+     * 折叠按钮与图例列表的无障碍标签
+     * @defaultValue 'Legend'
+     */
+    label?: string;
+};
+type __VLS_Slots = {
+    /** 自定义单个图例项 */
+    item?: (props: {
+        item: LegendItem;
+        group: LayerTreeItem;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** 可折叠时的展开状态 */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    collapsible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/controls/Legend.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { computed } from "vue";
+import { useLayerTree } from "../../composables/useLayerTree";
+import MaplibreControl from "./Control.vue";
+const props = defineProps({
+  position: { type: String, required: false },
+  groups: { type: Array, required: false },
+  collapsible: { type: Boolean, required: false, default: true },
+  label: { type: String, required: false, default: "Legend" }
+});
+defineSlots();
+const open = defineModel("open", { type: Boolean, ...{ default: true } });
+const tree = useLayerTree();
+const entries = computed(() => tree.value.filter(
+  (group) => group.visible && group.legend.length > 0 && (!props.groups || props.groups.includes(group.title))
+));
+function isSingle(group) {
+  return group.legend.length === 1 && group.legend[0].label === group.title;
+}
+function swatchStyle(item) {
+  if (item.type === "gradient") return { background: `linear-gradient(to right, ${(item.colors ?? []).join(", ")})` };
+  return { background: item.color ?? "transparent" };
+}
+</script>
+
+<template>
+  <MaplibreControl
+    v-model:open="open"
+    :position="position"
+    :label="label"
+    :collapsible="collapsible"
+    :dismissible="false"
+  >
+    <template #trigger>
+      <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 5h.01M3 12h.01M3 19h.01M8 5h13M8 12h13M8 19h13"
+        />
+      </svg>
+    </template>
+    <div class="movk-maplibre-legend" :aria-label="label">
+      <section v-for="group in entries" :key="group.id" class="movk-maplibre-legend__group">
+        <p v-if="!isSingle(group)" class="movk-maplibre-legend__heading">
+          {{ group.title }}
+        </p>
+        <div v-for="item in group.legend" :key="`${item.label}-${item.color ?? item.colors?.join()}`" class="movk-maplibre-legend__row">
+          <slot name="item" :item="item" :group="group">
+            <span
+              class="movk-maplibre-legend__swatch"
+              :class="`movk-maplibre-legend__swatch--${item.type}`"
+              :style="swatchStyle(item)"
+              aria-hidden="true"
+            />
+            <span>{{ item.label }}</span>
+          </slot>
+        </div>
+      </section>
+    </div>
+  </MaplibreControl>
+</template>
+
+<style>
+:where(.movk-maplibre-legend){display:flex;flex-direction:column;gap:6px;min-width:120px}:where(.movk-maplibre-legend__heading){font-weight:600;margin:0}:where(.movk-maplibre-legend__row){align-items:center;display:flex;gap:6px}:where(.movk-maplibre-legend__swatch){border-radius:2px;flex:none;height:14px;width:14px}:where(.movk-maplibre-legend__swatch--line){border-radius:2px;height:3px}:where(.movk-maplibre-legend__swatch--circle){border-radius:9999px;height:10px;margin:0 2px;width:10px}:where(.movk-maplibre-legend__swatch--gradient){height:10px;width:48px}
+</style>

package/dist/runtime/components/controls/Legend.vue.d.ts

@@ -0,0 +1,47 @@
+import type { ControlPosition } from 'maplibre-gl';
+import type { LayerTreeItem, LegendItem } from '../../types';
+/** 图例：展示可见图层组的图例项，图例来自 MaplibreLayerGroup 的 legend 或子图层颜色推导。 */
+type __VLS_Props = {
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+    /** 只展示这些标题的图层组；省略展示全部 */
+    groups?: string[];
+    /**
+     * 是否可折叠
+     * @defaultValue true
+     */
+    collapsible?: boolean;
+    /**
+     * 折叠按钮与图例列表的无障碍标签
+     * @defaultValue 'Legend'
+     */
+    label?: string;
+};
+type __VLS_Slots = {
+    /** 自定义单个图例项 */
+    item?: (props: {
+        item: LegendItem;
+        group: LayerTreeItem;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** 可折叠时的展开状态 */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    collapsible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/controls/Minimap.d.vue.ts

@@ -0,0 +1,45 @@
+import type { ControlPosition, StyleSpecification } from 'maplibre-gl';
+type __VLS_Props = {
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+    /** 鹰眼底图样式（对象或样式 URL）；省略时沿用主图样式并跟随其切换 */
+    mapStyle?: StyleSpecification | string;
+    /**
+     * 相对主图的缩放偏移
+     * @defaultValue -4
+     */
+    zoomOffset?: number;
+    /**
+     * 宽度（px）
+     * @defaultValue 200
+     */
+    width?: number;
+    /**
+     * 高度（px）
+     * @defaultValue 150
+     */
+    height?: number;
+    /**
+     * 视口框颜色
+     * @defaultValue '#3b82f6'
+     */
+    color?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: string;
+    width: number;
+    height: number;
+    zoomOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/controls/Minimap.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { useControl } from "../../domains/map/control";
+import { createMinimapControl } from "../../domains/map/minimap";
+const props = defineProps({
+  position: { type: String, required: false },
+  mapStyle: { type: [Object, String], required: false },
+  zoomOffset: { type: Number, required: false, default: -4 },
+  width: { type: Number, required: false, default: 200 },
+  height: { type: Number, required: false, default: 150 },
+  color: { type: String, required: false, default: "#3b82f6" }
+});
+useControl(
+  () => createMinimapControl({
+    style: props.mapStyle,
+    zoomOffset: props.zoomOffset,
+    width: props.width,
+    height: props.height,
+    color: props.color
+  }),
+  () => props.position,
+  () => [props.mapStyle, props.zoomOffset, props.width, props.height, props.color]
+);
+</script>
+
+<template>
+  <slot />
+</template>
+
+<style>
+.movk-maplibre-minimap{cursor:pointer;overflow:hidden;touch-action:none}
+</style>

package/dist/runtime/components/controls/Minimap.vue.d.ts

@@ -0,0 +1,45 @@
+import type { ControlPosition, StyleSpecification } from 'maplibre-gl';
+type __VLS_Props = {
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+    /** 鹰眼底图样式（对象或样式 URL）；省略时沿用主图样式并跟随其切换 */
+    mapStyle?: StyleSpecification | string;
+    /**
+     * 相对主图的缩放偏移
+     * @defaultValue -4
+     */
+    zoomOffset?: number;
+    /**
+     * 宽度（px）
+     * @defaultValue 200
+     */
+    width?: number;
+    /**
+     * 高度（px）
+     * @defaultValue 150
+     */
+    height?: number;
+    /**
+     * 视口框颜色
+     * @defaultValue '#3b82f6'
+     */
+    color?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: string;
+    width: number;
+    height: number;
+    zoomOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/effects/AnimatedImage.d.vue.ts

@@ -15,7 +15,7 @@ type __VLS_Props = {
      * @defaultValue 12
      */
     fps?: number;
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 插入到该图层之前 */
     beforeId?: string;