@movk/maplibre 1.0.0

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

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+import { wmsRasterSource } from "../../utils/wms";
+import MaplibreSource from "../Source.vue";
+import MaplibreLayer from "../Layer.vue";
+const props = defineProps({
+  url: { type: String, required: true },
+  layers: { type: String, required: true },
+  layerId: { type: String, required: false },
+  version: { type: String, required: false },
+  format: { type: String, required: false },
+  transparent: { type: Boolean, required: false },
+  styles: { type: String, required: false },
+  crs: { type: String, required: false },
+  tileSize: { type: Number, required: false },
+  attribution: { type: String, required: false },
+  params: { type: Object, required: false },
+  beforeId: { type: String, required: false }
+});
+const id = computed(() => props.layerId ?? `wms-${props.layers}`);
+const source = computed(() => wmsRasterSource({
+  url: props.url,
+  layers: props.layers,
+  version: props.version,
+  format: props.format,
+  transparent: props.transparent,
+  styles: props.styles,
+  crs: props.crs,
+  tileSize: props.tileSize,
+  attribution: props.attribution,
+  params: props.params
+}));
+</script>
+
+<template>
+  <MaplibreSource :key="id" :source-id="id" :source="source">
+    <MaplibreLayer :layer-id="id" type="raster" :source="id" :before-id="beforeId" />
+  </MaplibreSource>
+</template>

package/dist/runtime/components/extensions/WmsLayer.vue.d.ts

