@movk/maplibre 1.0.0

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

@@ -0,0 +1,41 @@
+import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+/** 帧动画图标层：雪碧图切帧后由 StyleImageInterface.render 逐帧驱动 symbol 循环播放，零解码依赖。 */
+type __VLS_Props = {
+    /** 点要素数据（GeoJSON 或其 URL） */
+    data: GeoJSONSourceSpecification['data'];
+    /** 雪碧图 URL（所有帧拼一张图，行优先排布） */
+    image: string;
+    /** 总帧数 */
+    frames: number;
+    /** 列数；省略时等于 frames（单行） */
+    columns?: number;
+    /**
+     * 行数
+     * @defaultValue 1
+     */
+    rows?: number;
+    /** 单帧宽（像素）；省略由图宽/列数推算 */
+    frameWidth?: number;
+    /** 单帧高（像素）；省略由图高/行数推算 */
+    frameHeight?: number;
+    /**
+     * 播放帧率（帧/秒）
+     * @defaultValue 12
+     */
+    fps?: number;
+    /**
+     * 上图图标边长（像素）
+     * @defaultValue 64
+     */
+    size?: number;
+    /** 图层 id；省略时自动生成 */
+    layerId?: string;
+    /** 插入到该图层之前 */
+    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<{}>, {
+    size: number;
+    fps: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, ref, useId, watch } from "vue";
+import { spriteFrame, spriteFrameRect } from "../../utils/sprite";
+import { useMap } from "../../composables/useMap";
+import { useFrameIcon } from "../../composables/useFrameIcon";
+import MaplibreSource from "../Source.vue";
+import MaplibreLayer from "../Layer.vue";
+const props = defineProps({
+  data: { type: null, required: true },
+  image: { type: String, required: true },
+  frames: { type: Number, required: true },
+  columns: { type: Number, required: false },
+  rows: { type: Number, required: false },
+  frameWidth: { type: Number, required: false },
+  frameHeight: { type: Number, required: false },
+  fps: { type: Number, required: false, default: 12 },
+  size: { type: Number, required: false, default: 64 },
+  layerId: { type: String, required: false },
+  beforeId: { type: String, required: false }
+});
+const ctx = useMap();
+const id = props.layerId ?? `movk-sprite-${useId()}`;
+const imageName = `${id}-frames`;
+const source = computed(() => ({ type: "geojson", data: props.data }));
+const layout = computed(() => ({
+  "icon-image": imageName,
+  "icon-allow-overlap": true,
+  "icon-ignore-placement": true
+}));
+const sliced = ref([]);
+useFrameIcon({ imageName, size: props.size, frames: () => sliced.value, fps: props.fps });
+function prepareFrames() {
+  if (typeof Image === "undefined") return;
+  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();
+  };
+  img.src = props.image;
+}
+prepareFrames();
+watch(() => props.image, () => {
+  sliced.value = [];
+  prepareFrames();
+});
+</script>
+
+<template>
+  <MaplibreSource :source-id="id" :source="source">
+    <MaplibreLayer :layer-id="id" type="symbol" :source="id" :layout="layout" :before-id="beforeId" />
+  </MaplibreSource>
+</template>

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

