在前端开发实践中,实现线面绘制功能时,能够快速选择恰当的样式往往能显著提升工作效率,达到事半功倍的效果。本文将深入探讨如何选择恰当的线面样式,本章将分别从Polyline、Odline、Polygon、Polygon3d四种线面绘制方式进行详细解析。
Polyline
Polyline主要用于实现路线绘制(地铁、高铁、公路等)、工艺流程路线展示等功能。
Polyline实现
基础属性:
- id:Polyline唯一标识id;
- groupId: 可选,Group分组;
- coordinates:坐标点数组;
- coordinateType:取值范围:0为Projection类型,1为WGS84类型,2为火星坐标系(GCJ02),3为百度坐标系(BD09),默认值:0
- userData:用户自定义数据;
- range:可视范围: [近裁距离, 远裁距离]
- viewHeightRange:可见高度范围:[最小可见高度, 远最大可见高度]
- depthTest: 是否做深度检测,默认为true,true会被遮挡,false不会被遮挡。
普通样式:
- color:颜色值;
- thickness:线宽,单位:米;
- intensity:亮度,取值范围:[0~1000],默认值:0.5;科技风风格需重点关注调节此参数,颜色和亮度决定最终呈现的效果;
- flowRate:流速,取值范围:[0~1.0],默认值:0.5;
- shape: 样式,0:直线, 1:曲线,注意:设置为曲线坐标点多的时候会非常影响添加添加效率
- style :折线样式,基础样式:箭头/光流/贴地/实线/虚线等,取值范围:[0~8];样式可参考下图:
- tiling: 可选参数,材质贴图平铺比例,和PolylineStyle取值有关,目前仅部分样式支持此参数,从起始位置开始平铺,超过的部分会按此比例生成新的区域,类似CSS的repeat。如果这个值 <= 0 使用自动计算按Polyline长度比例平铺, >0使用用户输入的值去平铺
自定义样式:
当标准样式无法满足特定的功能需求时,推荐采用自定义样式进行开发。设置自定义材质参数后style相关参数(颜色、亮度、流速)会失效。
- material :可选参数,自定义材质路径,即资源库PAK文件里材质文件的路径。自定义材质路径获取参考下图,选择材质只需要替换路径中折线名称。
arduino
material: "/JC_CustomAssets/PolylineLibrary/Exhibition/混合线_4", //自定义材质路径 设置后style相关参数会失效
自定义材质折线参数也是可以进行调节修改的,与工具栏中创建的折线参数实现一一对应关系。根据数据类型参数被划分为两大类别:scalarParameters、vectorParameters。除了在工具栏查看参数,也可以通过
fdapi.misc.getMaterial('资源路径')
此api进行查询对应材质的参数。 例:
arduino
fdapi.misc.getMaterial('/JC_CustomAssets/PolylineLibrary/Exhibition/混合线_4');
其中type=3,代表value为数值,需要在scalarParameters 进行修改参数;type=6,代表value为数组,需要在vectorParameters 进行修改参数。需依据具体数据类型,选择并配置相应的属性。对于同一数据类型的不同参数 ,应以对象形式整合后传入对应的数组中。
- scalarParameters :可选参数,仅在设置自定义材质路径后生效,自定义材质数值类型参数,包含name/value键值对的数组,其中value为数值 。
格式示例:
css
scalarParameters: [{"name":"不透明度","value":0.5},{"name":"UV重复","value":1.0}],
- vectorParameters :可选参数,仅在设置自定义材质路径后生效,自定义材质矢量类型参数,包含name/value键值对的数组,其中value为数组 。
格式示例:
css
vectorParameters: [{ "name": "颜色1", "value": [0, 1, 0] }]
Odline
Odline主要用于实现趋势走向(销售走向、城市经济态势等)迁徙线的功能。
基础属性:
- id:Odline唯一标识id;
- groupId: 可选,Group分组;
- coordinates:坐标点数组;
整体样式属性:
- color:颜色值;
- lineThickness:线宽,单位:米,默认值20
- flowRate: 流速,取值范围:[0~1.0],默认值:0.5
- intensity: 亮度,取值范围:[0.1~1000],默认值:0.5
- bendDegree: 弯曲度,取值范围:[0~1.0],默认值:0.5
- lineShape:ODLine模型样式 0:平面 1:柱体,默认值1
- lineStyle:ODLine材质样式 0:纯色 1:箭头,2:流动点,3:虚线;样式默认值0(lineStyle为2和3时建议手动设置Tiling 例如设为1)
- tiling: 材质贴图平铺比例,从起始位置开始平铺,超过的部分会按此比例生成新的区域,类似CSS的repeat。如果这个值 <= 0 使用自动计算按Polyline长度比例平铺, >0使用用户输入的值去平铺
流动点属性:
- flowShape: ODLine发光点样式 0:无 1:球体,默认值0(Shape为0即删除/隐藏,当Shape为0时设置Style无效)
- flowPointSizeScale: 运动点的缩放值,默认值20, 单位米;
端点样式属性:
- labelSizeScale:两端点的缩放值,默认值100, 单位米
- startPointShape:StartPoint样式, default:0(0: None;1:Sphere )
- endPointShape:EndPoint样式,default:0(0:None;1:Sphere )
- startLabelShape:StartLabel样式,default:0 (0:None;1:Circle )
- endLabelShape: EndLabel样式,default:0(0: None;1:Circle)
- 实现小tips :
如何实现光流迁徙线?
同点位创建两条线,一条作为底线,一条作为光流点线。
底线:
- ODLine材质样式选择纯色 lineStyle: 0;
- ODLine发光点样式选择无 flowShape: 0;
- ODLine发光点样式选择无 flowShape: 0;
- 底线亮度需调小,用于突出光流点线;
- 底线宽度小于光流点线宽度,用于突出光流点线的效果。
光流点线:
- ODLine材质样式选择柱体 lineStyle: 1;
- ODLine发光点样式选择流动点 flowShape: 2;
- ODLine发光点样式选择无 flowShape: 0。
示例代码参考:
less
fdapi.odline.clear();
let lineThickness = 9
let o = {
id: 'od1',//ODLine唯一标识
color: Color.Green,//填充颜色
coordinates: [[492303.65625, 2487534.5, 4.195], [491391.5625, 2487777.5, 4.2]],//构成ODLine的坐标点数组
coordinateType: 0,//坐标系类型,取值范围:0为Projection类型,1为WGS84类型,2为火星坐标系(GCJ02),3为百度坐标系(BD09),默认值:0
flowRate: 0.5, //流速
intensity: 15, //亮度
bendDegree: 0.5, //弯曲度
tiling: 0.8, //材质贴图平铺比例
lineThickness: lineThickness * 0.6, //折线宽度
labelSizeScale: 30, //两端点的缩放值
lineShape: 1, //ODLine模型样式 0:平面 1:柱体,默认值1
lineStyle: 0, //ODLine材质样式 0:纯色 1:箭头,2:流动点,默认值0
flowShape: 0, //ODLine发光点样式 0:无 1:球体,默认值0
startPointShape: 0, //点的样式
endPointShape: 0, //点的样式
startLabelShape: 0, //点的样式
endLabelShape: 0 //点的样式
};
await fdapi.odline.add(o);
let o1 = {
id: 'od2',//ODLine唯一标识
color: Color.Green,//填充颜色
coordinates: [[492303.65625, 2487534.5, 4.195], [491391.5625, 2487777.5, 4.2]],//构成ODLine的坐标点数组
coordinateType: 0,//坐标系类型,取值范围:0为Projection类型,1为WGS84类型,2为火星坐标系(GCJ02),3为百度坐标系(BD09),默认值:0
flowRate: 0.5, //流速
intensity: 500, //亮度
bendDegree: 0.5, //弯曲度
tiling: 1, //材质贴图平铺比例
lineThickness: lineThickness, //折线宽度
labelSizeScale:200, //两端点的缩放值
lineShape: 1, //ODLine模型样式 0:平面 1:柱体,默认值1
lineStyle: 2, //ODLine材质样式 0:纯色 1:箭头,2:流动点,默认值0
flowShape: 0, //ODLine发光点样式 0:无 1:球体,默认值0
startPointShape: 1, //点的样式
endPointShape: 0, //点的样式
startLabelShape: 1, //点的样式
endLabelShape: 0 //点的样式
};
上面主要是提供思路,大家也可以实操实现创造出不一样的效果~~
Polygon
Polygon主要用于实现行政区划、区域划分等面要素的功能。
基础属性:
- id:Polygon唯一标识id;
- groupId: 可选,Group分组;
- coordinates:坐标点数组;
- coordinateType:取值范围:0为Projection类型,1为WGS84类型,2为火星坐标系(GCJ02),3为百度坐标系(BD09),默认值:0
- userData:用户自定义数据;
- range:可视范围: [近裁距离, 远裁距离]
- viewHeightRange:可见高度范围:[最小可见高度, 远最大可见高度]
- depthTest: 是否做深度检测,默认为true,true会被遮挡,false不会被遮挡;
- priority: 设置Polygon显示的优先级,值越大越靠上;
普通样式:
- style :多边形样式,单色/圆点/体积/渐变/波纹/贴地等,取值范围:[0~11].样式可参考下图:
- color:颜色值;
- frameColor:边框颜色;
- frameThickness:边框厚度,单位:米。(当frameThickness设置为0的时候,不创建轮廓)
- intensity:亮度,取值范围:[0~1000],注:目前仅单色模式(样式:0)下生效
自定义样式:
在标准样式无法满足特定功能需求的情况下,建议采用自定义样式。设置自定义材质参数后style相关参数会失效。
- material :可选参数,自定义材质路径,即资源库PAK文件里材质文件的路径。自定义材质路径获取参考下图,选择材质只需要替换路径中面名称或路径。
Polygon 自定义样式的实现途径包括: - 工具栏中添加多边形,实现自定义样式的 Polygon。
- 利用资源库中的材质资源,为 Polygon 添加自定义的材质效果。
vbnet
material: "/JC_CustomAssets/PolygonLibrary/Exhibition/平面_5",
自定义材质面参数也是可以进行调节修改的,与工具栏中创建的折线参数实现一一对应关系。根据数据类型参数被划分为两大类别:scalarParameters、vectorParameters。
面属性查询
除了在工具栏查看参数,也可以通过fdapi.misc.getMaterial('资源路径')
此api进行查询对应材质的参数。 例:
arduino
fdapi.misc.getMaterial('/JC_CustomAssets/PolygonLibrary/Exhibition/平面_5');
其中type=3,代表value为数值,需要在scalarParameters 进行修改参数;type=6,代表value为数组,需要在vectorParameters进行修改参数。
api查询材质
需依据具体数据类型,选择并配置相应的属性。对于同一数据类型的不同参数 ,应以对象形式整合后传入对应的数组中。
- scalarParameters :可选参数,仅在设置自定义材质路径后生效,自定义材质数值类型参数,包含name/value键值对的数组,其中value为数值 。
格式示例:
css
scalarParameters: [{"name":"不透明度","value":0.5},{"name":"UV重复","value":1.0}],
- vectorParameters :可选参数,仅在设置自定义材质路径后生效,自定义材质矢量类型参数,包含name/value键值对的数组,其中value为数组 。
格式示例:
css
vectorParameters: [{ "name": "颜色1", "value": [0, 1, 0] }]
实现小tips:
效果的呈现与多边形参数密切相关,需通过细致调整以实现理想的效果。
- 若需增大面要素中的方块等的显示尺寸,可减少UV缩放值,使其增大要素大小,方块密度也会变稀疏,;
其他参数大家可以亲自尝试调整,达到最佳的效果~~~
Polygon3d
Polygon3d 的应用场景主要分为两大类:一类用于突出显示体块的高亮区域 ,另一类则主要用于展示侧面视图的电子围栏。
Polygon3d功能实现
相较于 Polygon,Polygon3d 通过增加 height 属性实现了立体效果的增强,并新增独立控制顶面、侧面及底面的显示与隐藏属性。
基础属性:
- id:Polygon3d唯一标识id;
- groudId: Group分组;
- userData:用户自定义数据;
- coordinates:多边形坐标数组;
- coordinateType:取值范围:0为Projection类型,1为WGS84类型,2为火星坐标系(GCJ02),3为百度坐标系(BD09),默认值:0
- viewHeightRange :可见高度范围:[最小可见高度, 远最大可见高度],默认值: [-1000000000, 1000000000]
- generateTop:是否生成顶面,默认:true,实现电子围栏,需将该参数设置为false
- generateSide:是否生成侧面,默认:true
- generateBottom:是否生成底面,默认:true,实现电子围栏,需将该参数设置为false
普通样式:
- style :3DPolygon的样式。样式可参考下图:
- color:颜色值;
- height 3D多边形的高度,用于设置侧面高度;
- intensity: 亮度,取值范围:[0~1000];
- tillingX : 仅当3DPolygon的样式支持贴图显示时,设置贴图横向平铺,取值范围:[任意数值]
- tillingY : 仅当3DPolygon的样式支持贴图显示时,设置贴图纵向平铺,取值范围:[任意数值]
自定义样式 :
样式获取可以参考Polygon样式是一致的。
总结
本文深入解析了Polyline、Odline、Polygon、Polygon3d 四种线面绘制方式,助您轻松掌握三维空间中线面绘制的关键技巧。
点线面作为前端三维可视化开发的核心要素,不可或缺。我们之前已发布过关于点位添加的多种方法,有相关需求的uu可以查看我们往期的知识干货: