@antv/l7-mapkit 0.3.0 → 0.4.4

package/dist/component/LayerAttribute/index.d.ts

@@ -1,136 +0,0 @@
-import type { IAnimateOption, IActiveOption, ILayer, ISourceCFG, Scene } from '@antv/l7';
-import type React from 'react';
-/**
- * 所有图层组件的通用 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 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?: React.ReactNode;
-}

package/dist/component/LayerContext.d.ts

@@ -1,29 +0,0 @@
-import type { ILayer } from '@antv/l7';
-/**
- * L7 Layer 上下文，由各图层组件（PointLayer/LineLayer 等）内部自动提供。
- * 通常不需要直接使用此 Context，推荐使用 {@link useLayer} hook。
- */
-export declare const LayerContext: import("react").Context<ILayer | 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;

package/dist/component/Legend/LegendCategories.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-/**
- * 分类图例属性
- */
-export interface LegendCategoriesProps {
-    /** 标签列表 */
-    labels: string[];
-    /** 颜色列表或渐变色配置 */
-    colors: string[] | {
-        startColor: string;
-        endColor: string;
-    };
-    /** 几何图形类型 */
-    geometryType?: 'circle' | 'square' | 'rectangle';
-    /** 是否使用描边颜色 */
-    isStrokeColor?: boolean;
-    /** 自定义类名 */
-    className?: string;
-    /** 自定义样式 */
-    style?: React.CSSProperties;
-}
-/**
- * 分类图例组件
- * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
- */
-export declare const LegendCategories: React.FC<LegendCategoriesProps>;

package/dist/component/Legend/LegendIcon.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-/**
- * 图标图例项
- */
-export interface LegendIconItem {
-    /** 图标 URL 或 SVG */
-    icon: string;
-    /** 标签文本 */
-    label: string;
-}
-/**
- * 图标图例属性
- */
-export interface LegendIconProps {
-    /** 图标列表 */
-    items: LegendIconItem[];
-    /** 自定义类名 */
-    className?: string;
-    /** 自定义样式 */
-    style?: React.CSSProperties;
-}
-/**
- * 图标图例组件
- * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
- */
-export declare const LegendIcon: React.FC<LegendIconProps>;

package/dist/component/Legend/LegendProportion.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-/**
- * 比例图例属性
- */
-export interface LegendProportionProps {
-    /** 标签列表 [最小值, 最大值] */
-    labels: [number, number];
-    /** 填充颜色 */
-    fillColor?: string;
-    /** 自定义类名 */
-    className?: string;
-    /** 自定义样式 */
-    style?: React.CSSProperties;
-}
-/**
- * 比例图例组件
- * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
- */
-export declare const LegendProportion: React.FC<LegendProportionProps>;

package/dist/component/Legend/LegendRamp.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-/**
- * 渐变图例属性
- */
-export interface LegendRampProps {
-    /** 标签列表 */
-    labels: (string | number)[];
-    /** 颜色列表 */
-    colors: string[];
-    /** 是否连续 */
-    isContinuous?: boolean;
-    /** 标签单位 */
-    labelUnit?: string;
-    /** 自定义类名 */
-    className?: string;
-    /** 自定义样式 */
-    style?: React.CSSProperties;
-}
-/**
- * 渐变图例组件
- * 支持 PC 和移动端响应式布局，使用 Tailwind CSS 样式
- */
-export declare const LegendRamp: React.FC<LegendRampProps>;

package/dist/component/LoadImage.d.ts

