前端与三维交互API

示例

1、在零代码中给三维发送消息

// 在组件的属性面板的【事件】中编写
// 获取到零代码中的场景组件
var iframes = document.getElementsByTagName("iframe");
if (iframes.length > 0) {
	var iframeElement = iframes[0]
}else {
	console.log('未找到 iframe')
}
if(iframeElement && iframeElement.contentwindow) {
	// 发送给三维的消息，根据三维中指定的格式来
	let ueMessage = {
		type:"command",
    	data:{
			key:"Weather",
			value:"大雨" //小雨，大雪，小雪，晴天
    	}
	}
	// 发送消息
	iframeElement.contentwindow.postMessage(ueMessage , '*')
}

2、在零代码中接收三维发送的消息

// 在组件的高级事件配置中编写
const handelMsg = (mes) => {
  console.log('组件中获取的iframe消息', mes)
  // 编写具体的业务逻辑
}
// 监听消息事件
window.addEventListener('message', handelMsg)

设备类型

摄像机：camera

运转设备机泵 ： oe-pump

运转设备容器：oe-container

运转设备压缩机：oe-compressor

运转设备其他：oe-other

特种设备安全阀：se-sv

特种设备压力容器：se-pv

特种设备锅炉: se-boiler

区域围栏：fence

集注站：JZZ

生产井：SCJ

监测井：JKJ

造腔井：ZQJ

排卤井：PLJ

腔体：QT

对象前缀

边界：BJ

房顶：FD

墙体：QT

地面：DM

前端发送到三维

1、打包项目

{
    type:"command",
    data:{
        key:"Package",
        projectName:""
    }
}

2、移动、旋转、缩放物体（position、rotation、scale需要改哪个保留哪个，需要三个都改就保留三个）

{
    type:"command",
    data:{
		key:"Transform",
		value:{
			id:"HJH4-XN100",
			idName:"JH"
			position:"0,0,0",
			rotation:"0,0,0",
			scale:"0,0,0"
		}
    }
}

3、改变天气

{
    type:"command",
    data:{
		key:"Weather",
		value:{
			type:"大雨"//小雨，大雪，小雪，晴天
		}
    }
}

4、热重启

{
    type:"command",
    data:{
		key:"RestartGame",
		value:{
		
		}
    }
}

5、聚焦到对象\位置\经纬度

{
    type:"command",
    data:{
		key:"FlyTo",
		value:{
			id:"HJH4-XN100"
		}
    }
}

{
    type:"command",
    data:{
		key:"FlyTo",
		value:{
			Location:"123,456,789",
			Rotator:"90,90,90"
		}
    }
}

{
    type:"command",
    data:{
		key:"FlyTo",
		value:{
			lonlat:"123,87",
		}
    }
}

6、获取场景中所有业务对象

{
    type:"command",
    data:{
		key:"GetAllObjs",
		value:{
			type:""//camera、equit。。。。
		}
    }
}

7、传输地下数据

{
    type:"command",
    data:{
		key:"UndergroundData",
		value:{
			id:"ShowWell",//ShowWell 显示井对象
						  //HideWell 隐藏井对象
						  //ShowWellObserve 显示井身结构
						  //ExitWellObserve 退出井身结构观察的模式
						  //ShowWellCurve 显示测井曲线
						  //ExitWellCurve 关闭测井曲线
						  //ShowWellMicro 显示微地震
						  //ExitWellMicro 关闭微地震
						  //ShowWellSB 显示井砂比
						  //ExitWellSB 退出井砂比观察的模式
						  //FindWell 鼠标点击查询井对象，state为空
						  //EntryAboveground 进入地上，state为空
						  //EntryUnderground 进入地下，state为空
						  //FocusOnWell 空间定位到指定井的附近
						  //JustSetAllUnSelected 通知UE编辑器取消所有选中的状态 state为空
						  //ShowHideWellConnections 通知UE编辑器显示或隐藏井连接的表征 state为空
						  //ShowHideCavity 通知UE编辑器显示或隐藏腔体
						  //ShowHideCavityLiquidLevel 通知UE编辑器显示或隐藏腔体内液位 type为显示液体的类型
						  //ShowHideCavityHeatMap 通知UE编辑器显示或隐藏腔体内温压场
						  //ModificationGeologicalMaterial 修改地质体材质
			state:"DXFY1-5-511HF",//井号、腔体id、地质体id
			type:"",
			param:{
				tag:"fbx_jianhua",
				transparence:"0.2" //（地质体）透明度
			}
		}
    }
}

8、更新对象状态（用于告警）

{
    type:"command",
    data:{
		key:"UpdateObjData",
		value:{
			id:"",
			state:"alarm"//normal
		}
    }
}

9、进入某个录制（用于进入、暂停、退出某条巡检路线）

{
    type:"command",
    data:{
		key:"PlayAnimation",
		value:{
			animationName:"动画1",
			state:"play",//pause、exit
			isFollow:"false"//true
		}
    }
}

