@cn-map/gaode-svelte 0.0.0 → 0.0.1

package/dist/map/context.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor, Nullable } from '@cn-map/gaode-shared/types';
+type MapContext = Accessor<Nullable<AMap.Map>>;
+export declare const getMapContext: () => MapContext, setMapContext: (context: MapContext) => MapContext, hasMapContext: () => boolean;
+export declare function useMap(): MapContext;
+/**
+ * 获取地图实例，优先使用 props.map，否则回退到上下文中的地图实例
+ */
+export declare function useMapInstance(mapInProps: Accessor<AMap.Map | null | undefined>): MapContext;
+export {};

package/dist/map/context.js

@@ -0,0 +1,15 @@
+import { lostContextError } from '@cn-map/gaode-shared/utils';
+import { createContext } from 'svelte';
+export const [getMapContext, setMapContext, hasMapContext] = createContext();
+export function useMap() {
+    if (!hasMapContext()) {
+        throw lostContextError('`AMap.Map`');
+    }
+    return getMapContext();
+}
+/**
+ * 获取地图实例，优先使用 props.map，否则回退到上下文中的地图实例
+ */
+export function useMapInstance(mapInProps) {
+    return () => mapInProps() ?? (hasMapContext() ? getMapContext()() : null);
+}

package/dist/map/index.d.ts

@@ -0,0 +1,3 @@
+export { useMap, useMapInstance } from './context';
+export { default as Map } from './map.svelte';
+export type { MapProps } from './map.svelte';

package/dist/map/index.js

@@ -0,0 +1,2 @@
+export { useMap, useMapInstance } from './context';
+export { default as Map } from './map.svelte';

package/dist/map/map.svelte

