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

在前端开发实践中,实现线面绘制功能时,能够快速选择恰当的样式往往能显著提升工作效率,达到事半功倍的效果。本文将深入探讨如何选择恰当的线面样式,本章将分别从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
    如何实现光流迁徙线?

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

底线:

  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。

示例代码参考:

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:

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

  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可以查看我们往期的知识干货:

相关推荐
小小小小宇7 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊7 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习8 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖8 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖8 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐9 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06279 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台9 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121389 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css