资料馆界面重构，优化

Surpriseplus

2023-02-26 9dedc69f2c18b28cf18807531b6c8b81e6ad77e3

 src/views/Tools/LayerTree.vue

@@ -10,17 +10,17 @@
      ref="tree"
      :data="treeData"
      node-key="id"
      default-expand-all
      show-checkbox
      :props="defaultProps"
      @node-click="handleLeftclick"
      @node-contextmenu="rightClick"
      @check-change="handleCheckChange"
      :default-checked-keys="handleTreeCheck"
      :expand-on-click-node="false"
    >
      <span
        class="slot-t-node"
        slot-scope="{ node, data }"
        @dblclick="editNode(data)"
      >
        <span v-show="!data.isEdit">
          <span :class="[data.id >= 99 ? 'slot-t-node--label' : '']">{{
@@ -47,20 +47,44 @@
      :style="{ ...rightClickMenuStyle }"
      v-show="menuVisible"
    >
      <div @click="addSameLevelNode()" v-show="firstLevel">
      <div
        @click="addSameLevelNode()"
        v-show="firstLevel"
      >
        <i class="el-icon-plus"></i>&nbsp;&nbsp;添加图层组
      </div>
      <div class="add" @click="addChildNode()">
      <div
        class="add"
        @click="addChildNode()"
      >
        <i class="el-icon-plus"></i>&nbsp;&nbsp;添加图层
      </div>
      <div class="delete" @click="deleteNode()">
      <div
        class="delete"
        @click="deleteNode()"
      >
        <i class="el-icon-delete"></i>&nbsp;&nbsp;删除
      </div>
      <div class="edit" @click="editNode()">
      <div
        class="edit"
        @click="editNode()"
      >
        <i class="el-icon-edit"></i>&nbsp;&nbsp;重命名
      </div>
      <div class="edit" @click="showLayerAttribute()">
      <div
        class="edit"
        @click="showLayerAttribute()"
        v-if="!showlocal"
        v-show="!firstLevel"
      >
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;属性
      </div>
      <div
        class="edit"
        @click="positioning()"
        v-show="showlocal"
      >
        <i class="el-icon-tickets"></i>&nbsp;&nbsp;定位
      </div>
      <!-- <div
        class="edit"
@@ -83,13 +107,17 @@
      :modal="false"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="addFormServer" label-width="100px">
      <el-form
        ref="form"
        :model="addFormServer"
        label-width="100px"
      >
        <el-form-item label="服务类型">
          <!-- <el-input v-model="addFormServer.type"></el-input> -->
          <el-select
            style="width: 100%"
            :popper-append-to-body="false"
            v-model="addFormServer.layerType"
            v-model="addFormServer.serveType"
            placeholder="请选择"
          >
            <el-option
@@ -102,21 +130,27 @@
          </el-select>
        </el-form-item>
        <el-form-item label="图层名称">
          <el-input v-model="addFormServer.label"></el-input>
          <el-input v-model="addFormServer.cnName"></el-input>
        </el-form-item>
        <el-form-item label="服务名称">
          <el-input v-model="addFormServer.resource"></el-input>
          <el-input v-model="addFormServer.url"></el-input>
        </el-form-item>

        <el-form-item label="服务地址">
          <el-input v-model="addFormServer.url"></el-input>
          <el-input v-model="addFormServer.resource"></el-input>
        </el-form-item>
        <el-form-item label="透明度">
          <el-slider v-model="addFormServer.opacity"></el-slider>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setAddServer">确 定</el-button>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="setAddServer"
        >确 定</el-button>
      </span>
    </el-dialog>
    <queryinfo ref="queryinfo" />
@@ -141,6 +175,7 @@
  components: { queryinfo },
  data() {
    return {
      showlocal: false,
      eleId: "",
      isShow: false,
      currentData: "",
@@ -155,7 +190,7 @@
      dialogVisible: false,
      addFormServer: {
        opacity: 100,
        layerType: "WMS",
        serveType: "WMS",
        type: 2,
      },
      layerId: [
@@ -167,7 +202,7 @@
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
        label: "cnName",
      },
      options: [
        {
@@ -215,10 +250,15 @@
    rightClick(event, object, Node, element) {
      this.currentData = object;
      this.currentNode = Node;
      if (Node.level === 1) {
        this.firstLevel = true;
      } else {
      if (Node.level === 3) {
        this.firstLevel = false;
      } else {
        this.firstLevel = true;
      }
      if (Node.level === 3 && Node.data.serveType == "Tileset") {
        this.showlocal = true;
      } else if (Node.level === 3 && Node.data.serveType != "Tileset") {
        this.showlocal = false;
      }
      this.menuVisible = true;

@@ -270,7 +310,7 @@
      this.dialogVisible = false;
      this.addFormServer = {
        opacity: 100,
        layerType: "WMS",
        serveType: "WMS",
        type: 2,
      };
    },
@@ -287,22 +327,33 @@
    // 删除节点
    deleteNode() {
      this.foo();
      var label = this.currentNode.data.label;
      if (this.currentNode.data.layerType == "WMS") {
        for (var i in window.Viewer.imageryLayers_layers) {
          if (window.Viewer.imageryLayers_layers[i].name === label) {
      var label = this.currentNode.data.cnName;
      if (this.currentNode.data.serveType == "WMS") {
        for (var i in window.Viewer.imageryLayers._layers) {
          if (
            window.Viewer.imageryLayers._layers[i].imageryProvider.name ===
            label
          ) {
            window.Viewer.imageryLayers.remove(
              window.Viewer.imageryLayers_layers[i]
              window.Viewer.imageryLayers._layers[i]
            );
          }
        }
      } else if (this.currentNode.data.layerType == "WFS") {
      } else if (this.currentNode.data.serveType == "WFS") {
        for (var i in window.Viewer.dataSources._dataSources) {
          if (window.Viewer.dataSources._dataSources[i].name == label) {
            window.Viewer.dataSources.remove(
              window.Viewer.dataSources._dataSources[i]
            );
            std.push(data.label);
          }
        }
      } else if (this.currentNode.data.serveType == "Tileset") {
        for (var i in Viewer.scene.primitives._primitives) {
          // Viewer.scene.primitives._primitives[i].show = checked;
          if (Viewer.scene.primitives._primitives[i].id == label) {
            Viewer.scene.primitives.remove(
              Viewer.scene.primitives._primitives[i]
            );
          }
        }
      }
@@ -320,7 +371,7 @@
    showLayerAttribute(data) {
      this.foo();
      this.currentData = data ? data : this.currentData;
      var layer = this.currentData.layer.replaceAll("_", "");
      var layer = this.currentData.enName.replaceAll("_", "");
      this.$store.state.mapSpaceQueryLayer = layer;
      // this.$store.state.mapPopBoolean = true;
      this.$store.state.mapPopBoxFlag = "2";
@@ -339,6 +390,16 @@
            }
          },
        });
    },
    //模型定位
    positioning() {
      for (var i in Viewer.scene.primitives._primitives) {
        if (
          Viewer.scene.primitives._primitives[i].id == this.currentData.cnName
        ) {
          Viewer.flyTo(Viewer.scene.primitives._primitives[i]);
        }
      }
    },
    // 编辑节点
    editNode(data) {
@@ -412,20 +473,13 @@
    },
    handleCheckChange(data, checked, indeterminate) {
      if (data.type != 2) return;
      //做判断是否是1：100万行政界面
      if (data.layer == window.XZOutlie && checked) {
        window.ImageLayer3.show = false;
      } else {
        window.ImageLayer3.show = true;
      }

      var std = [];
      if (data.layerType == "WMS") {
      if (data.serveType == "WMS") {
        var layers_ol = window.map.getAllLayers();
        for (var i = 0; i < window.Viewer.imageryLayers._layers.length; i++) {
          var val_id =
            window.Viewer.imageryLayers._layers[i].imageryProvider.name;
          if (val_id == data.label) {
          if (val_id == data.cnName) {
            std.push(data.label);

            const img_layer = window.Viewer.imageryLayers._layers[i];
@@ -435,18 +489,30 @@

        for (var i in layers_ol) {
          var layerOl = layers_ol[i];
          if (layerOl.values_.name == data.label) {
          if (layerOl.values_.name == data.cnName) {
            layerOl.setVisible(checked); //显示图层
          }
        }
      } else if (data.layerType == "WFS") {
      } else if (data.serveType == "WFS") {
        if (window.Viewer.dataSources._dataSources.length == 0) {
          this.setAddLayers(data);
        } else {
          for (var i in window.Viewer.dataSources._dataSources) {
            if (window.Viewer.dataSources._dataSources[i].name == data.label) {
            if (window.Viewer.dataSources._dataSources[i].name == data.cnName) {
              window.Viewer.dataSources._dataSources[i].show = checked;
              std.push(data.label);
            }
          }
        }
      } else if (data.serveType == "Tileset") {
        if (Viewer.scene.primitives._primitives.length == 0) {
          this.setAddLayers(data);
        } else {
          for (var i in Viewer.scene.primitives._primitives) {
            Viewer.scene.primitives._primitives[i].show = checked;
            if (Viewer.scene.primitives._primitives[i].id == data.cnName) {
              std.push(res.id);
              Viewer.flyTo(Viewer.scene.primitives._primitives[i]);
            }
          }
        }
@@ -463,19 +529,15 @@
      }
    },
    setAddLayers(res) {
      if (res.layerType == "WMS") {
        var url = geoServerURl;
        if (res.url != null && res.url != undefined) {
          url = res.url;
      if (res.serveType == "WMS") {
        var resource = geoServerURl;
        if (res.resource != null && res.resource != undefined) {
          resource = res.resource;
        }

        //var width = $("#mapdiv").width();
        //var height = $("#mapdiv").height();

        var imageryLayers = window.Viewer.scene.imageryLayers;
        let layerWMS = new Cesium.WebMapServiceImageryProvider({
          url: url,
          layers: res.resource,
          url: resource,
          layers: res.url,
          parameters: {
            transparent: true,
            format: "image/png",
@@ -485,21 +547,21 @@
          tileWidth: 512,
          tileHeight: 512,
        });
        layerWMS.name = res.label;
        layerWMS.name = res.cnName;
        //透明度
        var tdtAnnoLayer = imageryLayers.addImageryProvider(layerWMS);
        if (res.opacity) {
          tdtAnnoLayer.alpha = parseInt(res.opacity) / 100;
        }
        var layer2 = new Image({
          name: res.label,
          name: res.cnName,
          source: new ImageWMS({
            crossOrigin: "anonymous",
            url: url,
            url: resource,
            params: {
              FORMAT: "image/png",
              VERSION: "1.1.1",
              LAYERS: res.resource,
              LAYERS: res.url,
            },
          }),
        });
@@ -507,11 +569,11 @@
          layer2.setOpacity(parseInt(res.opacity) / 100);
        }
        window.map.addLayer(layer2);
      } else if (res.layerType == "WFS") {
      } else if (res.serveType == "WFS") {
        var url =
          res.url +
          "?service=WFS&version=1.0.0&request=GetFeature&typeName=" +
          res.resource +
          "?service=WFS&version=1.0.0&request=GetFeature&typeName=" +
          res.url +
          "&outputFormat=application%2Fjson";
        $.ajax({
          url: url,
@@ -526,7 +588,7 @@
              clampToGround: true, //是否贴地
            });
            datasource.then((data) => {
              data.name = res.label;
              data.name = res.cnName;
              window.Viewer.dataSources.add(data);
            });
          },
@@ -536,71 +598,75 @@
        });

        var vectorLayer = new VectorLayer({
          name: res.label,
          name: res.cnName,
          source: new VectorSource({
            url: url,
            format: new GeoJSON(),
          }),
        });
        window.map.addLayer(vectorLayer);
      } else if (res.serveType == "Tileset") {
        debugger
        var tileset = Viewer.scene.primitives.add(
          new Cesium.Cesium3DTileset({
            name: res.cnName,
            url: modelUrl + "/" + res.url, //192.168.20.106,to4
            maximumScreenSpaceError: 64, // 最大屏幕空间错误：16
            maximumMemoryUsage: 768, // 最大内存：512
            dynamicScreenSpaceError: true, // 减少离相机较远的屏幕空间错误：false
            skipLevelOfDetail: true, // 在遍历时候跳过详情：false
          })
        );

        tileset.readyPromise.then(function (tileset) {
          tileset.id = res.cnName;
          Viewer.flyTo(tileset);
        });
      }
    },
    setTreeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
      return cloneData.filter((father) => {
        // 循环所有项
        let branchArr = cloneData.filter((child) => father.id == child.pid); // 对比ID，分别上下级菜单，并返回数据
        branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
        // 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
        // 由此循环多次后，就能形成相应的树形数据结构
        return father.pid == 0; // 返回一级菜单
      });
    },
    async layersStart() {
      const data = await perms_selectLayers();
      if (data.code != 200) {
        return this.$message.error("图层列表查询失败");
      }

      this.newData = data.result;
      this.oriData = data.result;
      var std = [];
      var layer_list = [];
      var layer_groups = [];
      for (var i in data.result) {
        if (data.result[i].type == 1) {
          layer_groups.push({
            id: data.result[i].id,
            label: data.result[i].cnName,
            type: data.result[i].type,
            isEdit: false,
            children: [],
          });
        } else if (data.result[i].type == 2) {
          if (data.result[i].url != null) {
            var layer_entity = {
              id: data.result[i].id,
              pid: data.result[i].pid,
              label: data.result[i].cnName,
              resource: data.result[i].url,
              type: data.result[i].type,
              isEdit: false,
              layer: data.result[i].enName,
              layerType: data.result[i].serveType,
            };
            layer_list.push(layer_entity);

            if (data.result[i].isShow == 1) {
              std.push(data.result[i].id);
              this.setAddLayers(layer_entity);
            }
          }
      var std = data.result;
      var that = this;
      var checkKey = [];
      var val = std.filter((str) => {
        if (str.type == 1) {
          return str;
        }
      }

      for (var i in layer_list) {
        for (var j in layer_groups) {
          if (layer_list[i].pid === layer_groups[j].id) {
            layer_groups[j].children.push(layer_list[i]);
        if (str.url != null && str.type == 2) {
          if (str.isShow == 1) {
            checkKey.push(str.id);
            that.setAddLayers(str);
          }
        }
      }
      layer_groups = layer_groups.filter((res) => {
        if (res.children && res.children.length != 0) {
          return res;
          return str;
        }
      });
      this.treeData = layer_groups;
      this.$refs.tree.setCheckedKeys(std);

      var res = this.setTreeData(val);

      for (var i in res) {
        res[i].children = res[i].children.filter((val) => {
          if (val.children != null) {
            return val;
          }
        });
      }
      this.treeData = res;
      this.$refs.tree.setCheckedKeys(checkKey);
    },
    async treelayersStart() {
      const data = await perms_selectLayers();
@@ -700,7 +766,7 @@
}

.tree-container /deep/ .el-tree-node__expand-icon {
  margin-left: 15px;
  margin-left: 1px;
  padding: 0px;
}

@@ -710,7 +776,7 @@

.tree-container /deep/ .el-tree-node {
  position: relative;
  padding-left: 16px;
  padding-left: 10px;
  // text-indent: 16px;
}

@@ -811,6 +877,16 @@
  z-index: 8;
}

.tree-container /deep/ .el-tree-node {
  .is-leaf + .el-checkbox .el-checkbox__inner {
    display: inline-block;
  }

  .el-checkbox .el-checkbox__inner {
    display: none;
  }
}

.tree-container
  /deep/
  .el-tree-node
@@ -838,6 +914,7 @@
    }
  }
}

/*.lalala {*/
/*position: relative;*/
/*}*/