@antv/l7-mapkit 0.4.0 → 0.4.4

package/es/index.d.ts

@@ -0,0 +1,990 @@
+import { Context } from 'react';
+import { default as default_2 } from 'react';
+import { IActiveOption } from '@antv/l7';
+import { IAnimateOption } from '@antv/l7';
+import { ILayer } from '@antv/l7';
+import { IMapConfig } from '@antv/l7';
+import { IMarkerLayerOption } from '@antv/l7';
+import { IMarkerOption } from '@antv/l7';
+import { IPopupOption } from '@antv/l7';
+import { ISceneConfig } from '@antv/l7';
+import { ISourceCFG } from '@antv/l7';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { Marker as Marker_2 } from '@antv/l7';
+import { MarkerLayer as MarkerLayer_2 } from '@antv/l7';
+import { PositionName } from '@antv/l7';
+import { Scene } from '@antv/l7';
+
+/**
+ * 内置地图控件组件，必须在 GaodeMapScene 或 MapScene 内部使用。
+ *
+ * @example
+ * ```tsx
+ * <GaodeMapScene ...>
+ *   <Control type="zoom" position="topleft" />
+ *   <Control type="scale" position="bottomleft" />
+ *   <Control type="layerSwitch" position="topright" />
+ * </GaodeMapScene>
+ * ```
+ */
+export declare const Control: default_2.NamedExoticComponent<IControlProps>;
+
+/**
+ * 控件位置类型
+ */
+declare type ControlPosition = 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
+
+/**
+ * 内置控件类型
+ * - zoom: 缩放控件
+ * - scale: 比例尺控件
+ * - logo: Logo 控件
+ * - layerSwitch: 图层切换控件
+ * - mouseLocation: 鼠标坐标控件
+ * - mapTheme: 地图主题控件
+ * - geoLocate: 定位控件
+ * - exportImage: 导出图片控件
+ * - fullscreen: 全屏控件
+ * - swipe: 卷帘对比控件
+ */
+export declare type ControlType = 'zoom' | 'scale' | 'logo' | 'layerSwitch' | 'mouseLocation' | 'mapTheme' | 'geoLocate' | 'exportImage' | 'fullscreen' | 'swipe';
+
+/**
+ * 自定义地图控件组件，支持将任意 React 内容渲染到地图控件区域。
+ * 必须在 GaodeMapScene 或 MapScene 内部使用。
+ *
+ * @example
+ * ```tsx
+ * <GaodeMapScene ...>
+ *   <CustomControl position="topright" className="my-legend">
+ *     <div style={{ background: 'white', padding: 8 }}>
+ *       <h4>图例</h4>
+ *       <span style={{ color: '#f00' }}>● 高值</span>
+ *     </div>
+ *   </CustomControl>
+ * </GaodeMapScene>
+ * ```
+ */
+export declare function CustomControl(props: ICustomControlProps): default_2.ReactPortal | null;
+
+/**
+ * 导出图片控件组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const ExportImageControl: default_2.FC<ExportImageControlProps>;
+
+/**
+ * 导出图片控件属性
+ */
+export declare interface ExportImageControlProps {
+    /** 控件位置 */
+    position?: ControlPosition;
+    /** 图片类型 */
+    imageType?: 'png' | 'jpeg';
+    /** 按钮文本 */
+    btnText?: string;
+    /** 按钮标题 */
+    title?: string;
+    /** 是否垂直布局 */
+    vertical?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+    /** 控件添加回调 */
+    onAdd?: () => void;
+    /** 控件移除回调 */
+    onRemove?: () => void;
+    /** 控件显示回调 */
+    onShow?: () => void;
+    /** 控件隐藏回调 */
+    onHide?: () => void;
+    /** 导出回调 */
+    onExport?: (dataUrl: string) => void;
+}
+
+/**
+ * 全屏控件组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const FullscreenControl: default_2.FC<FullscreenControlProps>;
+
+/**
+ * 全屏控件属性
+ */
+export declare interface FullscreenControlProps {
+    /** 控件位置 */
+    position?: ControlPosition;
+    /** 按钮文本 */
+    btnText?: string;
+    /** 按钮标题 */
+    title?: string;
+    /** 是否垂直布局 */
+    vertical?: boolean;
+    /** 退出按钮文本 */
+    exitBtnText?: string;
+    /** 退出按钮标题 */
+    exitTitle?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+    /** 控件添加回调 */
+    onAdd?: () => void;
+    /** 控件移除回调 */
+    onRemove?: () => void;
+    /** 控件显示回调 */
+    onShow?: () => void;
+    /** 控件隐藏回调 */
+    onHide?: () => void;
+    /** 全屏状态变化回调 */
+    onFullscreenChange?: (isFullscreen: boolean) => void;
+}
+
+/**
+ * 高德地图 Scene 组件，基于 @antv/l7 和高德地图 JS API。
+ *
+ * @example
+ * ```tsx
+ * <GaodeMapScene
+ *   style={{ width: '100%', height: '400px' }}
+ *   mapConfig={{ zoom: 10, center: [120.19, 30.26] }}
+ *   onLoaded={(scene) => console.log('loaded', scene)}
+ * >
+ *   <PointLayer source={data} colorField="value" colorValues={['#f00','#00f']} />
+ * </GaodeMapScene>
+ * ```
+ */
+export declare function GaodeMapScene(props: ISceneProps): JSX_2.Element;
+
+/**
+ * 定位控件组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const GeoLocateControl: default_2.FC<GeoLocateControlProps>;
+
+/**
+ * 定位控件属性
+ */
+export declare interface GeoLocateControlProps {
+    /** 控件位置 */
+    position?: ControlPosition;
+    /** 按钮文本 */
+    btnText?: string;
+    /** 按钮标题 */
+    title?: string;
+    /** 是否垂直布局 */
+    vertical?: boolean;
+    /** 坐标转换函数 */
+    transform?: (lnglat: [number, number]) => [number, number];
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+    /** 控件添加回调 */
+    onAdd?: () => void;
+    /** 控件移除回调 */
+    onRemove?: () => void;
+    /** 控件显示回调 */
+    onShow?: () => void;
+    /** 控件隐藏回调 */
+    onHide?: () => void;
+}
+
+/**
+ * 热力图层，适合渲染密度分布、强度分布等热力数据。
+ * shape 支持：'heatmap' | 'heatmap3d' | 'hexagon' | 'grid'
+ *
+ * @example
+ * ```tsx
+ * <HeatmapLayer
+ *   source={points}
+ *   sourceConfig={{ parser: { type: 'json', x: 'lng', y: 'lat' } }}
+ *   colorValues={['#f7fbff', '#08306b']}
+ *   shape="heatmap"
+ * />
+ * ```
+ */
+export declare const HeatmapLayer: default_2.NamedExoticComponent<ILayerProps>;
+
+export declare interface IControlProps {
+    /**
+     * 控件类型
+     * @see ControlType
+     */
+    type: ControlType;
+    /**
+     * 控件位置
+     * @default 'bottomright'
+     */
+    position?: PositionName;
+    /** 透传给控件构造器的其他配置项 */
+    [key: string]: any;
+}
+
+export declare interface ICustomControlProps {
+    /**
+     * 控件位置
+     * @default 'topright'
+     */
+    position?: PositionName;
+    /** 控件容器 className */
+    className?: string;
+    /** 控件容器内联样式 */
+    style?: default_2.CSSProperties;
+    /** 自定义控件内容 */
+    children?: default_2.ReactNode;
+}
+
+/**
+ * 所有图层组件的通用 Props 接口。
+ * 采用扁平设计，所有视觉映射字段直接作为顶层 props。
+ *
+ * @example
+ * ```tsx
+ * <PointLayer
+ *   source={data}
+ *   sourceConfig={{ parser: { type: 'json', x: 'lng', y: 'lat' } }}
+ *   colorField="value"
+ *   colorValues={['#f00', '#0f0', '#00f']}
+ *   size={8}
+ *   shape="circle"
+ *   onClick={(e) => console.log(e)}
+ * />
+ * ```
+ */
+export declare interface ILayerProps {
+    /** 图层名称，用于 LayerSwitch 控件中显示 */
+    name?: string;
+    /** 是否可见，默认 true */
+    visible?: boolean;
+    /** 图层层级，数值越大越靠上，默认 0 */
+    zIndex?: number;
+    /** 最小显示缩放层级 */
+    minZoom?: number;
+    /** 最大显示缩放层级 */
+    maxZoom?: number;
+    /** 混合模式，如 'normal' | 'additive' | 'subtractive' */
+    blend?: string;
+    /** 是否在图层加载后自动缩放到数据范围，默认 false */
+    autoFit?: boolean;
+    /**
+     * 数据源，支持：
+     * - GeoJSON FeatureCollection
+     * - 普通数组（需配合 sourceConfig.parser 使用）
+     * - URL 字符串（CSV/GeoJSON 远程地址）
+     */
+    source: any;
+    /**
+     * 数据源配置，用于指定 parser（解析器）和 transforms（数据转换）。
+     * @example
+     * ```ts
+     * sourceConfig={{ parser: { type: 'json', x: 'lng', y: 'lat' } }}
+     * sourceConfig={{ parser: { type: 'csv', x: 'longitude', y: 'latitude' } }}
+     * ```
+     */
+    sourceConfig?: Omit<ISourceCFG, 'data'>;
+    /**
+     * 固定颜色值，如 '#ff0000' 或 'red'。
+     * 与 colorField/colorValues 互斥。
+     */
+    color?: string;
+    /** 颜色映射的数据字段名 */
+    colorField?: string;
+    /**
+     * 颜色映射值，与 colorField 配合使用。
+     * - 数组：按数据值范围映射到颜色列表
+     * - 函数：自定义映射逻辑
+     * @example colorValues={['#fee5d9', '#fc4e2a', '#800026']}
+     */
+    colorValues?: string[] | ((fieldValue: any) => string);
+    /** 固定尺寸值（像素） */
+    size?: number;
+    /** 尺寸映射的数据字段名 */
+    sizeField?: string;
+    /**
+     * 尺寸映射范围，与 sizeField 配合使用。
+     * @example sizeValues={[2, 20]}
+     */
+    sizeValues?: number[] | ((fieldValue: any) => number);
+    /**
+     * 形状，具体值取决于图层类型：
+     * - PointLayer: 'circle' | 'triangle' | 'square' | 'hexagon' | 'cylinder' 等
+     * - LineLayer: 'line' | 'arc' | 'arc3d' | 'greatcircle' 等
+     */
+    shape?: string;
+    /** 形状映射的数据字段名 */
+    shapeField?: string;
+    /** 形状映射值，与 shapeField 配合使用 */
+    shapeValues?: string[] | ((fieldValue: any) => string);
+    /**
+     * 图层样式对象，属性取决于图层类型：
+     * - 通用: { opacity: 0.8 }
+     * - LineLayer: { lineWidth: 2, lineColor: '#f00' }
+     * - PointLayer: { stroke: '#fff', strokeWidth: 2 }
+     */
+    style?: Record<string, any>;
+    /** 数据过滤字段名 */
+    filterField?: string;
+    /**
+     * 数据过滤值或过滤函数，与 filterField 配合使用。
+     * @example filterValues={(val) => val > 100}
+     */
+    filterValues?: any[] | ((fieldValue: any) => boolean);
+    /**
+     * 动画配置，开启图层动画效果。
+     * @example animate={{ enable: true, speed: 1, trailLength: 0.5 }}
+     */
+    animate?: Partial<IAnimateOption>;
+    /**
+     * 高亮（hover）配置：
+     * - true: 使用默认高亮效果
+     * - IActiveOption: 自定义高亮颜色 { color: '#00f' }
+     */
+    active?: IActiveOption | boolean;
+    /**
+     * 选中（click）配置：
+     * - true: 使用默认选中效果
+     * - IActiveOption: 自定义选中颜色 { color: '#f00' }
+     */
+    select?: IActiveOption | boolean;
+    /**
+     * 图层加载完成回调。
+     * @param layer - L7 ILayer 实例
+     * @param scene - L7 Scene 实例
+     */
+    onLoaded?: (layer: ILayer, scene: Scene) => void;
+    /** 点击图层要素时触发 */
+    onClick?: (e: any) => void;
+    /** 双击图层要素时触发 */
+    onDblClick?: (e: any) => void;
+    /** 鼠标移入图层要素时触发 */
+    onMouseEnter?: (e: any) => void;
+    /** 鼠标移出图层要素时触发 */
+    onMouseLeave?: (e: any) => void;
+    /** 鼠标在图层要素上移动时触发 */
+    onMouseMove?: (e: any) => void;
+    /** 点击图层空白区域时触发 */
+    onUnClick?: (e: any) => void;
+    /** 上下文菜单（右键）事件 */
+    onContextMenu?: (e: any) => void;
+    children?: default_2.ReactNode;
+}
+
+export declare interface ILoadImageProps {
+    /** 图片名称，用于在图层中引用（如 shape 字段的值） */
+    name: string;
+    /**
+     * 图片地址，支持：
+     * - URL 字符串（网络图片）
+     * - base64 字符串
+     * - HTMLImageElement
+     */
+    url: string | HTMLImageElement;
+}
+
+export declare interface ILoadImagesProps {
+    /**
+     * 批量加载图片列表
+     */
+    images: ILoadImageProps[];
+}
+
+/**
+ * 图片图层，将一张图片叠加到地图指定范围。
+ *
+ * @example
+ * ```tsx
+ * <ImageLayer
+ *   source={{ data: 'https://example.com/image.png', bounds: [73, 3, 135, 53] }}
+ * />
+ * ```
+ */
+export declare const ImageLayer: default_2.NamedExoticComponent<ILayerProps>;
+
+export declare interface IMarkerLayerProps {
+    /**
+     * Marker 数据列表，每条数据需包含经纬度字段
+     */
+    data: Array<{
+        longitude: number;
+        latitude: number;
+        [key: string]: any;
+    }>;
+    /**
+     * 是否开启聚合，默认 false
+     */
+    cluster?: boolean;
+    /**
+     * 聚合配置
+     */
+    clusterOption?: IMarkerLayerOption['clusterOption'];
+    /**
+     * 自定义 Marker 渲染函数，返回 HTMLElement
+     * @param item - 单条数据
+     */
+    renderMarker?: (item: any) => HTMLElement;
+    /**
+     * MarkerLayer 加载完成回调
+     */
+    onLoaded?: (markerLayer: MarkerLayer_2) => void;
+}
+
+export declare interface IMarkerProps {
+    /** 经度 */
+    longitude: number;
+    /** 纬度 */
+    latitude: number;
+    /** Marker 配置项（color/draggable/anchor/offsets 等） */
+    option?: Partial<IMarkerOption>;
+    /**
+     * Marker 加载完成回调
+     * @param marker - L7 Marker 实例
+     */
+    onLoaded?: (marker: Marker_2) => void;
+    /** 点击 Marker 时触发 */
+    onClick?: (e: MouseEvent) => void;
+    /** 鼠标移入 Marker 时触发 */
+    onMouseEnter?: (e: MouseEvent) => void;
+    /** 鼠标移出 Marker 时触发 */
+    onMouseLeave?: (e: MouseEvent) => void;
+    /** 自定义 Marker 内容，支持任意 React 元素 */
+    children?: default_2.ReactNode;
+}
+
+export declare interface IPopupProps {
+    /** 经度 */
+    longitude: number;
+    /** 纬度 */
+    latitude: number;
+    /** Popup 配置项 */
+    option?: Partial<IPopupOption>;
+    /** 是否显示关闭按钮，默认 false */
+    closeButton?: boolean;
+    /** Popup 关闭时的回调 */
+    onClose?: () => void;
+    /** Popup 内容，支持任意 React 元素 */
+    children?: default_2.ReactNode;
+}
+
+/**
+ * GaodeMapScene / MapScene 组件的通用 Props
+ */
+export declare interface ISceneProps {
+    /** 地图容器 CSS 样式 */
+    style?: default_2.CSSProperties;
+    /** 地图容器 className */
+    className?: string;
+    /**
+     * 地图初始化配置，支持 zoom/center/pitch/rotation/style 等。
+     * 变更后会自动同步到地图实例。
+     * @see https://larkmap.antv.antgroup.com/docs/api/scene
+     */
+    mapConfig?: Partial<IMapConfig>;
+    /** Scene 全局配置（renderer 等） */
+    sceneConfig?: Partial<ISceneConfig>;
+    /**
+     * Scene 加载完成回调，可在此时添加图层或执行地图操作。
+     * @param scene - L7 Scene 实例
+     */
+    onLoaded?: (scene: Scene) => void;
+    /** 点击地图空白区域时触发 */
+    onClick?: (e: any) => void;
+    /** 鼠标在地图上移动时触发 */
+    onMouseMove?: (e: any) => void;
+    /** 地图缩放层级变化时触发 */
+    onZoomChange?: (e: any) => void;
+    children?: default_2.ReactNode;
+}
+
+/**
+ * L7 Layer 上下文，由各图层组件（PointLayer/LineLayer 等）内部自动提供。
+ * 通常不需要直接使用此 Context，推荐使用 {@link useLayer} hook。
+ */
+export declare const LayerContext: Context<ILayer | undefined>;
+
+/**
+ * 分类图例组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const LegendCategories: default_2.FC<LegendCategoriesProps>;
+
+/**
+ * 分类图例属性
+ */
+export declare interface LegendCategoriesProps {
+    /** 标签列表 */
+    labels: string[];
+    /** 颜色列表或渐变色配置 */
+    colors: string[] | {
+        startColor: string;
+        endColor: string;
+    };
+    /** 几何图形类型 */
+    geometryType?: 'circle' | 'square' | 'rectangle';
+    /** 是否使用描边颜色 */
+    isStrokeColor?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+}
+
+/**
+ * 图标图例组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const LegendIcon: default_2.FC<LegendIconProps>;
+
+/**
+ * 图标图例项
+ */
+export declare interface LegendIconItem {
+    /** 图标 URL 或 SVG */
+    icon: string;
+    /** 标签文本 */
+    label: string;
+}
+
+/**
+ * 图标图例属性
+ */
+export declare interface LegendIconProps {
+    /** 图标列表 */
+    items: LegendIconItem[];
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+}
+
+/**
+ * 比例图例组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const LegendProportion: default_2.FC<LegendProportionProps>;
+
+/**
+ * 比例图例属性
+ */
+export declare interface LegendProportionProps {
+    /** 标签列表 [最小值, 最大值] */
+    labels: [number, number];
+    /** 填充颜色 */
+    fillColor?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+}
+
+/**
+ * 渐变图例组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const LegendRamp: default_2.FC<LegendRampProps>;
+
+/**
+ * 渐变图例属性
+ */
+export declare interface LegendRampProps {
+    /** 标签列表 */
+    labels: (string | number)[];
+    /** 颜色列表 */
+    colors: string[];
+    /** 是否连续 */
+    isContinuous?: boolean;
+    /** 标签单位 */
+    labelUnit?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+}
+
+/**
+ * 线图层，适合渲染路径、边界、轨迹等线数据。
+ * shape 支持：'line' | 'arc' | 'arc3d' | 'greatcircle'
+ *
+ * @example
+ * ```tsx
+ * <LineLayer
+ *   source={geojson}
+ *   color="#1890ff"
+ *   size={2}
+ *   style={{ opacity: 0.8 }}
+ * />
+ * ```
+ */
+export declare const LineLayer: default_2.NamedExoticComponent<ILayerProps>;
+
+/**
+ * 加载单张图片到地图场景，使其可在图层中通过名称引用。
+ * 必须在 GaodeMapScene 或 MapScene 内部使用。
+ *
+ * @example
+ * ```tsx
+ * <GaodeMapScene ...>
+ *   <LoadImage name="car" url="/icons/car.png" />
+ *   <PointLayer
+ *     source={data}
+ *     shape="car"
+ *   />
+ * </GaodeMapScene>
+ * ```
+ */
+export declare function LoadImage(props: ILoadImageProps): null;
+
+/**
+ * 批量加载多张图片到地图场景。
+ * 必须在 GaodeMapScene 或 MapScene 内部使用。
+ *
+ * @example
+ * ```tsx
+ * <LoadImages
+ *   images={[
+ *     { name: 'car', url: '/icons/car.png' },
+ *     { name: 'bus', url: '/icons/bus.png' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function LoadImages(props: ILoadImagesProps): JSX_2.Element;
+
+/**
+ * 内置地图 Scene 组件，使用 L7 内置地图，无需第三方地图服务。
+ * 适合离线、内网或不需要真实底图的场景。
+ *
+ * @example
+ * ```tsx
+ * <MapScene
+ *   style={{ width: '100%', height: '400px' }}
+ *   mapConfig={{ zoom: 3, center: [105, 35] }}
+ *   onLoaded={(scene) => console.log('loaded', scene)}
+ * >
+ *   <PolygonLayer source={geoData} color="#1890ff" opacity={0.6} />
+ * </MapScene>
+ * ```
+ */
+export declare function MapScene(props: ISceneProps): JSX_2.Element;
+
+/**
+ * 地图主题控件组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const MapThemeControl: default_2.FC<MapThemeControlProps>;
+
+/**
+ * 地图主题控件属性
+ */
+export declare interface MapThemeControlProps {
+    /** 控件位置 */
+    position?: ControlPosition;
+    /** 主题选项列表 */
+    options?: MapThemeOption[];
+    /** 按钮文本 */
+    btnText?: string;
+    /** 按钮标题 */
+    title?: string;
+    /** 是否垂直布局 */
+    vertical?: boolean;
+    /** Popper 放置位置 */
+    popperPlacement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+    /** Popper 触发方式 */
+    popperTrigger?: 'click' | 'hover';
+    /** Popper 类名 */
+    popperClassName?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+    /** 控件添加回调 */
+    onAdd?: () => void;
+    /** 控件移除回调 */
+    onRemove?: () => void;
+    /** 控件显示回调 */
+    onShow?: () => void;
+    /** 控件隐藏回调 */
+    onHide?: () => void;
+    /** Popper 显示回调 */
+    onPopperShow?: () => void;
+    /** Popper 隐藏回调 */
+    onPopperHide?: () => void;
+    /** 选择变化回调 */
+    onSelectChange?: (value: string) => void;
+}
+
+/**
+ * 地图主题选项
+ */
+declare interface MapThemeOption {
+    /** 主题值 */
+    value: string;
+    /** 显示文本 */
+    text: string;
+    [key: string]: any;
+}
+
+/**
+ * 地图标记点组件，支持自定义 React 内容作为 Marker 图标。
+ * 必须在 GaodeMapScene 或 MapScene 内部使用。
+ *
+ * @example
+ * ```tsx
+ * // 默认样式 Marker
+ * <Marker longitude={120.19} latitude={30.26} />
+ *
+ * // 自定义内容 Marker
+ * <Marker longitude={120.19} latitude={30.26} onClick={(e) => console.log(e)}>
+ *   <div style={{ background: 'red', borderRadius: '50%', width: 24, height: 24 }} />
+ * </Marker>
+ * ```
+ */
+export declare function Marker(props: IMarkerProps): default_2.ReactPortal | null;
+
+/**
+ * 批量 Marker 图层组件，支持聚合功能。
+ * 适合渲染大量标记点，性能优于多个独立 Marker 组件。
+ * 必须在 GaodeMapScene 或 MapScene 内部使用。
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <MarkerLayer
+ *   data={points}
+ *   renderMarker={(item) => {
+ *     const el = document.createElement('div');
+ *     el.className = 'my-marker';
+ *     el.textContent = item.name;
+ *     return el;
+ *   }}
+ * />
+ *
+ * // 开启聚合
+ * <MarkerLayer
+ *   data={points}
+ *   cluster
+ *   clusterOption={{ radius: 80, maxZoom: 16 }}
+ * />
+ * ```
+ */
+export declare function MarkerLayer(props: IMarkerLayerProps): null;
+
+/**
+ * 鼠标位置控件组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const MouseLocationControl: default_2.FC<MouseLocationControlProps>;
+
+/**
+ * 鼠标位置控件属性
+ */
+export declare interface MouseLocationControlProps {
+    /** 控件位置 */
+    position?: ControlPosition;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+    /** 坐标转换函数 */
+    transform?: (position: any) => any;
+    /** 控件添加回调 */
+    onAdd?: () => void;
+    /** 控件移除回调 */
+    onRemove?: () => void;
+    /** 控件显示回调 */
+    onShow?: () => void;
+    /** 控件隐藏回调 */
+    onHide?: () => void;
+    /** 位置变化回调 */
+    onLocationChange?: (lnglat: [number, number]) => void;
+}
+
+/**
+ * 点图层，适合渲染散点、气泡、热力等点数据。
+ *
+ * @example
+ * ```tsx
+ * <PointLayer
+ *   source={data}
+ *   sourceConfig={{ parser: { type: 'json', x: 'lng', y: 'lat' } }}
+ *   colorField="value"
+ *   colorValues={['#f0f9e8', '#08589e']}
+ *   size={6}
+ *   shape="circle"
+ *   onClick={(e) => console.log(e)}
+ * />
+ * ```
+ */
+export declare const PointLayer: default_2.NamedExoticComponent<ILayerProps>;
+
+/**
+ * 面图层，适合渲染行政区划、围栏、区域填充等面数据。
+ *
+ * @example
+ * ```tsx
+ * <PolygonLayer
+ *   source={geoData}
+ *   colorField="value"
+ *   colorValues={['#edf8e9', '#006d2c']}
+ *   style={{ opacity: 0.6 }}
+ *   active
+ * />
+ * ```
+ */
+export declare const PolygonLayer: default_2.NamedExoticComponent<ILayerProps>;
+
+/**
+ * 地图弹窗组件，支持自定义 React 内容。
+ * 必须在 GaodeMapScene 或 MapScene 内部使用。
+ *
+ * @example
+ * ```tsx
+ * <Popup
+ *   longitude={120.19}
+ *   latitude={30.26}
+ *   closeButton
+ *   onClose={() => setVisible(false)}
+ * >
+ *   <div>
+ *     <h4>上海</h4>
+ *     <p>人口：2400万</p>
+ *   </div>
+ * </Popup>
+ * ```
+ */
+export declare function Popup(props: IPopupProps): default_2.ReactPortal | null;
+
+/**
+ * 栅格图层，适合渲染影像、遥感等栅格数据。
+ */
+export declare const RasterLayer: default_2.NamedExoticComponent<ILayerProps>;
+
+/**
+ * 比例尺控件组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const ScaleControl: default_2.FC<ScaleControlProps>;
+
+/**
+ * 比例尺控件属性
+ */
+export declare interface ScaleControlProps {
+    /** 控件位置 */
+    position?: ControlPosition;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+    /** 是否锁定宽度 */
+    lockWidth?: boolean;
+    /** 最大宽度 */
+    maxWidth?: number;
+    /** 是否显示公制单位 */
+    metric?: boolean;
+    /** 是否显示英制单位 */
+    imperial?: boolean;
+    /** 是否在地图静止时更新 */
+    updateWhenIdle?: boolean;
+    /** 控件添加回调 */
+    onAdd?: () => void;
+    /** 控件移除回调 */
+    onRemove?: () => void;
+    /** 控件显示回调 */
+    onShow?: () => void;
+    /** 控件隐藏回调 */
+    onHide?: () => void;
+}
+
+/**
+ * L7 Scene 上下文，由 GaodeMapScene / MapScene 组件内部自动提供。
+ * 通常不需要直接使用此 Context，推荐使用 {@link useScene} hook。
+ *
+ * @example
+ * ```tsx
+ * // 在 GaodeMapScene 内部的子组件中获取 Scene 实例
+ * const scene = useScene();
+ * scene.addLayer(myLayer);
+ * ```
+ */
+export declare const SceneContext: Context<Scene | undefined>;
+
+/**
+ * 获取当前图层的 ILayer 实例。
+ * 必须在图层组件（PointLayer/LineLayer 等）的 children 内部使用。
+ *
+ * @returns L7 ILayer 实例
+ *
+ * @example
+ * ```tsx
+ * function MyLayerChild() {
+ *   const layer = useLayer();
+ *   useEffect(() => {
+ *     layer.setBlend('normal');
+ *   }, [layer]);
+ *   return null;
+ * }
+ *
+ * // 使用方式
+ * <PointLayer source={data} color="red">
+ *   <MyLayerChild />
+ * </PointLayer>
+ * ```
+ */
+export declare function useLayer(): ILayer;
+
+/**
+ * 获取当前地图场景的 Scene 实例。
+ * 必须在 `<GaodeMapScene>` 或 `<MapScene>` 组件内部使用。
+ *
+ * @returns L7 Scene 实例
+ * @throws 如果在 Scene 组件外部使用，将返回 undefined
+ *
+ * @example
+ * ```tsx
+ * function MyLayer() {
+ *   const scene = useScene();
+ *   useEffect(() => {
+ *     console.log('Scene loaded:', scene);
+ *   }, [scene]);
+ *   return null;
+ * }
+ * ```
+ */
+export declare function useScene(): Scene;
+
+/**
+ * 缩放控件组件
+ * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
+ */
+export declare const ZoomControl: default_2.FC<ZoomControlProps>;
+
+/**
+ * 缩放控件属性
+ */
+export declare interface ZoomControlProps {
+    /** 控件位置 */
+    position?: ControlPosition;
+    /** 缩放按钮文本 */
+    zoomInText?: default_2.ReactNode;
+    zoomOutText?: default_2.ReactNode;
+    /** 缩放按钮标题 */
+    zoomInTitle?: string;
+    zoomOutTitle?: string;
+    /** 是否显示缩放级别 */
+    showZoom?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+    /** 控件添加回调 */
+    onAdd?: () => void;
+    /** 控件移除回调 */
+    onRemove?: () => void;
+    /** 控件显示回调 */
+    onShow?: () => void;
+    /** 控件隐藏回调 */
+    onHide?: () => void;
+}
+
+export { }