通用3D-图片子组件

图片子组件可以用来在3D场景中显示一张图片,或者多张图片叠加在一起,显示成一整张图片。还可以在3D场景中用来表现地面、墙面等平面。

配置项

基础设置

层级序号

参见《通用配置项说明》中的子组件的层级序号部分

自动排序

参见《通用配置项说明》中的子组件的自动排序部分

样式设置

支持透明

勾选此项则可以渲染出半透明的效果。如果不需要半透明效果,则必须关闭此项,否则容易出现渲染中的遮挡关系错误。关于半透明渲染的理论知识,可以参见《3D知识-效果篇》中半透明渲染的部分

叠加混合

勾选后渲染时与背景色的混合模式为叠加,不勾选则混合模式为正常。 参见《通用配置项》中的叠加混合部分

Tint颜色

设置Tint颜色,关于Tint颜色的概念,可以参见《3D知识-效果篇》中Tint颜色的部分

画布尺寸

设置画布的尺寸,是像素为单位的,图层的尺寸和位置都是基于这个画布尺寸构建的坐标系下的。

坐标系统

当前配置项在不支持GIS的组件(如3D园区)中不可见。

可以设置图片的位置和大小是由数据源中的经纬度决定的,还是由配置项中物体设置决定的。各个选项的意义如下:

3D:选中此项后,会使用3D场景中的世界坐标来定位,下方会多出物体设置的配置项,下文有具体介绍。

GIS:选中此项后,会使用数据源中的4个经纬度数值来定位,具体的定位逻辑参见下文

物体设置

只有在坐标系统设置为3D时才生效。

设置图片在3D场景中对应的物体的参数。3D场景中的对象都必须是以物体的形式存在,图片也不例外。

尺寸

设置的是图片的物体在3D世界中的尺寸。区别于画布的尺寸,画布的尺寸是纹理的尺寸,最终把这个尺寸下的纹理贴在一个3D物体上(这个3D物体是个平面);而物体的尺寸是这个平面在3D场景中的大小。

位移

设置图片的物体在3D世界的中位置。

旋转

设置图片的物体在3D世界中的旋转,包括绕3个坐标轴的旋转量,旋转量的取值范围是-180到180,是个角度制的数值。

物理材质

启用物理材质则会对图片的3D平面使用基于物理的渲染方式,就是所谓的PRB。关于PBR的理论知识,可以参见《3D知识-效果篇》中PBR的部分

如果想要图片的平面能渲染阴影,或者想要图片的平面能反射环境,则需要开启此项并设置相关参数。

图层

图层配置是一个数组,可以添加多个图层,这些图层会按照绘制顺序逐个叠加在一起,最终绘制成一整张图片,并渲染到3D平面中。

层级

设置单个图层的渲染顺序。层级越大,越在上层,层级越小,越在下层。

偏移

默认图层会始终在画布中居中,设置偏移则可以调整每个图层的位置。

尺寸

设置单个图层的尺寸,区别于画布的尺寸。画布尺寸是整个可视范围的限制,超出画布尺寸的图层部分,将被裁剪掉。

透明度

设置单个图层的透明度,多个图层可以按不同的透明度和渲染顺序来叠加,以实现较好的表现效果。

填充模式

可以给图层设置三种填充模式:图片、颜色和图案。

图片

填充模式切换成图片后,可以上传图片来填充图层。

颜色

填充模式切换成颜色后,使用固定的颜色来填充图层。

图案

填充模式切换成图案后,可以上传一张图案纹理,并设置参数来填充有重复性图案。

重复数

是一个二维向量,分别设置的是使用图案在水平方向和垂直方向上填充图层时,每个方向上重复图案的次数。

动画

动画类型

可以设置某种动画类型,来实现一些简单的动画。设置成“无”则不启用动画。

预设动画

动画类型切换成预设动画,则可使用预置的一些动画:

旋转动画

当前预设动画只有一种,就是旋转动画。

  • 旋转轴:设置旋转动画是围绕这世界坐标系中哪个轴。
  • 速度:以多快的速度旋转,数值的单位是弧度/微秒,使用负值则反向旋转。

自定义动画

自定义动画可以配置比较复杂的关键帧动画,关于关键帧动画的使用方法可以参见《通用配置项说明》中关键帧动画的部分

动画类型切换成自定义动画,即可使用关键帧动画。

基础设置

自定义动画的基础设置如下:

  • 动画时长:整个动画持续的时间
  • 动画延迟:延时多久才开始播放动画
  • 动画间隔:循环播放动画时,一轮动画结束后,间隔多久播放一下轮。默认循环播放动画。
关键帧

关键帧动画是个数组,可添加多个关键帧。

  • 速度:从前一帧变化到当前帧时,速度的变化情况。
  • 时间:当前帧在整个动画时间中的位置,它是一个比例值。

透明度、位移、旋转和缩放都是每个关键帧的状态参数,参见《通用配置项说明》中关键帧动画的部分

需要额外注意的一点是:位移这个参数是一个相对位移,它是相对于初始位置的移动量。初始位置是由配置项或者GIS定位到场景中后的世界坐标。

数据

数据源中的数据是一个数组,并且会读取数据中的第一个元素,第一个元素是一个对象,这个对象有4个字段,分别是:left、top、right、bottom。示例如下:

[
  {
    "left": 111.24564287561898,
    "top": 29.65631681110981,
    "right": 111.24798158577504,
    "bottom": 29.65432455152882
  }
]

left、top、right、bottom这4个字段的意义是分别设置图片的矩形在经纬度系统中的最左边的经度、最上边纬度、最右边经度、最下边的纬度。如下图所示:

实际使用中,可以在地理信息处理或采集的平台(如QGIS、水经微图)上,确定图片左上角和右下角的经纬度位置,这样左上角的经纬度其实就是(left,top),右下角的经纬度其实就是(right,bottom),这样就能确定这4个字段的取值了。

如果在配置项中坐标系统没有设置成GIS,则这里设置的参数无效。

交互

回调和自定义事件

暂无

自定义动作

暂无

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群