图层管理临时图层，sdk包更新

surprise

2023-10-17 25ad6779e118f2f01e9cda45c67f7b27d55a984a

 src/views/layer/layerManage.vue

@@ -1,40 +1,20 @@
<template>
  <div
    v-drag
    class="layerBox"
  >
  <div v-drag class="layerBox">
    <div class="layerTitle">
      <div class="tileLeft">
        <div
          @click="setCloseLayer"
          class="titleImg"
        >
        <div @click="setCloseLayer" class="titleImg">
          <ArrowLeft />
        </div>
        <div class="titleLable">图层管理</div>
      </div>
      <div
        class="titleImg set"
        @click="layerSetBox"
      >
      <div class="titleImg set" @click="layerSetBox">
        <Setting />
      </div>
    </div>
    <div class="layerContent">
      <el-tree
        node-key="id"
        :props="props"
        :highlight-current="false"
        :current-node-key="selectedNodeId"
        :data="treeData"
        :default-expanded-keys="defaultExpanded"
        :expand-on-click-node="false"
        show-checkbox
        @check="handleCheckChange"
        ref="estreeRef"
        v-if="treeData.length"
        :default-checked-keys="DefaultId"
      >
      <el-tree node-key="id" :props="props" :highlight-current="false" :current-node-key="selectedNodeId" :data="treeData"
        :default-expanded-keys="defaultExpanded" :expand-on-click-node="false" show-checkbox @check="handleCheckChange"
        ref="estreeRef" v-if="treeData.length" :default-checked-keys="DefaultId">
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span class="label">{{ node.label }}</span>
@@ -44,10 +24,7 @@
                Delete
              </a>
            </span> -->
            <span
              class="button"
              v-if="!data.isTemporaryLayer"
            >
            <span class="button" v-if="!data.isTemporaryLayer">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  <el-icon class="el-icon--right">
@@ -56,27 +33,17 @@
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      v-if="data.type != 6 && data.isLayer ==1"
                      @click.native="clickdropdown(1, data)"
                    >详细</el-dropdown-item>
                    <el-dropdown-item v-if="data.type == 6 && data.isLayer ==1">删除</el-dropdown-item>
                    <el-dropdown-item
                      v-if="data.type == 3  && data.isLayer ==1"
                      @click.native="clickdropdown(2, data)"
                    >属性</el-dropdown-item>
                    <el-dropdown-item
                      v-if="data.isLayer ==0"
                      @click.native="clickdropdown(3, data)"
                    >透明度</el-dropdown-item>
                    <el-dropdown-item
                      v-if="data.shpType =='temporaryLayer'"
                      @click.native="clickdTemporary(1, data)"
                    >编辑</el-dropdown-item>
                    <el-dropdown-item
                      v-if="data.shpType =='temporaryLayer'"
                      @click.native="clickdTemporary(2, data)"
                    >删除</el-dropdown-item>
                    <el-dropdown-item v-if="data.type != 6 && data.isLayer == 1"
                      @click.native="clickdropdown(1, data)">详细</el-dropdown-item>
                    <el-dropdown-item v-if="data.type == 6 && data.isLayer == 1">删除</el-dropdown-item>
                    <el-dropdown-item v-if="data.type == 3 && data.isLayer == 1"
                      @click.native="clickdropdown(2, data)">属性</el-dropdown-item>
                    <el-dropdown-item v-if="data.isLayer == 0"
                      @click.native="clickdropdown(3, data)">透明度</el-dropdown-item>
                    <el-dropdown-item v-if="data.shpType == 'temporaryLayer'"
                      @click.native="clickdTemporary(1, data)">编辑</el-dropdown-item>
                    <el-dropdown-item v-if="data.shpType == 'temporaryLayer'"
                      @click.native="clickdTemporary(2, data)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