@@ -0,0 +1,50 @@
+type __VLS_Props = {
+    /** WMS 服务基础地址 */
+    url: string;
+    /** 图层 LAYERS（逗号分隔多层） */
+    layers: string;
+    /**
+     * source/layer id
+     * @defaultValue `wms-${layers}`
+     */
+    layerId?: string;
+    /**
+     * WMS 版本
+     * @defaultValue '1.1.1'
+     */
+    version?: string;
+    /**
+     * 图片格式
+     * @defaultValue 'image/png'
+     */
+    format?: string;
+    /**
+     * 是否透明
+     * @defaultValue true
+     */
+    transparent?: boolean;
+    /**
+     * 样式
+     * @defaultValue ''
+     */
+    styles?: string;
+    /**
+     * 坐标参考系
+     * @defaultValue 'EPSG:3857'
+     */
+    crs?: string;
+    /**
+     * 瓦片尺寸
+     * @defaultValue 256
+     */
+    tileSize?: number;
+    /** 版权信息 */
+    attribution?: string;
+    /** 透传查询参数 */
+    params?: Record<string, string | undefined>;
+    /** 插入到该图层之前 */
+    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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/extensions/WmtsLayer.d.vue.ts

@@ -0,0 +1,42 @@
+type __VLS_Props = {
+    /** WMTS 服务基础地址；含 {s} 时配合 subdomains 展开 */
+    url: string;
+    /** 图层标识 LAYER */
+    layer: string;
+    /**
+     * source/layer id
+     * @defaultValue `wmts-${layer}`
+     */
+    layerId?: string;
+    /**
+     * 瓦片矩阵集
+     * @defaultValue 'w'
+     */
+    tileMatrixSet?: string;
+    /**
+     * 样式
+     * @defaultValue 'default'
+     */
+    style?: string;
+    /**
+     * 瓦片格式
+     * @defaultValue 'tiles'
+     */
+    format?: string;
+    /** 子域名列表，替换 url 中的 {s} */
+    subdomains?: string[];
+    /**
+     * 瓦片尺寸
+     * @defaultValue 256
+     */
+    tileSize?: number;
+    /** 版权信息 */
+    attribution?: string;
+    /** 透传查询参数（如 { tk }） */
+    params?: Record<string, string | undefined>;
+    /** 插入到该图层之前 */
+    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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,37 @@
+<script setup>
+import { computed } from "vue";
+import { wmtsRasterSource } from "../../utils/wmts";
+import MaplibreSource from "../Source.vue";
+import MaplibreLayer from "../Layer.vue";
+const props = defineProps({
+  url: { type: String, required: true },
+  layer: { type: String, required: true },
+  layerId: { type: String, required: false },
+  tileMatrixSet: { type: String, required: false },
+  style: { type: String, required: false },
+  format: { type: String, required: false },
+  subdomains: { type: Array, required: false },
+  tileSize: { type: Number, required: false },
+  attribution: { type: String, required: false },
+  params: { type: Object, required: false },
+  beforeId: { type: String, required: false }
+});
+const id = computed(() => props.layerId ?? `wmts-${props.layer}`);
+const source = computed(() => wmtsRasterSource({
+  url: props.url,
+  layer: props.layer,
+  tileMatrixSet: props.tileMatrixSet,
+  style: props.style,
+  format: props.format,
+  subdomains: props.subdomains,
+  tileSize: props.tileSize,
+  attribution: props.attribution,
+  params: props.params
+}));
+</script>
+
+<template>
+  <MaplibreSource :key="id" :source-id="id" :source="source">
+    <MaplibreLayer :layer-id="id" type="raster" :source="id" :before-id="beforeId" />
+  </MaplibreSource>
+</template>

package/dist/runtime/components/extensions/WmtsLayer.vue.d.ts

@@ -0,0 +1,42 @@
+type __VLS_Props = {
+    /** WMTS 服务基础地址；含 {s} 时配合 subdomains 展开 */
+    url: string;
+    /** 图层标识 LAYER */
+    layer: string;
+    /**
+     * source/layer id
+     * @defaultValue `wmts-${layer}`
+     */
+    layerId?: string;
+    /**
+     * 瓦片矩阵集
+     * @defaultValue 'w'
+     */
+    tileMatrixSet?: string;
+    /**
+     * 样式
+     * @defaultValue 'default'
+     */
+    style?: string;
+    /**
+     * 瓦片格式
+     * @defaultValue 'tiles'
+     */
+    format?: string;
+    /** 子域名列表，替换 url 中的 {s} */
+    subdomains?: string[];
+    /**
+     * 瓦片尺寸
+     * @defaultValue 256
+     */
+    tileSize?: number;
+    /** 版权信息 */
+    attribution?: string;
+    /** 透传查询参数（如 { tk }） */
+    params?: Record<string, string | undefined>;
+    /** 插入到该图层之前 */
+    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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,28 @@
+import type { BuildingSourceOptions } from '../../utils/building';
+/** 3D 建筑：按要素高度属性拉伸的 fill-extrusion 图层。 */
+type __VLS_Props = BuildingSourceOptions & {
+    /** 图层 id；省略时自动生成 */
+    layerId?: string;
+    /**
+     * 建筑颜色
+     * @defaultValue '#aaa'
+     */
+    color?: string;
+    /**
+     * 整体透明度
+     * @defaultValue 0.8
+     */
+    opacity?: number;
+    /**
+     * 显示建筑的最小缩放级别
+     * @defaultValue 15
+     */
+    minzoom?: number;
+    /** 整体覆盖 paint（提供时忽略 color/opacity 预设） */
+    paint?: Record<string, unknown>;
+    /** 插入到该图层之前 */
+    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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,41 @@
+<script setup>
+import { computed, useId } from "vue";
+import { buildingLayerSpec } from "../../utils/building";
+import MaplibreLayer from "../Layer.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 },
+  color: { type: String, required: false },
+  opacity: { type: Number, required: false },
+  minzoom: { type: Number, required: false },
+  paint: { type: Object, required: false },
+  beforeId: { type: String, required: false }
+});
+const id = props.layerId ?? `movk-building-${useId()}`;
+const spec = computed(() => buildingLayerSpec({
+  id,
+  source: props.source,
+  sourceLayer: props.sourceLayer,
+  heightProperty: props.heightProperty,
+  baseProperty: props.baseProperty,
+  color: props.color,
+  opacity: props.opacity,
+  minzoom: props.minzoom,
+  paint: props.paint
+}));
+</script>
+
+<template>
+  <MaplibreLayer
+    :layer-id="id"
+    type="fill-extrusion"
+    :source="spec.source"
+    :source-layer="spec['source-layer']"
+    :minzoom="spec.minzoom"
+    :paint="spec.paint"
+    :before-id="beforeId"
+  />
+</template>

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

@@ -0,0 +1,28 @@
+import type { BuildingSourceOptions } from '../../utils/building';
+/** 3D 建筑：按要素高度属性拉伸的 fill-extrusion 图层。 */
+type __VLS_Props = BuildingSourceOptions & {
+    /** 图层 id；省略时自动生成 */
+    layerId?: string;
+    /**
+     * 建筑颜色
+     * @defaultValue '#aaa'
+     */
+    color?: string;
+    /**
+     * 整体透明度
+     * @defaultValue 0.8
+     */
+    opacity?: number;
+    /**
+     * 显示建筑的最小缩放级别
+     * @defaultValue 15
+     */
+    minzoom?: number;
+    /** 整体覆盖 paint（提供时忽略 color/opacity 预设） */
+    paint?: Record<string, unknown>;
+    /** 插入到该图层之前 */
+    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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,55 @@
+import type { MapGeoJSONFeature } from 'maplibre-gl';
+import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+type PropBag = Record<string, unknown>;
+type __VLS_Props = {
+    /** 点要素数据（GeoJSON 或其 URL） */
+    data: GeoJSONSourceSpecification['data'];
+    /** source 与图层 id 前缀；省略时自动生成 */
+    sourceId?: string;
+    /**
+     * 聚合半径（像素）
+     * @defaultValue 50
+     */
+    clusterRadius?: number;
+    /**
+     * 超过该缩放级别不再聚合
+     * @defaultValue 14
+     */
+    clusterMaxZoom?: number;
+    /** 覆盖聚合圆 paint */
+    clusterPaint?: PropBag;
+    /** 覆盖计数文字 layout */
+    countLayout?: PropBag;
+    /** 覆盖计数文字 paint */
+    countPaint?: PropBag;
+    /** 覆盖散点 paint */
+    pointPaint?: PropBag;
+    /**
+     * 点击聚合圆自动放大到展开级别
+     * @defaultValue true
+     */
+    autoExpand?: boolean;
+    /** 插入到该图层之前 */
+    beforeId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clusterClick: (payload: {
+        clusterId: number;
+        coordinates: [number, number];
+        expansionZoom: number;
+    }) => any;
+    pointClick: (feature: MapGeoJSONFeature) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClusterClick?: ((payload: {
+        clusterId: number;
+        coordinates: [number, number];
+        expansionZoom: number;
+    }) => any) | undefined;
+    onPointClick?: ((feature: MapGeoJSONFeature) => any) | undefined;
+}>, {
+    clusterRadius: number;
+    clusterMaxZoom: number;
+    autoExpand: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,86 @@
+<script setup>
+import { computed, useId } from "vue";
+import { clusterLayerSpecs } from "../../utils/cluster";
+import { useMap } from "../../composables/useMap";
+import { logger } from "../../utils/logger";
+import MaplibreSource from "../Source.vue";
+import MaplibreLayer from "../Layer.vue";
+const props = defineProps({
+  data: { type: null, required: true },
+  sourceId: { type: String, required: false },
+  clusterRadius: { type: Number, required: false, default: 50 },
+  clusterMaxZoom: { type: Number, required: false, default: 14 },
+  clusterPaint: { type: Object, required: false },
+  countLayout: { type: Object, required: false },
+  countPaint: { type: Object, required: false },
+  pointPaint: { type: Object, required: false },
+  autoExpand: { type: Boolean, required: false, default: true },
+  beforeId: { type: String, required: false }
+});
+const emit = defineEmits(["clusterClick", "pointClick"]);
+const ctx = useMap();
+const id = props.sourceId ?? `movk-cluster-${useId()}`;
+const source = computed(() => ({
+  type: "geojson",
+  data: props.data,
+  cluster: true,
+  clusterRadius: props.clusterRadius,
+  clusterMaxZoom: props.clusterMaxZoom
+}));
+const specs = computed(() => clusterLayerSpecs({
+  id,
+  sourceId: id,
+  clusterPaint: props.clusterPaint,
+  countLayout: props.countLayout,
+  countPaint: props.countPaint,
+  pointPaint: props.pointPaint
+}));
+function onClusterClick(event) {
+  const map = ctx.map.value;
+  const feature = event.features?.[0];
+  const clusterId = feature?.properties?.cluster_id;
+  if (!map || !feature || clusterId === void 0) return;
+  const coordinates = feature.geometry.coordinates;
+  const geojsonSource = map.getSource(id);
+  geojsonSource.getClusterExpansionZoom(clusterId).then((expansionZoom) => {
+    if (props.autoExpand) map.easeTo({ center: coordinates, zoom: expansionZoom });
+    emit("clusterClick", { clusterId, coordinates, expansionZoom });
+  }).catch((error) => logger.warn("Failed to get cluster expansion zoom", error));
+}
+function onPointClick(event) {
+  const feature = event.features?.[0];
+  if (feature) emit("pointClick", feature);
+}
+</script>
+
+<template>
+  <MaplibreSource :source-id="id" :source="source">
+    <MaplibreLayer
+      :layer-id="specs.clusters.id"
+      type="circle"
+      :source="id"
+      :filter="specs.clusters.filter"
+      :paint="specs.clusters.paint"
+      :before-id="beforeId"
+      @click="onClusterClick"
+    />
+    <MaplibreLayer
+      :layer-id="specs.count.id"
+      type="symbol"
+      :source="id"
+      :filter="specs.count.filter"
+      :layout="specs.count.layout"
+      :paint="specs.count.paint"
+      :before-id="beforeId"
+    />
+    <MaplibreLayer
+      :layer-id="specs.points.id"
+      type="circle"
+      :source="id"
+      :filter="specs.points.filter"
+      :paint="specs.points.paint"
+      :before-id="beforeId"
+      @click="onPointClick"
+    />
+  </MaplibreSource>
+</template>

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

@@ -0,0 +1,55 @@
+import type { MapGeoJSONFeature } from 'maplibre-gl';
+import type { GeoJSONSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+type PropBag = Record<string, unknown>;
+type __VLS_Props = {
+    /** 点要素数据（GeoJSON 或其 URL） */
+    data: GeoJSONSourceSpecification['data'];
+    /** source 与图层 id 前缀；省略时自动生成 */
+    sourceId?: string;
+    /**
+     * 聚合半径（像素）
+     * @defaultValue 50
+     */
+    clusterRadius?: number;
+    /**
+     * 超过该缩放级别不再聚合
+     * @defaultValue 14
+     */
+    clusterMaxZoom?: number;
+    /** 覆盖聚合圆 paint */
+    clusterPaint?: PropBag;
+    /** 覆盖计数文字 layout */
+    countLayout?: PropBag;
+    /** 覆盖计数文字 paint */
+    countPaint?: PropBag;
+    /** 覆盖散点 paint */
+    pointPaint?: PropBag;
+    /**
+     * 点击聚合圆自动放大到展开级别
+     * @defaultValue true
+     */
+    autoExpand?: boolean;
+    /** 插入到该图层之前 */
+    beforeId?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clusterClick: (payload: {
+        clusterId: number;
+        coordinates: [number, number];
+        expansionZoom: number;
+    }) => any;
+    pointClick: (feature: MapGeoJSONFeature) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClusterClick?: ((payload: {
+        clusterId: number;
+        coordinates: [number, number];
+        expansionZoom: number;
+    }) => any) | undefined;
+    onPointClick?: ((feature: MapGeoJSONFeature) => any) | undefined;
+}>, {
+    clusterRadius: number;
+    clusterMaxZoom: number;
+    autoExpand: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,21 @@
+import type { ImageSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+type __VLS_Props = {
+    /** 图层 id；省略时自动生成 */
+    layerId?: string;
+    /** 图片地址 */
+    url: string;
+    /** 四角经纬度：左上/右上/右下/左下 */
+    coordinates: ImageSourceSpecification['coordinates'];
+    /**
+     * 不透明度
+     * @defaultValue 1
+     */
+    opacity?: 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<{}>, {
+    opacity: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,25 @@
+<script setup>
+import { computed, useId } from "vue";
+import MaplibreSource from "../Source.vue";
+import MaplibreLayer from "../Layer.vue";
+const props = defineProps({
+  layerId: { type: String, required: false },
+  url: { type: String, required: true },
+  coordinates: { type: Array, required: true },
+  opacity: { type: Number, required: false, default: 1 },
+  beforeId: { type: String, required: false }
+});
+const id = props.layerId ?? `movk-image-${useId()}`;
+const source = computed(() => ({
+  type: "image",
+  url: props.url,
+  coordinates: props.coordinates
+}));
+const paint = computed(() => ({ "raster-opacity": props.opacity }));
+</script>
+
+<template>
+  <MaplibreSource :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/ImageLayer.vue.d.ts

@@ -0,0 +1,21 @@
+import type { ImageSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+type __VLS_Props = {
+    /** 图层 id；省略时自动生成 */
+    layerId?: string;
+    /** 图片地址 */
+    url: string;
+    /** 四角经纬度：左上/右上/右下/左下 */
+    coordinates: ImageSourceSpecification['coordinates'];
+    /**
+     * 不透明度
+     * @defaultValue 1
+     */
+    opacity?: 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<{}>, {
+    opacity: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    /** 图层 id；省略时自动生成 */
+    layerId?: string;
+    /** URL 模板瓦片地址（{z}/{x}/{y} 占位） */
+    tiles: string[];
+    /**
+     * 瓦片尺寸
+     * @defaultValue 256
+     */
+    tileSize?: number;
+    /**
+     * 瓦片坐标方案
+     * @defaultValue 'xyz'
+     */
+    scheme?: 'xyz' | 'tms';
+    /** 数据源最小缩放级别 */
+    minzoom?: number;
+    /** 数据源最大缩放级别 */
+    maxzoom?: number;
+    /** 版权信息 */
+    attribution?: string;
+    /**
+     * 不透明度
+     * @defaultValue 1
+     */
+    opacity?: 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<{}>, {
+    opacity: number;
+    tileSize: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,34 @@
+<script setup>
+import { computed, useId } from "vue";
+import { omitUndefined } from "@movk/core";
+import MaplibreSource from "../Source.vue";
+import MaplibreLayer from "../Layer.vue";
+const props = defineProps({
+  layerId: { type: String, required: false },
+  tiles: { type: Array, required: true },
+  tileSize: { type: Number, required: false, default: 256 },
+  scheme: { type: String, required: false },
+  minzoom: { type: Number, required: false },
+  maxzoom: { type: Number, required: false },
+  attribution: { type: String, required: false },
+  opacity: { type: Number, required: false, default: 1 },
+  beforeId: { type: String, required: false }
+});
+const id = props.layerId ?? `movk-raster-${useId()}`;
+const source = computed(() => omitUndefined({
+  type: "raster",
+  tiles: props.tiles,
+  tileSize: props.tileSize,
+  scheme: props.scheme,
+  minzoom: props.minzoom,
+  maxzoom: props.maxzoom,
+  attribution: props.attribution
+}));
+const paint = computed(() => ({ "raster-opacity": props.opacity }));
+</script>
+
+<template>
+  <MaplibreSource :source-id="id" :source="source">
+    <MaplibreLayer :layer-id="id" type="raster" :source="id" :paint="paint" :before-id="beforeId" />
+  </MaplibreSource>
+</template>