@movk/maplibre 1.0.0 → 1.1.0

package/dist/runtime/components/layers/MaskLayer.d.vue.ts

@@ -0,0 +1,44 @@
+import { type MaskInput } from '../../utils/mask';
+/** 区域遮罩：压暗目标区域以外的范围，突出显示行政区等面状区域。 */
+type __VLS_Props = {
+    /** 目标区域：Polygon / MultiPolygon / Feature / FeatureCollection；区域自身的孔洞（飞地）不参与遮罩 */
+    data: MaskInput;
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
+    layerId?: string;
+    /**
+     * 遮罩颜色
+     * @defaultValue '#000'
+     */
+    color?: string;
+    /**
+     * 遮罩不透明度
+     * @defaultValue 0.5
+     */
+    opacity?: number;
+    /**
+     * 是否描绘目标区域边界
+     * @defaultValue false
+     */
+    outline?: boolean;
+    /**
+     * 边界颜色
+     * @defaultValue '#fff'
+     */
+    outlineColor?: string;
+    /**
+     * 边界宽度（像素）
+     * @defaultValue 1
+     */
+    outlineWidth?: number;
+    /** 插入到该图层之前 */
+    beforeId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: string;
+    opacity: number;
+    outlineColor: string;
+    outlineWidth: number;
+    outline: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/layers/MaskLayer.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { computed, useId } from "vue";
+import MaplibreLayer from "../Layer.vue";
+import { maskPolygon } from "../../utils/mask";
+const props = defineProps({
+  data: { type: Object, required: true },
+  layerId: { type: String, required: false },
+  color: { type: String, required: false, default: "#000" },
+  opacity: { type: Number, required: false, default: 0.5 },
+  outline: { type: Boolean, required: false, default: false },
+  outlineColor: { type: String, required: false, default: "#fff" },
+  outlineWidth: { type: Number, required: false, default: 1 },
+  beforeId: { type: String, required: false }
+});
+const id = props.layerId ?? `movk-mask-${useId()}`;
+const maskSource = computed(() => ({ type: "geojson", data: maskPolygon(props.data) }));
+const outlineSource = computed(() => ({ type: "geojson", data: props.data }));
+const fillPaint = computed(() => ({ "fill-color": props.color, "fill-opacity": props.opacity }));
+const linePaint = computed(() => ({ "line-color": props.outlineColor, "line-width": props.outlineWidth }));
+</script>
+
+<template>
+  <MaplibreLayer :layer-id="`${id}-fill`" type="fill" :source="maskSource" :paint="fillPaint" :before-id="beforeId" />
+  <MaplibreLayer
+    v-if="outline"
+    :layer-id="`${id}-line`"
+    type="line"
+    :source="outlineSource"
+    :paint="linePaint"
+    :before-id="beforeId"
+  />
+</template>

package/dist/runtime/components/layers/MaskLayer.vue.d.ts

@@ -0,0 +1,44 @@
+import { type MaskInput } from '../../utils/mask';
+/** 区域遮罩：压暗目标区域以外的范围，突出显示行政区等面状区域。 */
+type __VLS_Props = {
+    /** 目标区域：Polygon / MultiPolygon / Feature / FeatureCollection；区域自身的孔洞（飞地）不参与遮罩 */
+    data: MaskInput;
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
+    layerId?: string;
+    /**
+     * 遮罩颜色
+     * @defaultValue '#000'
+     */
+    color?: string;
+    /**
+     * 遮罩不透明度
+     * @defaultValue 0.5
+     */
+    opacity?: number;
+    /**
+     * 是否描绘目标区域边界
+     * @defaultValue false
+     */
+    outline?: boolean;
+    /**
+     * 边界颜色
+     * @defaultValue '#fff'
+     */
+    outlineColor?: string;
+    /**
+     * 边界宽度（像素）
+     * @defaultValue 1
+     */
+    outlineWidth?: number;
+    /** 插入到该图层之前 */
+    beforeId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: string;
+    opacity: number;
+    outlineColor: string;
+    outlineWidth: number;
+    outline: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/layers/RasterLayer.d.vue.ts

@@ -1,8 +1,10 @@
 type __VLS_Props = {
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
-    /** URL 模板瓦片地址（{z}/{x}/{y} 占位） */
-    tiles: string[];
+    /** URL 模板瓦片地址（{z}/{x}/{y} 占位）；与 `url` 至少提供一个 */
+    tiles?: string[];
+    /** TileJSON 地址或协议地址（如 `cog://https://.../image.tif`）；与 `tiles` 至少提供一个 */
+    url?: string;
     /**
      * 瓦片尺寸
      * @defaultValue 256

package/dist/runtime/components/layers/RasterLayer.vue

@@ -3,9 +3,11 @@ import { computed, useId } from "vue";
 import { omitUndefined } from "@movk/core";
 import MaplibreSource from "../Source.vue";
 import MaplibreLayer from "../Layer.vue";
+import { logger } from "../../utils/logger";
 const props = defineProps({
   layerId: { type: String, required: false },
-  tiles: { type: Array, required: true },
+  tiles: { type: Array, required: false },
+  url: { type: String, required: false },
   tileSize: { type: Number, required: false, default: 256 },
   scheme: { type: String, required: false },
   minzoom: { type: Number, required: false },
@@ -15,9 +17,14 @@ const props = defineProps({
   beforeId: { type: String, required: false }
 });
 const id = props.layerId ?? `movk-raster-${useId()}`;
+const hasSource = computed(() => !!props.url || !!props.tiles?.length);
+if (!hasSource.value) {
+  logger.warn('MaplibreRasterLayer: provide either "url" or "tiles".');
+}
 const source = computed(() => omitUndefined({
   type: "raster",
   tiles: props.tiles,
+  url: props.url,
   tileSize: props.tileSize,
   scheme: props.scheme,
   minzoom: props.minzoom,
@@ -28,7 +35,7 @@ const paint = computed(() => ({ "raster-opacity": props.opacity }));
 </script>
 
 <template>
-  <MaplibreSource :source-id="id" :source="source">
+  <MaplibreSource v-if="hasSource" :source-id="id" :source="source">
     <MaplibreLayer :layer-id="id" type="raster" :source="id" :paint="paint" :before-id="beforeId" />
   </MaplibreSource>
 </template>

package/dist/runtime/components/layers/RasterLayer.vue.d.ts

@@ -1,8 +1,10 @@
 type __VLS_Props = {
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
-    /** URL 模板瓦片地址（{z}/{x}/{y} 占位） */
-    tiles: string[];
+    /** URL 模板瓦片地址（{z}/{x}/{y} 占位）；与 `url` 至少提供一个 */
+    tiles?: string[];
+    /** TileJSON 地址或协议地址（如 `cog://https://.../image.tif`）；与 `tiles` 至少提供一个 */
+    url?: string;
     /**
      * 瓦片尺寸
      * @defaultValue 256

package/dist/runtime/components/layers/VideoLayer.d.vue.ts

@@ -1,6 +1,6 @@
 import type { VideoSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
 type __VLS_Props = {
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 视频地址列表（多格式回退） */
     urls: string[];

package/dist/runtime/components/layers/VideoLayer.vue.d.ts

@@ -1,6 +1,6 @@
 import type { VideoSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
 type __VLS_Props = {
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 视频地址列表（多格式回退） */
     urls: string[];

package/dist/runtime/composables/useFeatureState.js

@@ -1,5 +1,6 @@
 import { onMounted, onUnmounted, shallowRef } from "vue";
 import { useContextResolver } from "../domains/map/resolve.js";
+import { onLayerDataChange } from "../utils/events.js";
 import { logger } from "../utils/logger.js";
 export function useFeatureState(layerId, options = {}) {
   const { hover = true, select = true, cursor = true } = options;
@@ -7,6 +8,8 @@ export function useFeatureState(layerId, options = {}) {
   const hovered = shallowRef();
   const selected = shallowRef();
   let boundMap;
+  let anchor;
+  let stopDataChange;
   function clearState(map, feature, key) {
     try {
       map.removeFeatureState(feature, key);
@@ -17,22 +20,27 @@ export function useFeatureState(layerId, options = {}) {
     const canvas = map.getCanvas();
     if (canvas) canvas.style.cursor = value;
   }
+  function setHovered(map, feature) {
+    const prev = hovered.value;
+    if (prev && prev.id !== feature?.id) clearState(map, prev, "hover");
+    if (feature && prev?.id !== feature.id) map.setFeatureState(feature, { hover: true });
+    hovered.value = feature;
+  }
   function onMove(event) {
     const map = boundMap;
     const feature = event.features?.[0];
     if (!map || !feature || feature.id === void 0) return;
     if (cursor) setCursor(map, "pointer");
+    anchor = event.lngLat;
     if (hovered.value?.id === feature.id) return;
-    if (hovered.value) clearState(map, hovered.value, "hover");
-    map.setFeatureState(feature, { hover: true });
-    hovered.value = feature;
+    setHovered(map, feature);
   }
   function onLeave() {
     const map = boundMap;
     if (!map) return;
     if (cursor) setCursor(map, "");
-    if (hovered.value) clearState(map, hovered.value, "hover");
-    hovered.value = void 0;
+    anchor = void 0;
+    setHovered(map, void 0);
   }
   function onClick(event) {
     const map = boundMap;
@@ -46,6 +54,17 @@ export function useFeatureState(layerId, options = {}) {
     if (boundMap && selected.value) clearState(boundMap, selected.value, "selected");
     selected.value = void 0;
   }
+  function revalidate(map) {
+    if (hovered.value && anchor) {
+      const [feature] = map.queryRenderedFeatures(map.project(anchor), { layers: [layerId] });
+      setHovered(map, feature?.id === void 0 ? void 0 : feature);
+    }
+    const { source, sourceLayer, id } = selected.value ?? {};
+    if (source && id !== void 0) {
+      const exists = map.querySourceFeatures(source, { sourceLayer, filter: ["==", ["id"], id] }).length > 0;
+      if (!exists) clearSelection();
+    }
+  }
   onMounted(async () => {
     const ctx = resolve();
     if (!ctx) {
@@ -59,6 +78,7 @@ export function useFeatureState(layerId, options = {}) {
       map.on("mouseleave", layerId, onLeave);
     }
     if (select) map.on("click", layerId, onClick);
+    stopDataChange = onLayerDataChange(map, layerId, () => revalidate(map));
   });
   onUnmounted(() => {
     const map = boundMap;
@@ -69,6 +89,8 @@ export function useFeatureState(layerId, options = {}) {
       onLeave();
     }
     if (select) map.off("click", layerId, onClick);
+    stopDataChange?.();
+    stopDataChange = void 0;
     clearSelection();
     boundMap = void 0;
   });

package/dist/runtime/composables/useFrameIcon.d.ts

@@ -1,12 +1,13 @@
+import type { MaybeRefOrGetter } from 'vue';
 export interface UseFrameIconOptions {
     /** 注册到样式的图片名(symbol 图层 icon-image 引用) */
     imageName: string;
-    /** 纹理边长(像素) */
-    size: number;
+    /** 纹理边长(像素)；变化时重建 StyleImage */
+    size: MaybeRefOrGetter<number>;
     /** 当前帧序列(响应式取值) */
     frames: () => ImageData[];
     /** 固定帧率,durations 缺省时生效 */
-    fps?: number;
+    fps?: MaybeRefOrGetter<number | undefined>;
     /** 每帧时长 ms(响应式取值),优先于 fps */
     durations?: () => number[] | undefined;
 }

package/dist/runtime/composables/useFrameIcon.js

@@ -1,16 +1,19 @@
-import { onUnmounted } from "vue";
+import { onUnmounted, toValue, watch } from "vue";
 import { useMap } from "./useMap.js";
 import { createFrameStyleImage } from "../utils/frame-icon.js";
 export function useFrameIcon(options) {
   const ctx = useMap();
   const { imageName } = options;
-  const image = createFrameStyleImage({
-    size: options.size,
-    frames: options.frames,
-    fps: options.fps,
-    durations: options.durations,
-    getMap: () => ctx.map.value
-  });
+  function create() {
+    return createFrameStyleImage({
+      size: toValue(options.size),
+      frames: options.frames,
+      fps: () => toValue(options.fps) ?? 12,
+      durations: options.durations,
+      getMap: () => ctx.map.value
+    });
+  }
+  let image = create();
   function ensureImage(map) {
     if (!map.isStyleLoaded() || map.hasImage(imageName)) return;
     map.addImage(imageName, image);
@@ -26,6 +29,13 @@ export function useFrameIcon(options) {
     map.off("styleimagemissing", onMissing);
     map.on("styleimagemissing", onMissing);
   });
+  watch(() => toValue(options.size), () => {
+    image = create();
+    const map = ctx.map.value;
+    if (!map?.hasImage(imageName)) return;
+    map.removeImage(imageName);
+    map.addImage(imageName, image);
+  });
   onUnmounted(() => {
     stopReady();
     const map = ctx.map.value;

package/dist/runtime/composables/useLayerTree.d.ts

@@ -0,0 +1,11 @@
+import type { ComputedRef } from 'vue';
+import type { LayerTreeItem } from '../types';
+export interface UseLayerTreeOptions {
+    /** 目标地图 id；在 MaplibreMap 子树外使用时必填 */
+    mapId?: string;
+}
+/**
+ * 地图的图层树：按声明顺序列出带 title 的 MaplibreLayerGroup，
+ * 读写显隐与透明度即写回各组的 v-model，适合在侧栏等处自绘图层面板。
+ */
+export declare function useLayerTree(options?: UseLayerTreeOptions): ComputedRef<LayerTreeItem[]>;

package/dist/runtime/composables/useLayerTree.js

@@ -0,0 +1,12 @@
+import { computed } from "vue";
+import { getLayerTree } from "../domains/map/layer-tree.js";
+import { useContextResolver } from "../domains/map/resolve.js";
+export function useLayerTree(options = {}) {
+  const resolve = useContextResolver(options.mapId);
+  return computed(() => {
+    const context = resolve();
+    if (!context) return [];
+    const tree = getLayerTree(context);
+    return tree.keys().map((id) => tree.get(id));
+  });
+}

package/dist/runtime/composables/useMapAnimation.d.ts

@@ -16,6 +16,8 @@ export interface UseMapAnimationReturn {
 }
 /**
  * 地图帧动画原语：基于 useRafFn（组件卸载自动停止），
- * 仅在地图存在且样式就绪时调用 frame，供动效组件与帧驱动图片复用。
+ * 仅在首次 load 之后且样式已解析时调用 frame，供动效组件与帧驱动图片复用。
+ * 首次 load 前逐帧改样式会使 style 持续 dirty，推迟 load 及所有 whenLoaded 调用方；
+ * 之后不用 isStyleLoaded：它要求瓦片与源全部加载完毕，拖动/缩放或每帧 setData 时会整段跳帧。
  */
-export declare function useMapAnimation(frame: (map: MaplibreMap, elapsedMs: number) => void, options?: UseMapAnimationOptions): UseMapAnimationReturn;
+export declare function useMapAnimation(frame: (map: MaplibreMap, elapsedMs: number, deltaMs: number) => void, options?: UseMapAnimationOptions): UseMapAnimationReturn;

package/dist/runtime/composables/useMapAnimation.js

@@ -3,11 +3,12 @@ import { useContextResolver } from "../domains/map/resolve.js";
 export function useMapAnimation(frame, options = {}) {
   const resolve = useContextResolver(options.mapId);
   let start;
-  const { pause, resume, isActive } = useRafFn(({ timestamp }) => {
-    const map = resolve()?.map.value;
-    if (!map || !map.isStyleLoaded()) return;
+  const { pause, resume, isActive } = useRafFn(({ timestamp, delta }) => {
+    const context = resolve();
+    const map = context?.map.value;
+    if (!map || !context.isLoaded.value || !context.isStyleReady.value) return;
     start ??= timestamp;
-    frame(map, timestamp - start);
+    frame(map, timestamp - start, delta);
   }, { immediate: options.immediate ?? true });
   return { pause, resume, isActive };
 }

package/dist/runtime/composables/useMapExport.js

@@ -1,3 +1,4 @@
+import { triggerDownload } from "@movk/core";
 import { useContextResolver } from "../domains/map/resolve.js";
 import { logger } from "../utils/logger.js";
 export function useMapExport(options = {}) {
@@ -21,11 +22,7 @@ export function useMapExport(options = {}) {
   }
   async function download(opts = {}) {
     try {
-      const dataUrl = await exportImage(opts);
-      const link = document.createElement("a");
-      link.href = dataUrl;
-      link.download = opts.fileName ?? "map.png";
-      link.click();
+      triggerDownload(await exportImage(opts), opts.fileName ?? "map.png");
     } catch (error) {
       logger.warn("Map export failed:", error);
       throw error;

package/dist/runtime/composables/useMapSync.d.ts

@@ -0,0 +1,16 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type { MaplibreContext } from '../types';
+export interface UseMapSyncOptions {
+    /**
+     * 是否启用联动；置 false 解绑，恢复时以首图相机重新对齐
+     * @defaultValue true
+     */
+    enabled?: MaybeRefOrGetter<boolean>;
+}
+/** 地图引用：map id（经注册表解析，需 MaplibreMap 设置 map-id）或地图上下文 */
+export type MapSyncTarget = string | MaplibreContext;
+/**
+ * 多地图相机联动：任一地图移动时把 center/zoom/bearing/pitch 同步到其余地图。
+ * 全部地图实例就绪后生效，绑定时以首图相机对齐其余地图；随调用方作用域销毁自动解绑。
+ */
+export declare function useMapSync(maps: MaybeRefOrGetter<MapSyncTarget[]>, options?: UseMapSyncOptions): void;

package/dist/runtime/composables/useMapSync.js

@@ -0,0 +1,42 @@
+import { toValue, watch } from "vue";
+import { getMapContext } from "../domains/map/registry.js";
+function resolveInstance(target) {
+  const context = typeof target === "string" ? getMapContext(target) : target;
+  return context?.map.value;
+}
+function copyCamera(from, to) {
+  to.jumpTo({
+    center: from.getCenter(),
+    zoom: from.getZoom(),
+    bearing: from.getBearing(),
+    pitch: from.getPitch()
+  });
+}
+export function useMapSync(maps, options = {}) {
+  watch(
+    () => {
+      if (toValue(options.enabled) === false) return [];
+      const instances = toValue(maps).map(resolveInstance);
+      return instances.every(Boolean) ? instances : [];
+    },
+    (instances, _, onCleanup) => {
+      if (instances.length < 2) return;
+      let syncing = false;
+      const listeners = instances.map((source) => {
+        const listener = () => {
+          if (syncing) return;
+          syncing = true;
+          for (const target of instances) {
+            if (target !== source) copyCamera(source, target);
+          }
+          syncing = false;
+        };
+        source.on("move", listener);
+        return listener;
+      });
+      listeners[0]();
+      onCleanup(() => instances.forEach((map, i) => map.off("move", listeners[i])));
+    },
+    { immediate: true }
+  );
+}

package/dist/runtime/composables/useMaplibreCamera.d.ts

@@ -11,5 +11,5 @@ export interface UseMaplibreCameraReturn {
     /** 缩放到目标范围；target 支持包围盒或任意 GeoJSON（自动求包围盒） */
     fitBounds: (target: LngLatBoundsLike | GeoJSON, options?: FitBoundsOptions) => Promise<void>;
 }
-/** 相机操作助手；所有方法等待地图加载完成后执行。 */
+/** 相机操作助手；所有方法等待地图实例创建后执行。 */
 export declare function useMaplibreCamera(options?: UseMaplibreCameraOptions): UseMaplibreCameraReturn;

package/dist/runtime/composables/useMaplibreCamera.js

@@ -12,7 +12,7 @@ export function useMaplibreCamera(options = {}) {
       logger.warn("useMaplibreCamera: no map context found; pass options.mapId or call inside <MaplibreMap>.");
       return;
     }
-    action(await ctx.whenLoaded());
+    action(await ctx.whenAttached());
   }
   return {
     flyTo: (options2) => withMap((map) => map.flyTo(options2)),

package/dist/runtime/composables/useMaplibreImage.d.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue';
+import type { MaybeRefOrGetter, Ref } from 'vue';
 export interface UseMaplibreImageOptions {
     /** 目标地图 id；在 MaplibreMap 子树外使用时必填 */
     mapId?: string;
@@ -12,8 +12,8 @@ export interface UseMaplibreImageOptions {
 }
 /**
  * 注册 symbol 图层可用的命名图片。
- * setStyle 清空样式图片后经 onReady 自动补回；卸载时移除。
+ * setStyle 清空样式图片后经 onReady 自动补回；url 变化时加载新图并替换同名图片；卸载时移除。
  */
-export declare function useMaplibreImage(name: string, url: string, options?: UseMaplibreImageOptions): {
+export declare function useMaplibreImage(name: string, url: MaybeRefOrGetter<string>, options?: UseMaplibreImageOptions): {
     loaded: Ref<boolean>;
 };

package/dist/runtime/composables/useMaplibreImage.js

@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref, toValue, watch } from "vue";
 import { useContextResolver } from "../domains/map/resolve.js";
 import { logger } from "../utils/logger.js";
 export function useMaplibreImage(name, url, options = {}) {
@@ -7,6 +7,25 @@ export function useMaplibreImage(name, url, options = {}) {
   const loaded = ref(false);
   let ctx;
   let stopReady;
+  let loadToken = 0;
+  function load(map, replace) {
+    const token = ++loadToken;
+    const src = toValue(url);
+    map.loadImage(src).then(({ data }) => {
+      if (token !== loadToken) return;
+      if (map.hasImage(name)) {
+        if (!replace) {
+          loaded.value = true;
+          return;
+        }
+        map.removeImage(name);
+      }
+      map.addImage(name, data, imageOptions);
+      loaded.value = true;
+    }).catch((error) => {
+      if (token === loadToken) logger.warn(`Failed to load image "${name}" from "${src}":`, error);
+    });
+  }
   onMounted(() => {
     ctx = resolve();
     if (!ctx) {
@@ -18,13 +37,15 @@ export function useMaplibreImage(name, url, options = {}) {
         loaded.value = true;
         return;
       }
-      map.loadImage(url).then(({ data }) => {
-        if (!map.hasImage(name)) map.addImage(name, data, imageOptions);
-        loaded.value = true;
-      }).catch((error) => logger.warn(`Failed to load image "${name}":`, error));
+      load(map, false);
     });
   });
+  watch(() => toValue(url), () => {
+    const map = ctx?.map.value;
+    if (map?.isStyleLoaded()) load(map, true);
+  });
   onUnmounted(() => {
+    loadToken++;
     stopReady?.();
     const map = ctx?.map.value;
     if (map?.hasImage(name)) map.removeImage(name);

package/dist/runtime/domains/map/config.js

@@ -1,6 +1,5 @@
-const STORE_KEY = Symbol.for("movk-maplibre:config");
-const globalScope = globalThis;
-const store = globalScope[STORE_KEY] ??= { config: {} };
+import { defineGlobalSingleton } from "@movk/core";
+const store = defineGlobalSingleton("movk-maplibre:config", () => ({ config: {} }));
 export function setMaplibreConfig(value) {
   store.config = { ...store.config, ...value };
 }

package/dist/runtime/domains/map/context.js

@@ -3,18 +3,30 @@ export const MaplibreContextKey = Symbol("movk-maplibre:context");
 export function createMaplibreContext(id) {
   const map = shallowRef();
   const isLoaded = ref(false);
+  const isStyleReady = ref(false);
+  const styleLayerIds = shallowRef([]);
   const readyCallbacks = /* @__PURE__ */ new Set();
+  let resolveAttached;
+  const attachedPromise = new Promise((resolve) => {
+    resolveAttached = resolve;
+  });
   let resolveLoaded;
   const loadedPromise = new Promise((resolve) => {
     resolveLoaded = resolve;
   });
   function attach(instance) {
     map.value = instance;
+    resolveAttached(instance);
     instance.on("load", () => {
       isLoaded.value = true;
       resolveLoaded(instance);
     });
+    instance.on("styledataloading", () => {
+      isStyleReady.value = false;
+    });
     instance.on("style.load", () => {
+      isStyleReady.value = true;
+      styleLayerIds.value = instance.getLayersOrder();
       for (const callback of readyCallbacks) callback(instance);
     });
   }
@@ -22,6 +34,9 @@ export function createMaplibreContext(id) {
     id,
     map,
     isLoaded,
+    isStyleReady,
+    styleLayerIds,
+    whenAttached: () => attachedPromise,
     whenLoaded: () => loadedPromise,
     onReady(callback) {
       readyCallbacks.add(callback);

package/dist/runtime/domains/map/control.d.ts

@@ -1,4 +1,4 @@
 import type { MaybeRefOrGetter } from 'vue';
 import type { ControlPosition, IControl } from 'maplibre-gl';
-/** 控件组件共享逻辑：地图就绪后 addControl；position/options 变化时移除并按新配置重建；卸载时 removeControl。 */
+/** 控件组件共享逻辑：地图实例创建后 addControl；position/options 变化时移除并按新配置重建；卸载时 removeControl。 */
 export declare function useControl(create: () => IControl, position?: MaybeRefOrGetter<ControlPosition | undefined>, watchSource?: () => unknown): void;

package/dist/runtime/domains/map/control.js

@@ -11,7 +11,7 @@ export function useControl(create, position, watchSource) {
     map.addControl(control, toValue(position));
   }
   onMounted(async () => {
-    await ctx.whenLoaded();
+    await ctx.whenAttached();
     rebuild();
   });
   watch(

package/dist/runtime/domains/map/draw-modes.d.ts

@@ -0,0 +1,9 @@
+import type { DrawMode, DrawModeEntry, DrawModeName, DrawThemeOptions } from '../../types';
+/** 全部内置模式名，即控件缺省的模式集合 */
+export declare const DRAW_MODE_NAMES: readonly DrawModeName[];
+export declare function isDrawModeName(entry: DrawModeEntry): entry is DrawModeName;
+/**
+ * 解析模式项为 terra-draw 实例：模式名按主题构造内置模式，实例原样透传。
+ * 每次调用返回新实例，模式实例不可在多个 TerraDraw 间共享。
+ */
+export declare function resolveDrawModes(entries: readonly DrawModeEntry[], theme?: DrawThemeOptions): DrawMode[];