@cn-map/gaode-svelte 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present Jungzl.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,287 @@
-# Temporary Holding Version
+# @cn-map/gaode-svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+高德地图 Svelte 组件库，基于高德地图 JavaScript API 2.0 开发。提供了一套 Svelte 5 组件、工具和类型定义，用于构建高德地图应用。
+
+## 特性
+
+- 🎯 **类型友好** - 组件与 Hooks 提供类型定义
+- 🚀 **Svelte 5 兼容** - 支持最新的 Svelte 5 特性和 Runes
+- 🎨 **丰富的组件** - 覆盖地图、覆盖物、图层、控件与常用工具
+- 🧩 **可与原生 API 混用** - WebService 等未封装能力可直接调用原生 `AMap.*`
+- 📊 **3D 可视化** - 基于 Loca 的可视化组件
+- 🛠️ **易于使用** - 简洁的 API 设计
+- 📦 **按需加载** - 支持组件按需导入
+- ⚡ **细粒度响应式** - 利用 Svelte 5 的响应式系统
+
+## 安装
+
+```bash
+npm install @cn-map/gaode-svelte
+```
+
+```bash
+yarn add @cn-map/gaode-svelte
+```
+
+```bash
+pnpm add @cn-map/gaode-svelte
+```
+
+```bash
+bun add @cn-map/gaode-svelte
+```
+
+TypeScript 类型见 [`@cn-map/gaode-types`](../types/README.md)。
+
+## 使用示例
+
+### 基础地图
+
+```svelte
+<script lang="ts">
+  import { APILoader, LoadStatus, Map, Marker, useAPIStatus } from '@cn-map/gaode-svelte'
+
+  const status = useAPIStatus('AMap')
+</script>
+
+<APILoader key="YOUR_AMAP_KEY">
+  {#if status() === LoadStatus.Loaded}
+    <Map center={[116.397428, 39.90923]} style="height: 400px" zoom={13}>
+      <Marker position={[116.397428, 39.90923]} />
+    </Map>
+  {/if}
+</APILoader>
+```
+
+or
+
+```svelte
+<script lang="ts">
+  import { APILoader, LoadStatus, Map, Marker } from '@cn-map/gaode-svelte'
+</script>
+
+<APILoader key="YOUR_AMAP_KEY">
+  {#snippet children(status)}
+    {#if status().AMap === LoadStatus.Loaded}
+      <Map center={[116.397428, 39.90923]} style="height: 400px" zoom={13}>
+        <Marker position={[116.397428, 39.90923]} />
+      </Map>
+    {/if}
+  {/snippet}
+</APILoader>
+```
+
+### 使用 Loca 可视化
+
+```svelte
+<script lang="ts">
+  import { APILoader, LoadStatus, Map, useAPIStatus } from '@cn-map/gaode-svelte'
+  import { GeoJSONSource, HeatMapLayer, Loca } from '@cn-map/gaode-svelte/loca'
+
+  const status = useAPIStatus()
+</script>
+
+<APILoader key="YOUR_AMAP_KEY" Loca={{}}>
+  {#if status().AMap === LoadStatus.Loaded}
+    <Map
+      center={[102.618687, 31.790976]}
+      mapStyle="amap://styles/whitesmoke"
+      pitch={40}
+      style="height: 400px"
+      viewMode="3D"
+      zoom={4}
+      zooms={[4, 7]}
+    >
+      {#if status().Loca === LoadStatus.Loaded}
+        <Loca>
+          <GeoJSONSource url="https://a.amap.com/Loca/static/loca-v2/demos/mock_data/traffic.json">
+            <HeatMapLayer
+              opacity={1}
+              style={{
+                gradient: {
+                  0.1: '#2A85B8',
+                  0.2: '#16B0A9',
+                  0.3: '#29CF6F',
+                  0.4: '#5CE182',
+                  0.5: '#7DF675',
+                  0.6: '#FFF100',
+                  0.7: '#FAA53F',
+                  1.0: '#D04343',
+                },
+                height: 500000,
+                heightBezier: [0, 0.53, 0.37, 0.98],
+                radius: 200000,
+                value(index, feature) {
+                  const value = Number.parseFloat(feature.properties.mom)
+                  return value + 10 * Math.random()
+                },
+                unit: 'meter',
+              }}
+              visible={true}
+              zIndex={10}
+            />
+          </GeoJSONSource>
+        </Loca>
+      {/if}
+    </Map>
+  {/if}
+</APILoader>
+```
+
+## 核心组件
+
+### API 加载器
+
+| 导出名称           | 类型 | 描述                           |
+| ------------------ | ---- | ------------------------------ |
+| `APILoader`        | 组件 | 高德地图 JavaScript API 加载器 |
+| `APILoaderOptions` | 类型 | APILoader 组件的配置选项       |
+| `LoadStatus`       | 枚举 | 表示加载状态的枚举值           |
+| `useAPILoader`     | 函数 | 加载高德地图 API               |
+| `useAPIStatus`     | 函数 | 检查 API 加载状态              |
+
+### 地图组件
+
+| 导出名称 | 类型 | 描述         |
+| -------- | ---- | ------------ |
+| `Map`    | 组件 | 地图容器组件 |
+| `useMap` | 函数 | 获取地图实例 |
+
+### 地图控制组件
+
+| 导出名称      | 类型 | 描述             |
+| ------------- | ---- | ---------------- |
+| `ControlBar`  | 组件 | 组合控件         |
+| `Geolocation` | 组件 | 定位控件         |
+| `HawkEye`     | 组件 | 鹰眼控件         |
+| `MapType`     | 组件 | 地图类型切换控件 |
+| `Scale`       | 组件 | 比例尺控件       |
+| `ToolBar`     | 组件 | 工具条控件       |
+
+### 地图图层
+
+| 导出名称                     | 类型 | 描述             |
+| ---------------------------- | ---- | ---------------- |
+| `Buildings`, `BuildingLayer` | 组件 | 楼块图层         |
+| `CanvasLayer`                | 组件 | Canvas 图层      |
+| `CustomLayer`                | 组件 | 自定义图层       |
+| `DistrictLayer`              | 组件 | 行政区图层       |
+| `Country`                    | 组件 | 国家图层         |
+| `Province`                   | 组件 | 省份图层         |
+| `World`                      | 组件 | 世界图层         |
+| `Flexible`                   | 组件 | 灵活切片图层     |
+| `GLCustomLayer`              | 组件 | WebGL 自定义图层 |
+| `HeatMap`                    | 组件 | 热力图图层       |
+| `ImageLayer`                 | 组件 | 图片图层         |
+| `IndoorMap`                  | 组件 | 室内地图图层     |
+| `LabelsLayer`                | 组件 | 标注图层         |
+| `LayerGroup`                 | 组件 | 图层群组         |
+| `Mapbox`                     | 组件 | Mapbox 图层      |
+| `MapboxVectorTileLayer`      | 组件 | MVT 图层         |
+| `TileLayer`                  | 组件 | 切片图层         |
+| `Flexible`                   | 组件 | 灵活切片图层     |
+| `Mark`                       | 组件 | 白嫖标记图层     |
+| `RoadNet`                    | 组件 | 路网图层         |
+| `Satellite`                  | 组件 | 卫星图层         |
+| `Traffic`                    | 组件 | 实时交通图层     |
+| `WMS`                        | 组件 | WMS 图层         |
+| `WMTS`                       | 组件 | WMTS 图层        |
+| `VectorLayer`                | 组件 | 矢量图层         |
+
+### 覆盖物组件
+
+| 导出名称        | 类型 | 描述           |
+| --------------- | ---- | -------------- |
+| `BezierCurve`   | 组件 | 贝塞尔曲线     |
+| `Circle`        | 组件 | 圆形           |
+| `CircleMarker`  | 组件 | 圆点标记       |
+| `ContextMenu`   | 组件 | 右键菜单       |
+| `ElasticMarker` | 组件 | 灵活点标记     |
+| `Ellipse`       | 组件 | 椭圆           |
+| `IndexCluster`  | 组件 | 索引点聚合     |
+| `InfoWindow`    | 组件 | 信息窗体       |
+| `LabelMarker`   | 组件 | 标注标记       |
+| `Marker`        | 组件 | 点标记         |
+| `MarkerCluster` | 组件 | 点聚合         |
+| `MassMarks`     | 组件 | 海量点         |
+| `OverlayGroup`  | 组件 | 覆盖物群组     |
+| `Polygon`       | 组件 | 多边形         |
+| `Polyline`      | 组件 | 折线           |
+| `Rectangle`     | 组件 | 矩形           |
+| `Text`          | 组件 | 文本标记       |
+| `VectorOverlay` | 组件 | 矢量图形覆盖物 |
+
+### 工具组件
+
+| 导出名称            | 类型 | 描述             |
+| ------------------- | ---- | ---------------- |
+| `BezierCurveEditor` | 组件 | 贝塞尔曲线编辑器 |
+| `CircleEditor`      | 组件 | 圆形编辑器       |
+| `EllipseEditor`     | 组件 | 椭圆编辑器       |
+| `MouseTool`         | 组件 | 鼠标工具         |
+| `PolygonEditor`     | 组件 | 多边形编辑器     |
+| `PolylineEditor`    | 组件 | 折线编辑器       |
+| `RangingTool`       | 组件 | 测距工具         |
+| `RectangleEditor`   | 组件 | 矩形编辑器       |
+
+## Loca 可视化组件
+
+基于 Loca 库的高级 3D 可视化组件，从 `@cn-map/gaode-svelte/loca` 导入：：
+
+### Loca 容器
+
+| 导出名称  | 类型 | 描述           |
+| --------- | ---- | -------------- |
+| `Loca`    | 组件 | Loca 容器组件  |
+| `useLoca` | 函数 | 访问 Loca 实例 |
+
+### Loca 图层
+
+| 导出名称         | 类型 | 描述         |
+| ---------------- | ---- | ------------ |
+| `GridLayer`      | 组件 | 网格图层     |
+| `HeatMapLayer`   | 组件 | 热力图图层   |
+| `HexagonLayer`   | 组件 | 蜂窝图层     |
+| `IconLayer`      | 组件 | 图标图层     |
+| `LabelsLayer`    | 组件 | 标注图层     |
+| `LaserLayer`     | 组件 | 激光图层     |
+| `LineLayer`      | 组件 | 线图层       |
+| `LinkLayer`      | 组件 | 连接图层     |
+| `PointLayer`     | 组件 | 点图层       |
+| `PolygonLayer`   | 组件 | 面图层       |
+| `PrismLayer`     | 组件 | 棱柱图层     |
+| `PulseLineLayer` | 组件 | 脉冲线图层   |
+| `PulseLinkLayer` | 组件 | 脉冲连接图层 |
+| `ScatterLayer`   | 组件 | 散点图层     |
+| `ZMarkerLayer`   | 组件 | Z轴标记图层  |
+
+### Loca 光照
+
+| 导出名称           | 类型 | 描述   |
+| ------------------ | ---- | ------ |
+| `AmbientLight`     | 组件 | 环境光 |
+| `DirectionalLight` | 组件 | 平行光 |
+| `PointLight`       | 组件 | 点光源 |
+
+### Loca UI 组件
+
+| 导出名称 | 类型 | 描述     |
+| -------- | ---- | -------- |
+| `Legend` | 组件 | 图例组件 |
+
+### Loca 数据源
+
+| 导出名称          | 类型 | 描述             |
+| ----------------- | ---- | ---------------- |
+| `GeoBufferSource` | 组件 | GeoBuffer 数据源 |
+| `GeoJSONSource`   | 组件 | GeoJSON 数据源   |
+
+## 相关链接
+
+- [高德地图 JavaScript API 文档](https://lbs.amap.com/api/jsapi-v2/summary)
+- [Loca 可视化文档](https://lbs.amap.com/api/loca-v2/intro)
+- [Svelte 文档](https://svelte.dev/)
+
+## 许可证
+
+[MIT](https://github.com/Jungzl/amap/blob/main/LICENSE)

package/dist/api-loader/api-loader.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { APILoaderProps } from './types'
+  import useApiLoader from './use-api-loader.svelte'
+
+  const { children, resetOnDestroy = false, ...props }: APILoaderProps = $props()
+
+  const { status, error } = useApiLoader(
+    () => props,
+    () => resetOnDestroy
+  )
+</script>
+
+{@render children(status, error)}

package/dist/api-loader/api-loader.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { APILoaderProps } from './types';
+declare const ApiLoader: import("svelte").Component<APILoaderProps, {}, "">;
+type ApiLoader = ReturnType<typeof ApiLoader>;
+export default ApiLoader;

package/dist/api-loader/context.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { APIStatus, APIType } from '@cn-map/gaode-jsapi-loader';
+/**
+ * 获取当前API加载状态
+ * @param {APIType} type - 获取的API类型
+ * @returns {() => APIStatus} - 返回一个函数，调用后返回指定类型的加载状态
+ */
+export declare function useAPIStatus(type: APIType): () => APIStatus;
+/**
+ * 获取当前API加载状态
+ * @returns {() => Record<APIType, APIStatus>} - 返回一个函数，调用后返回所有类型的加载状态
+ */
+export declare function useAPIStatus(): () => Record<APIType, APIStatus>;

package/dist/api-loader/context.svelte.js

@@ -0,0 +1,9 @@
+import { getAPIStatus, subscribeAPIStatus } from '@cn-map/gaode-jsapi-loader';
+import { createSubscriber } from 'svelte/reactivity';
+const subscribeStatus = createSubscriber(subscribeAPIStatus);
+export function useAPIStatus(type) {
+    return () => {
+        subscribeStatus();
+        return type ? getAPIStatus(type) : { ...getAPIStatus() };
+    };
+}

package/dist/api-loader/index.d.ts

@@ -0,0 +1,5 @@
+export { default as APILoader } from './api-loader.svelte';
+export { useAPIStatus } from './context.svelte';
+export type { APILoaderOptions, APILoaderProps } from './types';
+export { default as useAPILoader } from './use-api-loader.svelte';
+export { LoadStatus } from '@cn-map/gaode-jsapi-loader';

package/dist/api-loader/index.js

@@ -0,0 +1,4 @@
+export { default as APILoader } from './api-loader.svelte';
+export { useAPIStatus } from './context.svelte';
+export { default as useAPILoader } from './use-api-loader.svelte';
+export { LoadStatus } from '@cn-map/gaode-jsapi-loader';

package/dist/api-loader/types.d.ts

@@ -0,0 +1,15 @@
+import type { LoaderOptions } from '@cn-map/gaode-jsapi-loader';
+import type { Snippet } from 'svelte';
+import type useAPILoader from './use-api-loader.svelte';
+export type APILoaderOptions = LoaderOptions;
+type APILoaderReturn = ReturnType<typeof useAPILoader>;
+export interface APILoaderProps extends APILoaderOptions {
+    /**
+     * 组件卸载时是否重置全局 JSAPI 状态
+     *
+     * @default false
+     */
+    resetOnDestroy?: boolean;
+    children: Snippet<[APILoaderReturn['status'], APILoaderReturn['error']]>;
+}
+export {};

package/dist/api-loader/types.js

@@ -0,0 +1 @@
+export {};

package/dist/api-loader/use-api-loader.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Accessor, Nullable } from '@cn-map/gaode-shared/types';
+import type { APILoaderOptions } from './types';
+import { useAPIStatus } from './context.svelte';
+/**
+ * 加载高德地图依赖的 Hook
+ * @param {()=>APILoaderOptions} getConfig - 加载高德地图API的配置项
+ * @param {()=>boolean} [getResetOnDestroy=()=>false] - 组件销毁时是否重置全局 JSAPI 状态
+ */
+declare const useAPILoader: (getConfig: Accessor<APILoaderOptions>, getResetOnDestroy?: Accessor<boolean>) => {
+    status: ReturnType<typeof useAPIStatus>;
+    error: Accessor<Nullable<Error | Event>>;
+};
+export default useAPILoader;

package/dist/api-loader/use-api-loader.svelte.js

@@ -0,0 +1,32 @@
+import { load, reset } from '@cn-map/gaode-jsapi-loader';
+import { onDestroy } from 'svelte';
+import { useAPIStatus } from './context.svelte';
+/**
+ * 加载高德地图依赖的 Hook
+ * @param {()=>APILoaderOptions} getConfig - 加载高德地图API的配置项
+ * @param {()=>boolean} [getResetOnDestroy=()=>false] - 组件销毁时是否重置全局 JSAPI 状态
+ */
+const useAPILoader = (getConfig, getResetOnDestroy = () => false) => {
+    let error = $state.raw(null);
+    $effect(() => {
+        const config = getConfig();
+        load(config).catch((err) => {
+            if (err instanceof Error || err instanceof Event) {
+                error = err;
+            }
+            else {
+                throw new Error(`Unexpected error when loading API`, { cause: err });
+            }
+        });
+    });
+    onDestroy(() => {
+        if (getResetOnDestroy()) {
+            reset();
+        }
+    });
+    return {
+        status: useAPIStatus(),
+        error: () => error,
+    };
+};
+export default useAPILoader;

package/dist/control/control/control.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Accessor } from '@cn-map/gaode-shared/types';
+import type { Instance } from '../../types/index.ts';
+export type ControlAttributes = Omit<ControlInitOptions, 'map' | 'instance'>;
+export interface ControlExtraInitOptions {
+    /**
+     * 地图对象
+     */
+    map?: AMap.Map;
+}
+export type ControlInitOptions = AMap.ControlOptions & ControlExtraInitOptions & Instance<AMap.Control>;
+export declare const controlEvents: AMap.ControlEventType[];
+export declare function useControlAttributes<T extends AMap.Control>(control: Accessor<T>, props: ControlAttributes): void;

package/dist/control/control/control.svelte.js

@@ -0,0 +1,14 @@
+import { hide, show } from '@cn-map/gaode-shared/const';
+export const controlEvents = [hide, show];
+export function useControlAttributes(control, props) {
+    $effect(() => {
+        if (props.visible !== undefined) {
+            if (props.visible) {
+                control().show();
+            }
+            else {
+                control().hide();
+            }
+        }
+    });
+}

package/dist/control/control/index.d.ts

@@ -0,0 +1,2 @@
+export { controlEvents, useControlAttributes } from './control.svelte';
+export type { ControlAttributes, ControlExtraInitOptions, ControlInitOptions } from './control.svelte';

package/dist/control/control/index.js

@@ -0,0 +1 @@
+export { controlEvents, useControlAttributes } from './control.svelte';

package/dist/control/control-bar/control-bar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { MapEventProps } from '@cn-map/gaode-shared/types'
+  import type { Instance } from '../../types/index.js'
+  import type { ControlExtraInitOptions } from '../control'
+  import { eventsToProps } from '@cn-map/gaode-shared/utils'
+  import { createEventListeners } from '../../hooks/index.js'
+  import { useMapInstance } from '../../map'
+  import { omitProps, snapshot } from '../../utils/index.js'
+  import { controlEvents, useControlAttributes } from '../control'
+
+  type ControlBarEvents = MapEventProps<AMap.ControlBarEventType, AMap.ControlBar>
+  type ControlBarInitOptions = AMap.ControlBarOptions & ControlExtraInitOptions & Instance<AMap.ControlBar>
+
+  export type ControlBarProps = ControlBarInitOptions & ControlBarEvents
+
+  const controlBarEvents: AMap.ControlBarEventType[] = controlEvents
+
+  let { instance = $bindable(), ...props }: ControlBarProps = $props()
+
+  const map = $derived.by(useMapInstance(() => props.map))
+  const restProps = omitProps(() => props, 'map', ...eventsToProps(controlBarEvents))
+
+  const controlBar = $state.raw<AMap.ControlBar>(new AMap.ControlBar(snapshot(restProps)))
+
+  $effect(() => {
+    instance = controlBar
+
+    return () => {
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    if (!map) return
+
+    map.addControl(controlBar)
+
+    return () => {
+      map.removeControl(controlBar)
+    }
+  })
+
+  useControlAttributes(() => controlBar, restProps)
+
+  createEventListeners<AMap.ControlBarEventType, AMap.ControlBar>(
+    () => controlBar,
+    () => props,
+    controlBarEvents
+  )
+</script>

package/dist/control/control-bar/control-bar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MapEventProps } from '@cn-map/gaode-shared/types';
+import type { Instance } from '../../types/index.ts';
+import type { ControlExtraInitOptions } from '../control';
+type ControlBarEvents = MapEventProps<AMap.ControlBarEventType, AMap.ControlBar>;
+type ControlBarInitOptions = AMap.ControlBarOptions & ControlExtraInitOptions & Instance<AMap.ControlBar>;
+export type ControlBarProps = ControlBarInitOptions & ControlBarEvents;
+declare const ControlBar: import("svelte").Component<ControlBarProps, {}, "instance">;
+type ControlBar = ReturnType<typeof ControlBar>;
+export default ControlBar;

package/dist/control/control-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ControlBar } from './control-bar.svelte';
+export type { ControlBarProps } from './control-bar.svelte';

package/dist/control/control-bar/index.js

@@ -0,0 +1 @@
+export { default as ControlBar } from './control-bar.svelte';

package/dist/control/geolocation/geolocation.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { MapEventProps } from '@cn-map/gaode-shared/types'
+  import type { Instance } from '../../types/index.js'
+  import type { ControlExtraInitOptions } from '../control'
+  import { complete, error } from '@cn-map/gaode-shared/const'
+  import { eventsToProps } from '@cn-map/gaode-shared/utils'
+  import { createEventListeners } from '../../hooks/index.js'
+  import { useMapInstance } from '../../map'
+  import { omitProps, snapshot } from '../../utils/index.js'
+  import { controlEvents, useControlAttributes } from '../control'
+
+  type GeolocationEvents = MapEventProps<AMap.GeolocationEventType, AMap.Geolocation>
+  type GeolocationInitOptions = AMap.GeolocationOptions & ControlExtraInitOptions & Instance<AMap.Geolocation>
+
+  export type GeolocationProps = GeolocationInitOptions & GeolocationEvents
+
+  const geolocationEvents: AMap.GeolocationEventType[] = [...controlEvents, complete, error]
+
+  let { instance = $bindable(), ...props }: GeolocationProps = $props()
+
+  const map = $derived.by(useMapInstance(() => props.map))
+  const restProps = omitProps(() => props, 'map', ...eventsToProps(geolocationEvents))
+
+  const geolocation = $state.raw<AMap.Geolocation>(new AMap.Geolocation(snapshot(restProps)))
+
+  $effect(() => {
+    instance = geolocation
+
+    return () => {
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    if (!map) return
+
+    map.addControl(geolocation)
+
+    return () => {
+      map.removeControl(geolocation)
+    }
+  })
+
+  useControlAttributes(() => geolocation, restProps)
+
+  createEventListeners<AMap.GeolocationEventType, AMap.Geolocation>(
+    () => geolocation,
+    () => props,
+    geolocationEvents
+  )
+</script>

package/dist/control/geolocation/geolocation.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MapEventProps } from '@cn-map/gaode-shared/types';
+import type { Instance } from '../../types/index.ts';
+import type { ControlExtraInitOptions } from '../control';
+type GeolocationEvents = MapEventProps<AMap.GeolocationEventType, AMap.Geolocation>;
+type GeolocationInitOptions = AMap.GeolocationOptions & ControlExtraInitOptions & Instance<AMap.Geolocation>;
+export type GeolocationProps = GeolocationInitOptions & GeolocationEvents;
+declare const Geolocation: import("svelte").Component<GeolocationProps, {}, "instance">;
+type Geolocation = ReturnType<typeof Geolocation>;
+export default Geolocation;

package/dist/control/geolocation/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Geolocation } from './geolocation.svelte';
+export type { GeolocationProps } from './geolocation.svelte';

