@movk/maplibre 1.0.0 → 1.2.0

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

@@ -26,21 +26,24 @@ const frames = ref([]);
 const durations = ref([]);
 useFrameIcon({
   imageName,
-  size: props.size,
+  size: () => props.size,
   frames: () => frames.value,
-  fps: props.fps,
+  fps: () => props.fps,
   durations: () => durations.value
 });
-async function load(url) {
+let loadToken = 0;
+async function load() {
+  const token = ++loadToken;
   frames.value = [];
   durations.value = [];
-  const decoded = await decodeAnimatedImage(url, props.size);
+  const decoded = await decodeAnimatedImage(props.image, props.size);
+  if (token !== loadToken) return;
   frames.value = decoded.frames;
   durations.value = decoded.durations;
   ctx.map.value?.triggerRepaint();
 }
-onMounted(() => load(props.image));
-watch(() => props.image, (url) => load(url));
+onMounted(load);
+watch([() => props.image, () => props.size], load);
 </script>
 
 <template>

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

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

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

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 点要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 点要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -1,7 +1,7 @@
 import type { BuildingSourceOptions } from '../../utils/building';
 /** 流动建筑：渐变着色 + 高亮带沿建筑高度循环流动。 */
 type __VLS_Props = BuildingSourceOptions & {
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 基色

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

@@ -1,7 +1,7 @@
 import type { BuildingSourceOptions } from '../../utils/building';
 /** 流动建筑：渐变着色 + 高亮带沿建筑高度循环流动。 */
 type __VLS_Props = BuildingSourceOptions & {
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 基色

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

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 点要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 点要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -1,7 +1,7 @@
 import type { BuildingSourceOptions } from '../../utils/building';
 /** 渐变建筑：按高度插值着色的 3D 建筑。 */
 type __VLS_Props = BuildingSourceOptions & {
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 高度-颜色断点 */
     stops?: [number, string][];

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

@@ -1,7 +1,7 @@
 import type { BuildingSourceOptions } from '../../utils/building';
 /** 渐变建筑：按高度插值着色的 3D 建筑。 */
 type __VLS_Props = BuildingSourceOptions & {
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /** 高度-颜色断点 */
     stops?: [number, string][];

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

@@ -9,7 +9,7 @@ export interface MigrationRoute {
 type __VLS_Props = {
     /** 起讫点对列表 */
     data: MigrationRoute[];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -9,7 +9,7 @@ export interface MigrationRoute {
 type __VLS_Props = {
     /** 起讫点对列表 */
     data: MigrationRoute[];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 点要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 点要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

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

package/dist/runtime/components/effects/SpriteImage.vue

@@ -3,6 +3,7 @@ import { computed, ref, useId, watch } from "vue";
 import { spriteFrame, spriteFrameRect } from "../../utils/sprite";
 import { useMap } from "../../composables/useMap";
 import { useFrameIcon } from "../../composables/useFrameIcon";
+import { logger } from "../../utils/logger";
 import MaplibreSource from "../Source.vue";
 import MaplibreLayer from "../Layer.vue";
 const props = defineProps({
@@ -28,36 +29,51 @@ const layout = computed(() => ({
   "icon-ignore-placement": true
 }));
 const sliced = ref([]);
-useFrameIcon({ imageName, size: props.size, frames: () => sliced.value, fps: props.fps });
-function prepareFrames() {
+let sheet;
+let loadToken = 0;
+useFrameIcon({ imageName, size: () => props.size, frames: () => sliced.value, fps: () => props.fps });
+function sliceFrames() {
+  if (!sheet) return;
+  const columns = props.columns ?? props.frames;
+  const rows = props.rows ?? 1;
+  const grid = {
+    columns,
+    rows,
+    frameWidth: props.frameWidth ?? sheet.width / columns,
+    frameHeight: props.frameHeight ?? sheet.height / rows,
+    frames: props.frames
+  };
+  const next = [];
+  for (let i = 0; i < props.frames; i++) {
+    const frame = spriteFrame(sheet, spriteFrameRect(i, grid), props.size);
+    if (frame) next.push(frame);
+  }
+  sliced.value = next;
+  ctx.map.value?.triggerRepaint();
+}
+function loadSheet(url) {
+  sheet = void 0;
+  sliced.value = [];
   if (typeof Image === "undefined") return;
+  const token = ++loadToken;
   const img = new Image();
   img.crossOrigin = "anonymous";
   img.onload = () => {
-    const columns = props.columns ?? props.frames;
-    const rows = props.rows ?? 1;
-    const grid = {
-      columns,
-      rows,
-      frameWidth: props.frameWidth ?? img.width / columns,
-      frameHeight: props.frameHeight ?? img.height / rows,
-      frames: props.frames
-    };
-    const next = [];
-    for (let i = 0; i < props.frames; i++) {
-      const frame = spriteFrame(img, spriteFrameRect(i, grid), props.size);
-      if (frame) next.push(frame);
-    }
-    sliced.value = next;
-    ctx.map.value?.triggerRepaint();
+    if (token !== loadToken) return;
+    sheet = img;
+    sliceFrames();
   };
-  img.src = props.image;
+  img.onerror = () => {
+    if (token === loadToken) logger.warn(`SpriteImage: failed to load sprite sheet "${url}".`);
+  };
+  img.src = url;
 }
-prepareFrames();
-watch(() => props.image, () => {
-  sliced.value = [];
-  prepareFrames();
-});
+loadSheet(props.image);
+watch(() => props.image, loadSheet);
+watch(
+  [() => props.frames, () => props.columns, () => props.rows, () => props.frameWidth, () => props.frameHeight, () => props.size],
+  sliceFrames
+);
 </script>
 
 <template>

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

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

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

@@ -3,7 +3,7 @@ import type { BuildingSourceOptions } from '../../utils/building';
 type __VLS_Props = BuildingSourceOptions & {
     /** 贴图地址 */
     url: string;
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 整体透明度

package/dist/runtime/components/effects/TextureBuilding.vue

@@ -16,7 +16,7 @@ const props = defineProps({
 });
 const id = props.layerId ?? `movk-texture-building-${useId()}`;
 const imageName = `${id}-texture`;
-const { loaded } = useMaplibreImage(imageName, props.url);
+const { loaded } = useMaplibreImage(imageName, () => props.url);
 const paint = computed(() => ({
   "fill-extrusion-pattern": imageName,
   ...buildingExtrusionPaint({ minzoom: props.minzoom, heightProperty: props.heightProperty, baseProperty: props.baseProperty }),

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

@@ -3,7 +3,7 @@ import type { BuildingSourceOptions } from '../../utils/building';
 type __VLS_Props = BuildingSourceOptions & {
     /** 贴图地址 */
     url: string;
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 整体透明度

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

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 线要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 线要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 点要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 点要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id 前缀；省略时自动生成 */
+    /** 图层 id 前缀；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 主色

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

@@ -1,7 +1,7 @@
 import type { BuildingSourceOptions } from '../../utils/building';
 /** 窗户建筑：程序生成窗户点阵贴图 fill-extrusion-pattern。 */
 type __VLS_Props = BuildingSourceOptions & {
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 窗户行数

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

@@ -1,7 +1,7 @@
 import type { BuildingSourceOptions } from '../../utils/building';
 /** 窗户建筑：程序生成窗户点阵贴图 fill-extrusion-pattern。 */
 type __VLS_Props = BuildingSourceOptions & {
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 窗户行数

package/dist/runtime/components/environment/Projection.d.vue.ts

@@ -0,0 +1,28 @@
+import type { ProjectionDefinitionSpecification, ProjectionSpecification } from '@maplibre/maplibre-gl-style-spec';
+type __VLS_Props = {
+    /**
+     * 投影类型：'mercator' / 'globe' / 'vertical-perspective'，或按 zoom 插值的表达式（如 `['interpolate', ['linear'], ['zoom'], 10, 'vertical-perspective', 12, 'mercator']`）
+     * @defaultValue 'globe'
+     */
+    type?: ProjectionDefinitionSpecification;
+    /**
+     * 完整投影规格，优先级高于 type
+     * @see https://maplibre.org/maplibre-style-spec/projection/
+     */
+    options?: ProjectionSpecification;
+};
+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<{}>, {
+    type: ProjectionDefinitionSpecification;
+}, {}, {}, {}, 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/environment/Projection.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { onUnmounted } from "vue";
+import { useMap } from "../../composables/useMap";
+import { useStyleEffect } from "../../domains/map/style-effect";
+import { isDeepEqual } from "@movk/core";
+const props = defineProps({
+  type: { type: [String, Array, Object], required: false, default: "globe" },
+  options: { type: Object, required: false }
+});
+const ctx = useMap();
+let baseline;
+const stopCapture = ctx.onReady((map) => {
+  baseline = map.getProjection();
+});
+useStyleEffect(
+  () => props.options ?? { type: props.type },
+  (map, value) => {
+    if (!isDeepEqual(map.getProjection(), value)) map.setProjection(value);
+  },
+  (map) => map.setProjection(baseline ?? { type: "mercator" })
+);
+onUnmounted(stopCapture);
+</script>
+
+<template>
+  <slot />
+</template>

package/dist/runtime/components/environment/Projection.vue.d.ts

@@ -0,0 +1,28 @@
+import type { ProjectionDefinitionSpecification, ProjectionSpecification } from '@maplibre/maplibre-gl-style-spec';
+type __VLS_Props = {
+    /**
+     * 投影类型：'mercator' / 'globe' / 'vertical-perspective'，或按 zoom 插值的表达式（如 `['interpolate', ['linear'], ['zoom'], 10, 'vertical-perspective', 12, 'mercator']`）
+     * @defaultValue 'globe'
+     */
+    type?: ProjectionDefinitionSpecification;
+    /**
+     * 完整投影规格，优先级高于 type
+     * @see https://maplibre.org/maplibre-style-spec/projection/
+     */
+    options?: ProjectionSpecification;
+};
+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<{}>, {
+    type: ProjectionDefinitionSpecification;
+}, {}, {}, {}, 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/environment/Temperature.d.vue.ts

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 点要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 权重取值的要素属性

package/dist/runtime/components/environment/Temperature.vue.d.ts

@@ -3,7 +3,7 @@ import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spe
 type __VLS_Props = {
     /** 点要素数据（GeoJSON 或其 URL） */
     data: GeoJSONSourceSpecification['data'];
-    /** 图层 id；省略时自动生成 */
+    /** 图层 id；省略时自动生成，变更需配合 `:key` 重建 */
     layerId?: string;
     /**
      * 权重取值的要素属性

package/dist/runtime/components/environment/Terrain.d.vue.ts

@@ -6,7 +6,7 @@ type __VLS_Props = {
      */
     exaggeration?: number;
     /**
-     * DEM 数据源，如 Terrarium / Mapbox 编码的 raster-dem 瓦片
+     * DEM 数据源，如 Terrarium / Mapbox 编码的 raster-dem 瓦片；url / tiles 变化时原地更新
      * @see https://maplibre.org/maplibre-style-spec/sources/#raster-dem
      */
     source: RasterDEMSourceSpecification;

package/dist/runtime/components/environment/Terrain.vue

@@ -2,6 +2,7 @@
 import { onUnmounted, watch } from "vue";
 import { useMap } from "../../composables/useMap";
 import { logger } from "../../utils/logger";
+import { updateSource } from "../../utils/source";
 const props = defineProps({
   exaggeration: { type: Number, required: false, default: 1 },
   source: { type: Object, required: true },
@@ -25,6 +26,10 @@ watch(() => props.exaggeration, (value) => {
     map.setTerrain({ source: props.sourceId, exaggeration: value });
   }
 });
+watch(() => props.source, (next, prev) => {
+  const source = ctx.map.value?.getSource(props.sourceId);
+  if (source && next) updateSource(source, next, prev);
+}, { deep: true });
 onUnmounted(() => {
   stopReady();
   const map = ctx.map.value;

package/dist/runtime/components/environment/Terrain.vue.d.ts

@@ -6,7 +6,7 @@ type __VLS_Props = {
      */
     exaggeration?: number;
     /**
-     * DEM 数据源，如 Terrarium / Mapbox 编码的 raster-dem 瓦片
+     * DEM 数据源，如 Terrarium / Mapbox 编码的 raster-dem 瓦片；url / tiles 变化时原地更新
      * @see https://maplibre.org/maplibre-style-spec/sources/#raster-dem
      */
     source: RasterDEMSourceSpecification;

package/dist/runtime/components/extensions/DrawControl.vue

@@ -2,18 +2,20 @@
 import { onMounted, onUnmounted, provide, watch } from "vue";
 import { TerraDraw } from "terra-draw";
 import { TerraDrawMapLibreGLAdapter } from "terra-draw-maplibre-gl-adapter";
+import { isDeepEqual } from "@movk/core";
 import { useMap } from "../../composables/useMap";
 import { DrawKey } from "../../domains/map/draw";
 import { addStoreFeatures, committedFeatures, createDrawContext, toStoreFeatures } from "../../domains/map/draw-context";
-import { registerDraw, unregisterDraw } from "../../domains/map/draw-registry";
+import { registerDraw } from "../../domains/map/draw-registry";
 import { createDrawToolbar } from "../../domains/map/draw-toolbar";
+import { DRAW_MODE_NAMES, isDrawModeName, resolveDrawModes } from "../../domains/map/draw-modes";
+import { drawThemeStyles } from "../../domains/map/draw-theme";
 import { getMapContext } from "../../domains/map/registry";
-import { movkDrawModes } from "../../draw-modes";
 const props = defineProps({
   position: { type: String, required: false },
   modes: { type: Array, required: false },
   theme: { type: Object, required: false },
-  controls: { type: [Boolean, Array], required: false, default: true },
+  toolbar: { type: Boolean, required: false, default: true },
   renderBelowLayerId: { type: String, required: false }
 });
 const emit = defineEmits(["finish", "delete", "select", "deselect", "modechange"]);
@@ -28,7 +30,7 @@ function applyFeatures(list) {
 }
 function applyMode(value) {
   mode.value = value;
-  toolbar?.setActive(value);
+  toolbarControl?.setActive(value);
   emit("modechange", value);
 }
 const { context: drawContext, attach } = createDrawContext(ctx.id, {
@@ -37,11 +39,10 @@ const { context: drawContext, attach } = createDrawContext(ctx.id, {
 });
 const draw = drawContext.draw;
 provide(DrawKey, drawContext);
-const addressable = getMapContext(ctx.id) === ctx;
-if (addressable) registerDraw(drawContext);
+const disposeDraw = getMapContext(ctx.id) === ctx ? registerDraw(drawContext) : void 0;
 let instance;
 let boundMap;
-let toolbar;
+let toolbarControl;
 let selectedId;
 function syncFeatures() {
   if (instance && !applying) applyFeatures(committedFeatures(instance));
@@ -94,12 +95,10 @@ function onStyleLoad() {
   applying = false;
   instance.setMode(current);
 }
-const modes = props.modes ?? movkDrawModes({ theme: props.theme });
+const entries = props.modes ?? DRAW_MODE_NAMES;
+const modes = resolveDrawModes(entries, props.theme);
 const modeNames = modes.map((m) => m.mode);
-function toolbarModes() {
-  if (props.controls === false) return [];
-  return props.controls === true ? modeNames : props.controls.filter((name) => modeNames.includes(name));
-}
+const themedNames = entries.filter(isDrawModeName);
 onMounted(async () => {
   const map = await ctx.whenLoaded();
   boundMap = map;
@@ -113,20 +112,20 @@ onMounted(async () => {
   instance.on("select", onSelect);
   instance.on("deselect", onDeselect);
   map.on("style.load", onStyleLoad);
-  if (props.controls !== false) {
-    toolbar = createDrawToolbar({
-      modes: toolbarModes(),
+  if (props.toolbar) {
+    toolbarControl = createDrawToolbar({
+      modes: modeNames,
       // 再次点击当前绘制模式回到选择模式，与常见绘图工具一致
       onMode: (name) => setMode(name === instance?.getMode() && hasMode("select") ? "select" : name),
       onTrash: () => {
         if (selectedId !== void 0 && instance?.hasFeature(selectedId)) instance.removeFeatures([selectedId]);
       }
     });
-    map.addControl(toolbar, props.position);
+    map.addControl(toolbarControl, props.position);
   }
   attach(instance);
   if (features.value?.length) setFeatures(features.value);
-  const initial = mode.value ?? (modeNames.includes("select") ? "select" : instance.getMode());
+  const initial = mode.value ?? (hasMode("select") ? "select" : modeNames[0] ?? instance.getMode());
   instance.setMode(initial);
   applyMode(initial);
 });
@@ -138,10 +137,15 @@ watch(features, (value) => {
 watch(mode, (value) => {
   if (value) setMode(value);
 });
+watch(() => props.theme, (theme, previous) => {
+  if (!instance || isDeepEqual(theme, previous)) return;
+  const styles = drawThemeStyles(theme);
+  for (const name of themedNames) instance.updateModeOptions(name, { styles: styles[name] });
+}, { deep: true });
 onUnmounted(() => {
-  if (addressable) unregisterDraw(drawContext);
+  disposeDraw?.();
   boundMap?.off("style.load", onStyleLoad);
-  if (toolbar) boundMap?.removeControl(toolbar);
+  if (toolbarControl) boundMap?.removeControl(toolbarControl);
   if (!instance) return;
   instance.off("change", onChange);
   instance.off("finish", onFinish);