@@ -0,0 +1,323 @@
+<script lang="ts">
+  import type { MapEventProps, Nullable } from '@cn-map/gaode-shared/types'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Instance } from '../types/index.js'
+  import {
+    click,
+    complete,
+    dblClick,
+    dragEnd,
+    dragging,
+    dragStart,
+    hotspotClick,
+    hotspotOut,
+    hotspotOver,
+    mapMove,
+    mouseDown,
+    mouseMove,
+    mouseOut,
+    mouseOver,
+    mouseUp,
+    mouseWheel,
+    moveEnd,
+    moveStart,
+    pitchChange,
+    pitchEnd,
+    pitchStart,
+    resize,
+    rightClick,
+    rotateChange,
+    rotateEnd,
+    rotateStart,
+    touchEnd,
+    touchMove,
+    touchStart,
+    viewChange,
+    zoomChange,
+    zoomEnd,
+    zoomStart,
+  } from '@cn-map/gaode-shared/const'
+  import { patchMap } from '@cn-map/gaode-shared/patch'
+  import { eventsToProps, logger } from '@cn-map/gaode-shared/utils'
+  import { tick, untrack } from 'svelte'
+  import { createEventListeners } from '../hooks/index.js'
+  import { omitProps, snapshot } from '../utils/index.js'
+  import { setMapContext } from './context'
+
+  type MapEvents = MapEventProps<AMap.MapEventType, AMap.Map>
+  interface MapContainer {
+    /**
+     * 地图容器元素 或 容器 id
+     */
+    container?: HTMLDivElement | string
+  }
+  type SetOption = 'center' | 'zoom' | 'rotation' | 'pitch'
+  type MapContainerAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'class' | 'children'>
+  interface MapSetOptions {
+    /**
+     * 镜头是否立即过渡到目标位置, 支持单独设置
+     */
+    immediately?: boolean | Partial<Record<SetOption, boolean>>
+    /**
+     * 镜头动画时长，支持单独设置
+     */
+    duration?: number | Partial<Record<SetOption, number>>
+  }
+
+  export type MapProps = AMap.MapOptions
+    & MapSetOptions
+    & MapContainer
+    & MapContainerAttributes
+    & MapEvents
+    & Instance<AMap.Map>
+
+  const mapEvents: AMap.MapEventType[] = [
+    click,
+    complete,
+    dblClick,
+    dragEnd,
+    dragging,
+    dragStart,
+    hotspotClick,
+    hotspotOut,
+    hotspotOver,
+    mapMove,
+    viewChange,
+    mouseDown,
+    mouseMove,
+    mouseOut,
+    mouseOver,
+    mouseUp,
+    mouseWheel,
+    moveEnd,
+    moveStart,
+    pitchChange,
+    pitchEnd,
+    pitchStart,
+    resize,
+    rightClick,
+    rotateChange,
+    rotateEnd,
+    rotateStart,
+    touchEnd,
+    touchMove,
+    touchStart,
+    zoomChange,
+    zoomEnd,
+    zoomStart,
+  ]
+
+  const mapSetOptions = [
+    ['center', 'setCenter'],
+    ['pitch', 'setPitch'],
+    ['rotation', 'setRotation'],
+    ['zoom', 'setZoom'],
+  ] as const
+
+  const mapStatusKeys: (keyof AMap.MapStatus)[] = [
+    'allBubble',
+    'animateEnable',
+    'doubleClickZoom',
+    'dragEnable',
+    'features',
+    'isHotspot',
+    'jogEnable',
+    'keyboardEnable',
+    'pickWhenMoving',
+    'pitchEnable',
+    'rotateEnable',
+    'scrollWheel',
+    'showBuildingBlock',
+    'touchZoom',
+    'touchZoomCenter',
+    'zoomEnable',
+    'zoomSpeed',
+  ]
+
+  function getContainer(container: MapProps['container']) {
+    if (container === undefined) return container
+    if (typeof container === 'string') {
+      return document.getElementById(container) as HTMLDivElement
+    } else {
+      return container
+    }
+  }
+
+  function resetStyle(target: HTMLDivElement | undefined, property: string, value: string | undefined) {
+    if (value) {
+      target?.style.setProperty(property, value)
+    } else {
+      target?.style.removeProperty(property)
+    }
+  }
+
+  let { children, container, id, instance = $bindable(), ...props }: MapProps = $props()
+
+  const uid = $props.id()
+  const targetId = $derived(id ?? `map-gaode-${uid}`)
+
+  patchMap()
+
+  let el = $state<HTMLDivElement>()
+  const containerStyles = $state<{ cursor?: string; backgroundColor?: string }>({})
+  let map = $state.raw<Nullable<AMap.Map>>(null)
+
+  setMapContext(() => map)
+
+  $effect(() => {
+    instance = map
+
+    return () => {
+      instance = null
+    }
+  })
+
+  async function setContainer(node: HTMLDivElement) {
+    if (node === el) return
+
+    if (node.offsetWidth === 0 || node.offsetHeight === 0) {
+      await tick()
+    }
+
+    el = node
+    containerStyles.cursor = el.style.getPropertyValue('cursor')
+    containerStyles.backgroundColor = el.style.getPropertyValue('background-color')
+
+    try {
+      map = new AMap.Map(
+        el,
+        snapshot(
+          omitProps(
+            () => props,
+            'class',
+            'style',
+            'immediately',
+            'duration',
+            ...eventsToProps<AMap.MapEventType>(mapEvents)
+          )
+        )
+      )
+    } catch (e) {
+      logger.error('init map error', e)
+    }
+  }
+
+  function setEl(node: HTMLDivElement | null) {
+    if (node) {
+      setContainer(node)
+    } else {
+      destroyMap()
+    }
+  }
+
+  function destroyMap() {
+    el?.classList.remove('amap-container')
+    resetStyle(el, 'cursor', containerStyles.cursor)
+    resetStyle(el, 'background-color', containerStyles.backgroundColor)
+
+    map?.clearInfoWindow()
+    map?.clearMap()
+    map?.destroy()
+    map = null
+  }
+
+  $effect(() => {
+    const target = getContainer(container)
+    if (!target) return
+
+    untrack(() => setContainer(target))
+
+    return () => destroyMap()
+  })
+
+  mapSetOptions.forEach(([key, method]) => {
+    $effect.pre(() => {
+      const value = props[key]
+      if (value === undefined) return
+
+      untrack(() => {
+        map?.[method](
+          key === 'center' ? (snapshot(value) as any) : (value as any),
+          typeof props.immediately === 'boolean' ? props.immediately : props.immediately?.[key],
+          typeof props.duration === 'number' ? props.duration : props.duration?.[key]
+        )
+      })
+    })
+  })
+
+  $effect.pre(() => {
+    const zooms = props.zooms
+    if (zooms === undefined) return
+
+    untrack(() => map?.setZooms(snapshot(zooms)))
+  })
+
+  $effect.pre(() => {
+    const labelRejectMask = props.labelRejectMask
+    if (labelRejectMask === undefined) return
+
+    untrack(() => map?.setLabelRejectMask(labelRejectMask))
+  })
+
+  $effect.pre(() => {
+    const mapStyle = props.mapStyle
+    if (mapStyle === undefined) return
+
+    untrack(() => {
+      if (mapStyle !== map?.getMapStyle()) {
+        map?.setMapStyle(mapStyle)
+      }
+    })
+  })
+
+  $effect.pre(() => {
+    const mask = props.mask
+    if (mask === undefined) return
+
+    untrack(() => map?.setMask(snapshot(mask)))
+  })
+
+  $effect.pre(() => {
+    const layers = props.layers
+    if (layers === undefined) return
+
+    untrack(() => map?.setLayers(layers))
+  })
+
+  $effect.pre(() => {
+    const showLabel = props.showLabel
+    if (showLabel === undefined) return
+
+    untrack(() => {
+      map?.set('showLabel', showLabel)
+      map?.setNeedUpdate(true)
+    })
+  })
+
+  mapStatusKeys.forEach(key => {
+    $effect.pre(() => {
+      const value = props[key]
+      untrack(() => map?.setStatus({ [key]: value }))
+    })
+  })
+
+  createEventListeners<AMap.MapEventType, AMap.Map>(
+    () => map,
+    () => props,
+    mapEvents
+  )
+</script>
+
+{#if container === undefined}
+  <div
+    id={targetId}
+    bind:this={() => el, setEl}
+    class={props.class}
+    style:width="100%"
+    style:height="100%"
+    style={props.style}
+  ></div>
+{/if}
+{#if children}
+  {@render children()}
+{/if}

package/dist/map/map.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { MapEventProps } from '@cn-map/gaode-shared/types';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Instance } from '../types/index.ts';
+type MapEvents = MapEventProps<AMap.MapEventType, AMap.Map>;
+interface MapContainer {
+    /**
+     * 地图容器元素 或 容器 id
+     */
+    container?: HTMLDivElement | string;
+}
+type SetOption = 'center' | 'zoom' | 'rotation' | 'pitch';
+type MapContainerAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'class' | 'children'>;
+interface MapSetOptions {
+    /**
+     * 镜头是否立即过渡到目标位置, 支持单独设置
+     */
+    immediately?: boolean | Partial<Record<SetOption, boolean>>;
+    /**
+     * 镜头动画时长，支持单独设置
+     */
+    duration?: number | Partial<Record<SetOption, number>>;
+}
+export type MapProps = AMap.MapOptions & MapSetOptions & MapContainer & MapContainerAttributes & MapEvents & Instance<AMap.Map>;
+declare const Map: import("svelte").Component<MapProps, {}, "instance">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/overlay/bezier-curve/bezier-curve.svelte

@@ -0,0 +1,79 @@
+<script lang="ts" generics="ExtData">
+  import type { MapEventProps } from '@cn-map/gaode-shared/types'
+  import type { Instance } from '../../types/index.js'
+  import type { VectorOverlayExtraInitOptions } from '../vector-overlay'
+  import { eventsToProps } from '@cn-map/gaode-shared/utils'
+  import { onDestroy } from 'svelte'
+  import { createEventListeners } from '../../hooks/index.js'
+  import { useVectorLayerInstance } from '../../layer/vector-layer'
+  import { useMapInstance } from '../../map'
+  import { omitProps, snapshot } from '../../utils/index.js'
+  import { useVectorOverlayAttributes, vectorOverlayEvents } from '../vector-overlay'
+
+  type BezierCurveEvents<ExtData> = MapEventProps<AMap.BezierCurveEventType, AMap.BezierCurve<ExtData>>
+  type BezierCurveInitOptions<ExtData = any> = AMap.BezierCurveOptions<ExtData>
+    & VectorOverlayExtraInitOptions
+    & Instance<AMap.BezierCurve<ExtData>>
+
+  export type BezierCurveProps<ExtData = any> = BezierCurveInitOptions<ExtData> & BezierCurveEvents<ExtData>
+
+  const bezierCurveEvents: AMap.BezierCurveEventType[] = vectorOverlayEvents
+
+  let { instance = $bindable(), ...props }: BezierCurveProps = $props()
+
+  const map = $derived.by(useMapInstance(() => props.map))
+  const restProps = omitProps(() => props, 'map', ...eventsToProps(bezierCurveEvents))
+
+  const bezierCurve = $state.raw<AMap.BezierCurve<ExtData>>(new AMap.BezierCurve(snapshot(restProps)))
+
+  $effect(() => {
+    instance = bezierCurve
+
+    return () => {
+      instance = null
+    }
+  })
+
+  const getVectorLayer = useVectorLayerInstance()
+
+  $effect(() => {
+    const vectorLayer = getVectorLayer()
+    if (vectorLayer) {
+      vectorLayer.add(bezierCurve)
+
+      return () => {
+        vectorLayer.remove(bezierCurve)
+      }
+    } else {
+      if (!map) return
+
+      map.add(bezierCurve)
+
+      return () => {
+        map.remove(bezierCurve)
+      }
+    }
+  })
+
+  useVectorOverlayAttributes(() => bezierCurve, restProps)
+
+  const rest = omitProps(() => restProps, ['draggable', 'extData', 'visible', 'path'])
+
+  $effect(() => {
+    bezierCurve.setOptions(snapshot(rest))
+  })
+
+  $effect(() => {
+    const path = snapshot(restProps.path)
+    bezierCurve.setPath(path)
+    bezierCurve.getMap()?.setNeedUpdate(true)
+  })
+
+  createEventListeners<AMap.BezierCurveEventType, AMap.BezierCurve<ExtData>>(
+    () => bezierCurve,
+    () => props,
+    bezierCurveEvents
+  )
+
+  onDestroy(() => bezierCurve.destroy())
+</script>

package/dist/overlay/bezier-curve/bezier-curve.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { MapEventProps } from '@cn-map/gaode-shared/types';
+import type { Instance } from '../../types/index.ts';
+import type { VectorOverlayExtraInitOptions } from '../vector-overlay';
+type BezierCurveEvents<ExtData> = MapEventProps<AMap.BezierCurveEventType, AMap.BezierCurve<ExtData>>;
+type BezierCurveInitOptions<ExtData = any> = AMap.BezierCurveOptions<ExtData> & VectorOverlayExtraInitOptions & Instance<AMap.BezierCurve<ExtData>>;
+export type BezierCurveProps<ExtData = any> = BezierCurveInitOptions<ExtData> & BezierCurveEvents<ExtData>;
+declare function $$render<ExtData>(): {
+    props: BezierCurveProps;
+    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 BezierCurve: $$IsomorphicComponent;
+type BezierCurve<ExtData> = InstanceType<typeof BezierCurve<ExtData>>;
+export default BezierCurve;

package/dist/overlay/bezier-curve/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BezierCurve } from './bezier-curve.svelte';
+export type { BezierCurveProps } from './bezier-curve.svelte';

package/dist/overlay/bezier-curve/index.js

@@ -0,0 +1 @@
+export { default as BezierCurve } from './bezier-curve.svelte';

package/dist/overlay/circle/circle.svelte

@@ -0,0 +1,84 @@
+<script lang="ts" generics="ExtData">
+  import type { MapEventProps } from '@cn-map/gaode-shared/types'
+  import type { Instance } from '../../types/index.js'
+  import type { VectorOverlayExtraInitOptions } from '../vector-overlay'
+  import { eventsToProps } from '@cn-map/gaode-shared/utils'
+  import { onDestroy } from 'svelte'
+  import { createEventListeners } from '../../hooks/index.js'
+  import { useVectorLayerInstance } from '../../layer/vector-layer'
+  import { useMapInstance } from '../../map'
+  import { omitProps, snapshot } from '../../utils/index.js'
+  import { useVectorOverlayAttributes, vectorOverlayEvents } from '../vector-overlay'
+
+  type CircleEvents<ExtData> = MapEventProps<AMap.CircleEventType, AMap.Circle<ExtData>>
+
+  type CircleInitOptions<ExtData = any> = AMap.CircleOptions<ExtData>
+    & VectorOverlayExtraInitOptions
+    & Instance<AMap.Circle<ExtData>>
+
+  export type CircleProps<ExtData = any> = CircleInitOptions<ExtData> & CircleEvents<ExtData>
+
+  const circleEvents: AMap.CircleEventType[] = vectorOverlayEvents
+
+  let { instance = $bindable(), ...props }: CircleProps = $props()
+
+  const map = $derived.by(useMapInstance(() => props.map))
+  const restProps = omitProps(() => props, 'map', ...eventsToProps(circleEvents))
+
+  const circle = $state.raw<AMap.Circle<ExtData>>(new AMap.Circle(snapshot(restProps)))
+
+  $effect(() => {
+    instance = circle
+
+    return () => {
+      instance = null
+    }
+  })
+
+  const getVectorLayer = useVectorLayerInstance()
+
+  $effect(() => {
+    const vectorLayer = getVectorLayer()
+    if (vectorLayer) {
+      vectorLayer.add(circle)
+
+      return () => {
+        vectorLayer.remove(circle)
+      }
+    } else {
+      if (!map) return
+
+      map.add(circle)
+
+      return () => {
+        map.remove(circle)
+      }
+    }
+  })
+
+  useVectorOverlayAttributes(() => circle, restProps)
+
+  $effect(() => {
+    if (restProps.center !== undefined) {
+      circle.setCenter(snapshot(restProps.center))
+    }
+  })
+
+  $effect(() => {
+    if (restProps.radius !== undefined) {
+      circle.setRadius(restProps.radius)
+    }
+  })
+
+  $effect(() => {
+    circle.setOptions(snapshot(omitProps(() => restProps, ['draggable', 'extData', 'visible', 'center', 'radius'])))
+  })
+
+  createEventListeners<AMap.CircleEventType, AMap.Circle<ExtData>>(
+    () => circle,
+    () => props,
+    circleEvents
+  )
+
+  onDestroy(() => circle.destroy())
+</script>

package/dist/overlay/circle/circle.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { MapEventProps } from '@cn-map/gaode-shared/types';
+import type { Instance } from '../../types/index.ts';
+import type { VectorOverlayExtraInitOptions } from '../vector-overlay';
+type CircleEvents<ExtData> = MapEventProps<AMap.CircleEventType, AMap.Circle<ExtData>>;
+type CircleInitOptions<ExtData = any> = AMap.CircleOptions<ExtData> & VectorOverlayExtraInitOptions & Instance<AMap.Circle<ExtData>>;
+export type CircleProps<ExtData = any> = CircleInitOptions<ExtData> & CircleEvents<ExtData>;
+declare function $$render<ExtData>(): {
+    props: CircleProps;
+    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 Circle: $$IsomorphicComponent;
+type Circle<ExtData> = InstanceType<typeof Circle<ExtData>>;
+export default Circle;

package/dist/overlay/circle/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Circle } from './circle.svelte';
+export type { CircleProps } from './circle.svelte';

package/dist/overlay/circle/index.js

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