历史版本24 :FVS三维组件接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

适用场景:安装了「FVS大屏编辑模式」插件的用户,可参考本文了解 FVS 模板的相关接口。


目录:

版本编辑

报表服务器版本插件版本功能变动
11.0V1.0.0最低版本要求
11.0.16V1.16.1新增接口 subscribeMarkerData 、updateMarkerData
查看历史版本更新
报表服务器版本
插件版本功能变动
11.0.9V1.13.0新增接口 animateSceneTime
11.0.9V1.14.0

新增模型获取接口:getMeshByName

新增模型控制接口:setVisible 、setScaling 、setRotation 、setPosition 、focus

11.0.16V1.15.0
  • focus 新增控制镜头的距离、中心点、角度等参数

  • 新增控制模型轨迹运动接口,详情请参见 FVS模型轨迹运动接口

11.0.16V1.16.0新增接口 refreshData

getDataLayers编辑

方法getDataLayers()获取三维组件所有的数据图层
     参数--
  返回值DataLayer[]

interface DataLayer {

  /**

   * 图层是否显示

   */

  visible: boolean;

  /**

   * 设置图层显示或隐藏

   */

  setVisible: (visible: boolean) => void;

}

     示例获取某个三维组件的全部数据图层:
duchamp.getWidgetByName("三维组件名称").getDataLayers();


  应用示例

FVS点击隐藏/显示三维组件数据图层

    移动端不支持移动端

getDataLayerByName编辑

方法getDataLayerByName()获取某个三维组件的某个具体数据图层
     参数name:string数据图层名称,字符串
  返回值DataLayer

interface DataLayer {

  /**

   * 当前图层是否显示

   */

  visible: boolean;

  /**

   * 设置当前图层显示或隐藏

   */

  setVisible: (visible: boolean) => void;

}

     示例获取某个三维组件的「图层1」数据图层:
duchamp.getWidgetByName("三维组件名称").getDataLayerByName("图层1");


  应用示例

FVS点击隐藏/显示三维组件数据图层

   移动端不支持移动端

animateSceneTime编辑

方法animateSceneTime(

{

from:number,

to:number,

duration:number,

})

设置自定义模型组件的场景时间动态变化

注:仅支持 自定义模型组件

     参数

from:number

to:number

duration:number

from:场景变化的开始时间,整数,最小为 0 ,无上限

to:场景变化的结束时间,整数,必须大于 from 

duration:场景完成变化的时长,单位 ms

  返回值--
     示例

自定义模型从第一天的 14:00 开始到 第二天的 14:00 结束,变化时长为 3 秒:

duchamp.getWidgetByName("自定义模型1_页面1").animateSceneTime({
     from: 14, //从默认的14点开始
     to: 38, //到第二天的14点结束
     duration: 3000 //变化时长为 3 秒
});

在上述场景的基础上,开启循环变化:

注:暂无停止场景时间变化接口。

setInterval(function(){
duchamp.getWidgetByName("自定义模型1_页面1").animateSceneTime({
     from: 14,
     to: 38,
     duration: 3000
});         
},2000)      


  应用示例

FVS自定义模型组件场景时间

   移动端不支持移动端

getMeshByName编辑

方法getMeshByName(name)

获取三维组件中的模型对象

注:仅支持 三维城市 和 自定义模型 组件

     参数

name:string

模型mesh对象名称
  返回值Object

name:模型mesh对象名称

visible: 可见性

scaling: 缩放比例

rotation: 旋转角度

position: 位置

focus: 聚焦模型位置

     示例

示例:获取某个模型对象的缩放比例

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").scaling


  应用示例

-

   移动端不支持移动端

注:下列所述 setVisible 、setScaling 、setRotation 、setPosition 、focus 接口均需在获取模型对象之后使用。

setVisible

方法setVisible(visible:boolean)设置模型对象是否可见
     参数

visible:boolean

是否可见,布尔型

  • true:可见

  • false:不可见

  返回值void

viod

     示例

示例:设置某个三维组件中某个模型对象不可见

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").setVisible(false);


  应用示例

-

   移动端不支持移动端

setScaling

方法setScaling(NumberArray3)设置模型对象的缩放比例
     参数

NumberArray3

缩放比例的值:[X,Y,Z]

  返回值void

viod

     示例

示例:设置某个三维组件中某个模型对象的缩放比例

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").setScaling([10,10,10]);


  应用示例-
   移动端不支持移动端

setRotation

方法setRotation(NumberArray3)设置模型对象的旋转角度
     参数

NumberArray3

旋转角度的值:[X,Y,Z]

  返回值void

viod

     示例

示例:设置某个三维组件中某个模型对象的缩放比例

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").setRotation([10,10,10]);


  应用示例-
   移动端不支持移动端

setPosition

方法setPosition(NumberArray3)设置模型对象的位置
     参数

NumberArray3

位置的值:[X,Y,Z]

  返回值void

viod

     示例

示例:设置某个三维组件中某个模型对象的位置

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").setPosition([10,10,10]);


  应用示例-
   移动端不支持移动端

focus

方法focus(options)

设置模型对象快速聚焦

V1.15.0 及之后版本支持控制镜头的距离、中心点、角度等参数

     参数