@@ -1,49 +0,0 @@
-export interface ILoadImageProps {
-    /** 图片名称，用于在图层中引用（如 shape 字段的值） */
-    name: string;
-    /**
-     * 图片地址，支持：
-     * - URL 字符串（网络图片）
-     * - base64 字符串
-     * - HTMLImageElement
-     */
-    url: string | HTMLImageElement;
-}
-export interface ILoadImagesProps {
-    /**
-     * 批量加载图片列表
-     */
-    images: ILoadImageProps[];
-}
-/**
- * 加载单张图片到地图场景，使其可在图层中通过名称引用。
- * 必须在 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): import("react/jsx-runtime").JSX.Element;
-export default LoadImage;

package/dist/component/MapScene/GaodeMapScene.d.ts

@@ -1,17 +0,0 @@
-import type { ISceneProps } from './interface';
-/**
- * 高德地图 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): import("react/jsx-runtime").JSX.Element;
-export default GaodeMapScene;

package/dist/component/MapScene/MapScene.d.ts

@@ -1,18 +0,0 @@
-import type { ISceneProps } from './interface';
-/**
- * 内置地图 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): import("react/jsx-runtime").JSX.Element;
-export default MapScene;

package/dist/component/MapScene/interface.d.ts

@@ -1,31 +0,0 @@
-import type { IMapConfig, ISceneConfig, Scene } from '@antv/l7';
-import type React from 'react';
-/**
- * GaodeMapScene / MapScene 组件的通用 Props
- */
-export interface ISceneProps {
-    /** 地图容器 CSS 样式 */
-    style?: React.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?: React.ReactNode;
-}

package/dist/component/Marker.d.ts

