安装

使用 npm 或 yarn 安装

$ npm install vue-ue-sdk --save

$ yarn add vue-ue-sdk --save

如果你的网络环境不佳，推荐使用 cnpm。

使用方法

main.js

import { createApp } from 'vue'
import App from './App.vue'
import vueUeSdk from 'vue-ue-sdk';
const app=createApp(App)
app.use(vueUeSdk)
app.mount('#app')

App.vue

<template>
  <UEPlayer />
</template>
<script>
import { app_load, api_register, api_send } from "vue-ue-sdk";
export default {
  name: "EditView",
  mounted() {
    const url = "127.0.0.1:777"; // UE的服务器地址
    app_load(url, () => {
        console.log('画面出现后回调，可进行一些初始操作');
        // 监听UE发送过来的消息
        api_register("onUE4Call", (info) => {
          console.log(info);
        });
        // 发送消息给UE
        api_send("changeWeather", { stauts: 'windy' }, (res)=>{
            console.log(res);
        });
    });
  },
  methods: {},
};
</script>

UE 提供接口

查看风险一张图

api_send("changeRiskChart", {}, ()=> {
  // to do
}) 

查看监控一张图(散热图)

api_send("changeMonitorChart", {}, ()=> {
  // to do
})

前往详情

api_send('goToDetail', { type: 'fire'}, ()=> {
  // to do
})
type: fire // 火
type: water // 水
type: waterSupply // 热力
type: elevator // 电梯
type: bridge // 桥梁
type: fireControlOfForest // 森林消防
type: fireControlOfBuilding // 建筑消防
type: heat // 热力

前往水灾详情

api_send('goToWaterDetail', { }, ()=> {
  // to do
})

前往火灾详情

api_send('goToFireDetail', { }, ()=> {
  // to do
})

打开火灾与关闭火灾

api_send('switchFire', { isOpen: false }, ()=> {
  // to do
})

开关

api_send('switch', { isOpen: false, type: 'fire' }, ()=> {
  // to do
})
type: water 水灾详情 
type: fire 火灾详情
type: technology 科技风场景
type: waterSupply // 热力
type: elevator // 电梯
type: bridge // 桥梁
type: fireControlOfForest // 森林消防
type: fireControlOfBuilding // 建筑消防
type: heat // 热力

打开火灾与关闭火灾

api_send('switchFire', { isOpen: false }, ()=> {
  // to do
})
isOpen是布尔值，true是打开，false是关闭

打开水灾与关闭水灾

api_send('switchWater', { isOpen: false }, ()=> {
  // to do
})
isOpen是布尔值，true是打开，false是关闭

地图标记类交互接口

api_send('markSymbol', { type:  'gas'}, ()=> {
  // to do
})
type: default // 默认展示全部
type: gas // 燃气
type: heat // 热力
type: bridge // 桥梁
type: pipe // 综合管廊
type: waterSupply // 供水
type: drain // 排水
type: subwayTunnel // 地铁隧道
type: elevator // 电梯
type: fireControl // 消防
type: technologyDetail // 

前往场景例如切换火灾火水灾详情

api_send('change3DScene', { type: 'water' }, ()=> {
  // to do
})
type: water 水灾详情 
type: fire 火灾详情
type: technology 科技风场景
type: waterSupply // 热力
type: elevator // 电梯
type: bridge // 桥梁
type: fireControlOfForest // 森林消防
type: fireControlOfBuilding // 建筑消防
type: heat // 热力

关闭科技风侧边栏UI

api_send('closeMenuUI')

监听UE切换场景

api_register('Enter3DSecene',  (res)=> {
// 监听用户点击切换火灾详情
  if(res.type === 'fire') {
    //
  }
  // 监听用户点击切换水灾详情
  if(res.type === 'water') {
    //
  }
  // 监听切换到科技风场景
  if(res.type === 'technology') {
    //
  }
  // 监听切换到科技风火灾场景详情
  if(res.type === 'technologyDetailFire') {
    //
  }
  // 监听切换到科技风场景水灾详情
  if(res.type === 'technologyDetailWater') {
    //
  }
})

取消注册

api_unregister('Enter3DSecene', ()=>{

})