@@ -0,0 +1,41 @@
+import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+/** 帧动画图标层：雪碧图切帧后由 StyleImageInterface.render 逐帧驱动 symbol 循环播放，零解码依赖。 */
+type __VLS_Props = {
+    /** 点要素数据（GeoJSON 或其 URL） */
+    data: GeoJSONSourceSpecification['data'];
+    /** 雪碧图 URL（所有帧拼一张图，行优先排布） */
+    image: string;
+    /** 总帧数 */
+    frames: number;
+    /** 列数；省略时等于 frames（单行） */
+    columns?: number;
+    /**
+     * 行数
+     * @defaultValue 1
+     */
+    rows?: number;
+    /** 单帧宽（像素）；省略由图宽/列数推算 */
+    frameWidth?: number;
+    /** 单帧高（像素）；省略由图高/行数推算 */
+    frameHeight?: number;
+    /**
+     * 播放帧率（帧/秒）
+     * @defaultValue 12
+     */
+    fps?: number;
+    /**
+     * 上图图标边长（像素）
+     * @defaultValue 64
+     */
+    size?: number;
+    /** 图层 id；省略时自动生成 */
+    layerId?: string;
+    /** 插入到该图层之前 */
+    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<{}>, {
+    size: number;
+    fps: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,25 @@
+import type { BuildingSourceOptions } from '../../utils/building';
+/** 纹理建筑：用户贴图 url 作 fill-extrusion-pattern。 */
+type __VLS_Props = BuildingSourceOptions & {
+    /** 贴图地址 */
+    url: string;
+    /** 图层 id；省略时自动生成 */
+    layerId?: string;
+    /**
+     * 整体透明度
+     * @defaultValue 1
+     */
+    opacity?: number;
+    /**
+     * 最小缩放级别
+     * @defaultValue 15
+     */
+    minzoom?: 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<{}>, {
+    minzoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,39 @@
+<script setup>
+import { computed, useId } from "vue";
+import { useMaplibreImage } from "../../composables/useMaplibreImage";
+import { buildingExtrusionPaint } from "../../utils/building";
+import MaplibreBuildingLayer from "../layers/BuildingLayer.vue";
+const props = defineProps({
+  source: { type: String, required: true },
+  sourceLayer: { type: String, required: false },
+  heightProperty: { type: String, required: false },
+  baseProperty: { type: String, required: false },
+  url: { type: String, required: true },
+  layerId: { type: String, required: false },
+  opacity: { type: Number, required: false },
+  minzoom: { type: Number, required: false, default: 15 },
+  beforeId: { type: String, required: false }
+});
+const id = props.layerId ?? `movk-texture-building-${useId()}`;
+const imageName = `${id}-texture`;
+const { loaded } = useMaplibreImage(imageName, props.url);
+const paint = computed(() => ({
+  "fill-extrusion-pattern": imageName,
+  ...buildingExtrusionPaint({ minzoom: props.minzoom, heightProperty: props.heightProperty, baseProperty: props.baseProperty }),
+  "fill-extrusion-opacity": props.opacity ?? 1
+}));
+</script>
+
+<template>
+  <MaplibreBuildingLayer
+    v-if="loaded"
+    :layer-id="id"
+    :source="source"
+    :source-layer="sourceLayer"
+    :height-property="heightProperty"
+    :base-property="baseProperty"
+    :minzoom="minzoom"
+    :paint="paint"
+    :before-id="beforeId"
+  />
+</template>

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

@@ -0,0 +1,25 @@
+import type { BuildingSourceOptions } from '../../utils/building';
+/** 纹理建筑：用户贴图 url 作 fill-extrusion-pattern。 */
+type __VLS_Props = BuildingSourceOptions & {
+    /** 贴图地址 */
+    url: string;
+    /** 图层 id；省略时自动生成 */
+    layerId?: string;
+    /**
+     * 整体透明度
+     * @defaultValue 1
+     */
+    opacity?: number;
+    /**
+     * 最小缩放级别
+     * @defaultValue 15
+     */
+    minzoom?: 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<{}>, {
+    minzoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,44 @@
+import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+/** 动态轨迹：line-gradient 彗尾窗口沿线循环平移（source 需 lineMetrics）。 */
+type __VLS_Props = {
+    /** 线要素数据（GeoJSON 或其 URL） */
+    data: GeoJSONSourceSpecification['data'];
+    /** 图层 id 前缀；省略时自动生成 */
+    layerId?: string;
+    /**
+     * 主色
+     * @defaultValue '#8b5cf6'
+     */
+    color?: string;
+    /**
+     * 线宽（像素）
+     * @defaultValue 4
+     */
+    lineWidth?: number;
+    /**
+     * 彗尾长度（line-progress 占比 0-1）
+     * @defaultValue 0.25
+     */
+    trailLength?: number;
+    /**
+     * 跑完全程的周期（毫秒）
+     * @defaultValue 3000
+     */
+    duration?: number;
+    /**
+     * 是否同时绘制半透明底线
+     * @defaultValue true
+     */
+    baseLine?: boolean;
+    /** 插入到该图层之前 */
+    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;
+    duration: number;
+    lineWidth: number;
+    trailLength: number;
+    baseLine: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,61 @@
+<script setup>
+import { computed, useId } from "vue";
+import { trailGradient } from "../../utils/effects";
+import { useMapAnimation } from "../../composables/useMapAnimation";
+import MaplibreSource from "../Source.vue";
+import MaplibreLayer from "../Layer.vue";
+const props = defineProps({
+  data: { type: null, required: true },
+  layerId: { type: String, required: false },
+  color: { type: String, required: false, default: "#8b5cf6" },
+  lineWidth: { type: Number, required: false, default: 4 },
+  trailLength: { type: Number, required: false, default: 0.25 },
+  duration: { type: Number, required: false, default: 3e3 },
+  baseLine: { type: Boolean, required: false, default: true },
+  beforeId: { type: String, required: false }
+});
+const id = props.layerId ?? `movk-trail-${useId()}`;
+const source = computed(() => ({
+  type: "geojson",
+  data: props.data,
+  lineMetrics: true
+}));
+const basePaint = computed(() => ({
+  "line-color": props.color,
+  "line-width": Math.max(1, props.lineWidth / 2),
+  "line-opacity": 0.25
+}));
+const trailPaint = computed(() => ({
+  "line-width": props.lineWidth,
+  "line-gradient": trailGradient(0, props.trailLength, props.color)
+}));
+const layout = { "line-cap": "round", "line-join": "round" };
+useMapAnimation((map, elapsed) => {
+  if (!map.getLayer(id)) return;
+  const span = 1 + props.trailLength;
+  const head = elapsed % props.duration / props.duration * span;
+  map.setPaintProperty(id, "line-gradient", trailGradient(head, props.trailLength, props.color));
+});
+</script>
+
+<template>
+  <MaplibreSource :source-id="id" :source="source">
+    <MaplibreLayer
+      v-if="baseLine"
+      :layer-id="`${id}-base`"
+      type="line"
+      :source="id"
+      :layout="layout"
+      :paint="basePaint"
+      :before-id="beforeId"
+    />
+    <MaplibreLayer
+      :layer-id="id"
+      type="line"
+      :source="id"
+      :layout="layout"
+      :paint="trailPaint"
+      :before-id="beforeId"
+    />
+  </MaplibreSource>
+</template>

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

@@ -0,0 +1,44 @@
+import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+/** 动态轨迹：line-gradient 彗尾窗口沿线循环平移（source 需 lineMetrics）。 */
+type __VLS_Props = {
+    /** 线要素数据（GeoJSON 或其 URL） */
+    data: GeoJSONSourceSpecification['data'];
+    /** 图层 id 前缀；省略时自动生成 */
+    layerId?: string;
+    /**
+     * 主色
+     * @defaultValue '#8b5cf6'
+     */
+    color?: string;
+    /**
+     * 线宽（像素）
+     * @defaultValue 4
+     */
+    lineWidth?: number;
+    /**
+     * 彗尾长度（line-progress 占比 0-1）
+     * @defaultValue 0.25
+     */
+    trailLength?: number;
+    /**
+     * 跑完全程的周期（毫秒）
+     * @defaultValue 3000
+     */
+    duration?: number;
+    /**
+     * 是否同时绘制半透明底线
+     * @defaultValue true
+     */
+    baseLine?: boolean;
+    /** 插入到该图层之前 */
+    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;
+    duration: number;
+    lineWidth: number;
+    trailLength: number;
+    baseLine: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,44 @@
+import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+/** 波浪圆：常驻实心底圆 + 周期向外扩张的描边波纹。 */
+type __VLS_Props = {
+    /** 点要素数据（GeoJSON 或其 URL） */
+    data: GeoJSONSourceSpecification['data'];
+    /** 图层 id 前缀；省略时自动生成 */
+    layerId?: string;
+    /**
+     * 主色
+     * @defaultValue '#10b981'
+     */
+    color?: string;
+    /**
+     * 底圆半径（像素）
+     * @defaultValue 6
+     */
+    baseRadius?: number;
+    /**
+     * 波纹最大半径（像素）
+     * @defaultValue 36
+     */
+    maxRadius?: number;
+    /**
+     * 波纹周期（毫秒）
+     * @defaultValue 2000
+     */
+    duration?: number;
+    /**
+     * 波纹圈数
+     * @defaultValue 2
+     */
+    rings?: 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;
+    maxRadius: number;
+    duration: number;
+    rings: number;
+    baseRadius: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,55 @@
+<script setup>
+import { computed, useId } from "vue";
+import { ringFade, ringProgress } from "../../utils/effects";
+import { useMapAnimation } from "../../composables/useMapAnimation";
+import MaplibreSource from "../Source.vue";
+import MaplibreLayer from "../Layer.vue";
+const props = defineProps({
+  data: { type: null, required: true },
+  layerId: { type: String, required: false },
+  color: { type: String, required: false, default: "#10b981" },
+  baseRadius: { type: Number, required: false, default: 6 },
+  maxRadius: { type: Number, required: false, default: 36 },
+  duration: { type: Number, required: false, default: 2e3 },
+  rings: { type: Number, required: false, default: 2 },
+  beforeId: { type: String, required: false }
+});
+const id = props.layerId ?? `movk-wave-${useId()}`;
+const source = computed(() => ({ type: "geojson", data: props.data }));
+const basePaint = computed(() => ({
+  "circle-color": props.color,
+  "circle-radius": props.baseRadius
+}));
+const wavePaint = computed(() => ({
+  "circle-color": props.color,
+  "circle-opacity": 0,
+  "circle-radius": props.baseRadius,
+  "circle-stroke-color": props.color,
+  "circle-stroke-width": 2,
+  "circle-stroke-opacity": 0
+}));
+useMapAnimation((map, elapsed) => {
+  for (let ring = 0; ring < props.rings; ring++) {
+    const layerId = `${id}-wave-${ring}`;
+    if (!map.getLayer(layerId)) continue;
+    const progress = ringProgress(ring, props.rings, elapsed, props.duration);
+    map.setPaintProperty(layerId, "circle-radius", props.baseRadius + progress * (props.maxRadius - props.baseRadius));
+    map.setPaintProperty(layerId, "circle-stroke-opacity", ringFade(progress));
+  }
+});
+</script>
+
+<template>
+  <MaplibreSource :source-id="id" :source="source">
+    <MaplibreLayer
+      v-for="ring in rings"
+      :key="ring"
+      :layer-id="`${id}-wave-${ring - 1}`"
+      type="circle"
+      :source="id"
+      :paint="wavePaint"
+      :before-id="beforeId"
+    />
+    <MaplibreLayer :layer-id="`${id}-base`" type="circle" :source="id" :paint="basePaint" :before-id="beforeId" />
+  </MaplibreSource>
+</template>

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

@@ -0,0 +1,44 @@
+import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+/** 波浪圆：常驻实心底圆 + 周期向外扩张的描边波纹。 */
+type __VLS_Props = {
+    /** 点要素数据（GeoJSON 或其 URL） */
+    data: GeoJSONSourceSpecification['data'];
+    /** 图层 id 前缀；省略时自动生成 */
+    layerId?: string;
+    /**
+     * 主色
+     * @defaultValue '#10b981'
+     */
+    color?: string;
+    /**
+     * 底圆半径（像素）
+     * @defaultValue 6
+     */
+    baseRadius?: number;
+    /**
+     * 波纹最大半径（像素）
+     * @defaultValue 36
+     */
+    maxRadius?: number;
+    /**
+     * 波纹周期（毫秒）
+     * @defaultValue 2000
+     */
+    duration?: number;
+    /**
+     * 波纹圈数
+     * @defaultValue 2
+     */
+    rings?: 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;
+    maxRadius: number;
+    duration: number;
+    rings: number;
+    baseRadius: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,53 @@
+import type { BuildingSourceOptions } from '../../utils/building';
+/** 窗户建筑：程序生成窗户点阵贴图 fill-extrusion-pattern。 */
+type __VLS_Props = BuildingSourceOptions & {
+    /** 图层 id；省略时自动生成 */
+    layerId?: string;
+    /**
+     * 窗户行数
+     * @defaultValue 8
+     */
+    rows?: number;
+    /**
+     * 窗户列数
+     * @defaultValue 6
+     */
+    cols?: number;
+    /**
+     * 亮窗颜色
+     * @defaultValue '#fde68a'
+     */
+    litColor?: string;
+    /**
+     * 暗窗/墙体颜色
+     * @defaultValue '#1f2937'
+     */
+    darkColor?: string;
+    /**
+     * 亮窗比例
+     * @defaultValue 0.45
+     */
+    litRatio?: number;
+    /**
+     * 随机种子
+     * @defaultValue 1
+     */
+    seed?: number;
+    /**
+     * 整体透明度
+     * @defaultValue 1
+     */
+    opacity?: number;
+    /**
+     * 最小缩放级别
+     * @defaultValue 15
+     */
+    minzoom?: 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<{}>, {
+    minzoom: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,61 @@
+<script setup>
+import { computed, onUnmounted, useId } from "vue";
+import { windowTextureImage } from "../../utils/building-effects";
+import { useMap } from "../../composables/useMap";
+import { buildingExtrusionPaint } from "../../utils/building";
+import MaplibreBuildingLayer from "../layers/BuildingLayer.vue";
+const props = defineProps({
+  source: { type: String, required: true },
+  sourceLayer: { type: String, required: false },
+  heightProperty: { type: String, required: false },
+  baseProperty: { type: String, required: false },
+  layerId: { type: String, required: false },
+  rows: { type: Number, required: false },
+  cols: { type: Number, required: false },
+  litColor: { type: String, required: false },
+  darkColor: { type: String, required: false },
+  litRatio: { type: Number, required: false },
+  seed: { type: Number, required: false },
+  opacity: { type: Number, required: false },
+  minzoom: { type: Number, required: false, default: 15 },
+  beforeId: { type: String, required: false }
+});
+const ctx = useMap();
+const id = props.layerId ?? `movk-window-building-${useId()}`;
+const imageName = `${id}-pattern`;
+const paint = computed(() => ({
+  "fill-extrusion-pattern": imageName,
+  ...buildingExtrusionPaint({ minzoom: props.minzoom, heightProperty: props.heightProperty, baseProperty: props.baseProperty }),
+  "fill-extrusion-opacity": props.opacity ?? 1
+}));
+const stopReady = ctx.onReady((map) => {
+  if (map.hasImage(imageName)) return;
+  const image = windowTextureImage({
+    rows: props.rows,
+    cols: props.cols,
+    litColor: props.litColor,
+    darkColor: props.darkColor,
+    litRatio: props.litRatio,
+    seed: props.seed
+  });
+  if (image) map.addImage(imageName, image);
+});
+onUnmounted(() => {
+  stopReady();
+  const map = ctx.map.value;
+  if (map?.hasImage(imageName)) map.removeImage(imageName);
+});
+</script>
+
+<template>
+  <MaplibreBuildingLayer
+    :layer-id="id"
+    :source="source"
+    :source-layer="sourceLayer"
+    :height-property="heightProperty"
+    :base-property="baseProperty"
+    :minzoom="minzoom"
+    :paint="paint"
+    :before-id="beforeId"
+  />
+</template>