@@ -86,23 +53,10 @@
      </el-tree>
    </div>
  </div>
  <layer-set
    v-if="layerSetIsshow"
    @SETstate="SETstate"
    :layerTree="treeData"
    @addlayer="addlayer"
    @delLayer="delLayer"
  ></layer-set>
  <attribute-list
    v-if="layerAttributeIsshow"
    :layerData="layerObjData"
    @spatialClose="setSpatialClose"
  ></attribute-list>
  <layer-detail
    :layerData="layerObjData"
    v-if="layerDetailIsshow"
    @detailClose="detailClose"
  ></layer-detail>
  <layer-set v-if="layerSetIsshow" @SETstate="SETstate" :layerTree="treeData" @addlayer="addlayer"
    @delLayer="delLayer"></layer-set>
  <attribute-list v-if="layerAttributeIsshow" :layerData="layerObjData" @spatialClose="setSpatialClose"></attribute-list>
  <layer-detail :layerData="layerObjData" v-if="layerDetailIsshow" @detailClose="detailClose"></layer-detail>
</template>

<script lang="ts" setup>
@@ -159,6 +113,7 @@
  store.state.setLayerManager = false;
  emits("setCloseLayer", false);
};
const temporary = ref(new Date().getTime());
const clickdTemporary = (res, data) => {
  if (res == 1) {
    if (store.state.editTemporaryId) {
@@ -174,22 +129,24 @@
    sgworld.Creator.SimpleGraphic.edit(true, { editProp: false });
  } else if (res == 2) {
    temporaryTool.removeTemporaryLayer(data);

    var checkedKeys = estreeRef.value.getCheckedKeys();
    if (checkedKeys.indexOf(data.id) > -1) {
      var index_id = checkedKeys.indexOf(data.id);
      var std = checkedKeys.slice(index_id, 1);

      estreeRef.value.setCheckedKeys(std, true);
    var keys = estreeRef.value.getCheckedKeys();
    const checkedKeys = [];
    for (var i in keys) {
      checkedKeys.push(keys[i])
    }
    var val = treeData.value[0].children;

    for (var i = 0; i < val.length; i++) {
      if (val[i].id == data.id) {
        val.splice(i, 1);
        treeData.value = [...treeData.value];
      }
    }
    if (checkedKeys.indexOf(data.id) > -1) {
      checkedKeys.splice(checkedKeys.indexOf(data.id), 1)
    }
    if (checkedKeys.indexOf(temporary.value) > -1) {
      checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1)
    }
    estreeRef.value.setCheckedKeys(checkedKeys, true);
  }
};
//选择图层
@@ -198,32 +155,30 @@
  layerDetailIsshow.value = false;

  let isCheck = checked.checkedKeys.indexOf(data.id) > -1;
  if (isCheck) {
    let son = estreeRef.value.getCheckedNodes().reverse();
    var setGeoWms = [];
    var url = null;
    for (var i in son) {
      var layerArr = son[i];
      layerArr.checked = true;
      if (layerArr.category == 2 && layerArr.type == 3) {

  let son = estreeRef.value.getCheckedNodes().reverse();
  server.delLayerAll();
        if (layerArr.tab != "moon:geo_mappable_unit") {

  var setGeoWms = [];
  var url = null;
  for (var i in son) {
    var layerArr = son[i];
    layerArr.checked = true;
    if (layerArr.category == 2 && layerArr.type == 3) {
      if (layerArr.tab != "moon:geo_mappable_unit") {
        setGeoWms.push(layerArr.tab);

        url = layerArr.url;
          server.addTreeData(layerArr)
        }
      } else {
        server.addTreeData(layerArr);
      }
    } else {
      server.addTreeData(layerArr);
    }
  }
  if (setGeoWms.length > 0) {
    server.addGeoServerMmsLayers(setGeoWms.reverse(), url);
  }
  store.commit("SET_CHECKLAYER", son);
  // setVisiable(data, isCheck);

  //
    store.commit("SET_CHECKLAYER", son);
  } else {

    server.delLayer(data.id)
  }

};
const setVisiable = (treeNode, checked) => {
  if (checked !== undefined) {
@@ -257,21 +212,48 @@
const clickdropdown = (res, e) => {
  layerAttributeIsshow.value = false;
  layerDetailIsshow.value = false;
  layerObjData.value = e;
  nextTick(() => {
    layerObjData.value = e;
    store.state.spatialTitle = e.cnName;
    if (res == 2) {
      layerAttributeIsshow.value = true;
      store.state.tab = e;
    } else if (res == 3) {
      let son = estreeRef.value.getCheckedNodes()
      var layerId = getCheckedLayerID(e, son);
      if (layerId.length <= 0) {
        return ElMessage.error("请先勾选图层");
      }

  store.state.spatialTitle = e.cnName;
  if (res == 2) {
    layerAttributeIsshow.value = true;
    store.state.tab = e;
  } else if (res == 3) {
  } else {
    var val = estreeRef.value!.getCheckedKeys(false);
    if (val.indexOf(e.id) > -1) {
      layerDetailIsshow.value = true;
      // layerDetailIsshow.value = true;
      // store.state.tab = e;

    } else {
      return ElMessage.error("请先勾选图层");
      var val = estreeRef.value!.getCheckedKeys(false);
      if (val.indexOf(e.id) > -1) {
        layerDetailIsshow.value = true;
      } else {
        return ElMessage.error("请先勾选图层");
      }
    }
  })

};
const getCheckedLayerID = (res, result) => {
  var temp = [];
  let forFn = (data) => {
    data.children.forEach(item => {
      if (item.children) {
        forFn(item)
      } else {
        if (result.indexOf(item.id) > -1) {
          temp.push(item.id)
        }
      }
    })
  }
  forFn(res);
  return temp;
};
const setSpatialClose = (res) => {
  layerAttributeIsshow.value = res;
@@ -323,7 +305,7 @@
};
const setRestLayerData = () => {
  let son = estreeRef.value.getCheckedNodes().reverse();
  server.delLayerAll();
  // server.delLayerAll();

  var setGeoWms = [];
  var url = null;
@@ -332,21 +314,22 @@
    layerArr.checked = true;
    if (layerArr.category == 2 && layerArr.type == 3) {
      if (layerArr.tab != "moon:geo_mappable_unit") {
        setGeoWms.push(layerArr.tab);
        url = layerArr.url;
        // setGeoWms.push(layerArr.tab);
        // url = layerArr.url;
        server.addTreeData(layerArr);
      }
    } else {
      server.addTreeData(layerArr);
    }
  }
  if (setGeoWms.length > 0) {
    server.addGeoServerMmsLayers(setGeoWms, url);
  }
  // if (setGeoWms.length > 0) {
  //   server.addGeoServerMmsLayers(setGeoWms, url);
  // }
  store.commit("SET_CHECKLAYER", son);
};
const getLayer = async () => {
  store.state.restLayer = false;
  server.delLayerAll();
  // server.delLayerAll();
  const dt = await perms_selectLayers();
  if (dt.code == 200) {
    treeData.value = setTreeData(dt.result).sort(function (a, b) {
@@ -359,7 +342,7 @@
      pid: 0,
      isLayer: 0,
      type: 6,
      id: new Date().getTime(),
      id: temporary.value,
      isTemporaryLayer: true,
      children: [],
    });
@@ -386,27 +369,28 @@
    //添加默认选中图层
    layerListData.value = dt.result;
    defaultLayer(dt.result);
    var setGeoWms = [];
    var url = null;
    // var setGeoWms = [];
    // var url = null;

    for (var i in adLayer) {
      var layer = adLayer[i];
      if (layer.category == 2 && layer.type == 3) {
        if (layer.tab != "moon:geo_mappable_unit") {
          setGeoWms.push(layer.tab);
          url = layer.url;
        }
      } else {
        server.addTreeData(layer);
      }
    }
    if (setGeoWms.length > 0) {
      server.addGeoServerMmsLayers(setGeoWms, url);
    }
    // for (var i in adLayer) {
    //   var layer = adLayer[i];
    //   if (layer.category == 2 && layer.type == 3) {
    //     if (layer.tab != "moon:geo_mappable_unit") {
    //       // setGeoWms.push(layer.tab);
    //       // url = layer.url;
    //       server.addTreeData(layer);
    //     }
    //   } else {
    //     server.addTreeData(layer);
    //   }
    // }
    // if (setGeoWms.length > 0) {
    //   server.addGeoServerMmsLayers(setGeoWms, url);
    // }
    //;
    nextTick(() => {
      let son = estreeRef.value.getCheckedNodes();

      setRestLayerData()
      store.commit("SET_CHECKLAYER", son);
    });
  }
@@ -434,8 +418,12 @@
  store.state.temporaryLayer = null;
  treeData.value[0].children.push(res);
  var id = res.id;

  nextTick(() => {
    var checkedKeys = estreeRef.value.getCheckedKeys();
    if (checkedKeys.indexOf(temporary.value) > -1) {
      checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1)
    }
    checkedKeys.push(id);
    estreeRef.value.setCheckedKeys(checkedKeys, true);
    temporaryTool.addTemporaryTool(res);
@@ -513,6 +501,7 @@
  background: rgba(7, 8, 14, 0.8);
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  z-index: 40;

  .layerTitle {
    width: calc(100% - 27px);
    height: 42px;
@@ -524,6 +513,7 @@
    padding-left: 7px;
    padding-right: 20px;
    color: white;

    .tileLeft {
      height: 100%;
      display: flex;
@@ -536,6 +526,7 @@
        color: #ffffff;
      }
    }

    .titleImg {
      width: 20px;
      height: 100%;
@@ -543,31 +534,38 @@
      align-items: center;
      color: rgba(104, 156, 255, 1);
    }

    .set {
      cursor: pointer;
    }
  }

  .layerContent {
    height: 625px;
    padding: 0 8px;
    overflow: auto;
    overflow-y: auto;
  }

  .layerContent::-webkit-scrollbar {
    width: 8px;
  }

  .layerContent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  .layerContent::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
  }

  .el-tree {
    width: 100%;
    overflow-y: auto;
  }

  .layerContent .el-tree-node__content {
    overflow: hidden;
  }
@@ -594,6 +592,7 @@
    flex-shrink: 0;
  }
}

.dropdown_box {
  position: relative;
}
@@ -601,9 +600,11 @@
/deep/.el-select-dropdown__item {
  font-size: 12px !important;
}

.el-tree {
  background: transparent;
}

/deep/ .el-tree-node {
  background: #0d131d;
  color: #ffffff;
@@ -612,29 +613,33 @@
  margin-top: 3px;
  padding: 8px;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {

/deep/ .el-tree-node:focus>.el-tree-node__content {
  background: transparent;
}

/deep/ .el-tree-node__content:hover {
  background: #0d131d;
}

/deep/ .el-tree-node__children {
  background: #1e2a3d;

  .el-tree-node {
    background: #1e2a3d;
    margin-top: 0;
    padding: 4px;
  }
}
/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {

/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: rgba(104, 156, 255, 0.5) !important;
}

.highlight {
  background: rgba(104, 156, 255, 0.5) !important;
}

// .custom-tree-node {
//   flex: 1;
//   display: flex;
@@ -649,10 +654,12 @@
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  color: #fff;
  border: 0;

  /deep/ .el-dropdown-menu__item {
    color: #fff;
  }
}

/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
  background-color: rgba(104, 156, 255, 0.5);

@@ -663,6 +670,7 @@
.el-popper.is-light {
  border: 1px solid rgba(7, 8, 14, 0.8) !important;
}

.el-scrollbar {
  border: 0 !important;
}