@cn-map/gaode-svelte 0.0.0 → 0.0.1

package/dist/layer/indoor-map/indoor-map.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { MapEventProps } from '@cn-map/gaode-shared/types'
+  import type { Instance } from '../../types/index.js'
+  import { click } from '@cn-map/gaode-shared/const'
+  import { eventsToProps } from '@cn-map/gaode-shared/utils'
+  import { onDestroy, untrack } from 'svelte'
+  import { createEventListeners } from '../../hooks/index.js'
+  import { useMapInstance } from '../../map'
+  import { omitProps, snapshot } from '../../utils/index.js'
+  import { layerEvents, useLayerAttributes } from '../layer'
+
+  type IndoorMapEvents = MapEventProps<AMap.IndoorMapEventType, AMap.IndoorMap>
+  interface IndoorMapExtraInitOptions {
+    /**
+     * 建筑物 POI ID
+     */
+    POIId?: string
+    /**
+     * 楼层
+     */
+    floor?: number
+  }
+  type IndoorMapInitOptions = AMap.IndoorMapOptions & IndoorMapExtraInitOptions & Instance<AMap.IndoorMap>
+
+  export type IndoorMapProps = IndoorMapInitOptions & IndoorMapEvents
+
+  const indoorMapEvents: AMap.IndoorMapEventType[] = [...layerEvents, click]
+
+  let { instance = $bindable(), POIId, floor, ...props }: IndoorMapProps = $props()
+
+  const map = $derived.by(useMapInstance(() => props.map))
+  const restProps = omitProps(() => props, 'map', ...eventsToProps(indoorMapEvents))
+
+  const indoorMap = $state.raw<AMap.IndoorMap>(untrack(() => map?.indoorMap) ?? new AMap.IndoorMap(snapshot(restProps)))
+
+  $effect(() => {
+    instance = indoorMap
+
+    return () => {
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    if (!map) return
+    if (map.indoorMap) return
+
+    const { animateEnable } = map.getStatus()
+
+    type MapMoveEndFnArray = ReturnType<typeof map.getEvents<AMap.Map>>['moveend']
+
+    const before: MapMoveEndFnArray = [...(map.getEvents()?.moveend ?? [])]
+    indoorMap.setMap(map)
+    const after: MapMoveEndFnArray = [...(map.getEvents()?.moveend ?? [])]
+    const moveEndFns = after?.filter(a => !before?.some(b => b.fn === a.fn && b.context === a.context))
+
+    return () => {
+      moveEndFns?.forEach(({ fn, context }) => {
+        map.off('moveend', fn, context)
+      })
+
+      if (indoorMap.e$) {
+        map?.removeControl(indoorMap.e$) // 移除楼层切换控件
+      }
+      indoorMap.VR.labelsLayer?.setMap(null)
+      map.removeLayer(indoorMap)
+      map.setStatus({ animateEnable })
+      // @ts-expect-error sss
+      delete map.im().Yh.indoor
+    }
+  })
+
+  $effect(() => {
+    if (map && POIId) {
+      indoorMap.showIndoorMap(POIId, floor)
+      // TODO: just a workaround, should not be called internally, delete this after fixed
+      indoorMap.getSource()?.JR?.(POIId, floor)
+    }
+  })
+
+  useLayerAttributes(() => indoorMap, restProps)
+
+  $effect(() => {
+    if (restProps.hideFloorBar !== undefined) {
+      if (restProps.hideFloorBar) {
+        indoorMap.hideFloorBar()
+      } else {
+        indoorMap.showFloorBar()
+      }
+    }
+  })
+
+  createEventListeners<AMap.IndoorMapEventType, AMap.IndoorMap>(
+    () => indoorMap,
+    () => props,
+    indoorMapEvents
+  )
+
+  onDestroy(() => {
+    if (!map || map.indoorMap) return
+    indoorMap.VR.labelsLayer?.destroy()
+    indoorMap.destroy()
+  })
+</script>

package/dist/layer/indoor-map/indoor-map.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { MapEventProps } from '@cn-map/gaode-shared/types';
+import type { Instance } from '../../types/index.ts';
+type IndoorMapEvents = MapEventProps<AMap.IndoorMapEventType, AMap.IndoorMap>;
+interface IndoorMapExtraInitOptions {
+    /**
+     * 建筑物 POI ID
+     */
+    POIId?: string;
+    /**
+     * 楼层
+     */
+    floor?: number;
+}
+type IndoorMapInitOptions = AMap.IndoorMapOptions & IndoorMapExtraInitOptions & Instance<AMap.IndoorMap>;
+export type IndoorMapProps = IndoorMapInitOptions & IndoorMapEvents;
+declare const IndoorMap: import("svelte").Component<IndoorMapProps, {}, "instance">;
+type IndoorMap = ReturnType<typeof IndoorMap>;
+export default IndoorMap;

package/dist/layer/labels-layer/context.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor, Nullable } from '@cn-map/gaode-shared/types';
+type LabelsLayerContext = Accessor<Nullable<AMap.LabelsLayer>>;
+export declare const getLabelsLayerContext: () => LabelsLayerContext, setLabelsLayerContext: (context: LabelsLayerContext) => LabelsLayerContext, hasLabelsLayerContext: () => boolean;
+export declare function useLabelsLayer(): LabelsLayerContext;
+/**
+ * 获取LabelsLayer实例
+ */
+export declare function useLabelsLayerInstance(): LabelsLayerContext;
+export {};