options: {

    target: "top" | "bottom" | "left" | "right" | "front" | "back" | "center";

    targetpos: (value: NumberArray3) => NumberArray3;

    viewRay: (value: NumberArray3) => NumberArray3;

    distance: (value: number) => number;

  }

1)target:相机聚焦到模型上的位置(模型对象的六个面中心和体中心),默认为 top

2)targetpos:在 focus 基础上微调聚焦中心点的坐标

3)viewRay:改变视线。默认实现方向取决于 target

例如:

  • 当 target 为 'top', 'bottom', 'front', 'center' 时,

    视线为斜向下 沿 y-z 平面 45 度:[0, -1, 1]

  • 当 target 为 'left' 时,视线为沿 x-z 平面,斜向下

    45 度, 看向左侧面:[1, -1, 0]

  • 当 target 为 'right' 时,视线为沿 x-z 平面,斜向

    下 45 度, 看向右侧面:[0, -1, 1]

4)distance:改变相机与模型的距离。默认距离取决于 target 面的大小,若 target 为 'center' ,则取决于模型对象整体的大小

  返回值void

viod

     示例

示例1:

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").focus();

示例2:

const widget = duchamp.getWidgetByName("组件名称");
const mesh = widget.getMeshByName("模型名称");
mesh.focus({
   target: "center",
   viewRay: () => [1, -1, 1],
   distance: (v) => v * 0.8
  });


  应用示例JS实现自定义模型视角聚焦
   移动端不支持移动端

refreshData编辑

方法refreshData()

刷新三维组件数据,仅数据更新,组件整体不更新

注:V1.17.1 之前版本仅支持 三维城市 和 自定义模型 组件

     参数{para:"para"}参数名称:参数值
  返回值--
     示例示例1:点击刷新「自定义模型」组件的数据并传参:
duchamp.getWidgetByName("自定义模型").refreshData({a:"参数a"});

注:传递多个参数时,写法如下

duchamp.getWidgetByName("自定义模型").refreshData({a:"参数a",b:"参数b"});

示例2:给模板添加「页面加载结束事件」,使三维组件定时刷新数据:

setInterval(() => {
duchamp.getWidgetByName("自定义模型").refreshData();
}, 3000); //每隔 3 秒刷新一次数据


  应用示例

JS实现三维组件传参仅刷新数据

    移动端不支持移动端

subscribeMarkerData编辑

方法subscribeMarkerData((data, observer))

订阅监听三维组件数据图层中的数据更新:当数据图层中的数据更新,或者生成新的数据,执行回调

注1:需配合刷新接口使用

注2:仅支持 三维城市 和 自定义模型 组件

     参数

subscribeMarkerData(observer: (data: { [key: string]: any }, observer: {unsubscribe: () => {}}) => void): void;

  • data 为字典类型,其数据取决于数据图层的配置

  • key 为数据集中选择的字段名, value 为数据集中选择字段对应的值

  • unsubscribe 为函数,用于取消监听订阅

  返回值--
示例

示例:根据数据库表字段,控制模型是否可见

async function perform() {
  // 等待场景加载结束,并获取到 widget, dataLayer
  const widget = await future(() => duchamp.getWidgetByName("停车场模型"));
  const dataLayer = await future(() => widget.getDataLayerByName("车辆监控"));

  // 根据数据图层 marker 数据,隐藏指定模型
  const processMarkerData = data => {
    const visible = data["是否有车"] === "1";
    const name = data["车辆编号"];
    const mesh = widget.getMeshByName(name);
    mesh.setVisible(visible);
  };

  // 订阅监听数据图层 Marker 数据,当 Marker 更新时,执行订阅监听函数
  const observer = dataLayer.subscribeMarkerData(data => {
    processMarkerData(data);
  });

  // 每隔 3s,刷新组件数据
  const refreshTimerId = setInterval(() => {
    widget.refreshData();
  }, 3000); // 循环执行
  }


  应用示例JS实现数据库表字段控制FVS模型显隐
    移动端不支持移动端

updateMarkerData编辑

方法updateMarkerData((data))

可单独更新三维组件数据图层中指定模型对象数据

注:仅支持 三维城市 和 自定义模型 组件

     参数

updateMarkerData(predicate: (data) => boolean, updater: (data) => void);

  • predicator 为查询函数,用于判断数据项是否需要更新,若返回值为 true,表示需要更新

  • updator 为更新函数,用于更新通过 predicator 校验,返回为 true 的数据

  返回值--
     示例 示例:更新「停车场模型」中「车辆监控」数据图层指定模型对象的多个标签值:
const widget = duchamp.getWidgetByName("停车场模型");
const dataLayer = widget.getDataLayerByName("车辆监控");
  // 使用 updateMarkerData 方法更新数据
  dataLayer.updateMarkerData((markerData) => {
    return markerData["车辆编号"] === "车辆006";
  }, (markerData) => {
    markerData["停车时长"] = 12;
  });
  应用示例

使用文本框控件,输入对应车辆编号和停车时长,编辑结束后模型数据变化。(停车场模型设置了停车时长超过 10h 模型红色预警)如下图所示:

点击下载模板:JS实现更新指定模型数据.fvs

EE588438-F61A-41B3-ACB8-5ACF3AE1C47D.GIF

    移动端不支持移动端