driving-route.tsx
1.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import * as React from "react";
import { ColorValue, ImageSourcePropType, Platform, processColor, requireNativeComponent } from "react-native";
import Component from "../component";
// @ts-ignore
import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
import { LatLng } from "../types";
export interface DrivingRouteProps {
/**
* 起点
*/
startPoint: LatLng;
/**
* 终点
*/
endPoint: LatLng;
/**
* 途经点
*/
throughPointList?: LatLng[];
/**
* 显示途经点
*/
throughPointVisible?: boolean;
/**
* 根据不同的路段拥堵情况展示不同的颜色
*/
colorFulLine?: boolean;
/**
* 线段宽度
*/
width?: number;
/**
* 路线的纹理
*/
roadLine?: ImageSourcePropType;
/**
* 驾车图标
*/
driveIcon?: ImageSourcePropType;
/**
* 起点图标
*/
startIcon?: ImageSourcePropType;
/**
* 终点图标
*/
endIcon?: ImageSourcePropType;
/**
* 途经点图标
*/
throughPointIcon?: ImageSourcePropType;
/**
* 线段颜色
*/
lineColor?: ColorValue;
}
export default class extends Component<DrivingRouteProps> {
static defaultProps = { with: 14, throughPointVisible: true };
/**
* 路线规划
*/
routePlan(start: LatLng, end: LatLng, throughPointList: LatLng[] = []) {
this.invoke("searchRoute", [start, end, throughPointList]);
}
render() {
const props = {
...this.props,
};
return (
<NativeDrivingRoute
{...props}
driveIcon={resolveAssetSource(props.driveIcon)}
startIcon={resolveAssetSource(props.startIcon)}
endIcon={resolveAssetSource(props.endIcon)}
throughPointIcon={resolveAssetSource(props.throughPointIcon)}
roadLine={resolveAssetSource(props.roadLine)}
/>
);
}
}
const NativeDrivingRoute = requireNativeComponent<DrivingRouteProps>("DrivingRoute");