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

suerprisePlus

2024-11-19 59077bd254e68d1ddfa2d93ff222e6324df2e93e

 src/components/left/leftmenu.vue

@@ -1,9 +1,6 @@
<template>
  <div
    @click="showLeftMenu"
    :class="{ leftmenu: !isShowLeftPanel, leftmenu_active: isShowLeftPanel }"
    class="leftmenustyle"
  >
  <div @click="showLeftMenu" :class="{ leftmenu: !isShowLeftPanel, leftmenu_active: isShowLeftPanel }"
    class="leftmenustyle">
    <span class="closeLeftMenu" v-if="isShowLeftPanel" @click.stop="hideLeftMenu">×</span>
    <img class="openLeftMenu" v-else src="@/assets/img/left/souselist4.png" />
    <div class="layerTreeContainer" v-show="isShowLeftPanel">
@@ -22,24 +19,21 @@
        <!-- <div @click="setTreeDataChange(1)">业务</div>
        <div @click="setTreeDataChange(2)">业务</div>-->
      </div>

      <hr />
      <!-- <div style="padding: 5px">
        <el-button size="small" @click="setTreeDataChange(1)">图层1</el-button>
        <el-button size="small" @click="setTreeDataChange(2)">图层2</el-button>
      </div>-->
      <div class="layerTree">
        <el-tree
          :data="treeData"
          node-key="id"
          ref="tree"
          :default-checked-keys="arr"
          style="min-width: 160px"
          show-checkbox
          :render-content="renderContent"
          :default-expanded-keys="defaultExpanded"
          @check="check"
          :filter-node-method="filterNode"
        ></el-tree>
        <el-tree :data="treeData" node-key="id" ref="tree" :default-checked-keys="arr" style="min-width: 160px"
          show-checkbox :render-content="renderContent" :default-expanded-keys="defaultExpanded" @check="check"
          @node-click="handleNodeDoubleClick" :filter-node-method="filterNode"></el-tree>
      </div>

      <hr />
      <div class="canelAllCheck">
        <el-link type="info" @click="setClearAllCheck()" style="color:white;font-size: 14px;">取消全部所选</el-link>
      </div>
    </div>
  </div>
@@ -58,6 +52,7 @@
import { getmenu } from "../../api/api";
import keys from "@/assets/poiKeys1";
import store from "@/utils/store";