10、动画播放中间支持的命令

{
    type:"command",
    data:{
		key:"PlayingAnimation",
		value:{
			animationName:"动画1",//动画1：开场动画，动画3：巡检
			isFollow:"false"//true
		}
    }
}

11、距离、面积测量

//距离测量
{
    type:"command",
    data:{
		key:"DistanceMeasurement",
		value:{
		
		}
    }
}
//面积测量
{
    type:"command",
    data:{
		key:"AreaMeasurement",
		value:{
		
		}
    }
}
//清空所有距离和面积测量的内容
{
    type:"command",
    data:{
		key:"ClearMeasurement",
		value:{
		
		}
    }
}

12、项目设置

{
    type:"command",
    data:{
		key:"ProjectConfig",
		value:{
			hideUIName:"指南针,小地图,快捷键,搜索栏",
			horizontalMoveMode:"true",//W和S按键是水平走还是根据相机朝向走，true为水平，false为相机朝向
			showScreenPrint:"false",
			GroundHeight:"5000000",
			GroundDepth:"-1200000"
		}
    }
}

13、显示隐藏对象

{
    type:"command",
    data:{
		key:"ShowHideObj",
		value:{
			show:"false",
			prefix:"FD",//FD：房顶，QT：墙体
			id:"",
			type:""
		}
    }
}

14、自定义信息tip

{
    type:"command",
    data:{
		key:"CustomTip",
		value:{
			show:"true",
			style:"1",
			id:"",
			tipText:"",
			tipPicturePath:""
		}
    }
}

15、第一人称开关

{
    type:"command",
    data:{
		key:"FirstPersonPawn",
		value:{
			show:"true",
			pos:"0,0,0",
			rot:"0,0,0"
		}
    }
}

16、第三人称开关

{
    type:"command",
    data:{
		key:"ThirdPersonPawn",
		value:{
			show:"true",
			style:"Default",
			pos:"0,0,0",
			rot:"0,0,0"
		}
    }
}

17、蓝图组件调用

{
    type:"command",
    data:{
		key:"BlueprintComponentInvocation",
		value:{
			id:"guan1",
			event:"InitOilPipeAnim",
			show:"true",
		}
    }
}

18、显示隐藏UI调用

{
    type:"command",
    data:{
		key:"ShowHideUI",
		value:{
			uiType:"DeviceTip",
			show:"true",
			param:{
				modelType:""
			}
		}
    }
}

19、GIS地图参数调整

{
    type:"command",
    data:{
		key:"GISMaps",
		value:{
			show:"true",
			param:{
				transparence:"0.0"//0.0~1.0
			}
		}
    }
}

三维发送到前端

1、打包完成

{
	项目已打包完成_<ProjectName>_<LocalIPAddress>
}

2、返回场景中所有业务对象

{
    "Objs": [
        {
            "id": "",
            "type": "" //building、equip、camera...
        },
        {
            "id": "",
            "type": "" //building、equip、camera...
        }
    ]
}

3、返回场景中当前鼠标移入、点击对象

{
    "EnterObj":{
        "id":"sdid",
		"type":""，
		"param":{
			"panelType":""
		}
    }
}
{
    "ExitObj":{
        "id":"sdid",
		"type":""，
		"param":{
			"panelType":""
		}
    }
}
{
    "ClickObj":{
        "id":"sdid",
		"type":""，
		"param":{
			"panelType":""
		}
    }
}
{
    "DoubleClickObj":{
        "id":"",
		"type":""//building、equip、camera...
		"param":{
			"panelType":""
		}
    }
}
//以下为示例
{
    "ClickObj":{
        "id":"asdfasdfasd123",
		"type":"oe-pump"，//camera
		"param":{
			"panelType":"detail"//detail 详情、warning 预警、alarm 告警、analysis 分析、service 维保
		}
    }
}

4、巡检点位返回事件

{
    "Polling": {
        "data": [
            {
                "id": "",
                "type": "" 
            },
            {
                "id": "",
                "type": "" 
            }
        ],
        "show": true 
    }
}

5、返回，假设当前鼠标点击命中了井对象

{
    "TryHoverWellInfo":[
        {
            "jh":"DXFY1-5-511HF",//井号
            "hzjh":"丰页1-5-511HF",//汉字井号
			"pos":"50.5,50.5"//当前视口内的坐标点
        }
    ]
}

6、返回，当前相机在地上还是地下的状态发生变化时

{
    "ChangeAboveOrUnder":[
        {
            "state":"0",//0是地上，1是地下
        }
    ]
}

7、场景加载完毕

{
    "GamePlayStart":{}
}

8、获得的玩家和相机位置

{
    "Player": {
        "pos": "123.000000,456.000000,789.000000",
        "rot": "10.000000,20.000000,0.000000",
        "name": "MyViewActor"
    },
    "Camera": {
        "pos": "124.000000,457.000000,790.000000",
        "rot": "10.000000,20.000000,0.000000"
    }
}