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

suerprisePlus

2024-11-19 59077bd254e68d1ddfa2d93ff222e6324df2e93e

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

 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;
}

 src/components/menu/bottom-menu.vue

@@ -1,9 +1,6 @@
<template>
  <div class="specialTool">
    <div
      class="bottomwrapper"
      :class="{ 'top-btn-active': viewer1Show && isLand }"
    >
    <div class="bottomwrapper" :class="{ 'top-btn-active': viewer1Show && isLand }">
      <div class="imgbox" @click="tdglHandle">
        <img src="@assets/img/new/tudiguanli.png" alt="" />
      </div>
@@ -12,11 +9,7 @@
      </div>
    </div>

    <div
      class="bottomwrapper"
      @click="historyHandle"
      :class="{ 'top-btn-active': viewer1Show && !isLand }"
    >
    <div class="bottomwrapper" @click="historyHandle" :class="{ 'top-btn-active': viewer1Show && !isLand }">
      <div class="imgbox">
        <img src="@assets/img/new/chengshigengxin.png" alt="" />
      </div>
@@ -24,11 +17,7 @@
        <span> åŽ†å²å½±åƒ </span>
      </div>
    </div>
    <div
      class="bottomwrapper csbj"
      @click="spjkHandle"
      :class="{ 'top-btn-active': !isShowSPJK }"
    >
    <div class="bottomwrapper csbj" @click="spjkHandle" :class="{ 'top-btn-active': !isShowSPJK }">
      <div class="imgbox">
        <img src="@assets/img/new/spjk.png" alt="" />
      </div>
@@ -37,11 +26,7 @@
      </div>
    </div>

    <div
      class="bottomwrapper spjk"
      @click="shoujixinling"
      :class="{ 'top-btn-active': !isShowSjxl }"
    >
    <div class="bottomwrapper spjk" @click="shoujixinling" :class="{ 'top-btn-active': !isShowSjxl }">
      <div class="imgbox">
        <img src="@assets/img/new/sjxl.png" alt="" />
      </div>
@@ -58,19 +43,12 @@
        <div class="textbox">
          <span> ç²¾æ¨¡ç¤ºèŒƒ </span>
        </div>
        <el-dropdown-menu
          slot="dropdown"
          :append-to-body="false"
          class="popper-dropdown"
        >
        <el-dropdown-menu slot="dropdown" :append-to-body="false" class="popper-dropdown">
          <el-dropdown-item command="fcfhHandle">分层分户</el-dropdown-item>
          <!-- <el-dropdown-item command="sprhHandle">场景视频融合</el-dropdown-item> -->
          <el-dropdown-item v-if="isShowSPRH" command="jiqirendahui"
            >场景视频融合</el-dropdown-item
          >
          <el-dropdown-item v-else command="jiqirendahui"
            >关闭视频融合</el-dropdown-item
          >
          <el-dropdown-item v-if="isShowSPRH" command="jiqirendahui">场景视频融合</el-dropdown-item>
          <el-dropdown-item v-else command="jiqirendahui">关闭视频融合</el-dropdown-item>
          <el-dropdown-item command="gkshHandle">高可视化模型</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
@@ -85,58 +63,27 @@
            @input="updateVideo"
          >
          </el-slider> -->
          <el-slider
            :min="0"
            :max="360"
            v-model="robotVideoList[3].heading"
            @input="updateVideo"
          >
          <el-slider :min="0" :max="360" v-model="robotVideoList[3].heading" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="俯仰角度:">
          <el-slider
            :min="-89"
            :max="89"
            v-model="robotVideoList[3].pitch"
            @input="updateVideo"
          >
          <el-slider :min="-89" :max="89" v-model="robotVideoList[3].pitch" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="水平视角:">
          <el-slider
            :min="30"
            :max="120"
            v-model="robotVideoList[3].horizonAngle"
            @input="updateVideo"
          >
          <el-slider :min="30" :max="120" v-model="robotVideoList[3].horizonAngle" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="垂直视角:">
          <el-slider
            :min="30"
            :max="120"
            v-model="robotVideoList[3].verticalAngle"
            @input="updateVideo"
          >
          <el-slider :min="30" :max="120" v-model="robotVideoList[3].verticalAngle" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="最远投射:">
          <el-slider
            :min="100"
            :max="300"
            v-model="robotVideoList[3].far"
            @input="updateVideo"
          >
          <el-slider :min="100" :max="300" v-model="robotVideoList[3].far" @input="updateVideo">
          </el-slider>
        </el-form-item>
        <el-form-item label="透明度:">
          <el-slider
            :step="0.1"
            :min="0"
            :max="1"
            v-model="robotVideoList[3].alpha"
            @input="updateVideo"
          >
          <el-slider :step="0.1" :min="0" :max="1" v-model="robotVideoList[3].alpha" @input="updateVideo">
          </el-slider>
        </el-form-item>
      </el-form>