package/dist/control/geolocation/index.js

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

package/dist/control/hawk-eye/hawk-eye.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { MapEventProps } from '@cn-map/gaode-shared/types'
+  import type { Instance } from '../../types/index.js'
+  import type { ControlExtraInitOptions } from '../control'
+  import { eventsToProps } from '@cn-map/gaode-shared/utils'
+  import { createEventListeners } from '../../hooks/index.js'
+  import { useMapInstance } from '../../map'
+  import { omitProps, snapshot } from '../../utils/index.js'
+  import { controlEvents, useControlAttributes } from '../control'
+
+  type HawkEyeEvents = MapEventProps<AMap.HawkEyeEventType, AMap.HawkEye>
+  type HawkEyeInitOptions = AMap.HawkEyeOptions & ControlExtraInitOptions & Instance<AMap.HawkEye>
+
+  export type HawkEyeProps = HawkEyeInitOptions & HawkEyeEvents
+
+  const hawkEyeEvents: AMap.HawkEyeEventType[] = controlEvents
+
+  let { instance = $bindable(), ...props }: HawkEyeProps = $props()
+
+  const map = $derived.by(useMapInstance(() => props.map))
+  const restProps = omitProps(() => props, 'map', ...eventsToProps(hawkEyeEvents))
+
+  const hawkEye = $state.raw<AMap.HawkEye>(new AMap.HawkEye(snapshot(restProps)))
+
+  $effect(() => {
+    instance = hawkEye
+
+    return () => {
+      instance = null
+    }
+  })
+
+  $effect(() => {
+    if (!map) return
+
+    map.addControl(hawkEye)
+
+    return () => {
+      map.removeControl(hawkEye)
+    }
+  })
+
+  useControlAttributes(() => hawkEye, restProps)
+
+  createEventListeners<AMap.HawkEyeEventType, AMap.HawkEye>(
+    () => hawkEye,
+    () => props,
+    hawkEyeEvents
+  )
+</script>