UNPKG

react-amap-v2

Version:

高德地图 v2.0 react 组件

822 lines (756 loc) 25.6 kB
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; } } }