@@ -145,17 +92,10 @@
    <div class="SZRtextAreaBox" v-if="isShowTextArea">
      <el-row :gutter="10">
        <el-col :span="19">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            clearable
            @keyup.enter.native="sendCommand($event)"
          ></el-input>
          <el-input v-model="input" placeholder="请输入内容" clearable @keyup.enter.native="sendCommand($event)"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="sendCommand('click')"
            >搜索</el-button
          >
          <el-button type="primary" @click="sendCommand('click')">搜索</el-button>
        </el-col>
      </el-row>
    </div>
@@ -175,6 +115,7 @@
  display: flex;
  justify-content: space-between;
}

.SZRtextAreaBox {
  background: rgba(5, 39, 126, 0.7);
  padding: 10px;
@@ -188,12 +129,15 @@
  transform: translateX(-50%);
  z-index: 99999;
}

.SZRtextAreaBox .el-form-item {
  margin: 0;
}

.SZRtextAreaBox .el-input {
  /* width: 300px; */
}

.specialTool .bottomwrapper:nth-of-type(3) {
  /* background: red; */
  position: relative;
@@ -291,7 +235,7 @@
}

.jxmx .el-dropdown-menu {
  top: -110px !important;
  top: -133px !important;
  left: -26.5% !important;
}

@@ -561,6 +505,10 @@
        case "bzdSystem":
          this.bzdSystem();
          break;

        case "gkshHandle":
          window.open('http://10.128.12.160:8002/')
          break;
        case "fcfhHandle":
          this.fencengfenhu();
          break;

 src/components/menu/signalling copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,240 @@
<template>
    <div class="signalling">
        <div class="signalling_describe">单位：万人</div>
        <div>
            <ul class="signalling_ul">
                <li class="signalling_node" :class="{ signalling_active: i == selectIndex }" v-for="(item, i) in time"
                    @click="changeTime(i)">
                    <div class="signalling_value">{{ Math.round(value[i] / 10000) }}</div>
                    <div class="signalling_symbol"></div>
                    <div class="signalling_time">{{ item }}</div>
                </li>
            </ul>
        </div>
        <div class="signalling_play" @click="signallingPlay()">
            <img src="~@/assets/img/new/rightArrow.png" />
        </div>
        <div class="signalling_type">
            <el-radio-group v-model="type" @change="changeType">
                <el-radio-button label="热力"></el-radio-button>
                <el-radio-button label="柱状"></el-radio-button>
                <el-radio-button label="网格"></el-radio-button>
            </el-radio-group>
        </div>
    </div>
</template>
<style>
.signalling_type .el-radio-group {
    line-height: 0px !important;
    color: white !important;
}

.signalling_type .el-radio-group {
    height: 30px !important;
}

.signalling_type .el-radio-button__inner {
    background: rgba(0, 132, 255, 0.8) !important;
    border: none !important;
    color: white !important;
    height: 30px !important;

}



.signalling_type .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background: rgba(255, 136, 0, 0.8) !important;
}
</style>
<style scoped>
.signalling {
    position: absolute;
    left: 50%;
    margin-left: -650px;
    bottom: 230px;
    color: white;
    width: 1300px;
    z-index: 9999999;
    pointer-events: all;
}

.signalling_type {

    position: absolute;
    right: 130px;
    top: 120px;
}

.signalling_describe {
    position: absolute;
    right: 0px;
    top: 110px;
}

.signalling_play {
    position: absolute;
    left: 0px;
    top: 110px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 32px;
    border: 1px solid #fff;
}

.signalling_play img {
    width: 32px;
    height: 32px;
    margin: 8px 6px 8px 10px;

}

.signalling_ul {}

.signalling_node {
    float: left;
    width: 40px;
    margin: 2.5px 7px;
    list-style: none;
    cursor: pointer;

}

.signalling_value,
.signalling_symbol,
.signalling_time {
    width: 40px;
    text-align: center;

}

.signalling_symbol {
    height: 5px;
    background-color: rgb(0, 132, 255);
    border-radius: 2px;
}

.signalling_node:hover .signalling_symbol {
    background-color: rgb(255, 136, 0) !important;
}