@@ -1,40 +0,0 @@
-import { Marker as L7Marker } from '@antv/l7';
-import type { IMarkerOption } from '@antv/l7';
-import React from 'react';
-export interface IMarkerProps {
-    /** 经度 */
-    longitude: number;
-    /** 纬度 */
-    latitude: number;
-    /** Marker 配置项（color/draggable/anchor/offsets 等） */
-    option?: Partial<IMarkerOption>;
-    /**
-     * Marker 加载完成回调
-     * @param marker - L7 Marker 实例
-     */
-    onLoaded?: (marker: L7Marker) => void;
-    /** 点击 Marker 时触发 */
-    onClick?: (e: MouseEvent) => void;
-    /** 鼠标移入 Marker 时触发 */
-    onMouseEnter?: (e: MouseEvent) => void;
-    /** 鼠标移出 Marker 时触发 */
-    onMouseLeave?: (e: MouseEvent) => void;
-    /** 自定义 Marker 内容，支持任意 React 元素 */
-    children?: React.ReactNode;
-}
-/**
- * 地图标记点组件，支持自定义 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 default function Marker(props: IMarkerProps): React.ReactPortal | null;

package/dist/component/MarkerLayer.d.ts

@@ -1,56 +0,0 @@
-import { MarkerLayer as L7MarkerLayer } from '@antv/l7';
-import type { IMarkerLayerOption } from '@antv/l7';
-export 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: L7MarkerLayer) => void;
-}
-/**
- * 批量 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 default function MarkerLayer(props: IMarkerLayerProps): null;

package/dist/component/Popup.d.ts

@@ -1,36 +0,0 @@
-import type { IPopupOption } from '@antv/l7';
-import React from 'react';
-export interface IPopupProps {
-    /** 经度 */
-    longitude: number;
-    /** 纬度 */
-    latitude: number;
-    /** Popup 配置项 */
-    option?: Partial<IPopupOption>;
-    /** 是否显示关闭按钮，默认 false */
-    closeButton?: boolean;
-    /** Popup 关闭时的回调 */
-    onClose?: () => void;
-    /** Popup 内容，支持任意 React 元素 */
-    children?: React.ReactNode;
-}
-/**
- * 地图弹窗组件，支持自定义 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 default function Popup(props: IPopupProps): React.ReactPortal | null;

package/dist/component/SceneContext.d.ts

@@ -1,32 +0,0 @@
-import type { Scene } from '@antv/l7';
-/**
- * L7 Scene 上下文，由 GaodeMapScene / MapScene 组件内部自动提供。
- * 通常不需要直接使用此 Context，推荐使用 {@link useScene} hook。
- *
- * @example
- * ```tsx
- * // 在 GaodeMapScene 内部的子组件中获取 Scene 实例
- * const scene = useScene();
- * scene.addLayer(myLayer);
- * ```
- */
-export declare const SceneContext: import("react").Context<Scene | undefined>;
-/**
- * 获取当前地图场景的 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;

package/dist/index.d.ts

@@ -1,67 +0,0 @@
-/**
- * @antv/l7-mapkit - React components for AntV L7 geospatial visualization
- *
- * @example
- * ```tsx
- * import { GaodeMapScene, PointLayer } from '@antv/l7-mapkit';
- *
- * function App() {
- *   const data = { type: 'FeatureCollection', features: [...] };
- *   return (
- *     <GaodeMapScene
- *       style={{ width: '100%', height: '400px' }}
- *       mapConfig={{ zoom: 10, center: [120.19, 30.26] }}
- *     >
- *       <PointLayer
- *         source={data}
- *         colorField="value"
- *         colorValues={['#fee5d9', '#cb181d']}
- *         size={6}
- *         shape="circle"
- *       />
- *     </GaodeMapScene>
- *   );
- * }
- * ```
- */
-export { GaodeMapScene } from './component/MapScene/GaodeMapScene';
-export { MapScene } from './component/MapScene/MapScene';
-export { useScene, SceneContext } from './component/SceneContext';
-export { useLayer, LayerContext } from './component/LayerContext';
-export { PointLayer, LineLayer, PolygonLayer, HeatmapLayer, RasterLayer, ImageLayer, } from './component/Layer';
-export { default as Control } from './component/Control';
-export { default as CustomControl } from './component/CustomControl';
-export { ZoomControl } from './component/Control/ZoomControl';
-export { ScaleControl } from './component/Control/ScaleControl';
-export { FullscreenControl } from './component/Control/FullscreenControl';
-export { GeoLocateControl } from './component/Control/GeoLocateControl';
-export { MapThemeControl } from './component/Control/MapThemeControl';
-export { MouseLocationControl } from './component/Control/MouseLocationControl';
-export { ExportImageControl } from './component/Control/ExportImageControl';
-export { LegendCategories } from './component/Legend/LegendCategories';
-export { LegendRamp } from './component/Legend/LegendRamp';
-export { LegendProportion } from './component/Legend/LegendProportion';
-export { LegendIcon } from './component/Legend/LegendIcon';
-export { default as Marker } from './component/Marker';
-export { default as MarkerLayer } from './component/MarkerLayer';
-export { default as Popup } from './component/Popup';
-export { LoadImage, LoadImages } from './component/LoadImage';
-export type { ISceneProps } from './component/MapScene/interface';
-export type { ILayerProps } from './component/LayerAttribute/index';
-export type { IMarkerProps } from './component/Marker';
-export type { IPopupProps } from './component/Popup';
-export type { ICustomControlProps } from './component/CustomControl';
-export type { IControlProps, ControlType } from './component/Control';
-export type { IMarkerLayerProps } from './component/MarkerLayer';
-export type { ILoadImageProps, ILoadImagesProps } from './component/LoadImage';
-export type { ZoomControlProps } from './component/Control/ZoomControl';
-export type { ScaleControlProps } from './component/Control/ScaleControl';
-export type { FullscreenControlProps } from './component/Control/FullscreenControl';
-export type { GeoLocateControlProps } from './component/Control/GeoLocateControl';
-export type { MapThemeControlProps } from './component/Control/MapThemeControl';
-export type { MouseLocationControlProps } from './component/Control/MouseLocationControl';
-export type { ExportImageControlProps } from './component/Control/ExportImageControl';
-export type { LegendCategoriesProps } from './component/Legend/LegendCategories';
-export type { LegendRampProps } from './component/Legend/LegendRamp';
-export type { LegendProportionProps } from './component/Legend/LegendProportion';
-export type { LegendIconProps, LegendIconItem } from './component/Legend/LegendIcon';