前端三维可视化线面样式选择大揭秘！！!

在前端开发实践中，实现线面绘制功能时，能够快速选择恰当的样式往往能显著提升工作效率，达到事半功倍的效果。本文将深入探讨如何选择恰当的线面样式，本章将分别从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文件里材质文件的路径。自定义材质路径获取参考下图，选择材质只需要替换路径中折线名称。

material: "/JC_CustomAssets/PolylineLibrary/Exhibition/混合线_4", //自定义材质路径 设置后style相关参数会失效

自定义材质折线参数也是可以进行调节修改的，与工具栏中创建的折线参数实现一一对应关系。根据数据类型参数被划分为两大类别：scalarParameters、vectorParameters。除了在工具栏查看参数，也可以通过fdapi.misc.getMaterial('资源路径')此api进行查询对应材质的参数。 例：

fdapi.misc.getMaterial('/JC_CustomAssets/PolylineLibrary/Exhibition/混合线_4');

其中type=3，代表value为数值，需要在scalarParameters 进行修改参数；type=6，代表value为数组，需要在vectorParameters 进行修改参数。需依据具体数据类型，选择并配置相应的属性。对于同一数据类型的不同参数 ，应以对象形式整合后传入对应的数组中。

• scalarParameters ：可选参数，仅在设置自定义材质路径后生效，自定义材质数值类型参数，包含name/value键值对的数组，其中value为数值 。
  格式示例：

 scalarParameters: [{"name":"不透明度","value":0.5},{"name":"UV重复","value":1.0}], 

• vectorParameters ：可选参数，仅在设置自定义材质路径后生效，自定义材质矢量类型参数，包含name/value键值对的数组，其中value为数组 。
  格式示例：

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 ：
  如何实现光流迁徙线？

同点位创建两条线，一条作为底线，一条作为光流点线。

底线：

1. ODLine材质样式选择纯色 lineStyle: 0;
2. ODLine发光点样式选择无 flowShape: 0;
3. ODLine发光点样式选择无 flowShape: 0；
4. 底线亮度需调小，用于突出光流点线；
5. 底线宽度小于光流点线宽度，用于突出光流点线的效果。

光流点线：

1. ODLine材质样式选择柱体 lineStyle: 1;
2. ODLine发光点样式选择流动点 flowShape: 2;
3. ODLine发光点样式选择无 flowShape: 0。

示例代码参考：

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 添加自定义的材质效果。

material: "/JC_CustomAssets/PolygonLibrary/Exhibition/平面_5",

自定义材质面参数也是可以进行调节修改的，与工具栏中创建的折线参数实现一一对应关系。根据数据类型参数被划分为两大类别：scalarParameters、vectorParameters。

面属性查询

除了在工具栏查看参数，也可以通过fdapi.misc.getMaterial('资源路径')此api进行查询对应材质的参数。 例：

fdapi.misc.getMaterial('/JC_CustomAssets/PolygonLibrary/Exhibition/平面_5');

其中type=3，代表value为数值，需要在scalarParameters 进行修改参数；type=6，代表value为数组，需要在vectorParameters进行修改参数。

api查询材质

需依据具体数据类型，选择并配置相应的属性。对于同一数据类型的不同参数 ，应以对象形式整合后传入对应的数组中。

• scalarParameters ：可选参数，仅在设置自定义材质路径后生效，自定义材质数值类型参数，包含name/value键值对的数组，其中value为数值 。
  格式示例：

 scalarParameters: [{"name":"不透明度","value":0.5},{"name":"UV重复","value":1.0}], 

• vectorParameters ：可选参数，仅在设置自定义材质路径后生效，自定义材质矢量类型参数，包含name/value键值对的数组，其中value为数组 。
  格式示例：

vectorParameters: [{ "name": "颜色1", "value": [0, 1, 0] }]

实现小tips：

效果的呈现与多边形参数密切相关，需通过细致调整以实现理想的效果。

1. 若需增大面要素中的方块等的显示尺寸，可减少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可以查看我们往期的知识干货：