FVS三维组件接口

新增三维组件漫游动画相关接口：

getRoamAnimations 、playRoamAnimations 、updateRoamAnimationAction

interface DataLayer {

  /**

   * 图层是否显示

   */

  visible: boolean;

  /**

   * 设置图层显示或隐藏

   */

  setVisible: (visible: boolean) => void;

}

duchamp.getWidgetByName("三维组件名称").getDataLayers();

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

interface DataLayer {

  /**

   * 当前图层是否显示

   */

  visible: boolean;

  /**

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

   */

  setVisible: (visible: boolean) => void;

}

duchamp.getWidgetByName("三维组件名称").getDataLayerByName("图层1");

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

from:number

to:number

duration:number

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)      

三维自定义场景组件场景时间

name:string

name: 模型mesh对象名称

visible: 可见性

scaling: 缩放比例

rotation: 旋转角度

position: 位置

focus: 聚焦模型位置

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

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

-

visible:boolean

是否可见，布尔型

• true：可见

• false：不可见

viod

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

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

-

NumberArray3

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

viod

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

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

NumberArray3

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

viod

示例：设置某个三维组件中某个模型对象的旋转角度

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

NumberArray3

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

viod

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

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

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' ，则取决于模型对象整体的大小

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
  });

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

注：传递多个参数时，写法如下

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

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

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

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

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); // 循环执行
  }

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

示例：获取「自定义模型」组件的漫游路径信息

duchamp.getWidgetByName("自定义模型").getRoamAnimations();

-

RoamAnimationOptions

type RoamAnimationOptions = {
  /**
   * 漫游路径名称
   */
  names: string[];
  /**
   * 播放模式：循环播放|单次播放
   */
  playMode: "loop"|"once";
};

示例1：给标题组件添加点击事件，播放「自定义模型」组件的「漫游路径1」动画

duchamp.getWidgetByName("自定义模型").playRoamAnimations({
   names:["漫游路径1"], 
   playMode: "once"
})

示例2：在「页面加载结束事件」中写代码，实现页面加载结束后自动播放漫游动画

setTimeout(() => {
  duchamp.getWidgetByName("自定义模型").playRoamAnimations({
   names:["漫游路径1"], 
   playMode: "once"
})
}, 5000)

-

"pause" ：暂停

"continue"：继续

"exit"：退出

示例1：暂停「自定义模型」组件漫游动画

duchamp.getWidgetByName("自定义模型").updateRoamAnimationAction("pause");

示例2：继续「自定义模型」组件漫游动画

duchamp.getWidgetByName("自定义模型").updateRoamAnimationAction("continue");

示例3：退出「自定义模型」组件漫游动画

duchamp.getWidgetByName("自定义模型").updateRoamAnimationAction("exit");

-