@movk/maplibre 1.0.0 → 1.1.0

package/dist/runtime/components/Marker.vue

@@ -2,6 +2,8 @@
 import { onMounted, onUnmounted, ref, useSlots, useTemplateRef, watch } from "vue";
 import { Marker } from "maplibre-gl";
 import { useMap } from "../composables/useMap";
+import { isDeepEqual } from "@movk/core";
+import { applyMarkerOptions, markerNeedsRebuild, removeMarkerClassName } from "../utils/marker";
 import MaplibrePopup from "./Popup.vue";
 const props = defineProps({
   options: { type: Object, required: false },
@@ -15,7 +17,9 @@ const slots = useSlots();
 const el = useTemplateRef("el");
 const ready = ref(false);
 let marker;
+let applied = {};
 let unbindTrigger;
+let disposed = false;
 function openPopup() {
   open.value = true;
 }
@@ -46,25 +50,45 @@ function bindTrigger() {
     element.removeEventListener("mouseleave", closePopup);
   };
 }
-onMounted(async () => {
-  const map = await ctx.whenLoaded();
+function onDragEnd() {
+  if (!marker) return;
+  const { lng, lat } = marker.getLngLat();
+  lnglat.value = [lng, lat];
+}
+function createMarker(map) {
   const useSlot = Boolean(slots.default && el.value);
-  marker = new Marker({ ...props.options, ...useSlot ? { element: el.value } : {} });
+  applied = { ...props.options };
+  marker = new Marker({ ...applied, ...useSlot ? { element: el.value } : {} });
   marker.setLngLat(lnglat.value).addTo(map);
-  ready.value = true;
+  marker.on("dragend", onDragEnd);
   bindTrigger();
-  if (props.options?.draggable) {
-    marker.on("dragend", () => {
-      const { lng, lat } = marker.getLngLat();
-      lnglat.value = [lng, lat];
-    });
+}
+onMounted(async () => {
+  const map = await ctx.whenAttached();
+  if (disposed) return;
+  createMarker(map);
+  ready.value = true;
+});
+watch(() => props.options, (value) => {
+  const map = ctx.map.value;
+  const next = value ?? {};
+  if (!marker || !map || isDeepEqual(next, applied)) return;
+  if (markerNeedsRebuild(next, applied)) {
+    removeMarkerClassName(marker, applied.className);
+    unbindTrigger?.();
+    marker.remove();
+    createMarker(map);
+    return;
   }
+  applyMarkerOptions(marker, next, applied);
+  applied = { ...next };
 });
 watch(lnglat, (value) => {
   if (value) marker?.setLngLat(value);
 });
 watch(() => props.trigger, bindTrigger);
 onUnmounted(() => {
+  disposed = true;
   unbindTrigger?.();
   marker?.remove();
 });

package/dist/runtime/components/Marker.vue.d.ts

@@ -3,7 +3,8 @@ import type { LngLatLike, MarkerOptions, PopupOptions } from 'maplibre-gl';
 import type { PopupTrigger } from '../types';
 type __VLS_Props = {
     /**
-     * 标记选项；element 由默认插槽提供，无需在此传入
+     * 标记选项；element 由默认插槽提供，无需在此传入。
+     * 有 setter 的字段（rotation、draggable 等）增量更新，anchor、color、scale 变化时重建
      * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MarkerOptions/
      */
     options?: Omit<MarkerOptions, 'element'>;

package/dist/runtime/components/Popup.d.vue.ts

@@ -4,7 +4,7 @@ type __VLS_Props = {
     /** 弹窗锚定的经纬度 */
     lnglat: LngLatLike;
     /**
-     * Popup 选项
+     * Popup 选项；值变化时重建弹窗
      * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/
      */
     options?: PopupOptions;

package/dist/runtime/components/Popup.vue

@@ -2,6 +2,7 @@
 import { onMounted, onUnmounted, useTemplateRef, watch } from "vue";
 import { Popup } from "maplibre-gl";
 import { useMap } from "../composables/useMap";
+import { isDeepEqual } from "@movk/core";
 const props = defineProps({
   lnglat: { type: [Object, Array], required: true },
   options: { type: Object, required: false }
@@ -11,16 +12,34 @@ defineOptions({ inheritAttrs: false });
 const ctx = useMap();
 const el = useTemplateRef("el");
 let popup;
-onMounted(async () => {
-  const map = await ctx.whenLoaded();
+let disposed = false;
+function onClose() {
+  emit("close");
+}
+function createPopup(map) {
   popup = new Popup(props.options);
   popup.setLngLat(props.lnglat);
   if (el.value) popup.setDOMContent(el.value);
-  popup.on("close", () => emit("close"));
+  popup.on("close", onClose);
   popup.addTo(map);
+}
+onMounted(async () => {
+  const map = await ctx.whenAttached();
+  if (disposed) return;
+  createPopup(map);
 });
 watch(() => props.lnglat, (value) => popup?.setLngLat(value));
-onUnmounted(() => popup?.remove());
+watch(() => props.options, (next, prev) => {
+  const map = ctx.map.value;
+  if (!popup || !map || isDeepEqual(next, prev)) return;
+  popup.off("close", onClose);
+  popup.remove();
+  createPopup(map);
+});
+onUnmounted(() => {
+  disposed = true;
+  popup?.remove();
+});
 defineExpose({ popup: () => popup });
 </script>
 

package/dist/runtime/components/Popup.vue.d.ts

@@ -4,7 +4,7 @@ type __VLS_Props = {
     /** 弹窗锚定的经纬度 */
     lnglat: LngLatLike;
     /**
-     * Popup 选项
+     * Popup 选项；值变化时重建弹窗
      * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/
      */
     options?: PopupOptions;

package/dist/runtime/components/Source.d.vue.ts

@@ -1,9 +1,9 @@
 import type { SourceSpecification } from '@maplibre/maplibre-gl-style-spec';
 type __VLS_Props = {
-    /** 数据源 id，供图层经 source 字段按字符串引用 */
+    /** 数据源 id，供图层经 source 字段按字符串引用；变更需配合 `:key` 重建 */
     sourceId: string;
     /**
-     * 数据源定义
+     * 数据源定义，变化时按类型增量更新（setData / setTiles 等）
      * @see https://maplibre.org/maplibre-style-spec/sources/
      */
     source: SourceSpecification;

package/dist/runtime/components/Source.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { onUnmounted, watch } from "vue";
 import { useMap } from "../composables/useMap";
+import { updateSource } from "../utils/source";
 const props = defineProps({
   sourceId: { type: String, required: true },
   source: { type: Object, required: true }
@@ -11,22 +12,9 @@ const stopReady = ctx.onReady((map) => {
     map.addSource(props.sourceId, props.source);
   }
 });
-watch(() => props.source, (next) => {
+watch(() => props.source, (next, prev) => {
   const source = ctx.map.value?.getSource(props.sourceId);
-  if (!source) return;
-  if (next.type === "geojson" && next.data) {
-    source.setData(next.data);
-  } else if (next.type === "vector") {
-    if (next.url) source.setUrl(next.url);
-    if (next.tiles) source.setTiles(next.tiles);
-  } else if (next.type === "raster" || next.type === "raster-dem") {
-    if (next.url) source.setUrl(next.url);
-    if (next.tiles) source.setTiles(next.tiles);
-  } else if (next.type === "image" && next.url) {
-    source.updateImage(next);
-  } else if (next.type === "video" && next.coordinates) {
-    source.setCoordinates(next.coordinates);
-  }
+  if (source) updateSource(source, next, prev);
 }, { deep: true });
 onUnmounted(() => {
   stopReady();

package/dist/runtime/components/Source.vue.d.ts

@@ -1,9 +1,9 @@
 import type { SourceSpecification } from '@maplibre/maplibre-gl-style-spec';
 type __VLS_Props = {
-    /** 数据源 id，供图层经 source 字段按字符串引用 */
+    /** 数据源 id，供图层经 source 字段按字符串引用；变更需配合 `:key` 重建 */
     sourceId: string;
     /**
-     * 数据源定义
+     * 数据源定义，变化时按类型增量更新（setData / setTiles 等）
      * @see https://maplibre.org/maplibre-style-spec/sources/
      */
     source: SourceSpecification;

package/dist/runtime/components/Tooltip.d.vue.ts

@@ -2,10 +2,10 @@ import type { GeoJSONFeature, PopupOptions } from 'maplibre-gl';
 import type { PopupTrigger } from '../types';
 /** 目标图层要素的弹窗：按 trigger 以悬浮或点击触发，作用域插槽拿到当前要素。 */
 type __VLS_Props = {
-    /** 目标图层 id */
+    /** 目标图层 id；变化时改绑到新图层 */
     layerId: string;
     /**
-     * Popup 选项（hover 模式下 closeButton/closeOnClick 由组件接管）
+     * Popup 选项（hover 模式下 closeButton/closeOnClick 由组件接管）；值变化时重建弹窗
      * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/
      */
     options?: PopupOptions;

package/dist/runtime/components/Tooltip.vue

@@ -2,6 +2,8 @@
 import { onMounted, onUnmounted, shallowRef, useTemplateRef, watch } from "vue";
 import { Popup } from "maplibre-gl";
 import { useMap } from "../composables/useMap";
+import { isDeepEqual } from "@movk/core";
+import { onLayerDataChange } from "../utils/events";
 const props = defineProps({
   layerId: { type: String, required: true },
   options: { type: Object, required: false },
@@ -12,22 +14,35 @@ const ctx = useMap();
 const el = useTemplateRef("el");
 const hovered = shallowRef();
 let popup;
+let anchor;
 let unbind;
+let disposed = false;
 function setCursor(value) {
   const map = ctx.map.value;
   if (map) map.getCanvas().style.cursor = value;
 }
-function show(event) {
+function open(lngLat, feature) {
   const map = ctx.map.value;
   if (!map || !popup || !el.value) return;
-  hovered.value = event.features?.[0];
-  popup.setLngLat(event.lngLat).setDOMContent(el.value);
+  hovered.value = feature;
+  anchor = lngLat;
+  popup.setLngLat(lngLat).setDOMContent(el.value);
   if (!popup.isOpen()) popup.addTo(map);
 }
+function show(event) {
+  open(event.lngLat, event.features?.[0]);
+}
 function close() {
   hovered.value = void 0;
+  anchor = void 0;
   popup?.remove();
 }
+function revalidate(map) {
+  if (!popup?.isOpen() || !anchor) return;
+  const [feature] = map.queryRenderedFeatures(map.project(anchor), { layers: [props.layerId] });
+  if (feature) hovered.value = feature;
+  else close();
+}
 function onMove(event) {
   setCursor(props.cursor);
   show(event);
@@ -50,22 +65,26 @@ function popupOptions() {
 }
 function bind(map) {
   if (props.trigger === "none") return;
+  const { layerId } = props;
+  const stopDataChange = onLayerDataChange(map, layerId, () => revalidate(map));
   if (props.trigger === "hover") {
-    map.on("mousemove", props.layerId, onMove);
-    map.on("mouseleave", props.layerId, onLeave);
+    map.on("mousemove", layerId, onMove);
+    map.on("mouseleave", layerId, onLeave);
     unbind = () => {
-      map.off("mousemove", props.layerId, onMove);
-      map.off("mouseleave", props.layerId, onLeave);
+      stopDataChange();
+      map.off("mousemove", layerId, onMove);
+      map.off("mouseleave", layerId, onLeave);
     };
     return;
   }
-  map.on("click", props.layerId, onClick);
-  map.on("mouseenter", props.layerId, onEnter);
-  map.on("mouseleave", props.layerId, onLeaveCursor);
+  map.on("click", layerId, onClick);
+  map.on("mouseenter", layerId, onEnter);
+  map.on("mouseleave", layerId, onLeaveCursor);
   unbind = () => {
-    map.off("click", props.layerId, onClick);
-    map.off("mouseenter", props.layerId, onEnter);
-    map.off("mouseleave", props.layerId, onLeaveCursor);
+    stopDataChange();
+    map.off("click", layerId, onClick);
+    map.off("mouseenter", layerId, onEnter);
+    map.off("mouseleave", layerId, onLeaveCursor);
   };
 }
 function teardown() {
@@ -81,16 +100,25 @@ function setup(map) {
   bind(map);
 }
 onMounted(async () => {
-  const map = await ctx.whenLoaded();
+  const map = await ctx.whenAttached();
+  if (disposed) return;
   setup(map);
 });
-watch(() => props.trigger, () => {
-  const map = ctx.map.value;
-  if (!map) return;
+watch(
+  [() => props.trigger, () => props.layerId, () => props.options],
+  ([trigger, layerId, options], [prevTrigger, prevLayerId, prevOptions]) => {
+    const map = ctx.map.value;
+    if (!map || !popup || trigger === prevTrigger && layerId === prevLayerId && isDeepEqual(options, prevOptions)) return;
+    const restore = trigger === "click" && trigger === prevTrigger && layerId === prevLayerId && popup.isOpen() && anchor ? { lngLat: anchor, feature: hovered.value } : void 0;
+    teardown();
+    setup(map);
+    if (restore) open(restore.lngLat, restore.feature);
+  }
+);
+onUnmounted(() => {
+  disposed = true;
   teardown();
-  setup(map);
 });
-onUnmounted(teardown);
 defineExpose({
   /** 当前激活要素 */
   hovered: () => hovered.value

package/dist/runtime/components/Tooltip.vue.d.ts

@@ -2,10 +2,10 @@ import type { GeoJSONFeature, PopupOptions } from 'maplibre-gl';
 import type { PopupTrigger } from '../types';
 /** 目标图层要素的弹窗：按 trigger 以悬浮或点击触发，作用域插槽拿到当前要素。 */
 type __VLS_Props = {
-    /** 目标图层 id */
+    /** 目标图层 id；变化时改绑到新图层 */
     layerId: string;
     /**
-     * Popup 选项（hover 模式下 closeButton/closeOnClick 由组件接管）
+     * Popup 选项（hover 模式下 closeButton/closeOnClick 由组件接管）；值变化时重建弹窗
      * @see https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/
      */
     options?: PopupOptions;

package/dist/runtime/components/buffers/BufferCircle.d.vue.ts

@@ -9,7 +9,7 @@ type __VLS_Props = {
      * @defaultValue 64
      */
     steps?: number;
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 主色（快捷样式） */
     color?: string;

package/dist/runtime/components/buffers/BufferCircle.vue.d.ts

@@ -9,7 +9,7 @@ type __VLS_Props = {
      * @defaultValue 64
      */
     steps?: number;
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 主色（快捷样式） */
     color?: string;

package/dist/runtime/components/buffers/BufferEllipse.d.vue.ts

@@ -16,7 +16,7 @@ type __VLS_Props = {
      * @defaultValue 64
      */
     steps?: number;
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 主色（快捷样式） */
     color?: string;

package/dist/runtime/components/buffers/BufferEllipse.vue.d.ts

@@ -16,7 +16,7 @@ type __VLS_Props = {
      * @defaultValue 64
      */
     steps?: number;
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 主色（快捷样式） */
     color?: string;

package/dist/runtime/components/buffers/BufferLine.d.vue.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
     line: Feature<LineString> | LineString | [number, number][];
     /** 缓冲宽度（米） */
     width: number;
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 主色（快捷样式） */
     color?: string;

package/dist/runtime/components/buffers/BufferLine.vue.d.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
     line: Feature<LineString> | LineString | [number, number][];
     /** 缓冲宽度（米） */
     width: number;
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 主色（快捷样式） */
     color?: string;

package/dist/runtime/components/buffers/BufferPolygon.d.vue.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
     polygon: Feature<Polygon> | Polygon | [number, number][];
     /** 缓冲宽度（米），负值向内收缩 */
     width: number;
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 主色（快捷样式） */
     color?: string;

package/dist/runtime/components/buffers/BufferPolygon.vue.d.ts

@@ -5,7 +5,7 @@ type __VLS_Props = {
     polygon: Feature<Polygon> | Polygon | [number, number][];
     /** 缓冲宽度（米），负值向内收缩 */
     width: number;
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 主色（快捷样式） */
     color?: string;

package/dist/runtime/components/buffers/BufferSector.d.vue.ts

@@ -13,7 +13,7 @@ type __VLS_Props = {
      * @defaultValue 64
      */
     steps?: number;
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 主色（快捷样式） */
     color?: string;

package/dist/runtime/components/buffers/BufferSector.vue.d.ts

@@ -13,7 +13,7 @@ type __VLS_Props = {
      * @defaultValue 64
      */
     steps?: number;
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 主色（快捷样式） */
     color?: string;

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

@@ -0,0 +1,35 @@
+import type { ControlPosition, StyleSpecification } from 'maplibre-gl';
+import type { BasemapItem } from '../../types';
+/**
+ * 底图切换：受控组件，只发出选中项的 style，不直接调用 setStyle。
+ * 将同一个值绑定到 MaplibreMap 的 options.style，由地图负责切换并重建叠加图层。
+ */
+type __VLS_Props = {
+    /** 候选底图 */
+    items: BasemapItem[];
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+    /**
+     * 折叠按钮与选项组的无障碍标签
+     * @defaultValue 'Basemap'
+     */
+    label?: string;
+};
+type __VLS_ModelProps = {
+    /** 当前底图样式，与 MaplibreMap 的 options.style 绑定同一个值；按引用或字符串相等判断选中项 */
+    modelValue?: StyleSpecification | string;
+    /** 面板是否展开 */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:modelValue": (value: string | StyleSpecification | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | StyleSpecification | undefined) => any) | undefined;
+}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,60 @@
+<script setup>
+import { computed, toRaw } from "vue";
+import MaplibreControl from "./Control.vue";
+const props = defineProps({
+  items: { type: Array, required: true },
+  position: { type: String, required: false },
+  label: { type: String, required: false, default: "Basemap" }
+});
+const style = defineModel({ type: [Object, String] });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const grid = computed(() => props.items.some((item) => item.thumbnail));
+function isSelected(item) {
+  return style.value !== void 0 && toRaw(item.style) === toRaw(style.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">
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0zm.894.211v15M9 3.236v15"
+        />
+      </svg>
+    </template>
+    <div
+      class="movk-maplibre-basemap-control"
+      :class="{ 'movk-maplibre-basemap-control--grid': grid }"
+      role="radiogroup"
+      :aria-label="label"
+    >
+      <button
+        v-for="item in items"
+        :key="item.label"
+        type="button"
+        role="radio"
+        class="movk-maplibre-basemap-control__item"
+        :aria-checked="isSelected(item)"
+        @click="style = item.style"
+      >
+        <img v-if="item.thumbnail" :src="item.thumbnail" alt="" class="movk-maplibre-basemap-control__thumbnail">
+        <span>{{ item.label }}</span>
+      </button>
+    </div>
+  </MaplibreControl>
+</template>
+
+<style>
+:where(.movk-maplibre-basemap-control){display:flex;flex-direction:column;gap:2px;min-width:120px}:where(.movk-maplibre-basemap-control--grid){display:grid;gap:6px;grid-template-columns:repeat(2,72px)}.movk-maplibre-control .movk-maplibre-basemap-control__item{align-items:flex-start;background:transparent;border:1px solid transparent;border-radius:4px;color:inherit;cursor:pointer;display:flex;flex-direction:column;font:inherit;gap:2px;height:auto;padding:3px 6px;text-align:left;width:100%}.movk-maplibre-control .movk-maplibre-basemap-control__item:hover{background:rgba(0,0,0,.05)}.movk-maplibre-control .movk-maplibre-basemap-control__item[aria-checked=true]{border-color:#3b82f6;color:#1d4ed8}.movk-maplibre-control .movk-maplibre-basemap-control--grid .movk-maplibre-basemap-control__item{align-items:center;padding:3px}:where(.movk-maplibre-basemap-control__thumbnail){border-radius:3px;height:48px;-o-object-fit:cover;object-fit:cover;width:64px}
+</style>

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

@@ -0,0 +1,35 @@
+import type { ControlPosition, StyleSpecification } from 'maplibre-gl';
+import type { BasemapItem } from '../../types';
+/**
+ * 底图切换：受控组件，只发出选中项的 style，不直接调用 setStyle。
+ * 将同一个值绑定到 MaplibreMap 的 options.style，由地图负责切换并重建叠加图层。
+ */
+type __VLS_Props = {
+    /** 候选底图 */
+    items: BasemapItem[];
+    /** 控件停靠位置；省略用地图默认位置 */
+    position?: ControlPosition;
+    /**
+     * 折叠按钮与选项组的无障碍标签
+     * @defaultValue 'Basemap'
+     */
+    label?: string;
+};
+type __VLS_ModelProps = {
+    /** 当前底图样式，与 MaplibreMap 的 options.style 绑定同一个值；按引用或字符串相等判断选中项 */
+    modelValue?: StyleSpecification | string;
+    /** 面板是否展开 */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    "update:modelValue": (value: string | StyleSpecification | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | StyleSpecification | undefined) => any) | undefined;
+}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/controls/Control.d.vue.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;
+    };
+};