let colorTool;
let projectTreeData = [];
@@ -332,7 +327,7 @@
        console.log("获取样式配置失败！");
      }
    )
    .catch(function(error) {
    .catch(function (error) {
      console.log(error);
    });
  return de;
@@ -848,6 +843,42 @@
        this.setVisiable(treeNode.data, isCheck);
      }
    },
    handleNodeDoubleClick(data, node, event) {
      if (data.flyTo) {
        const coord = data.flyTo;
        sgworld.Navigate.flyToPointsInterest({
          destination: Cesium.Cartesian3.fromDegrees(
            coord[0],
            coord[1],
            coord[2]
          ),
          orientation: {
            heading: Cesium.Math.toRadians(coord[3] ? coord[3] : -90),
            pitch: Cesium.Math.toRadians(coord[4] ? coord[4] : 0),
            roll: Cesium.Math.toRadians(0.0)
          },
          duration: 2 //飞行时间8s
        });
      }

    },
    setClearAllCheck() {
      // let treeNode = this.$refs.tree.getNode(1);
      // if (treeNode && treeNode.data) {
      // this.setVisiable(treeNode, false);
      // }
      const nodes = this.$refs.tree.getCheckedNodes();
      const ids = ["18B25A94", "47EC9636"];
      const checkId = [];
      nodes.map(item => {
        if (ids.indexOf(item.id) > -1) {
          checkId.push(item.id)
        } else {
          this.setVisiable(item, false)
        }
      })
      this.$refs.tree.setCheckedKeys(checkId);
    },
    check(treeNode, data) {
      //关闭右侧信息弹窗
      Bus.$emit("closeRightPop", true);
@@ -991,7 +1022,7 @@
          height: 310,
          url: "./static/html/layerProp.html",
          fn: {
            end: function() {}
            end: function () { }
          }
        });
      } else if (data._children) {
@@ -1578,7 +1609,7 @@
            rectangle: Cesium.Rectangle.MAX_VALUE
          });
          if (treeNode.addLevel && treeNode.addLevel === 2) {
            geotil.positionToTileXY = function(position, level, result) {
            geotil.positionToTileXY = function (position, level, result) {
              level > 0 && level++;
              var rectangle = this._rectangle;
              if (!Cesium.Rectangle.contains(rectangle, position)) {
@@ -1617,7 +1648,7 @@
              result.y = yTileCoordinate;
              return result;
            };
            geotil.tileXYToRectangle = function(x, y, level, result) {
            geotil.tileXYToRectangle = function (x, y, level, result) {
              level > 0 && level++;
              var rectangle = this._rectangle;

@@ -1782,8 +1813,8 @@
          axios
            .get(
              treeNode.urls +
                "?version=1.3.0&request=GetFeature&format=json&typename=" +
                treeNode.layer
              "?version=1.3.0&request=GetFeature&format=json&typename=" +
              treeNode.layer
            )
            .then(data => {
              let features = data.data.features;
@@ -1996,7 +2027,7 @@
              de,
              "0",
              true,
              function(data) {
              function (data) {
                if (treeNode.flow) {
                  let lines = data.entities.values;
                  lines.forEach(line => {
@@ -2050,7 +2081,7 @@
              clampToGround: sgworld.Core.defaultValue(
                treeNode.clampToGround,
                treeNode.extrudedHeight === undefined &&
                  treeNode.height === undefined
                treeNode.height === undefined
              ),
              classificationType: treeNode.classificationType,
              near: sgworld.Core.defaultValue(treeNode.near, 0),
@@ -2181,7 +2212,7 @@
              de,
              "0",
              treeNode.checked,
              function() {}
              function () { }
            );
          } else if (treeNode.class === "polylineVolume") {
            de = {
@@ -2211,7 +2242,7 @@
              de,
              "0",
              treeNode.checked,
              function() {}
              function () { }
            );
          } else if (treeNode.class === "polyline") {
            de = {
@@ -2250,7 +2281,7 @@
              de,
              "0",
              treeNode.checked,
              function() {}
              function () { }
            );
          } else if (treeNode.class === "polygon") {
            de = {
@@ -2282,7 +2313,7 @@
              de,
              "0",
              treeNode.checked,
              function() {}
              function () { }
            );
          } else if (treeNode.class === "model") {
            de = {
@@ -2308,7 +2339,7 @@
              de,
              "0",
              treeNode.checked,
              function() {}
              function () { }
            );
          }
          layer && (treeNode.id = layer.treeobj.id);
@@ -2422,7 +2453,7 @@
          layer = sgworld.Creator.createS3MLayer(
            treeNode.urls,
            sgworld._Viewer.scene,
            function() {}
            function () { }
          );
          break;
        case "gltf":
@@ -2698,8 +2729,8 @@
      let imgUrl;
      new Cesium.GeoJsonDataSource.load(
        treeNode.urls +
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
          treeNode.layer
        "?version=1.3.0&request=GetFeature&format=json&typename=" +
        treeNode.layer
      ).then(dataSource => {
        // that.$set(treeNode, "disabled", false);
        Viewer.dataSources.add(dataSource);
@@ -2748,7 +2779,7 @@
        });

        // 添加监听函数
        dataSource.clustering.clusterEvent.addEventListener(function(
        dataSource.clustering.clusterEvent.addEventListener(function (
          clusteredEntities,
          cluster
        ) {
@@ -3028,12 +3059,24 @@
  transition: 1s;
  z-index: 9999;
}

.switchbox {
  margin-top: 5px;
}

.closeLeftMenu:hover {
  cursor: pointer;
  transform: rotateZ(90deg);
}

.canelAllCheck {

  flex: end;
}

.layerTree {
  flex: 1;
  overflow-y: auto;
}

.layerTree .el-tree /deep/ .el-checkbox__inner {
@@ -3067,6 +3110,7 @@
.leftmenu:hover {
  background-image: url("~@/assets/img/new/treeClose-y.png");
}

.leftmenu {
  background-image: url("~@/assets/img/new/treeClose.png");
  background-size: 100% 100%;
@@ -3098,6 +3142,8 @@
  width: 270px;
  height: 550px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* margin: 20px 0; */
}

@@ -3126,7 +3172,7 @@
  background-color: rgba(255, 255, 255, 0.4) !important;
}

.el-tree /deep/ .is-current > .el-tree-node__content {
.el-tree /deep/ .is-current>.el-tree-node__content {
  background-color: rgba(255, 255, 255, 0.4) !important;
  font-size: 14px;
}