react-amap-v2
Version:
高德地图 v2.0 react 组件
822 lines (756 loc) • 25.6 kB
text/typescript
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 = {
[ ]: 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;
}
}
}