Polyline路径
向场景视图中添加渲染三维坐标数组的图形
支持采样类型(线性，曲线，常量...)，线宽，颜色，纹理(直线，虚线，箭头)等属性
注意: 创建多个路径时, 创建需要花费一定的时间, 在创建完成时, 即未收到创建成功事件前不要执行删除等操作。
方法
批量/单个添加路径
- 方法名：add
- 参数说明：
// 方法
add(
polyline: PolylineOptions | Array<PolylineOptions>,
groupId: string
): this
// PolylineOptions 参数说明
export type PolylineOptions = {
id: string;
coordinates: Array<Array<number>>; // 三维坐标数组[[x,y,z],[x,y,z]]
width?: number; // 线宽，默认10.0
strokeWidth?: number; // 描边宽度，默认0.0
tilling?: number; // 纹理平铺，默认1000
style?: string; // 线条样式，默认Style2
meshDirection?: string; // 网格体定位，默认Ground_Center
color?: string | Array<number>; // 颜色数组
loop?: boolean; // 是否闭合
splineType?: string; // 采样类型，默认线性
speed?: number; // 流动速度，默认0.0
brightness?: number; // 亮度，默认5.0
};
/**
* 线风格
*/
export class PolylineStyle {
/**
* 实线
*/
static SOLID= 'Solid'as const;
/**
* 虚线
*/
static DASHED= 'Dashed'as const;
/**
* 箭头
*/
static ARROW='Arrow'as const;
/**
* 渐变
*/
static GRADIENT='Gradient'as const;
}
/**
* 采样类型
*/
export class PolylineType {
/**
* 线性
*/
static LINEAR= 'Linear'as const;
/**
* 曲线
*/
static CURVE='Curve'as const;
/**
* 常量
*/
static CONSTANT= 'Constant'as const;
/**
* 曲线已限制
*/
static CURVE_CLAMPED= 'CurveClamped'as const;
/**
* 曲线自定义切线
*/
static CURVE_CUSTOM_TANGENT= 'CurveCustomTangent'as const;
}
/**
* 网格体朝向
*/
export class PolylineDirection {
/**
* 贴地中线
*/
static GROUND_CENTER= 'Ground_Center'as const;
/**
* 贴地边线
*/
static GROUND_SIDE= 'Ground_Side'as const;
/**
* 竖起
*/
static STAND= 'Stand'as const;
}
| PolylineStyle | ||
|---|---|---|
| SOLID |  | 实线 |
| DASHED |  | 虚线 |
| ARROW |  | 箭头线 |
| GRADIENT |  | 渐变线 |
| PolylineDirection | ||
|---|---|---|
| GROUND_CENTER |  | 贴地中心线 |
| GROUND_SIDE |  | 贴地边线 |
| STAND |  | 竖起边线 |
| PolylineType | ||
|---|---|---|
| LINEAR |  | 线性 |
| CURVE |  | 曲线 |
| COSTANT |  | 常量 |
| CURVE_CLAMPED |  | 曲线已限制 |
| CURVE_CUSTOM_TANGENT |  | 曲线自定义切线 |
- 示例参考：
async function addPolyline(count: number = 10) {
const datas: Array<any> = []
for (let i: number = 0; i < count; i++) {
const height: number = Math.random() * 100
const randomX: number = Math.random() * 0.001
const randomY: number = Math.random() * 0.001
const style = [PolylineStyle.SOLID, PolylineStyle.DASHED, PolylineStyle.ARROW, PolylineStyle.GRADIENT][Math.floor(Math.random() * 3.99)]
const speed = style === PolylineStyle.SOLID ? 0 : Math.random() * 10
const polyline: any = {
id: `polyline${i}`,
coordinates: [
[121.982822 + randomX, 40.733832 + randomY, height],
[121.988949 + randomX, 40.731281 + randomY, height],
[121.990651 + randomX, 40.733259 + randomY, height],
[121.99326 + randomX, 40.732026 + randomY, height],
[121.994811 + randomX, 40.733918 + randomY, height],
[121.996399 + randomX, 40.733201 + randomY, height]
],
color: ['rgba(255,0,0,1)', 'rgba(0,255,0,1)', 'rgba(0,0,255,1)'][
Math.floor(Math.random() * 2.99)
],
style,
speed,
loop: Math.random() > 0.5
}
datas.push(polyline)
}
viewer.polyline.add(datas, 'testlayer')
}
全部路径移除
- 移除三维场景中已添加的路径
- 方法名：clear
- 参数说明：
/**
* 清除全部线
* @returns
*/
clear(): this
- 示例参考：
viewer.polyline.clear()
根据分组id完成路径移除
- 根据分组 id 移除三维场景中已添加的路径
- 方法名：clearByGroup
- 参数说明：
/**
* 传入groupId(单个或数组)清除线
* @param groupId
* @returns
*/
clearByGroup(groupId: string | Array<string>): this
- 示例参考：
viewer.polyline.clearByGroup(['testlayer'])
根据id完成路径移除
- 根据id移除三维场景中已添加的路径
- 方法名： clearById
- 参数说明：
/**
* 传入id(单个或数组)清除线
* @param id
* @returns
*/
clearById(id: string | Array<string>): this
- 示例参考：
viewer.polyline.clearById(['testlayer'])
设置全部路径可见性
- 设置全部路径的显示/隐藏
- 方法名：setPolylineVisible
- 参数说明：
/**
* 设置全部可见性
* @param visible
* @returns
*/
setPolylineVisible(visible = true): this
传入groupId(单个或数组)设置路径可见性
- 根据groupId设置对应路径的显示/隐藏
- 方法名：setPolylineVisibleByGroup
- 参数说明：
/**
* 传入groupId(单个或数组)设置可见性
* @param groupId
* @param visible
* @returns
*/
setPolylineVisibleByGroup(groupId: string | Array<string>, visible = true): this
- 示例参考：
viewer.polyline.setPolylineVisibleByGroup(groupId, false)
传入id(单个或数组)设置路径可见性
- 根据id设置对应路径的显示/隐藏
- 方法名：setPolylineVisibleById
- 参数说明：
/**
* 传入id(单个或数组)设置可见性
* @param id
* @param visible
* @returns
*/
setPolylineVisibleById(id: string | Array<string>, visible = true): this
- 示例参考：
viewer.polyline.setPolylineVisibleById(id, false)
传入id和index展示部分路径
- 传入
id和index展示对应路径下标≤index的部分 - 方法名：setVisibleByIndex
- 参数说明：
/**
* 根据指定的ID和索引设置路径的可见性。
* @param id 可以是一个字符串或者字符串数组，代表需要设置可见性的路径的ID。
* @param index 默认为0，代表需要设置可见性的路径的索引。
* @returns 返回当前对象实例，支持链式调用。
*/
setVisibleByIndex(id: string | Array<string>, index = 0): this
路径事件
- 目前支持三维场景中已添加路径的点击事件
- 方法名：on/off
- 参数说明：
/**
* 开启Polyline事件监听
* @param type
* @param callback
* @param context
* @returns
*/
on(type: PolylineEventType, callback, context) {
return this._polylineEvent.on(type, callback, context);
}
/**
* 关闭Polyline事件监听
* @param type
* @param callback
* @param context
* @returns
*/
off(type: PolylineEventType, callback, context): boolean {
return this._polylineEvent.off(type, callback, context);
}
// PolylineEventType 参数说明
export class PolylineEventType {
static Click = 'click' as const;
}
- 示例参考：
viewer.polyline.on(PolylineEventType.Click, (res) => {
console.log(res, 'PolylineEventType.Click====')
})
- 回调的数据格式说明:
{
"eventName": "OnPolylineClick",
"datas": {
"id": "line1",
"width": 40,
"strokeWidth": 0,
"tilling": 1000,
"style": "Solid",
"meshDirection": "Ground_Side",
"color": [
1,
0,
0,
1
],
"splineType": "Linear",
"speed": 0,
"loop": false,
"brightness": 5,
"coordinates": [
"121.982819 40.733833 10.0",
"121.988953 40.731281 10.0",
"121.990654 40.733257 10.0",
"121.993263 40.732025 10.0",
"121.994812 40.733917 10.0",
"121.996399 40.7332 10.0"
]
}
}
示例
围墙
{
"id": "polygon112.0",
"coordinates": [
[
121.98014,
40.70526,
10
],
[
121.98014,
40.70526,
10
],
[
121.98913,
40.71559,
10
],
[
122.00557,
40.70734,
10
],
[
122.00142,
40.70255,
10
],
[
121.9953,
40.70561,
10
],
[
121.99052,
40.70009,
10
],
[
121.98014,
40.70526,
10
]
],
"color": "rgba(0,255,0,1)",
"width": 100,
"style": PolylineStyle.GRADIENT,
"meshDirection": PolylineDirection.STAND,
"splineType": PolylineType.LINEAR,
"loop": true
}