react-amap-v2/src/ui-types.ts

高德地图 v2.0 react 组件

export {};

declare global {
  namespace AMapUI {
    function load(name: string[], C: any): void;

    namespace PathSimplifier {
      interface Event {
        type: string;
      }

      interface Events<T> {
        created: (pathSimplifier: AMapUI.PathSimplifier) => void;
        pathClick: (e: Event, pathInfo: PathInfo<T>) => void;
        pathMouseover: (e: Event, pathInfo: PathInfo<T>) => void;
        pathMouseout: (e: Event, pathInfo: PathInfo<T>) => void;
        pointClick: (e: Event, pathInfo: PointInfo<T>) => void;
        pointMouseover: (e: Event, pathInfo: PointInfo<T>) => void;
        pointMouseout: (e: Event, pathInfo: PointInfo<T>) => void;
      }

      interface DirArrowStyle {
        /**
         * 箭头排布的间隔，单位像素
         */
        stepSpace: number;
        /**
         * 箭头宽度，通常不用设置，直接取所在轨迹线的lineWidth
         */
        width?: number;
      }

      interface PathLineStyle {
        /**
         * 线颜色，比如 red, rgb(255,0,0), rgba(0,0,0,1)等
         */
        strokeStyle?: string;
        /**
         * 线宽度
         */
        lineWidth?: number;
        /**
         * 描边颜色
         */
        borderStyle?: string;
        /**
         * 描边宽度
         */
        borderWidth?: number;
        /**
         * 方向箭头样式，lineWidth>=4 时有效
         * 为 true 时直接使用默认配置
         */
        dirArrowStyle?: DirArrowStyle | boolean;
      }

      interface PathLineHoverStyle extends PathLineStyle {
        /**
         * 轨迹线选中时禁用Hover样式，默认true
         */
        disableIfSelected?: boolean;
      }

      interface KeyPointStyle {
        /**
         * 点的半径
         */
        radius?: number;
        /**
         * 填充色，比如 red, rgb(255,0,0), rgba(0,0,0,1)等
         */
        fillStyle?: string;
        /**
         * 描边色
         */
        strokeStyle?: string;
        /**
         * 描边宽度
         */
        lineWidth?: number;
      }

      interface PathInfo<T> {
        pathIndex: number;
        pathData: T;
      }

      interface PointInfo<T> {
        pointIndex: number;
        pathIndex: number;
        pathData: T;
      }

      interface RendderOptions<T> {
        /**
         * 是否支持事件（click，mouseover，mouseout），默认为True。事件监听本身对性能有一定的损耗，如果不需要，可以关闭。
         */
        eventSupport?: boolean;
        /**
         * 对轨迹线上不可见（参见keyPointTolerance）的节点，是否支持事件，默认为True。
         */
        eventSupportInvisible?: boolean;
        /**
         * 绘制轨迹线的简化参数，默认为2。该参数不宜设置过大，推荐范围 1~5。过大的参数会导致鼠标识别以及轨迹巡航偏离轨迹线
         */
        pathTolerance?: number;
        /**
         * 绘制中间节点的简化参数，取值规则如下：
         * 1. 小于0, 不绘制任何中间节点；默认设置。
         * 2. 大于等于0，对简化过的绘制轨迹线做二次简化，结果以点的形式绘制（入下图中的蓝色圆点）
         */
        keyPointTolerance?: number;
        /**
         * 如果地图视野内的轨迹节点的总数量小于该阈值，则绘制全部的节点。默认值为-1，即不开启。开启时，建议设置一个1000以内的数值
         */
        renderAllPointsIfNumberBelow?: number;
        /**
         * 轨迹线的样式
         */
        pathLineStyle?: PathLineStyle | boolean;
        /**
         * 轨迹线在鼠标Hover时的样式，属性继承 pathLineStyle
         */
        pathLineHoverStyle?: PathLineHoverStyle | boolean;
        /**
         * 轨迹线处于选中状态时的样式， 属性继承 pathLineStyle
         */
        pathLineSelectedStyle?: PathLineStyle | boolean;
        /**
         * 轨迹线上方向箭头的默认配置（pathLine***Style中可覆盖），属性继承 pathLineStyle
         */
        dirArrowStyle?: DirArrowStyle | boolean;
        /**
         * 轨迹节点的绘制样式
         */
        keyPointStyle?: KeyPointStyle | boolean;
        /**
         * 轨迹起点的绘制样式 属性继承  keyPointStyle
         */
        startPointStyle?: KeyPointStyle | boolean;
        /**
         * 轨迹终点的绘制样式 属性继承  keyPointStyle
         */
        endPointStyle?: KeyPointStyle | boolean;
        /**
         * 轨迹点在鼠标Hover时的样式 ，属性继承  keyPointStyle
         */
        keyPointHoverStyle?: KeyPointStyle | boolean;
        /**
         * 选中状态下的轨迹线上的节点的样式， 属性继承 keyPointStyle
         */
        keyPointOnSelectedPathLineStyle?: KeyPointStyle | boolean;
        /**
         * 根据轨迹索引和zoom返回样式配置
         */
        getPathStyle?: (
          pathInfo: PathInfo<T>,
          zoom: number,
        ) => Partial<
          Pick<
            RendderOptions<T>,
            | 'pathLineStyle'
            | 'pathLineHoverStyle'
            | 'pathLineSelectedStyle'
            | 'dirArrowStyle'
            | 'keyPointHoverStyle'
            | 'startPointStyle'
            | 'endPointStyle'
            | 'keyPointOnSelectedPathLineStyle'
          >
        >;
        /**
         * 鼠标Hover时显示的Title的样式
         */
        hoverTitleStyle?: {
          /**
           * title的位置，left 或者 top
           */
          position?: 'left' | 'top';
          /**
           * title所用的dom节点上的classNames，多个用空格分开，可借此调整dom节点的样式
           */
          classNames?: string;
          /**
           * title的dom节点相对于定位点的偏移
           */
          offset?: [number, number];
        };
      }

      interface Options<T = any> {
        /**
         * 地图对象实例，用于显示相关的Marker
         */
        map?: AMap.Map;
        /**
         * 绘制用图层的叠加顺序值 。如果需要叠加在地图的最上层，可以设置一个较大的值，比如300
         */
        zIndex?: number;
        /**
         * 数据源数组，每个元素即为轨迹相关的信息
         */
        data: T[];
        /**
         * 返回轨迹数据中的路径信息
         */
        getPath: (pathData: T, pathIndex: number) => any[] | any[][];
        /**
         * 返回轨迹数据项的叠加顺序值，即zIndex。zIndex较大的轨迹绘制在上层; 如果zIndex值相同，则pathIndex较大的绘制在上层。
         */
        getZIndex?: (pathData: T, pathIndex: number) => number;
        /**
         * 返回鼠标悬停时显示的Title内容
         */
        getHoverTitle?: (
          pathData: T,
          pathIndex: number,
          pointIndex: number,
        ) => string | null;
        /**
         * 是否在绘制后自动调整地图视野以适合全部轨迹，默认true。
         */
        autoSetFitView?: boolean;
        /**
         * 点击轨迹节点或者轨迹节点间的连线时，选中该轨迹，默认true。
         */
        clickToSelectPath?: boolean;
        /**
         * 置顶选中的轨迹线；置顶的含义是，将该轨迹线的zIndex设置为现存最大值+1。默认true。
         */
        onTopWhenSelected?: boolean;
        /**
         * 绘制引擎的构造类（Function），默认为内置的Canvas引擎
         */
        renderConstructor?: Function;
        /**
         * 绘制引擎的构造参数
         */
        renderOptions?: RendderOptions<T>;
      }
    }

    class PathSimplifier<T = any> {
      constructor(options: PathSimplifier.Options<T>);

      // 类名
      CLASS_NAME: string;

      /**
       * 返回pathIndex对应的轨迹数据项的zIndex值
       * @param pathIndex
       */
      getZIndexOfPath(pathIndex: number): number;

      /**
       * 设置pathIndex对应的轨迹数据项的zIndex值
       * @param pathIndex
       * @param zIndex
       */
      setZIndexOfPath(pathIndex: number, zIndex: number): void;

      /**
       * 是否置顶显示pathIndex对应的轨迹。具体行为是：
       * 1. isTop为真，设置 zIndex 为 现存最大zIndex+1
       * 2. isTop为假，设置 zIndex 为 构造参数中 getZIndex 的返回值
       * @param pathIndex
       * @param isTop
       */
      toggleTopOfPath(pathIndex: number, isTop: boolean): void;

      /**
       * 返回pathIndex对应的轨迹数据项
       * @param pathIndex
       */
      getPathData(pathIndex: number): T;

      /**
       * 创建一个轨迹巡航器。
       * pathIndex：关联的轨迹索引
       * options：巡航器的配置选项，详见下方轨迹巡航器部分。
       * @param pathIndex
       * @param options
       */
      createPathNavigator(pathIndex: number, options: Object): any;

      /**
       * 返回现存的所有轨迹巡航器（已创建未销毁  ）
       */
      getPathNavigators(): any[];
      /**
       * 销毁现存的所有轨迹巡航器
       */
      clearPathNavigators(): void;

      /**
       * 返回处于选中状态的轨迹数据项；无选中时，返回null
       */
      getSelectedPathData(): T | null;

      /**
       * 返回处于选中状态的的pathIndex；无选中时，返回-1
       */
      getSelectedPathIndex(): number;

      /**
       * 判断pathIndex对应的轨迹是否处于选中状态
       * @param pathIndex
       */
      isSelectedPathIndex(pathIndex: number): boolean;

      /**
       * 选中（单选）pathIndex对应的轨迹；pathIndex < 0等同于清除选中状态。
       * @param pathIndex
       */
      setSelectedPathIndex(pathIndex: number): void;

      /**
       * 立即重新绘制
       */
      render(): void;

      /**
       * 延时设定的毫秒(默认10)后绘制；该时间段内重复调用只会触发一次。该函数适合短时间内多次触发绘制的场景。
       * @param delay
       */
      renderLater(delay: number): void;

      /**
       * 设定数据源数组，并触发重新绘制。data为空时将清除显示内容
       * @param data
       */
      setData(data: T[]): void;

      /**
       * 自动调整地图视野，适应pathIndex对应的轨迹线。
       * 如果pathIndex < 0, 则适应全部的轨迹线。
       * @param pathIndex
       */
      setFitView(pathIndex: number): void;

      on(eventName: string, handler: any): void;
      off(eventName: string, handler: any): void;

      /**
       * 隐藏
       */
      hide(): void;

      /**
       * 显示
       */
      show(): void;

      /**
       * 返回是否处于隐藏状态
       */
      isHidden(): boolean;

      /**
       * 返回内部使用的绘制引擎的实例
       */
      getRender(): any;

      /**
       * 返回内部绘制引擎的参数选项的引用。更改后，调用renderLater()方法重新绘制即可生效。
       */
      getRenderOptions(): PathSimplifier.RendderOptions<T>;
    }

    interface PathNavigatorOptions {
      loop?: boolean;
      speed?: number;
      pathNavigatorStyle?: any;
      animInterval?: number;
      dirToPosInMillsecs?: number;
      range?: number[];
    }

    namespace PathNavigator {
      interface EventMap<T> {
        /**
         * 调用start时触发
         */
        start(e: Event): void;

        /**
         * 调用pause时触发
         */
        pause(e: Event): void;

        /**
         * 调用moveByDistance（动画过程会调用该方法）， moveToPoint 时触发
         */
        move(e: Event): void;

        /**
         * 调用stop时触发
         */
        stop(e: Event): void;
      }
    }

    class PathNavigator {
      constructor(options: PathNavigatorOptions);

      /**
       * 开始路径巡航。 pointIndex用于指定巡航的起始节点索引，默认为节点索引范围（range）的最小值
        如果是浮点类型，则整数部分表示起始点索引，小数部分表示起始点和下一节点间的比例位置。比如7.5就表示7~8的中间位置
       */
      start(pointIndex: number): void;

      /**
       * 暂停巡航
       */
      pause(): void;

      /**
       * 恢复巡航
       */
      resume(): void;

      /**
       * 停止巡航，同时清除已经过路径（这一点不同于pause）
       */
      stop(): void;

      /**
       * 销毁巡航器。巡航作为动画过程是非常耗费性能的，因此不再需要时应及时销毁
       */
      destroy(): void;

      /**
       * 返回当前所处的索引位置。
       */
      getCursor(): {
        /**
         * 节点索引
         */
        idx: number;
        /**
         * 至下一个节点的比例位置
         */
        tail: number;
      };
      /**
       * 返回巡航状态
       */
      getNaviStatus(): 'stop' | 'moving' | 'pause';
      /**
       * 返回巡航路径的轨迹索引，即 创建（createPathNavigator）时 传入的第一个参数
       */
      getPathIndex(): number;
      /**
       * 返回当前位置的经纬度
       */
      getPosition(): AMap.LngLat;
      /**
       * 返回当前设定的速度
       */
      getSpeed(): number;
      /**
       * 返回巡航经过的距离(起始节点到当前位置)，单位米；stop后会重置为0
       */
      getMovedDistance(): number;
      /**
       * 返回巡航路径的起始节点索引
       */
      getPathStartIdx(): number;
      /**
       * 返回巡航路径的结束节点索引
       */
      getPathEndIdx(): number;
      /**
       * 将巡航器移动指定的距离，单位米
       */
      moveByDistance(distance: number): void;
      /**
       * 将巡航器移动到指定的节点索引位置，tail含义见getCursor
       */
      moveToPoint(idx: number, tail: number): void;

      isCursorAtPathEnd(): boolean;

      isCursorAtPathStart(): boolean;
      /**
       * 设定巡航器的速度，单位千米/小时
       */
      setSpeed(speed: number): void;
      /**
       * 设定巡航器的路径节点索引范围
       */
      setRange(startIndex: number, endIndex: number): void;
      /**
       * 监听 eventName 事件，多个事件用空格分隔
       */
      on<C = this>(
        eventName: string,
        handler: ((this: C, event: any) => void) | 'mv',
      ): any;
      /**
       *  注销 eventName 事件，多个事件用空格分隔
       */
      off<C = this>(
        eventName: string,
        handler: ((this: C, event: any) => void) | 'mv',
      ): any;
    }

    namespace PointSimplifier {
      interface Point<T> {
        data: T;
        index: number;
      }

      interface Events<T> {
        /**
         * 创建
         */
        created: (pointSimplifier: AMapUI.PointSimplifier) => void;
        /**
         * 鼠标点击点的矩形区域时触发
         */
        pointClick: <T>(e: { type: string }, point: Point<T>) => void;
        /**
         * 鼠标移入到点的矩形区域时触发
         */
        pointMouseover: <T>(e: { type: string }, point: Point<T>) => void;
        /**
         * 鼠标移出到点的矩形区域时触发
         */
        pointMouseout: <T>(e: { type: string }, point: Point<T>) => void;
      }

      namespace Render {
        namespace Canvas {
          export type RenderContext2D = (
            ctx: CanvasRenderingContext2D,
            x: number,
            y: number,
            width: number,
            height: number,
          ) => void;

          export type GetImageContent = {
            url: string;
            onload?: (pointSimplifier?: PointSimplifier) => void;
            onerror?: (error: any) => void;
          };

          interface PointSize {
            width: number;
            height: number;
          }

          interface Bounds {
            x: number;
            y: number;
            width: number;
            height: number;
          }

          export interface PointStyle {
            content?:
              | 'rect'
              | 'circle'
              | 'none'
              | RenderContext2D
              | GetImageContent;
            offset?: [number, number];
            width?: number;
            height?: number;
            fillStyle?: string;
            lineWidth?: number;
            strokeStyle?: string;
            autoGlobalAlphaAlpha?: [number, number];
          }

          interface Options {
            /**
             * 是否支持事件（click，mouseover，mouseout），默认为True。事件监听本身对性能有一定的损耗，如果不需要，可以关闭。
             */
            eventSupport?: boolean;
            /**
             * 是否绘制四叉树，通常在开发调试阶段开启，默认关闭。开启后可以通过 quadTreeStyle 来调整样式
             */
            drawQuadTree?: boolean;
            /**
             * 是否绘制位置点，通常在开发调试阶段开启，辅助设定点的绘制区域的偏移（比如圆形的定位点在中心，而水滴形状的定位点在底部中心位置），默认关闭。
             * 开启后可以通过  pointPositionStyle  来调整样式
             */
            drawPositionPoint?: boolean;
            /**
             * 是否绘制 Shadow Point ，默认关闭。 开启后可以通过  shadowPointStyle  来调整样式。
             * 该功能有助于直观的分辨哪些点的空间被挤占了。
             * 但是，绘制的点的数量将大幅增加（相当于规避了占位检测的过滤功能），建议谨慎开启
             */
            drawShadowPoint?: boolean;
            /**
             * 点的样式
             */
            pointStyle?: PointStyle;
            /**
             * 点的”硬核空间“的样式，取值参见 pointStyle 。
             * 默认 fillStyle、strokeStyle 以及content属性为空，即不显示。
             */
            pointHardcoreStyle?: PointStyle;
            /**
             * 定位点的样式， drawPositionPoint 开启时有效，取值参见pointStyle。
             */
            pointPositionStyle?: PointStyle;
            /**
             * 鼠标Hover时绘制的覆盖点的样式
             */
            pointHoverStyle?: PointStyle;
            /**
             * Shadow Point（空间被挤占的点）的样式，drawShadowPoint 开启时有效
             */
            shadowPointStyle?: PointStyle;
            /**
             * TopN区域的样式
             */
            topNAreaStyle?: PointStyle;
            /**
             * 根据密度计算TopN区域的分数，范围为1-10，就近取整
             */
            getAreaScore?: (
              minScore: number,
              maxScore: number,
              bounds: Bounds,
              descendantsNum: number,
              pointSize: PointSize,
            ) => number;
            /**
             * 四叉树的样式   drawQuadTree 开启时有效，取值（仅包括属性fillStyle,lineWidth,strokeStyle）
             */
            quadTreeStyle?: Pick<
              PointStyle,
              'fillStyle' | 'lineWidth' | 'strokeStyle'
            >;
            /**
             * 鼠标Hover时显示的Title（如下图红框部分）的样式
             */
            hoverTitleStyle?: {
              position?: 'left' | 'top';
              classNames?: string;
              offset?: [number, number];
            };
            /**
             * 返回一个面积阈值，当四叉树的节点区域小于该阈值时，会进行TopN选取
             */
            getAreaSizeForTopSelect: (
              zoom: number,
              pointSize: PointSize,
            ) => number;
            /**
             * 返回某个区域内按优先级（由 compareDataItem 确定）选取的点的数量
             */
            getNumForTopSelect: (
              zoom: number,
              bounds: Bounds,
              descendantsNum: number,
              pointSize: PointSize,
            ) => number;
          }

          namespace GroupStyleRender {
            type GroupStyle = {
              [gid: string]: Canvas.PointStyle;
            };

            type GetGroupStyle = (gid: string) => Canvas.PointStyle;

            interface Options<T = any> extends Canvas.Options {
              /**
               * 返回某个数据项的分组Id，函数类型如下
               */
              getGroupId: (item: T, index: number) => string;
              /**
               * 分组样式
               */
              groupStyleOptions: GroupStyle | GetGroupStyle;
            }
          }

          class GroupStyleRender<T = any> extends Canvas {
            constructor(options: GroupStyleRender.Options<T>);
          }
        }

        class Canvas {
          constructor(options: Canvas.Options);
          /**
           * 用于创建图片内容的 content
           *
           * @memberof Canvas
           */
          static getImageContent: (
            url: string,
            onload?: () => void,
            onerror?: (error: any) => void,
          ) => any;
        }
      }

      interface Options<T> {
        /**
         * 地图对象实例，用于显示相关的Marker
         */
        map?: AMap.Map;
        /**
         * 绘制用图层的叠加顺序值 。如果需要叠加在地图的最上层，可以设置一个较大的值，比如300
         */
        zIndex?: number;
        /**
         * 数据源数组，每个元素即为点相关的信息
         */
        data: T[];
        /**
         * 返回数据项中的经纬度信息
         */
        getPosition: (item?: T, index?: number) => number[] | undefined;
        /**
         * 返回鼠标Hover时显示的Title内容
         */
        getHoverTitle?:
          | boolean
          | ((item?: T, index?: number) => string | undefined);
        /**
         *  据项的优先级比较函数，用于Array.sort(compare)；排序后的数组，靠前的优先绘制。
         */
        compareDataItem?: (
          a?: T,
          b?: T,
          aIndex?: number,
          bIndex?: number,
        ) => -1 | 0 | 1;
        /**
         * 是否在绘制后自动调整地图视野以适合全部点，默认true。
         */
        autoSetFitView?: boolean;
        /**
         * 绘制引擎的构造类
         */
        renderConstructor?: any;
        /**
         * 绘制引擎的构造参数
         */
        renderOptions?:
          | Partial<Render.Canvas.Options>
          | Partial<Render.Canvas.GroupStyleRender.Options>;
        /**
         * 四叉树叶子节点中包含的点的最大数量，超过该数量则进行宽高等分，一分为四。默认100。
         * 通常来说，值越小，分叉的可能性越大，一方面，这有助于精细的划分高密度区域，另外一面，
         * 也增加了四叉树的节点数量（指数增长），从而有损性能。
         */
        maxChildrenOfQuadNode?: number;
        /**
         * 四叉树的最大高度。默认16. 超过该高度，即使数量超过 maxChildrenOfQuadNode 的限制，也不再分叉。
         */
        maxDepthOfQuadTree?: number;
        /**
         * 点的范围矩形的最坏宽高比（ 取值小于1，大于 1 时会自动取倒数）。
         * 四叉树的根节点是根据点的分布范围构建的，分叉之后的宽高比也与根节点一致，
         * 过宽或者过高的矩形可能会影响TopN区域的视觉观感（比如出现 100*1 的矩形）。
         * 默认值为0.6，宽高比小于该阈值时会对范围矩形做一定的扩充，缩小宽和高的差距，
         * 使其更加“周正”。
         */
        badBoundsAspectRatio?: number;
      }
    }

    class PointSimplifier<T = any> {
      constructor(options: PointSimplifier.Options<T>);

      // 类名
      CLASS_NAME: string;

      /**
       * 立即重新绘制
       */
      render(): void;
      /**
       * 延时设定的毫秒(默认10)后绘制；该时间段内重复调用只会触发一次。该函数适合短时间内多次触发绘制的场景。
       * @param delay number
       */
      renderLater(delay?: number): void;
      /**
       * 设定数据源数组，并触发重新绘制。data为空时将清除显示内容。
       * @param data T[]
       */
      setData(data: T[]): void;
      /**
       * 隐藏
       */
      hide(): void;
      /**
       * 显示
       */
      show(): void;
      /**
       * 返回是否处于隐藏状态
       */
      isHidden(): boolean;
      /**
       * 返回内部使用的绘制引擎的实例
       */
      getRender():
        | PointSimplifier.Render.Canvas
        | PointSimplifier.Render.Canvas.GroupStyleRender;
      /**
       * 返回内部绘制引擎的参数选项的引用。更改后，调用renderLater()方法重新绘制即可生效
       */
      getRenderOptions():
        | PointSimplifier.Render.Canvas.Options
        | PointSimplifier.Render.Canvas.GroupStyleRender.Options;

      on(eventName: string, handler: any): void;
      off(eventName: string, handler: any): void;
    }
  }
}