图层控制增加全部关闭按钮，图层双击自动定位到对应位置，信令数据的时间条美化下，对接UE视频流，数字人功能开启，逻辑单体化数据体现

suerprisePlus

2024-11-19 59077bd254e68d1ddfa2d93ff222e6324df2e93e

 src/components/right/FCFH.vue

@@ -2,6 +2,27 @@
  <div class="FloorWrap">
    <div id="closeBtn_onclick"><span>×</span></div>
    <div id="FloorBox">
      <div>
        查看模型：
        <select id="modelFy">
          <option value="/c3dserver/YHYQ1/tileset.json" style="background: rgba(0, 0, 0, 0.4)">永辉大厦</option>
          <option value="/ctsserver/yichengketing/tileset.json" style="background: rgba(0, 0, 0, 0.4)">亦城客厅</option>
          <option value="/ctsserver/fengdaguoji/tileset.json" style="background: rgba(0, 0, 0, 0.4)">丰大国际</option>
        </select>
      </div>
      <br />
      <div id="deviation">
        偏移方向：
        <input name="offset" class="styled" value="x" checked type="radio" />
        <label>X轴</label>
        &nbsp;
        <input name="offset" class="styled" value="y" type="radio" />
        <label>Y轴</label>
        &nbsp;
        <input name="offset" class="styled" value="z" type="radio" />
        <label>Z轴</label>
      </div>
      <br />
      <div class="checkbox checkbox-primary checkbox-inline" id="selectBox">
        查看层级：
        <select id="selectlevel">
@@ -28,28 +49,12 @@
      <div id="toolbar">
        <div>
          偏移距离：
          <input
            type="range"
            min="-200"
            max="200"
            step="1"
            data-bind="value: distance, valueUpdate: 'input'"
          />
          <input type="range" min="-200" max="200" step="1" data-bind="value: distance, valueUpdate: 'input'" />
          <input type="text" size="5" data-bind="value: distance" />
          &nbsp;
          <input
            id="showBuild_onclick"
            type="button"
            class="btn btn-primary"
            value="展开"
          />
          <input id="showBuild_onclick" type="button" class="btn btn-primary" value="展开" />
          &nbsp;
          <input
            id="restore_onclick"
            type="button"
            class="btn btn-primary"
            value="恢复"
          />
          <input id="restore_onclick" type="button" class="btn btn-primary" value="恢复" />
        </div>
      </div>
    </div>
@@ -69,34 +74,7 @@
  },
  mounted() {
    $(function () {
      modelLayer = sgworld.Creator.create3DTilesets(
        "",
        "http://10.10.4.121:8070/gisserver/c3dserver/YHYQ1/tileset.json",
        {},
        {},
        "0",
        true,
        (data) => {
          let boundingSphere = data.item.boundingSphere;
          Viewer.zoomTo(
            data.item,
            new SmartEarth.Cesium.HeadingPitchRange(
              0,
              -0.7,
              3 * boundingSphere.radius
            )
          );
        }
      );
      setTimeout(() => {
        showModel = sgworld.analysis.ShowBuildingRoom({
          model: modelLayer.item, //模型基元Primitives
          distance: { x: 30, y: 0, z: 0 },
          //selectLevelColor: new SmartEarth.Cesium.Color.fromCssColorString("rgba(240,240,240,0.95)"), //展示模型的颜色
          //notSelectColor:new SmartEarth.Cesium.Color.fromCssColorString("rgba(102,204,255,0.5)"),    //非展示模型的颜色
          //highlightColor:new SmartEarth.Cesium.Color.fromCssColorString("rgba(255,215,0,0.9)"),   //选择展示模型的高亮颜色
        });
      }, 1000);
      getModelLayer();
      //选择展开
      $("#showBuild_onclick").click(function () {
        let num = Number($("#selectlevel").val());
@@ -114,6 +92,12 @@
        sgworld.Creator.DeleteObject(modelLayer);
        Bus.$emit("ShowFCFH", false);
      });
      $("#modelFy").change(() => {
        getModelLayer();
      })
      $('input[type=radio][name=offset]').change((event) => {
        setClippingModel();
      })
      //表格数据
      const dataTable = document.getElementById("dataTable");
      function createTableRow(dataObj) {
@@ -133,6 +117,72 @@
      function loadTable(dataObj) {
        deleteAllRows();
        createTableRow(dataObj);
      }
      function getModelLayer() {
        const val = document.getElementById("modelFy").value;
        var falg = false;
        if (val.indexOf('YHYQ1') > -1) {
          $("#selectBox").show();
          $("#toolbar").show();
         
        } else {
          falg = true;
          $("#selectBox").hide();
          $("#toolbar").hide();
          $("#offsetX").attr("checked", true);
          $("#offsetY").attr("checked", false);
          $("#offsetZ").attr("checked", false);
        }
        const url = "http://10.10.4.121:8070/gisserver" + val;
        // console.log(document.getElementById("modelFy"));

        addModelLayer(url, falg)
      }
      function addModelLayer(response, flag) {
        if (modelLayer) {
          sgworld.Creator.DeleteObject(modelLayer);
          modelLayer = null
        }
        modelLayer = sgworld.Creator.create3DTilesets(
          "",
          response,
          {},
          {},
          "0",
          true,
          (data) => {
            let boundingSphere = data.item.boundingSphere;
            Viewer.zoomTo(
              data.item,
              new SmartEarth.Cesium.HeadingPitchRange(
                0,
                -0.7,
                3 * boundingSphere.radius
              )
            );
          }
        );
        setTimeout(() => {
          showModel = sgworld.analysis.ShowBuildingRoom({
            model: modelLayer.item, //模型基元Primitives
            distance: { x: 30, y: 0, z: 0 },
            //selectLevelColor: new SmartEarth.Cesium.Color.fromCssColorString("rgba(240,240,240,0.95)"), //展示模型的颜色
            //notSelectColor:new SmartEarth.Cesium.Color.fromCssColorString("rgba(102,204,255,0.5)"),    //非展示模型的颜色
            //highlightColor:new SmartEarth.Cesium.Color.fromCssColorString("rgba(255,215,0,0.9)"),   //选择展示模型的高亮颜色
          });
          if (flag) {
            setClippingModel()
          }
        }, 1000);
      }
      function setClippingModel() {
        var radios = document.querySelectorAll('input[name="offset"]:checked');
        if (radios.length > 0) {
          var value = radios[0].value;
          modelLayer.clippingModel({
            direction: value
          })
        }
      }
      //删除表格
      function deleteAllRows() {
@@ -225,18 +275,21 @@
<style scoped>
.FloorWrap {
  color: #fff;
  min-width: 413px;
}

#closeBtn_onclick {
  width: 20px;
  cursor: pointer;
  margin-left: auto;
  margin-bottom: 8px;
}

#closeBtn_onclick span {
  font-size: 20px;
}
</style>
<style >
<style>
#dataTable {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;