图层搜索

lixuliang

2024-01-19 2a9e0f190c384d4c95a188822d6bf1802697d10c

 src/components/left/leftmenu.vue

@@ -11,8 +11,14 @@
      >×</span
    >
    <img class="openLeftMenu" v-else src="@/assets/img/left/souselist4.png" />

    <div class="layerTreeContainer" v-show="isShowLeftPanel">
      <el-input
        placeholder="图层名称"
        v-model="filterText"
        size="mini"
      >
      </el-input>

      <div class="switchbox">
        <el-radio-group v-model="radio" @change="getright">
          <el-radio :label="1">组织机构</el-radio>
@@ -37,6 +43,7 @@
          :render-content="renderContent"
          :default-expanded-keys="defaultExpanded"
          @check="check"
          :filter-node-method="filterNode"
        ></el-tree>
      </div>
    </div>
@@ -445,6 +452,7 @@
  name: "leftmenu",
  data() {
    return {
      filterText: "",
      isShowLeftPanel: false,
      activeName: "first",
      alldisabled: [],
@@ -464,18 +472,18 @@
    //获取token并请求加载图层数据
    this.SmartEarthToken = common.smartearthtoken;
    this.$nextTick(() => {
      getmenu().then((response) => {
        // // 得到默认选中的数据的id
        // this.parseJson(response.data); //场景配置
        // this.treeData = response.data;
        // this.setDefaultCheck(response.data);
        //   setTimeout(() => {
        //     this.randomSelectLayer();
        //     let selectedLayers = this.$refs.tree.getCheckedNodes();
        //     // .filter((item) => item.sourceType == "cluster");
        //     this.$store.commit("selectedLayer", selectedLayers);
        //   }, 1000);
      });
      // getmenu().then((response) => {
      //   // // 得到默认选中的数据的id
      //   // this.parseJson(response.data); //场景配置
      //   // this.treeData = response.data;
      //   // this.setDefaultCheck(response.data);
      //   //   setTimeout(() => {
      //   //     this.randomSelectLayer();
      //   //     let selectedLayers = this.$refs.tree.getCheckedNodes();
      //   //     // .filter((item) => item.sourceType == "cluster");
      //   //     this.$store.commit("selectedLayer", selectedLayers);
      //   //   }, 1000);
      // });
      this.getLayersData("./static/layers.json");
      // axios.get("./static/layers.json").then(
      //   (response) => {
@@ -546,6 +554,10 @@
      this.$refs.tree.setChecked("zhianjiankong", true, true);
      this.setChecked("zhianjiankong", true);
    });
    Bus.$on("closeSPJK", () => {
      this.$refs.tree.setChecked("zhianjiankong", false, false);
      this.setChecked("zhianjiankong", false);
    });
    //关闭菜单弹窗
    Bus.$on("closeMenuPop", (data) => {
      if (data) {
@@ -598,6 +610,10 @@
          console.log("获取场景配置失败！");
        }
      );
    },
    filterNode(value, treeData) {
      if (!value) return true;
      return treeData.name.indexOf(value) !== -1;
    },
    setTreeDataChange(res) {
      if (this.treeChangeFlag == res) return;
@@ -2678,8 +2694,7 @@
    // },

    initCluster(treeNode) {
      this.$set(treeNode, "disabled", true);//给treeNode添加disabled属性

      // this.$set(treeNode, "disabled", true); //给treeNode添加disabled属性
      let that = this;
      let imgUrl;
      new Cesium.GeoJsonDataSource.load(
@@ -2687,7 +2702,7 @@
          "?version=1.3.0&request=GetFeature&format=json&typename=" +
          treeNode.layer
      ).then((dataSource) => {
        that.$set(treeNode, "disabled", false);
        // that.$set(treeNode, "disabled", false);
        Viewer.dataSources.add(dataSource);
        clusterItemList.push({ name: treeNode.id, dataSource: dataSource });
        // window.clusterItem = dataSource;
@@ -2731,7 +2746,6 @@
          //   // 偏移量
          //   pixelOffset: new Cesium.Cartesian2(15, 0),
          // };
       
        });

        // 添加监听函数
@@ -2970,6 +2984,11 @@
      }
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>
<style scoped>
@@ -3000,7 +3019,9 @@
  transition: 1s;
  z-index: 9999;
}

.switchbox{
  margin-top: 5px;
}
.closeLeftMenu:hover {
  cursor: pointer;
  transform: rotateZ(90deg);
@@ -3034,6 +3055,9 @@
  /* box-shadow: 0px 0px 5px 2px #a8a8a8; */
}

.leftmenu:hover {
  background-image: url("~@/assets/img/new/treeClose-y.png");
}
.leftmenu {
  background-image: url("~@/assets/img/new/treeClose.png");
  background-size: 100% 100%;
@@ -3081,6 +3105,8 @@
.el-tree {
  background: transparent;
  color: white;
  height: 93%;
  overflow: auto;
}

.el-tree /deep/ .el-tree-node__content {
@@ -3096,23 +3122,25 @@
  font-size: 14px;
}

.layerTree::-webkit-scrollbar {
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  width: 5px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  height: 8px;
  scrollbar-arrow-color: red;
}

.layerTree::-webkit-scrollbar-thumb {
/* 滚动条 */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
  box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
  background: rgba(218, 218, 218, 0.5);
  scrollbar-arrow-color: red;
}

.layerTree::-webkit-scrollbar-track {
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
  box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
  border-radius: 0;
@@ -3121,7 +3149,6 @@

.el-tree .TreeNodeClass {
  width: 100%;
  background-color: #bfa;
  flex: 1;
  display: flex;
  align-items: center;