临时图层管理，在线制图

surprise

2023-10-18 4867ac0db2e48fac8e595ad78836cb2e92e3ca79

临时图层管理，在线制图

 src/api/api.js

@@ -104,5 +104,21 @@
export function publish_updateSjLayerStretch(params) {
  return request.post("/publish/updateSjLayerStretch", params);
}
//标会=>分页查询并返回记录数
export function mark_selectByPageAndCount(params) {
  return request.get("/mark/selectByPageAndCount", { params: params });
}
//标绘=>插入一条
export function mark_insert(params) {
  return request.post("/mark/insert", params);
}
//标会=>分删除多条
export function mark_deletes(params) {
  return request.get("/mark/deletes", { params: params });
}

//标会=>更新一条
export function mark_update(params) {
  return request.post("/mark/update", params)
}


 src/assets/js/Map/index.js

@@ -89,7 +89,7 @@
        }

      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
  },
  setEditTemporaryLayer(res) {
    // store.state.editTemporaryId = res;

 src/assets/js/Map/temporaryTools.js

@@ -5,7 +5,7 @@
    removeTemporaryLayer(res) {
        var entities = window.Viewer.entities._entities._array;
        for (var i in entities) {
            if (entities[i].id == res.id && entities[i].shpType == res.shpType) {
            if (entities[i].id == res.id && entities[i]._shpType == res.shpType) {
                window.Viewer.entities.remove(entities[i])
            }
        }
@@ -130,7 +130,7 @@
                    res.far
                ),
                outline: true,
                outlineWidth:res.width,
                outlineWidth: res.width,
                outlineColor: Cesium.Color.fromCssColorString(
                    res.outlineColor
                ).withAlpha(res.outlineAlpha),
@@ -260,7 +260,6 @@
            var coord = this.setCartesianToEightFour(val[i])
            geom.push(coord.lng, coord.lat)
        }
        debugger
        return {
            id: this.isedit ? res.id : (new Date()).getTime(),
            cnName: res.name,

 src/views/export/exportMap.vue

@@ -1,8 +1,5 @@
<template>
  <div
    class="expiort"
    v-drag="true"
  >
  <div class="expiort" v-drag="true">
    <div class="leftMenu">
      <div class="menuTitle">地图设计</div>
      <div class="menmuContent">
@@ -20,12 +17,7 @@
          <p>制作日期</p>
          <div class="contentInput">
            <!-- <el-input v-model="exportFrom.date"></el-input> -->
            <el-date-picker
              v-model="exportFrom.date"
              style="width: 100%;"
              type="date"
              :clearable="false"
            />
            <el-date-picker v-model="exportFrom.date" style="width: 100%;" type="date" :clearable="false" />
          </div>

        </div>
@@ -36,36 +28,19 @@
        <div class="contentBox">
          <p>导出格式</p>
          <div class="contentInput">
            <el-select
              style="width: 100%;"
              v-model="exportFrom.type"
            >
              <el-option
                label=".PNG"
                value="png"
              ></el-option>
            <el-select style="width: 100%;" v-model="exportFrom.type">
              <el-option label=".PNG" value="png"></el-option>
            </el-select>
          </div>
          <p>纸张设置</p>
          <div class="contentInput">
            <el-select
              style="width: 100%;"
              v-model="exportFrom.pageSize"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            <el-select style="width: 100%;" v-model="exportFrom.pageSize">
              <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </div>
          <p>旋转角度</p>
          <div class="contentInput">
            <el-input
              v-model="exportFrom.role"
              placeholder="请输入旋转角度(0-360)"
            ></el-input>
            <el-input v-model="exportFrom.role" placeholder="请输入旋转角度(0-360)"></el-input>
          </div>
        </div>

@@ -73,50 +48,22 @@
          <div class="contentImg"></div>
          图层列表
        </div>
        <div
          class="contentBox spatialTable"
          style="height: 15vh; overflow: auto;"
        >
          <el-table
            ref="singleTableRef"
            :data="tableData"
            highlight-current-row
            style="width: 100%"
            height="calc(100% - 1px)"
          >
            <el-table-column
              type="index"
              label="序号"
              width="100"
            />
            <el-table-column
              property="cnName"
              label="图层名称"
            />
        <div class="contentBox spatialTable" style="height: 15vh; overflow: auto;">
          <el-table ref="singleTableRef" :data="tableData" highlight-current-row style="width: 100%"
            height="calc(100% - 1px)">
            <el-table-column type="index" label="序号" width="100" />
            <el-table-column property="cnName" label="图层名称" />
          </el-table>
        </div>
      </div>

      <div class="menuButton">
        <el-button
          size="small"
          type="primary"
          @click.stop="setInsertExporLayer"
        >确认</el-button>
        <el-button
          size="small"
          type="primary"
          class="delbtn"
          @click="editExport"
        >取消</el-button>
        <el-button size="small" type="primary" @click.stop="setInsertExporLayer">确认</el-button>
        <el-button size="small" type="primary" class="delbtn" @click="editExport">取消</el-button>
      </div>
    </div>
    <div class="rightMap">
      <el-image
        style="width: 100%; height: 100%;"
        :src="url"
        fit="fill"
      />
      <el-image style="width: 100%; height: 100%;" :src="url" fit="fill" />
    </div>
  </div>
</template>
@@ -179,7 +126,17 @@
  const myCanvas = window.Viewer.scene.canvas;
  var res = canvas2image.convertToImage(myCanvas, "869", "783", "png");
  url.value = res.src;
  tableData.value = store.state.chekNowLayers;
  // 


  var layers = store.state.chekNowLayers
  var tabLayer = layers.filter((rs) => {
    console.log(rs)
    if (!rs.shpType && rs.isLayer == 1) {
      return rs
    }
  })
  tableData.value = tabLayer.reverse();
  var val = menuTool.exportSquare;
  exportFrom.value.xmin = val[0];
  exportFrom.value.ymin = val[1];
@@ -192,14 +149,20 @@
  store.state.loading = true;
  var token = "?token=" + getToken();
  var res = [];
  var ids = [];
  for (var i in tableData.value) {
    if (tableData.value[i].tab) {
      res.push(tableData.value[i].tab.replace("moon:", ""));
     
    }
    if (!tableData.value[i].shpType) {
        ids.push(tableData.value[i].id);
      }
  }

  res.push("moon");
  var obj = {
    layerIds: ids,
    token: token.replace("?token=", ""),
    title: exportFrom.value.name,
    pageSize: exportFrom.value.pageSize,
@@ -219,7 +182,7 @@
    data: JSON.stringify(obj),
    contentType: "application/json",
    dataType: "json",
    error: function () {},
    error: function () { },
    success: (rs) => {
      store.state.loading = false;
      var value = "code = " + rs.code + ", result = " + rs.result;
@@ -257,6 +220,7 @@
  z-index: 10;
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
}

.leftMenu {
  width: 358px;
  height: 100%;
@@ -264,12 +228,14 @@
  display: flex;
  flex-direction: column;
}

.rightMap {
  height: calc(100% - 20px);
  width: 849px;
  border-right: 1px solid #d6e4ff;
  padding: 10px;
}

.menmuContent {
  flex: 1;
  width: 100%;
@@ -288,12 +254,14 @@
    background: #0e151f;
    margin: 2px 0px;
  }

  .contentBox {
    margin: 5px 7px;
    width: calc(100% - 76px);

    background: #1e2a3d;
    padding: 14px 23px 5px 39px;

    p {
      font-size: 12px;
      font-family: Source Han Sans CN;
@@ -302,6 +270,7 @@
      line-height: 9px;
      margin-bottom: 10px;
    }

    .contentInput {
      margin-bottom: 10px;
    }
@@ -318,6 +287,7 @@
    font-family: Source Han Sans CN;
  }
}

.menuButton {
  padding: 10px;
  display: flex;
@@ -333,14 +303,17 @@
    font-weight: 400;
    color: #ffffff;
  }

  .el-button:hover {
    border: 1px solid #689cff;
  }

  .delbtn {
    background: rgba(245, 108, 108, 0.2);
    border: 1px solid #5a0914;
  }
}

.spatialTable {
  margin-top: 10px;
  width: 100%;
@@ -351,46 +324,56 @@
    background-color: rgba(38, 47, 71, 1) !important;
    color: #d6e4ff;
  }

  // 修改每行样式：
  .el-table /deep/ .el-table__row {
    background-color: rgba(38, 47, 71, 1) !important;
    color: #d6e4ff;
  }
  .el-table /deep/ .el-table__body tr.current-row > td {

  .el-table /deep/ .el-table__body tr.current-row>td {
    background-color: rgba(38, 47, 71, 1) !important;
  }
  .el-table /deep/ .el-table__body tr:hover > td {

  .el-table /deep/ .el-table__body tr:hover>td {
    background-color: rgba(38, 47, 71, 1) !important;
  }

  // 修改表格每行边框的样式：
  .el-table /deep/ td,
  .el-table /deep/ th.is-leaf {
    // border-bottom: 1px solid #409eff;
    // border-right: 1px solid #409eff;
  }

  .el-table /deep/ .el-table__cell {
    padding: 8px 0;
  }

  // 设置表格每行的高度：
  .el-table /deep/ .el-table__header tr,
  .el-table /deep/ .el-table__header th {
    height: 50px;
  }

  .el-table__body tr,
  .el-table__body td {
    height: 50px;
    padding: 0;
  }

  // 设置表格边框颜色：

  .el-table--border::after,
  .el-table--group::after {
    width: 0;
  }

  .el-table::before {
    height: 0;
  }
}

.menuTitle {
  width: calc(100% - 30px);

@@ -402,13 +385,16 @@
  padding: 10px;
  padding-left: 28px;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Change the scrollbar background color here */
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}

/* Change the scrollbar button color and roundedness here */
::-webkit-scrollbar-thumb {
  background-color: rgba(104, 156, 255, 0.2);

 src/views/layer/layerManage.vue

@@ -74,10 +74,11 @@
import attributeList from "./attributeList";
import layerDetail from "./layerDetail";
import { useStore } from "vuex"; // 引入useStore 方法
import { perms_selectLayers } from "@/api/api";
import { perms_selectLayers, mark_selectByPageAndCount, mark_insert, mark_deletes, mark_update } from "@/api/api";
import server from "@/assets/js/Map/server";
import { ElMessage } from "element-plus";
import temporaryTool from "@/assets/js/Map/temporaryTools";
import json from "@/assets/js/colorValue";
const store = useStore(); // 该方法用于返回store 实例
const stretchValue = ref("");
const emits = defineEmits(["setCloseLayer"]);
@@ -114,7 +115,7 @@
  emits("setCloseLayer", false);
};
const temporary = ref(new Date().getTime());
const clickdTemporary = (res, data) => {
const clickdTemporary = async (res, data) => {
  if (res == 1) {
    if (store.state.editTemporaryId) {
      var id = store.state.editTemporaryId;
@@ -128,6 +129,10 @@
    sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(data.id);
    sgworld.Creator.SimpleGraphic.edit(true, { editProp: false });
  } else if (res == 2) {
    var layerId = []
    layerId.push(data.sid)
    const data1 = await mark_deletes({ ids: layerId.toString() })
    if (data1.code != 200) return
    temporaryTool.removeTemporaryLayer(data);
    var keys = estreeRef.value.getCheckedKeys();
    const checkedKeys = [];
@@ -153,32 +158,84 @@
const handleCheckChange = (data, checked) => {
  layerAttributeIsshow.value = false;
  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) {

        if (layerArr.tab != "moon:geo_mappable_unit") {

          server.addTreeData(layerArr)
        }
      if (layerArr.shpType && layerArr.shpType == 'temporaryLayer') {//临时图层添加
        temporaryTool.addTemporaryTool(layerArr);
      } else {
        server.addTreeData(layerArr);
      }
    }

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

    server.delLayer(data.id)
    if (data.isLayer == 0) {
      var layers = data.children;
      for (var i in layers) {
        if (layers[i].shpType && layers[i].shpType == 'temporaryLayer') {//临时图层添加
          temporaryTool.removeTemporaryLayer(layers[i]);
        } else {
          server.delLayer(layers[i].id)
        }
      }
    } else {
      if (data.shpType && data.shpType == 'temporaryLayer') {//临时图层添加
        temporaryTool.removeTemporaryLayer(data);
      } else {
        server.delLayer(data.id)
      }
    }

  }




  //判断是否为父级
  // if (data.isLayer == 0) {//为父级

  //   let son = estreeRef.value.getCheckedNodes().reverse();
  //   for(var i in )




  // } else {//为子级

  // }


  //
  // if (data.shpType && data.shpType == 'temporaryLayer') {
  //   if (isCheck) {
  //     temporaryTool.addTemporaryTool(data);
  //   } else if(!isCheck) {
  //     temporaryTool.removeTemporaryLayer(data); 
  //   }
  // } else {
  //   if (isCheck) {
  //     let son = estreeRef.value.getCheckedNodes().reverse();
  //     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") {

  //           server.addTreeData(layerArr)
  //         }
  //       } else {
  //         server.addTreeData(layerArr);
  //       }
  //     }
  //     store.commit("SET_CHECKLAYER", son);
  //   } else {
  //     
  //   }
  // }
};
const setVisiable = (treeNode, checked) => {
  if (checked !== undefined) {
@@ -224,10 +281,6 @@
      if (layerId.length <= 0) {
        return ElMessage.error("请先勾选图层");
      }

      // layerDetailIsshow.value = true;
      // store.state.tab = e;

    } else {
      var val = estreeRef.value!.getCheckedKeys(false);
      if (val.indexOf(e.id) > -1) {
@@ -305,10 +358,6 @@
};
const setRestLayerData = () => {
  let son = estreeRef.value.getCheckedNodes().reverse();
  // server.delLayerAll();

  var setGeoWms = [];
  var url = null;
  for (var i in son) {
    var layerArr = son[i];
    layerArr.checked = true;
@@ -335,7 +384,19 @@
    treeData.value = setTreeData(dt.result).sort(function (a, b) {
      return a.orderNum - b.orderNum;
    });

    const comperLayer = await mark_selectByPageAndCount({
      pageIndex: 1,
      pageSize: 100000,
      name: null,
    })
    var children = [];
    if (comperLayer.code == 200 && comperLayer.result) {
      for (var i in comperLayer.result) {
        var slayer = JSON.parse(comperLayer.result[i].wkt);
        slayer.sid = comperLayer.result[i].id;
        children.push(slayer)
      }
    }
    treeData.value.unshift({
      cnName: "临时图层",
      level: 1,
@@ -344,7 +405,7 @@
      type: 6,
      id: temporary.value,
      isTemporaryLayer: true,
      children: [],
      children: children,
    });

    var std = [];
@@ -414,8 +475,16 @@
    return father.pid == 0; // 返回一级菜单
  });
}
const addTemporaryLayer = (res) => {
const addTemporaryLayer = async (res) => {
  var obj = {
    id: res.id,
    name: res.cnName,
    wkt: JSON.stringify(res)
  }
  const data = await mark_insert(obj);
  if (data.code != 200 || !data.result) return
  store.state.temporaryLayer = null;
  res.sid = data.result;
  treeData.value[0].children.push(res);
  var id = res.id;

@@ -437,7 +506,7 @@
  for (var i = 0; i < val.length; i++) {
    if (val[i].id == id) {
      val[i].cnName = res;
      treeData.value = [...treeData.value];
      setEditLayerChange(val[i])
    }
  }
  defaultExpanded.value = [treeData.value[0].id];
@@ -445,13 +514,33 @@
const editTemporaryBackById = (res) => {
  var obj = temporaryTool.getEntityObj(res);
  var val = treeData.value[0].children;
  var checkedKeys = estreeRef.value.getCheckedKeys();
  if (checkedKeys.indexOf(temporary.value) > -1) {
    checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1)
  }
  for (var i = 0; i < val.length; i++) {
    if (val[i].id == res) {
      obj.sid = val[i].sid;
      val[i] = obj;
      treeData.value = [...treeData.value];
      setEditLayerChange(obj)
    }
  }
  nextTick(() => {


    estreeRef.value.setCheckedKeys(checkedKeys, true);

  });
};
const setEditLayerChange = async (res) => {
  var obj = {
    id: res.sid,
    name: res.cnName,
    wkt: JSON.stringify(res)
  }
  const data = await mark_update(obj)
  if (data.code != 200) return
}
watch(
  () => store.state.restLayer,
  (nVal, oVal) => {

 src/views/plotting/attributeInfo.vue

@@ -335,7 +335,6 @@
  var res = entity.value;
  var type = res.GeoType;
  entityType.value = type;
  debugger
  switch (type) {
    case "label":
      showEntity.value.label = true;