代码更新

surprise

2024-03-05 1ce1b525e7470ebaaeb0d5cd1e59bd905c1a7114

 src/views/Tools/LayerTree.vue

@@ -20,76 +20,38 @@
        </el-select> -->
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
          class="search"
        >
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="search">
        </el-input>
      </el-form-item>
    </el-form>
    <el-tree
      ref="tree"
      :data="treeData"
      node-key="id"
      show-checkbox
      :props="defaultProps"
      @node-click="handleLeftclick"
      @node-contextmenu="rightClick"
      @check="handleCheckChange"
      :default-checked-keys="handleTreeCheck"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
    >
      <span
        class="slot-t-node"
        slot-scope="{ node, data }"
      >
    <el-tree ref="tree" :data="treeData" node-key="id" show-checkbox :props="defaultProps" @node-click="handleLeftclick"
      @node-contextmenu="rightClick" @check="handleCheckChange" :default-checked-keys="handleTreeCheck"
      :expand-on-click-node="false" :filter-node-method="filterNode">
      <span class="slot-t-node" slot-scope="{ node, data }">
        <span v-show="!data.isEdit">
          <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{
                              node.label
                            }}</span>
        </span>
        <span v-show="data.isEdit">
          <el-input
            class="slot-t-input"
            size="mini"
            autofocus
            v-model="data.label"
            :ref="'slotTreeInput' + data.id"
            @blur.stop="nodeBlur(node, data)"
            @keydown.native.enter="nodeBlur(node, data)"
          ></el-input>
          <el-input class="slot-t-input" size="mini" autofocus v-model="data.label" :ref="'slotTreeInput' + data.id"
            @blur.stop="nodeBlur(node, data)" @keydown.native.enter="nodeBlur(node, data)"></el-input>
        </span>
      </span>
    </el-tree>
    <el-card
      class="box-card"
      ref="card"
      :style="{ ...rightClickMenuStyle }"
      v-show="menuVisible"
    >
      <div
        class="edit"
        @click="showLayerAttribute()"
        v-if="showProp && !shwoHistogram"
      >
    <el-card class="box-card" ref="card" :style="{ ...rightClickMenuStyle }" v-show="menuVisible">
      <div class="edit" @click="showLayerAttribute()">
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;属性
      </div>
      <div
        class="edit"
        @click="positioning()"
        v-if="showLocal"
      >
      <div class="edit" @click="showLayerCount()">
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;统计
      </div>
      <!-- <div class="edit" @click="positioning()" v-if="showLocal">
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;定位
      </div>
      <div
        class="edit"
        @click="pellucidity()"
        v-if="showOpacity"
      >
      <div class="edit" @click="pellucidity()" v-if="showOpacity">
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;透明度
      </div>
      </div> -->
      <!-- <div
        class="edit"
        @click="histogram()"
@@ -104,11 +66,7 @@
      >
        <i class="el-icon-download"></i>&nbsp;&nbsp;瓦片下载
      </div> -->
      <div
        class="edit"
        v-show="shwoAnnex"
        @click="annexDownload()"
      >
      <div class="edit" v-show="shwoAnnex" @click="annexDownload()">
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;附件
      </div>
    </el-card>
@@ -116,11 +74,16 @@
</template>