package/dist/layer/labels-layer/context.js

@@ -0,0 +1,15 @@
+import { lostContextError } from '@cn-map/gaode-shared/utils';
+import { createContext } from 'svelte';
+export const [getLabelsLayerContext, setLabelsLayerContext, hasLabelsLayerContext] = createContext();
+export function useLabelsLayer() {
+    if (!hasLabelsLayerContext()) {
+        throw lostContextError('`AMap.LabelsLayer`');
+    }
+    return getLabelsLayerContext();
+}
+/**
+ * 获取LabelsLayer实例
+ */
+export function useLabelsLayerInstance() {
+    return hasLabelsLayerContext() ? getLabelsLayerContext() : () => null;
+}

package/dist/layer/labels-layer/index.d.ts

@@ -0,0 +1,3 @@
+export { useLabelsLayer, useLabelsLayerInstance } from './context';
+export { default as LabelsLayer } from './labels-layer.svelte';
+export type { LabelsLayerProps } from './labels-layer.svelte';

package/dist/layer/labels-layer/index.js

@@ -0,0 +1,2 @@
+export { useLabelsLayer, useLabelsLayerInstance } from './context';
+export { default as LabelsLayer } from './labels-layer.svelte';

package/dist/layer/labels-layer/labels-layer.svelte

