eZWalker Tesla路径元素管理 PathManager
路径元素管理器是用于控制云渲染路径元素的工具，通过获取该管理器，用户可以方便地进行路径的控制和管理。 该工具的主要功能包括：
- 添加路径
- 获取所有图层对象
- 通过图层名获取图层对象
- 批量移除图层
- 设置绘制完成回调函数
- 根据url批量添加路径
我们将提供详细的使用指南和功能说明，帮助用户更好地使用该工具。
PathManager
用户可以调用云渲染实例 cloud 上的 getPathManager() 方法来获取 PathManager 路径管理器。
ts
const pathManager = await cloud.getPathManager()const pathManager = await cloud.getPathManager()用户调用 cloud.getPathManager() 后，PathManager 会被自动挂载到当前 cloud 实例上。
ts
await cloud.getPathManager()
const pathManager = cloud.pathManagerawait cloud.getPathManager()
const pathManager = cloud.pathManager
路径添加 | addPath
- 说明：添加路径对象
我们可以调用 PathManager 上面的 addPath 方法来添加路径。
- 参数说明
| Name | Type | Description |
|---|---|---|
args | any[] | 不定数量的参数 |
调用示例：
ts
//方式一：
const pathManager = await cloud.getPathManager()
const layerName = 'path';
const pathMaterial: PathMaterial = {
diffuse: '0x6495ED00', //路径颜色
speed: 0, //纹理流速
diffuseTexture: 'advance_arrow', //纹理，可选填值：默认值：""、default、advance_arrow、light_arrow、Semicircle_arrow、combination_arrow等
};
const bottons = [];
// bottons.push(new LonLatAlt(45.8719157700, -25.3248080505, -28.5463268571));
// bottons.push(new LonLatAlt(44.3180958674, -16.8577567936, -11.6302664680));
// bottons.push(new LonLatAlt(49.3905476282, -12.2034499855, -53.0519158412));
bottons.push(new Vector3(0, 0, 0));
bottons.push(new Vector3(5, 0, 5));
bottons.push(new Vector3(10, 0, 0.5));
bottons.push(new Vector3(15, 0, 0.8));
bottons.push(new Vector3(20, 0, 1));
bottons.push(new Vector3(30, 0, 0.5));
const pathGeo: PathGeometry = {
vertexes: bottons, //多线段的顶点
lineWidth: 0.10000000149011612, //多段线的线宽
};
await pathManager.addPath(layerName, pathMaterial, pathGeo);
//方式二：
const pathManager = await cloud.getPathManager()
const param = {
layerName: 'path',
Material: {
Diffuse:"0XFF00FF00",
DiffuseTexture: 'Semicircle_arrow',
UVAnimation: {
x: 0.02,
y: 0
}
},
Params:
{
LineWidth: 0.10000000149011612, //多段线的线宽
TextureRate: 1.0, //线的纹理率(一般来说不变)
WHRatio: 2.0, // 纹理图片宽高比
SmoothnessOfCorners: 'middle', // 'high'、'middle'、low
Vertexes: //多线段的顶点
[
[
15.625022888183594,
0.0099849095568060875,
29.745611190795898,
],
[
37.157989501953125,
0.010088586248457432,
28.169088363647461,
],
[
36.95220947265625,
0.010002888739109039,
16.018711090087891,
],
[
27.902980804443359,
0.0099409837275743484,
14.839985847473145,
],
[
20.155799865722656,
0.0099557051435112953,
24.936176300048828,
],
],
},
type: '.primt',
}
await pathManager.addPath(param)//方式一：
const pathManager = await cloud.getPathManager()
const layerName = 'path';
const pathMaterial: PathMaterial = {
diffuse: '0x6495ED00', //路径颜色
speed: 0, //纹理流速
diffuseTexture: 'advance_arrow', //纹理，可选填值：默认值：""、default、advance_arrow、light_arrow、Semicircle_arrow、combination_arrow等
};
const bottons = [];
// bottons.push(new LonLatAlt(45.8719157700, -25.3248080505, -28.5463268571));
// bottons.push(new LonLatAlt(44.3180958674, -16.8577567936, -11.6302664680));
// bottons.push(new LonLatAlt(49.3905476282, -12.2034499855, -53.0519158412));
bottons.push(new Vector3(0, 0, 0));
bottons.push(new Vector3(5, 0, 5));
bottons.push(new Vector3(10, 0, 0.5));
bottons.push(new Vector3(15, 0, 0.8));
bottons.push(new Vector3(20, 0, 1));
bottons.push(new Vector3(30, 0, 0.5));
const pathGeo: PathGeometry = {
vertexes: bottons, //多线段的顶点
lineWidth: 0.10000000149011612, //多段线的线宽
};
await pathManager.addPath(layerName, pathMaterial, pathGeo);
//方式二：
const pathManager = await cloud.getPathManager()
const param = {
layerName: 'path',
Material: {
Diffuse:"0XFF00FF00",
DiffuseTexture: 'Semicircle_arrow',
UVAnimation: {
x: 0.02,
y: 0
}
},
Params:
{
LineWidth: 0.10000000149011612, //多段线的线宽
TextureRate: 1.0, //线的纹理率(一般来说不变)
WHRatio: 2.0, // 纹理图片宽高比
SmoothnessOfCorners: 'middle', // 'high'、'middle'、low
Vertexes: //多线段的顶点
[
[
15.625022888183594,
0.0099849095568060875,
29.745611190795898,
],
[
37.157989501953125,
0.010088586248457432,
28.169088363647461,
],
[
36.95220947265625,
0.010002888739109039,
16.018711090087891,
],
[
27.902980804443359,
0.0099409837275743484,
14.839985847473145,
],
[
20.155799865722656,
0.0099557051435112953,
24.936176300048828,
],
],
},
type: '.primt',
}
await pathManager.addPath(param)获取所有图层对象 | getAllLayer
- 说明：获取所有图层对象
我们可以调用 PathManager 上面的 getAllLayer 方法来获取所有图层对象。
调用示例：
ts
pathManager = await cloud.getPathManager()
await pathManager.getAllLayer();pathManager = await cloud.getPathManager()
await pathManager.getAllLayer();通过图层名获取图层对象 | getLayerByLayerName
- 说明：通过图层名获取图层对象
我们可以调用 PathManager 上面的 getLayerByLayerName 方法来通过图层名获取图层对象。
- 参数说明
| Name | Type | Description |
|---|---|---|
laylerName | string | 图层对象名 |
调用示例：
ts
pathManager = await cloud.getPathManager()
await pathManager.getLayerByLayerName('path');pathManager = await cloud.getPathManager()
await pathManager.getLayerByLayerName('path');批量移除图层 | removeLayers
- 说明：批量移除图层
我们可以调用 PathManager 上面的 removeLayers 方法来批量移除图层。
- 参数说明
| Name | Type | Description |
|---|---|---|
| layers | PathLayer[] | 路径图层对象数组 |
调用示例：
ts
pathManager = await cloud.getPathManager()
var layers = await pathManager.getAllLayer();
await pathManager.removeLaylers(layers);pathManager = await cloud.getPathManager()
var layers = await pathManager.getAllLayer();
await pathManager.removeLaylers(layers);设置绘制完成的回调函数 | setFinishedCallback
- 说明：设置绘制完成的回调函数
我们可以调用 PathManager 上面的 setFinishedCallback 方法来设置绘制完成的回调函数。
- 参数说明
| Name | Type | Description |
|---|---|---|
fn | (object: null | Path) => void | 函数对象，参数为Path|null，返回值为void |
调用示例：
ts
async function CallBack( Path | null) {
console.warn(Path)
}
const pathManager = await cloud.getPathManager();
await pathManager.setFinishedCallback(CallBack);async function CallBack( Path | null) {
console.warn(Path)
}
const pathManager = await cloud.getPathManager();
await pathManager.setFinishedCallback(CallBack);根据url批量添加路径 | addPathByUrl
- 说明：根据url批量添加路径
我们可以调用 PathManager 上面的 addPathByUrl 方法来根据url批量添加路径。
- 参数说明
| Name | Type | Description |
|---|---|---|
url | string | 路径数据来源url地址 数据格式：{"paths":[{"layerName": 'path',"Material": {"DiffuseTexture": "Stroke_arrow","UVAnimation": {"x": 0.02,"y": 0,},"MaterialType":0,"Metallic":0.5,"NormalOrBumpScale":1.0,"Roughness":0.5,},"Params": {// 多段线 "LineWidth": 0.5, // 多段线的线宽 "TextureRate": 1.0, // 线的纹理率(一般来说不变) "WHRatio": 2.0, // 纹理图片宽高比 "SmoothnessOfCorners": "middle", // 多线段的顶点 "Vertexes": [[0, 0, 0],[15, 0, 15],[25, 0, 15.5],[30, 0, 15],[40, 0, 16],[50, 0, 21],[60, 0, 16],],VertexesByLLA: [ //多线段的顶点（利用经纬高表示坐标），Vertexes与VertexesByLLA二选一即可 |
[0.0001755172, 0.0002241050, 0.0001931777],
[0.0003718209, 0.0001381862, 0.0000832407],
[0.0003389351, 0.0000478652, 0.0001034047],
],},"type": ".primt",},{"layerName": 'path',"Material": {"Diffuse":"0XFF00FF00", "DiffuseTexture": 'Semicircle_arrow',"UVAnimation": {"x": 0.02,"y": 0,},"MaterialType":0, "Metallic":0.5,"NormalOrBumpScale":1.0,"Roughness":0.5,},"Params": { // 多段线 "LineWidth": 0.5, // 多段线的线宽 "TextureRate": 1.0, // 线的纹理率(一般来说不变) "WHRatio": 2.0, // 纹理图片宽高比 "SmoothnessOfCorners": "middle",// 多线段的顶点 "Vertexes": [[0, 0, 0],[-15, 0, 15],[-25, 0, 15.5],[-30, 0, 15],[-40, 0, 16],[-50, 0, 21],[-60, 0, 16],],VertexesByLLA: [ //多线段的顶点（利用经纬高表示坐标），Vertexes与VertexesByLLA二选一即可
[0.0001755172, 0.0002241050, 0.0001931777],
[0.0003718209, 0.0001381862, 0.0000832407],
[0.0003389351, 0.0000478652, 0.0001034047],
],},"type": ".primt",}]} |
调用示例：
ts
var pathManager = await cloud.getPathManager();
await pathManager.addPathByUrl(url);var pathManager = await cloud.getPathManager();
await pathManager.addPathByUrl(url);