OpenZI Vue API文档

<template>
  <div class="container">
    
    <div class="config-panel">
      <div class="config-item">
        <label for="ueIp">UE服务器IP：</label>
        <input id="ueIp" v-model="config.ueIp" type="text" placeholder="输入UE服务器IP">
      </div>
      <button class="tech-btn primary" @click="applyConfig">应用配置</button>
    </div>

    
    <div class="component-container" v-if="showComponent">
      <open-z-i-viewer @mapLoaded="onMapLoaded" />
    </div>

    
    <div class="api-panel">
      <div class="api-section">
        <h3>关卡管理</h3>
        <div class="button-group">
          <button class="tech-btn primary" @click="loadSingleLevel('耳闸', '耳闸-入口-中景')" :disabled="!apiReady">加载耳闸关卡</button>
          <button class="tech-btn secondary" @click="loadSingleLevel('二道闸','二道闸-上游-近景')" :disabled="!apiReady">加载二道闸关卡</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
// 从openzi-vue包导入OpenZIViewer sceneApi和levelUtils
import { sceneApi, levelUtils, OpenZIViewer } from 'openzi-vue';
// 解构levelUtils工具方法
const { fetchCameraData, fetchLevelData, findLevelByName, findCameraConfig, loadLevelWithChildren } = levelUtils;

// 组件配置
const config = reactive({
  ueIp: '192.168.18.224',
  levelConfigUrl: '/configs/map/levelData.json'
});

// 状态变量
const showComponent = ref(false);
const apiReady = ref(false);
let OpenZIAPI = null;

// 应用配置
function applyConfig() {
  if (!config.ueIp) {
    console.error('请输入有效的UE服务器IP地址');
    return;
  }
  window.ueIp = config.ueIp; // 将UE服务器IP赋值给全局变量
  showComponent.value = false;
  setTimeout(() => {
    showComponent.value = true;
  }, 100);
}

// 地图加载完成回调
async function onMapLoaded(data) {
  console.log('地图加载完成');

  // 获取OpenZIAPI实例
  OpenZIAPI = data?.OpenZIAPI;

  if (OpenZIAPI) {
    apiReady.value = true;
    // 初始化场景通用工具API
    sceneApi.init(OpenZIAPI);

    try {
      // 1 设置默认坐标系
      await sceneApi.changeCoodinate({
        "coordinateOrigin": "117.4572,39.021101,140.402447",
        "projectionCoordinateSystem": "EPSG:4326",
        "planetShape": 1,
        "GISType": 0,
        "originOffset": "0,0,0",
        "scale": 100
      });

      // 2 设置默认帧率
      sceneApi.changeFps(30);

      // 3 加载基础关卡
      await loadLevels();

      // 4 设置默认视角
      setDefaultCameraView();

    } catch (error) {
      console.error(`初始化设置出错: ${error.message}`);
    }
  }

  // 加载基础关卡函数
  async function loadLevels() {
    try {
      // 加载主要关卡
      await sceneApi.loadLevel('TJ01_46', true);
      // 加载天空场景
      await sceneApi.loadLevel('LV_skycreator', false);
      // 加载特效
      sceneApi.loadLevel('BP_TEXIAO', false);
    } catch (error) {
      console.error(`加载关卡时出错: ${error.message}`);
    }
  }

  // 设置默认视角函数
  function setDefaultCameraView() {
    try {
      // 设置RTS模式的默认视角
      const cameraInfo = {
        "cameraMode": "rts",
        "redirectionOrigin": false,
        "gisType": 0,
        "coordinates": {"X": 117.20377616700722, "Y": 39.136763510147595, "Z": 48.32056263554841},
        "pitch": -79.25000000000016,
        "pitchRange": {"X": -90, "Y": -5},
        "yaw": 179.99999999999966,
        "yawRange": {"X": -180, "Y": 180},
        "moveSpeed": 100,
        "rotationSpeed": 180,
        "zoomSpeed": 100
      };

      // 调用设置相机信息的API
      sceneApi.changeCamera(cameraInfo)
        .then(() => {
          console.log('默认视角设置完成');
        })
        .catch(error => {
          console.error(`默认视角设置失败: ${error.message}`);
        });
    } catch (error) {
      console.error(`设置默认视角时出错: ${error.message}`);
    }
  }
}

// 加载单关卡并设置指定视角
async function loadSingleLevel(name, cameraName = '默认', weaterName = 'Weather_Clear_02', time = 17) {
  try {
    // 0 检查参数是否有效
    if (!name) {
      console.error('加载单关卡时缺少必要参数');
      return;
    }

    console.log(`开始加载关卡: ${name}`);

    // 1 修改天气
    sceneApi.changeWeather(weaterName);
    console.log(`天气已设置为: ${weaterName}`);

    // 2 修改时间
    sceneApi.changeHour(time);
    console.log(`时间已设置为: ${time}时`);

    // 3 动态获取关卡配置数据
    const levelData = await fetchLevelData();
    const targetLevel = findLevelByName(levelData, name);

    if (!targetLevel) {
      console.warn(`未找到关卡${name}的配置信息`);
      // 尝试直接使用提供的名称加载
      try {
        await sceneApi.loadLevel(name, false);
        console.log(`关卡${name}加载完成`);
      } catch (error) {
        console.error(`加载关卡${name}失败: ${error.message}`);
      }
      return;
    }

    // 4 加载指定关卡及其子节点
    try {
      await loadLevelWithChildren(targetLevel);
      console.log(`关卡${targetLevel.title}加载完成`);
    } catch (error) {
      console.error(`加载关卡${targetLevel.title}失败: ${error.message}`);
      return;
    }

    // 5 动态获取相机配置数据并应用
    if (cameraName) {
      const cameraData = await fetchCameraData();
      const targetCameraInfo = findCameraConfig(cameraData, name, cameraName);

      if (!targetCameraInfo) {
        console.warn(`未找到关卡${name}对应的相机配置${cameraName || ''}，使用默认视角`);
      } else {
        // 应用相机视角设置
        try {
          await sceneApi.changeCamera(targetCameraInfo);
          console.log(`视角${cameraName}设置完成`);
        } catch (error) {
          console.error(`设置视角失败: ${error.message}`);
        }
      }
    }

  } catch (error) {
    console.error(`加载关卡${name}时出错: ${error.message}`);
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.component-container {
  width: 100%;
  height: 600px;
  border: 1px solid #ddd;
  overflow: hidden;
  background-color: #000;
}

/* 确保open-z-i-viewer组件适应容器尺寸 */
.component-container >>> open-z-i-viewer {
  width: 100%;
  height: 100%;
  display: block;
}
</style>