@@ -0,0 +1,91 @@
+<script lang="ts" generics="ExtData">
+  import type { MapEventProps } from '@cn-map/gaode-shared/types'
+  import type { Snippet } from 'svelte'
+  import type { Instance } from '../../types/index.js'
+  import { eventsToProps } from '@cn-map/gaode-shared/utils'
+  import { onDestroy } from 'svelte'
+  import { createEventListeners } from '../../hooks/index.js'
+  import { useMapInstance } from '../../map'
+  import { omitProps, snapshot } from '../../utils/index.js'
+  import { layerEvents, useLayerAttributes } from '../layer'
+  import { setLabelsLayerContext } from './context'
+
+  type LabelsLayerEvents<ExtData = any> = MapEventProps<AMap.LabelsLayerEventType, AMap.LabelsLayer<ExtData>>
+  interface LabelsLayerExtraInitOptions<ExtData = any> {
+    /**
+     * 标注点集合
+     */
+    labelMarkers?: AMap.LabelMarker<ExtData>[]
+  }
+  type LabelsLayerInitOptions<ExtData = any> = AMap.LabelsLayerOptions
+    & LabelsLayerExtraInitOptions<ExtData>
+    & Instance<AMap.LabelsLayer<ExtData>>
+
+  export type LabelsLayerProps<ExtData = any> = LabelsLayerInitOptions<ExtData>
+    & LabelsLayerEvents<ExtData> & { children?: Snippet }
+
+  const labelsLayerEvents: AMap.LabelsLayerEventType[] = layerEvents
+
+  let { instance = $bindable(), labelMarkers, children, ...props }: LabelsLayerProps = $props()
+
+  const map = $derived.by(useMapInstance(() => props.map))
+  const restProps = omitProps(() => props, 'map', ...eventsToProps(labelsLayerEvents))
+
+  const labelsLayer = $state.raw<AMap.LabelsLayer<ExtData>>(new AMap.LabelsLayer(snapshot(restProps)))
+
+  setLabelsLayerContext(() => labelsLayer)
+
+  $effect(() => {
+    instance = labelsLayer
+
+    return () => {
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    if (!map) return
+
+    labelsLayer.setMap(map)
+
+    return () => {
+      labelsLayer.setMap(null)
+    }
+  })
+
+  $effect(() => {
+    if (labelMarkers !== undefined) {
+      labelsLayer.add(labelMarkers)
+    }
+
+    return () => {
+      labelsLayer.remove(labelsLayer.getAllOverlays())
+    }
+  })
+
+  $effect(() => {
+    if (restProps.allowCollision !== undefined) {
+      labelsLayer.setAllowCollision(restProps.allowCollision)
+    }
+  })
+
+  $effect(() => {
+    if (restProps.collision !== undefined) {
+      labelsLayer.setCollision(restProps.collision)
+    }
+  })
+
+  useLayerAttributes(() => labelsLayer, restProps)
+
+  createEventListeners<AMap.LabelsLayerEventType, AMap.LabelsLayer<ExtData>>(
+    () => labelsLayer,
+    () => props,
+    labelsLayerEvents
+  )
+
+  onDestroy(() => labelsLayer.destroy())
+</script>
+
+{#if children && labelMarkers === undefined}
+  {@render children()}
+{/if}

package/dist/layer/labels-layer/labels-layer.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { MapEventProps } from '@cn-map/gaode-shared/types';
+import type { Snippet } from 'svelte';
+import type { Instance } from '../../types/index.ts';
+type LabelsLayerEvents<ExtData = any> = MapEventProps<AMap.LabelsLayerEventType, AMap.LabelsLayer<ExtData>>;
+interface LabelsLayerExtraInitOptions<ExtData = any> {
+    /**
+     * 标注点集合
+     */
+    labelMarkers?: AMap.LabelMarker<ExtData>[];
+}
+type LabelsLayerInitOptions<ExtData = any> = AMap.LabelsLayerOptions & LabelsLayerExtraInitOptions<ExtData> & Instance<AMap.LabelsLayer<ExtData>>;
+export type LabelsLayerProps<ExtData = any> = LabelsLayerInitOptions<ExtData> & LabelsLayerEvents<ExtData> & {
+    children?: Snippet;
+};
+declare function $$render<ExtData>(): {
+    props: LabelsLayerProps;
+    exports: {};
+    bindings: "instance";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<ExtData> {
+    props(): ReturnType<typeof $$render<ExtData>>['props'];
+    events(): ReturnType<typeof $$render<ExtData>>['events'];
+    slots(): ReturnType<typeof $$render<ExtData>>['slots'];
+    bindings(): "instance";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <ExtData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<ExtData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<ExtData>['props']>, ReturnType<__sveltets_Render<ExtData>['events']>, ReturnType<__sveltets_Render<ExtData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<ExtData>['bindings']>;
+    } & ReturnType<__sveltets_Render<ExtData>['exports']>;
+    <ExtData>(internal: unknown, props: ReturnType<__sveltets_Render<ExtData>['props']> & {}): ReturnType<__sveltets_Render<ExtData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LabelsLayer: $$IsomorphicComponent;
+type LabelsLayer<ExtData> = InstanceType<typeof LabelsLayer<ExtData>>;
+export default LabelsLayer;

package/dist/layer/layer/index.d.ts

@@ -0,0 +1,2 @@
+export { layerEvents, useLayerAttributes } from './layer.svelte';
+export type { LayerAttributes, LayerEvents, LayerInitOptions } from './layer.svelte';

package/dist/layer/layer/index.js

@@ -0,0 +1 @@
+export { layerEvents, useLayerAttributes } from './layer.svelte';

package/dist/layer/layer/layer.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { Accessor, MapEventProps } from '@cn-map/gaode-shared/types';
+export type LayerAttributes = Omit<LayerInitOptions, 'map'>;
+export type LayerEvents<T extends AMap.Layer> = MapEventProps<AMap.LayerEventType, T>;
+export type LayerInitOptions = AMap.LayerOptions;
+export declare const layerEvents: AMap.LayerEventType[];
+export declare function useLayerAttributes<T extends AMap.Layer, P extends LayerAttributes>(layer: Accessor<T>, props: P): void;

package/dist/layer/layer/layer.svelte.js

@@ -0,0 +1,29 @@
+import { complete } from '@cn-map/gaode-shared/const';
+export const layerEvents = [complete];
+export function useLayerAttributes(layer, props) {
+    $effect(() => {
+        if (props.opacity !== undefined) {
+            layer().setOpacity(props.opacity);
+        }
+    });
+    $effect(() => {
+        if (props.zooms !== undefined) {
+            layer().setZooms(props.zooms);
+        }
+    });
+    $effect(() => {
+        if (props.zIndex !== undefined) {
+            layer().setzIndex(props.zIndex);
+        }
+    });
+    $effect(() => {
+        if (props.visible !== undefined) {
+            if (props.visible) {
+                layer().show();
+            }
+            else {
+                layer().hide();
+            }
+        }
+    });
+}

package/dist/layer/layer-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LayerGroup } from './layer-group.svelte';
+export type { LayerGroupProps } from './layer-group.svelte';

package/dist/layer/layer-group/index.js

@@ -0,0 +1 @@
+export { default as LayerGroup } from './layer-group.svelte';

package/dist/layer/layer-group/layer-group.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  import type { MapEventProps } from '@cn-map/gaode-shared/types'
+  import type { Instance } from '../../types/index.js'
+  import { eventsToProps, eventToProp, lowercase } from '@cn-map/gaode-shared/utils'
+  import { onDestroy, untrack } from 'svelte'
+  import { useMapInstance } from '../../map'
+  import { omitProps, snapshot } from '../../utils/index.js'
+  import { layerEvents } from '../layer'
+
+  type LayerGroupEvents = MapEventProps<AMap.LayerGroupEventType, AMap.LayerGroupLayer>
+  interface LayerGroupExtraInitOptions {
+    map?: AMap.Map
+  }
+  interface LayerGroupInitOptions extends LayerGroupExtraInitOptions, Instance<AMap.LayerGroup> {
+    visible?: boolean
+    layers?: AMap.LayerGroupLayer[]
+  }
+
+  export type LayerGroupProps = LayerGroupInitOptions & LayerGroupEvents
+
+  const layerGroupEvents: AMap.LayerGroupEventType[] = layerEvents
+
+  let { instance = $bindable(), layers, ...props }: LayerGroupProps = $props()
+
+  const map = $derived.by(useMapInstance(() => props.map))
+  const restProps = omitProps(() => props, 'map', ...eventsToProps(layerGroupEvents))
+
+  const layerGroup = $state.raw<AMap.LayerGroup>(new AMap.LayerGroup(snapshot(untrack(() => layers))))
+
+  $effect(() => {
+    instance = layerGroup
+
+    return () => {
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    if (!map) return
+
+    layerGroup.setMap(map)
+
+    return () => {
+      layerGroup.setMap(null)
+    }
+  })
+
+  $effect(() => {
+    if (!layers) return
+
+    const current = new Set(layerGroup.getLayers() as AMap.LayerGroupLayer[])
+    const next = new Set(snapshot(layers) as AMap.LayerGroupLayer[])
+    const toRemove = [...current].filter(l => !next.has(l))
+    const toAdd = [...next].filter(l => !current.has(l))
+
+    if (toRemove.length) layerGroup.removeLayers(toRemove)
+    if (toAdd.length) layerGroup.addLayers(toAdd)
+  })
+
+  $effect(() => {
+    if (restProps.visible !== undefined) {
+      if (restProps.visible) {
+        layerGroup.show()
+      } else {
+        layerGroup.hide()
+      }
+    }
+  })
+
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  const boundMap = new Map<
+    AMap.LayerGroupLayer,
+    Map<AMap.LayerGroupEventType, AMap.EventCallback<AMap.LayerGroupEventType, AMap.LayerGroupLayer>>
+  >()
+
+  function dispose(): void {
+    for (const [layer, handlerMap] of boundMap) {
+      for (const [eventType, handler] of handlerMap) {
+        // @ts-expect-error TS2349
+        layer.off(lowercase(eventType), handler)
+      }
+
+      if ('destroy' in layer && typeof layer.destroy === 'function') {
+        layer.destroy()
+      }
+    }
+    boundMap.clear()
+  }
+
+  $effect(() => {
+    const current = layers
+
+    const nextLayers = current ? [...new Set(current)] : []
+
+    const nextSet = new Set(nextLayers)
+
+    for (const [layer, handlerMap] of boundMap) {
+      if (!nextSet.has(layer)) {
+        for (const [eventType, handler] of handlerMap) {
+          // @ts-expect-error TS2349
+          layer.off(lowercase(eventType), handler)
+        }
+        boundMap.delete(layer)
+
+        if ('destroy' in layer && typeof layer.destroy === 'function') {
+          layer.destroy()
+        }
+      }
+    }
+
+    for (const layer of nextLayers) {
+      if (boundMap.has(layer)) continue
+
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity
+      const handlerMap = new Map<
+        AMap.LayerGroupEventType,
+        AMap.EventCallback<AMap.LayerGroupEventType, AMap.LayerGroupLayer>
+      >()
+
+      for (const eventType of layerGroupEvents) {
+        const handler: AMap.EventCallback<AMap.LayerGroupEventType, AMap.LayerGroupLayer> = event => {
+          const fn = props[eventToProp(eventType)] as
+            | AMap.EventCallback<AMap.LayerGroupEventType, AMap.LayerGroupLayer>
+            | undefined
+          fn?.(event)
+        }
+
+        // @ts-expect-error TS2349
+        layer.on(lowercase(eventType), handler)
+        handlerMap.set(eventType, handler)
+      }
+
+      boundMap.set(layer, handlerMap)
+    }
+  })
+
+  onDestroy(() => {
+    dispose()
+    layerGroup.clearLayers()
+  })
+</script>

package/dist/layer/layer-group/layer-group.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { MapEventProps } from '@cn-map/gaode-shared/types';
+import type { Instance } from '../../types/index.ts';
+type LayerGroupEvents = MapEventProps<AMap.LayerGroupEventType, AMap.LayerGroupLayer>;
+interface LayerGroupExtraInitOptions {
+    map?: AMap.Map;
+}
+interface LayerGroupInitOptions extends LayerGroupExtraInitOptions, Instance<AMap.LayerGroup> {
+    visible?: boolean;
+    layers?: AMap.LayerGroupLayer[];
+}
+export type LayerGroupProps = LayerGroupInitOptions & LayerGroupEvents;
+declare const LayerGroup: import("svelte").Component<LayerGroupProps, {}, "instance">;
+type LayerGroup = ReturnType<typeof LayerGroup>;
+export default LayerGroup;

package/dist/layer/mapbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Mapbox } from './mapbox.svelte';
+export type { MapboxProps } from './mapbox.svelte';

package/dist/layer/mapbox/index.js

@@ -0,0 +1 @@
+export { default as Mapbox } from './mapbox.svelte';

package/dist/layer/mapbox/mapbox.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { MapEventProps } from '@cn-map/gaode-shared/types'
+  import type { Snippet } from 'svelte'
+  import type { Instance } from '../../types/index.js'
+  import { eventsToProps } from '@cn-map/gaode-shared/utils'
+  import { onDestroy } from 'svelte'
+  import { createEventListeners } from '../../hooks/index.js'
+  import { useMapInstance } from '../../map'
+  import { omitProps, snapshot } from '../../utils/index.js'
+  import { layerEvents, useLayerAttributes } from '../layer'
+
+  type MapboxEvents = MapEventProps<AMap.MapboxEventType, AMap.Mapbox>
+  type MapboxInitOptions = AMap.MapboxOptions & Instance<AMap.Mapbox>
+
+  export type MapboxProps = MapboxInitOptions & MapboxEvents & { children?: Snippet }
+
+  const mapboxEvents: AMap.MapboxEventType[] = layerEvents
+
+  let { instance = $bindable(), ...props }: MapboxProps = $props()
+
+  const map = $derived.by(useMapInstance(() => props.map))
+  const restProps = omitProps(() => props, 'map', ...eventsToProps(mapboxEvents))
+
+  const mapbox = $state.raw<AMap.Mapbox>(new AMap.Mapbox(snapshot(restProps)))
+
+  $effect(() => {
+    instance = mapbox
+
+    return () => {
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    if (!map) return
+
+    mapbox.setMap(map)
+
+    return () => {
+      mapbox.setMap(null)
+    }
+  })
+
+  useLayerAttributes(() => mapbox, restProps)
+
+  createEventListeners<AMap.MapboxEventType, AMap.Mapbox>(
+    () => mapbox,
+    () => props,
+    mapboxEvents
+  )
+
+  onDestroy(() => mapbox.destroy())
+</script>

package/dist/layer/mapbox/mapbox.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { MapEventProps } from '@cn-map/gaode-shared/types';
+import type { Snippet } from 'svelte';
+import type { Instance } from '../../types/index.ts';
+type MapboxEvents = MapEventProps<AMap.MapboxEventType, AMap.Mapbox>;
+type MapboxInitOptions = AMap.MapboxOptions & Instance<AMap.Mapbox>;
+export type MapboxProps = MapboxInitOptions & MapboxEvents & {
+    children?: Snippet;
+};
+declare const Mapbox: import("svelte").Component<MapboxProps, {}, "instance">;
+type Mapbox = ReturnType<typeof Mapbox>;
+export default Mapbox;

package/dist/layer/mapbox-vector-tile-layer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MapboxVectorTileLayer } from './mapbox-vector-tile-layer.svelte';
+export type { MapboxVectorTileLayerProps } from './mapbox-vector-tile-layer.svelte';

package/dist/layer/mapbox-vector-tile-layer/index.js

@@ -0,0 +1 @@
+export { default as MapboxVectorTileLayer } from './mapbox-vector-tile-layer.svelte';

package/dist/layer/mapbox-vector-tile-layer/mapbox-vector-tile-layer.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { MapEventProps } from '@cn-map/gaode-shared/types'
+  import type { Instance } from '../../types/index.js'
+  import { eventsToProps } from '@cn-map/gaode-shared/utils'
+  import { onDestroy } from 'svelte'
+  import { createEventListeners } from '../../hooks/index.js'
+  import { useMapInstance } from '../../map'
+  import { omitProps, snapshot } from '../../utils/index.js'
+  import { layerEvents } from '../layer'
+  import useTileLayerAttributes from '../tile-layer/tile-layer/use-attributes.svelte'
+
+  type MapboxVectorTileLayerAttributes = Omit<MapboxVectorTileLayerInitOptions, 'map' | 'instance'>
+  type MapboxVectorTileLayerEvents = MapEventProps<AMap.MapboxVectorTileLayerEventType, AMap.MapboxVectorTileLayer>
+  type MapboxVectorTileLayerInitOptions = AMap.MapboxVectorTileLayerOptions & Instance<AMap.MapboxVectorTileLayer>
+
+  export type MapboxVectorTileLayerProps = MapboxVectorTileLayerInitOptions & MapboxVectorTileLayerEvents
+
+  const mvtLayerEvents: AMap.MapboxVectorTileLayerEventType[] = layerEvents
+
+  let { instance = $bindable(), ...props }: MapboxVectorTileLayerProps = $props()
+
+  const map = $derived.by(useMapInstance(() => props.map))
+  const restProps = omitProps(() => props, 'map', ...eventsToProps(mvtLayerEvents))
+
+  const mvtLayer = $state.raw<AMap.MapboxVectorTileLayer>(new AMap.MapboxVectorTileLayer(snapshot(restProps)))
+
+  $effect(() => {
+    instance = mvtLayer
+
+    return () => {
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    if (!map) return
+
+    mvtLayer.setMap(map)
+
+    return () => {
+      mvtLayer.getLabelsLayer().setMap(null)
+      mvtLayer.setMap(null)
+    }
+  })
+
+  // @ts-expect-error fine
+  useTileLayerAttributes<AMap.MapboxVectorTileLayer, MapboxVectorTileLayerAttributes, 'MapboxVectorTileLayer'>(
+    () => mvtLayer,
+    restProps
+  )
+
+  $effect(() => {
+    if (restProps.styles !== undefined) {
+      mvtLayer.setStyle(snapshot(restProps.styles))
+    }
+  })
+
+  createEventListeners<AMap.MapboxVectorTileLayerEventType, AMap.MapboxVectorTileLayer>(
+    () => mvtLayer,
+    () => props,
+    mvtLayerEvents
+  )
+
+  onDestroy(() => {
+    mvtLayer.getLabelsLayer().destroy()
+    mvtLayer.destroy()
+  })
+</script>

package/dist/layer/mapbox-vector-tile-layer/mapbox-vector-tile-layer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MapEventProps } from '@cn-map/gaode-shared/types';
+import type { Instance } from '../../types/index.ts';
+type MapboxVectorTileLayerEvents = MapEventProps<AMap.MapboxVectorTileLayerEventType, AMap.MapboxVectorTileLayer>;
+type MapboxVectorTileLayerInitOptions = AMap.MapboxVectorTileLayerOptions & Instance<AMap.MapboxVectorTileLayer>;
+export type MapboxVectorTileLayerProps = MapboxVectorTileLayerInitOptions & MapboxVectorTileLayerEvents;
+declare const MapboxVectorTileLayer: import("svelte").Component<MapboxVectorTileLayerProps, {}, "instance">;
+type MapboxVectorTileLayer = ReturnType<typeof MapboxVectorTileLayer>;
+export default MapboxVectorTileLayer;