<script>
import pwTool from './js/pwTool.js'
import GeoJSON from "ol/format/GeoJSON.js";
import queryinfo from "./queryinfo.vue";
import { Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { perms_selectLayers, comprehensive_selectPubById, project_selectDirAll } from "../../api/api.js";
import { perms_selectLayers, comprehensive_selectPubById, project_selectDirAll, zhangzitou_selectAll } from "../../api/api.js";
import { conditions } from '../Archive/Archive';
import { init } from "echarts";
import { data_type } from "../datamanage/js/layerManage";


export default {
  name: "tree",
@@ -274,8 +237,9 @@
    },
    // 鼠标右击事件
    rightClick(event, object, node, element) {
      if (object.type == 1 || node.data.children != null) return;

      if (object.type == 1 || node.data.children != null) return;
      if (object.serveType != 'GEOJSON') return
      this.currentNode = node;
      this.currentData = object;
      this.$store.state.propertiesName = object;
@@ -285,19 +249,33 @@
      this.showLocal = ["Tileset", "3DML", "Mpt", "TMS", "DOM", "DEM"].indexOf(object.serveType) > -1; // 定位
      this.showOpacity = ["Tileset", "3DML"].indexOf(object.serveType) > -1; // 不透明度
      this.shwoTileDown = ["TMS", "DOM"].indexOf(object.serveType) > -1 && object.pubid; // 瓦片下载
      this.menuVisible = this.showProp || this.shwoHistogram || this.showLocal || this.showOpacity || this.shwoTileDown; // 菜单
      // this.menuVisible = this.showProp || this.shwoHistogram || this.showLocal || this.showOpacity || this.shwoTileDown; // 菜单
      this.menuVisible = true; // 菜单
      this.shwoAnnex = ['DEM', 'TMS'].indexOf(object.serveType) > -1;//附件
      this.$refs.card.$el.style.left = event.pageX + 20 + "px";
      this.$refs.card.$el.style.top = event.pageY + "px";
    },
    // 属性显示
    showLayerAttribute(data) {
      if (!this.currentData && this.currentData.serveType != 'GEOJSON') {
        return
      }
      this.menuVisible = false; // 菜单
      this.rmListener();
      this.currentData = data ? data : this.currentData;
      let layer = this.currentData.enName.replaceAll("_", "");
      this.$store.state.mapSpaceQueryLayer = layer;
      // let layer = this.currentData.enName.replaceAll("_", "");
      // this.$store.state.mapSpaceQueryLayer = layer;

      this.$store.state.showPopBoxFlag = true;
      this.$store.state.mapPopBoxFlag = "2";
    },

    showLayerCount(data) {
      if (!this.currentData && this.currentData.serveType != 'GEOJSON') {
        return
      }
      this.menuVisible = false; // 菜单
      this.$store.state.showEchartCount = true;
    },
    // 定位
    async positioning() {
@@ -399,11 +377,12 @@
    },
    // 图层选中事件
    handleCheckChange(data, checked) {

      if (this.isBusy) return;

      let nodes = [];
      this.getNodes(data, nodes);
      let obj = { WMS: [], Tileset: [], TMS: [], Mpt: [], DEM: [] };
      let obj = { WMS: [], Tileset: [], TMS: [], Mpt: [], DEM: [], WFS: [], GEO: [] };

      for (let i = 0, c = nodes.length; i < c; i++) {
        let node = nodes[i];
@@ -424,6 +403,9 @@
          case "DEM":
            obj.DEM.push(node);
            break;
          case 'GEOJSON':
            obj.WFS.push(node);
            break;
        }
      }

@@ -432,6 +414,7 @@
      if (obj.Mpt.length) this.setChangeMpt(obj.Mpt, checked);
      if (obj.Tileset.length) this.setChangeTileset(obj.Tileset, checked);
      if (obj.WMS.length) this.setChangeWMS(obj.WMS, checked);
      if (obj.WFS.length) this.setChangeWFS(obj.WFS, checked);
    },
    // 获取子节点
    getNodes(data, arr) {
@@ -490,8 +473,68 @@

      if (arr.length) this.addTilesetLayers(arr);
    },

    setChangeWFS(layers, checked) {

      let ids = this.getCheckNodesIds(), arr = [];

      for (let k in layers) {
        let layer = layers[k];
        if (ids.indexOf(layer.id) > -1) {
          arr.push(layer);
          continue;
        }
        this.getGeoJson(2)
      }

      if (arr.length) {
        this.addWFSLayers(arr);
      }

    },
    addWFSLayers(res) {


      this.getGeoJson(1)
      // console.log(feature)
      // if(feature.length>0){
      //   pwTool.initGlb(feature, type);
      // }

      // Cesium.GeoJsonDataSource.load(feature).then((dataSource) => {
      //  console.log(3123,dataSource)
      // })
    },
    async getGeoJson(type) {
      const data = await zhangzitou_selectAll({
        limit: 1000000,
        page: 1
      });
      if (data.code == 200) {
        if (type == 1) {
          pwTool.initGlb(data.result);
        } else if (type == 2) {
          pwTool.removeGlb(data.result.pois);
        }

      }
      // var url = geoserverWFS_1 + res.url + geoserverWFS_2 + 'type=%27' + type + '%27';
      // var data = $.parseJSON($.ajax({
      //   url: url,//json文件位置，文件名
      //   dataType: "json", //返回数据格式为json
      //   async: false
      // }).responseText);
      // if (data.features.length <= 0) return;
      // return {
      //   "type": "FeatureCollection",
      //   "name": "wangge",
      //   "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
      //   "features": data.features,
      // }
    },
    // 添加Tileset图层
    addTilesetLayers(layers) {

      for (let i in layers) {
        let res = layers[i];
        let url = res.url.indexOf("{host}") > -1 ? res.url.replace("{host}", iisHost) : modelUrl + "/" + res.url;
@@ -667,13 +710,31 @@
    },
    // 设置Tileset参数
    async setTilesetArgs(tileset, res) {

      if (res.serveType == '3DML' || !res.pubid) {
        if (res.elev > 0) {
        this.setTilesetHeigth(tileset, parseFloat(res.elev));
        } else {
          console.log("456", res.bak)
          if (res.bak) {
            var val = JSON.parse(res.bak)
            if (val.height) {
              this.setTilesetHeigth(tileset, parseFloat(val.height));
            }
          }
        }

        return;
      }

      const data = await comprehensive_selectPubById({ id: res.pubid })
      if (data.code == 200 && data.result.json) this.setTilesetCoord(tileset, data.result.json);

      if (data.code == 200 && data.result.json) {

        this.setTilesetCoord(tileset, data.result.json);
      } else {

      }
    },
    // 设置Tileset高度
    setTilesetHeigth(tileset, height) {
@@ -876,7 +937,7 @@
      }
    },
    // 添加WFS图层 *
    addWFSLayers(res) {
    addWFSLayers_old(res) {
      let url =
        res.resource +
        "?service=WFS&version=1.0.0&request=GetFeature&typeName=" +
@@ -1024,11 +1085,7 @@
  z-index: 8;
}

.tree-container
  /deep/
  .el-tree-node
  .el-tree-node__children
  .el-tree-node__content::before {
.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::before {
  border-left: 0px dashed #ccc;
  height: 100%;
  top: 0;
@@ -1057,11 +1114,7 @@
  }
}

.tree-container
  /deep/
  .el-tree-node
  .el-tree-node__children
  .el-tree-node__content::after {
.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::after {
  border-top: 0px dashed #ccc;
}

@@ -1142,4 +1195,12 @@
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/deep/.el-input__inner {
  border: 1px solid #DCDFE6 !important
}

/deep/.el-form-item__content {
  line-height: 0vw !important;
}
</style>