.signalling_node:hover {
    color: rgb(255, 136, 0) !important;
}

.signalling_active {
    color: rgb(255, 136, 0) !important;
}

.signalling_active .signalling_symbol {
    background-color: rgb(255, 136, 0) !important;
}
</style>
<script>

export default {
    name: "signalling",
    components: {

    },
    data() {
        return {
            type: "热力",
            play: false,
            selectIndex: 0,
            time: ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30", "05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"],
            value: [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 22, 22, 23, 23]
        };
    },
    beforeDestroy() {
        removeDataRender();
        removeGrid();
    },
    mounted() {
        let that = this;
        const loading = this.$loading({
            lock: true,
            text: "信令数据加载中，请稍后",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
        });
        window.requestData(function () {
            that.value = signallingData.count;
            loading.close();
        });
    },
    methods: {
        changeType(val) {
            const loading = this.$loading({
                lock: true,
                text: "信令数据加载中，请稍后",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            this.play = false;
            if (val == "热力") {
                removeGrid();
                dataDraw();
            } else if (val == "柱状") {
                setDataRenderVisible(false);
                removeGrid();
                dataGrid(true);
            } else if (val == "网格") {
                setDataRenderVisible(false);
                removeGrid();
                dataGrid(false);
            }
            loading.close();
        },
        changeTime(id) {
            this.play = false;
            this.selectIndex = id;
            if (this.type == "热力") {
                signallingData.selectid = id;
            } else if (this.type == "柱状") {
                const loading = this.$loading({
                    lock: true,
                    text: "信令数据加载中，请稍后",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                signallingData.selectid = id;
                updateDataGrid(true);
                loading.close();
            } else if (this.type == "网格") {
                const loading = this.$loading({
                    lock: true,
                    text: "信令数据加载中，请稍后",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                signallingData.selectid = id;
                updateDataGrid(false);
                loading.close();
            }
        },
        modify() {
            if (signallingData.selectid == list.length - 1) {
                signallingData.selectid = 0;
            } else {
                signallingData.selectid++;
            }
            this.selectIndex = signallingData.selectid;
            setTimeout(() => {
                if (this.play) {
                    this.modify();
                }
            }, 300);
        },
        signallingPlay() {
            if (this.type == "热力") {
                this.play = !this.play;
                if (this.play) {
                    this.modify();
                }
            }
        },
    }
};
</script>

 src/components/menu/signalling.vue

@@ -1,6 +1,31 @@
<template>
    <div class="signalling">
        <div class="signalling_describe">单位：万人</div>
        <div class="signaHeader">
            <div>
                <el-radio-group v-model="type" @change="changeType">
                    <el-radio-button label="热力"></el-radio-button>
                    <el-radio-button label="柱状"></el-radio-button>
                    <el-radio-button label="网格"></el-radio-button>
                </el-radio-group>
            </div>

            <div>
                <label>{{ sliderLabel }}</label>
                <label>单位：万人</label>
            </div>
        </div>
        <div class="signaSlider">

            <el-slider v-model="sliderValue" @change="handleSliderChange" :format-tooltip="formatTooltip"
                :marks="silderMark" :step="1" :min="0" :max="47" show-stops>
            </el-slider>
        </div>
        <div class="signaButton">
            <div class="signalling_play" @click="signallingPlay()">
                <img src="~@/assets/img/new/rightArrow.png" />
            </div>
        </div>
        <!-- <div class="signalling_describe">单位：万人</div>
        <div>
            <ul class="signalling_ul">
                <li class="signalling_node" :class="{ signalling_active: i == selectIndex }" v-for="(item, i) in time"
@@ -11,16 +36,14 @@
                </li>
            </ul>
        </div>
        <div class="signalling_play" @click="signallingPlay()">
            <img src="~@/assets/img/new/rightArrow.png" />
        </div>
    
        <div class="signalling_type">
            <el-radio-group v-model="type" @change="changeType">
                <el-radio-button label="热力"></el-radio-button>
                <el-radio-button label="柱状"></el-radio-button>
                <el-radio-button label="网格"></el-radio-button>
            </el-radio-group>
        </div>
        </div> -->
    </div>
</template>
<style>
@@ -51,13 +74,36 @@
.signalling {
    position: absolute;
    left: 50%;
    margin-left: -650px;
    transform: translateX(-50%);
    bottom: 230px;
    color: white;
    width: 1300px;
    z-index: 9999999;
    pointer-events: all;
    background-image: url("~@/assets/img/new/listbg.png");
    background-size: 100% 100%;
    padding: 20px 10px;
    border-radius: 10px;
}

.signaHeader {
    display: flex;

    justify-content: space-between;
    align-items: center;
    /* color: #409EFF; */
}

.signaSlider {
    margin: 20px 20px;
}

.signaButton {
    width: 100%;
    display: flex;
    justify-content: center;
}


.signalling_type {

@@ -73,19 +119,22 @@
}

.signalling_play {
    position: absolute;
    /* position: absolute;
    left: 0px;
    top: 110px;
    width: 48px;
    height: 48px;
    top: 110px; */
    width: 24px;
    height: 24px;
    cursor: pointer;
    border-radius: 32px;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.signalling_play img {
    width: 32px;
    height: 32px;
    width: 16px;
    height: 16px;
    margin: 8px 6px 8px 10px;

}
@@ -140,6 +189,11 @@
    },
    data() {
        return {
            sliderLabel: '',
            silderMark: {},
            sliderFLag: false,
            sliderMax: 0,
            sliderValue: 0,
            type: "热力",
            play: false,
            selectIndex: 0,
@@ -151,6 +205,7 @@
        removeDataRender();
        removeGrid();
    },

    mounted() {
        let that = this;
        const loading = this.$loading({
@@ -162,9 +217,52 @@
        window.requestData(function () {
            that.value = signallingData.count;
            loading.close();
            that.getMarks();

        });


    },
    methods: {
        formatTooltip(res) {
            var val = this.value[res] / 10000;
            return this.time[res] + " : " + Math.round(parseFloat(val));

        },
        getForMate(res) {
            var val = this.value[res] / 10000;
            return "时间： " + this.time[res] + "        " + " å€¼ï¼š" + Math.round(parseFloat(val));
        },
        getMarks() {
            this.sliderLabel = this.getForMate(0)
            for (var i = 0; i < this.time.length; i++) {
                if (i % 2 == 0) {
                    const key = i;
                    const value = this.time[i];
                    this.$set(this.silderMark, key, {
                        style: {
                            color: '#FFFFFF'
                        },
                        label: value
                    }); // ä½¿ç”¨ Vue.set è§¦å‘视图更新
                }

            }


            this.sliderFLag = true

        },
        handleSliderChange(val) {
            this.play = false;


            this.$nextTick(() => {
                this.changeTime(val)
            })

        },

        changeType(val) {
            const loading = this.$loading({
                lock: true,
@@ -172,6 +270,8 @@
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            this.sliderLabel = this.getForMate(0)
            this.sliderValue = 0;
            this.play = false;
            if (val == "热力") {
                removeGrid();
@@ -220,6 +320,7 @@
            } else {
                signallingData.selectid++;
            }
            this.sliderValue = this.selectIndex;
            this.selectIndex = signallingData.selectid;
            setTimeout(() => {
                if (this.play) {

 src/components/menu/tools/special.vue

@@ -708,7 +708,7 @@
            this.$store.commit("description", obj);
          }

          else if (
          else if (nPickFeature.id &&
            nPickFeature.id.fid &&
            nPickFeature.id.fid.includes("免费住所空间0131")
          ) {
@@ -754,55 +754,90 @@
            layuiLayer.close(SmartEarthPopupData.layerProp);
            this.$store.commit("description", obj);
          }
          // else if (nPickFeature.primitive instanceof Cesium.Cesium3DTileset) {
          // // let cartographic =
          // //   window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
          // //     nPickFeature.content.tile.boundingSphere.center
          // //   );
          // // let lon = Cesium.Math.toDegrees(cartographic.longitude);
          // // let lat = Cesium.Math.toDegrees(cartographic.latitude);
          // let p = sgworld.Navigate.getMouseDegrees(event);
          // let lon = p.lon;
          // let lat = p.lat;
          // axios
          //   .get(
          //     "http://10.10.4.121:8070/gisserver/wfsserver/yizhuang-building-wfs-1207",
          //     {
          //       params: {
          //         version: "1.3.0",
          //         request: "GetFeature",
          //         typename: `亦庄建筑外轮廓4326`,
          //         propertyname: "*",
          //         format: "json",
          //         filter: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><ogc:Intersects><ogc:PropertyName>SAHEP</ogc:PropertyName><gml:Point > <gml:pos>${lon} ${lat}</gml:pos></gml:Point></ogc:Intersects></ogc:Filter>`
          //       }
          //     }
          //   )
          //   .then(response => {
          //     if (response.data.features.length > 0) {
          //       var geometry = [];
          //       let POIs = response.data.features[0].geometry.coordinates[0];
          //       for (let i = 0; i < POIs.length; i++) {
          //         geometry.push({
          //           x: parseFloat(POIs[i][0]),
          //           y: parseFloat(POIs[i][1]),
          //           z: 0
          //         });
          //       }
          //       buildingPolygon = sgworld.Creator.createPolygon(
          //         geometry,
          //         {
          //           fillColor: "#00ff0050",
          //           outlineColor: "#ff0000",
          //           outlineWidth: 2
          //         },
          //         1,
          //         0,
          //         "面"
          //       );
          //     }
          //   });
          // } 
          else if (nPickFeature.primitive instanceof Cesium.Cesium3DTileset) {
            // let cartographic =
            //   window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(
            //     nPickFeature.content.tile.boundingSphere.center
            //   );
            // let lon = Cesium.Math.toDegrees(cartographic.longitude);
            // let lat = Cesium.Math.toDegrees(cartographic.latitude);

            let p = sgworld.Navigate.getMouseDegrees(event);
            let lon = p.lon;
            let lat = p.lat;


            axios
              .get(
                "http://10.10.4.121:8070/gisserver/wfsserver/yizhuang-buliding-wfs",
                {
                  params: {
                    version: "1.3.0",
                    request: "GetFeature",
                    typename: `单体化SHP20241029_wgs84`,
                    propertyname: "*",
                    format: "json",
                    filter: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><ogc:Intersects><ogc:PropertyName>SAHEP</ogc:PropertyName><gml:Point > <gml:pos>${lon} ${lat}</gml:pos></gml:Point></ogc:Intersects></ogc:Filter>`
                  }
                }
              )
              .then(response => {
                if (response.data.features.length > 0) {
                  var geometry = [];
                  let POIs = response.data.features[0].geometry.coordinates[0];
                  tooltipHTML = "";

                  for (let i in response.data.features[0].properties) {
                    let value = response.data.features[0].properties[i];


                    value && (tooltipHTML += `<p>${i}：${value || "无"}</p>`);
                  }

                  // if (tooltip) {
                  //   tooltip.show(false);
                  //   tooltip = null;
                  // }
                  var tooltip = sgworld.Core.CreateResultTooltip(window.Viewer, {
                    color: "black",
                    addY: 0,
                    far: 200000,
                    closeBtn: true,
                    close: () => {
                      if (buildingPolygon) {
                        sgworld.Creator.DeleteObject(buildingPolygon);
                        buildingPolygon = null;
                      }
                    },
                  });
                  console.log(tooltipHTML);

                  let description = `<div style=' border: 1px solid #fff;border-radius: 5px;background: rgba(0, 0, 0, 0.8);color: #fff;padding: 15px;'>${tooltipHTML}</div>`;
                  tooltip.showAt(
                    Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0),
                    description
                  );
                  for (let i = 0; i < POIs.length; i++) {
                    geometry.push({
                      x: parseFloat(POIs[i][0]),
                      y: parseFloat(POIs[i][1]),
                      z: 0
                    });
                  }
                  buildingPolygon = sgworld.Creator.createPolygon(
                    geometry,
                    {
                      fillColor: "#00ff0050",
                      outlineColor: "#ff0000",
                      outlineWidth: 2
                    },
                    1,
                    0,
                    "面"
                  );
                }
              });
          }
          // else if (nPickFeature.primitive instanceof Cesium.GroundPrimitive) {
          //   let wmsLayer = this.$store.state.selectedLayers.filter((item) => {
          //     return item.name == "行政区划图";
@@ -812,7 +847,7 @@

          //     axios
          //       .get(
          //         "http://10.10.4.116:8070/gisserver/rest/services/XingZhengQuHuaTu/MapServer/identify",
          //         "https://skyzt.bda.gov.cn/gisserver/rest/services/XingZhengQuHuaTu/MapServer/identify",
          //         {
          //           params: {
          //             geometry: `${p.lon},${p.lat}`,

 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;

 static/Signalling/js/DataManager.js

@@ -75,8 +75,8 @@
function getData(id, callback) {
    fetch("./static/Signalling/data/" + list[id]).then(response => response.arrayBuffer()).then(data => {

        console.log(data);
        debugger
        // console.log(data);
        // debugger
        var dataView = new DataView(data);
        signallingData.values[id] = [];
        for (var i = 0; i < dataView.byteLength; i += 2) {

 static/layers - ¸±±¾.json

¶Ô±ÈÐÂÎļþ
ÎļþÌ«´ó

 static/layers.json

ÎļþÌ«´ó