分屏对比，等高线，坡度图，坐标定位功能添加

Surpriseplus

2023-07-13 f6dd93cb0d1b0fe17674e948f0daf6ceb792bb55

 src/views/query/SpatialQuery.vue

@@ -13,6 +13,16 @@
        <Close />
      </el-icon>
    </div>
    <div class="spatialContentBox">
      <div class="spatialMenu">
        <ul>
          <li
            v-for="item in menuList"
            @click="setMenuListClick(item)"
            :class="{'isActive':isActive==item.id}"
          >{{ item.name }}</li>
        </ul>
      </div>
    <div class="spatialContent">
      <div>
        <el-row :gutter="20">
@@ -71,6 +81,7 @@
        </div>
      </div>

      </div>
    </div>

    <!-- 高级查询 -->
@@ -168,12 +179,14 @@
const fieldOption = ref([]);
const attributeData = ref([]);
const tableData = ref([]);
const menuList = ref([]);
const formSql = ref({
  field: "",
  type: "",
  value: "",
  cut: "",
});
const isActive = ref(null);
const handleSizeChange = (res) => {
  listData.value.pageSize = res;
  setQueySpatialData();
@@ -182,7 +195,14 @@
  listData.value.pageIndex = res;
  setQueySpatialData();
};

const setMenuListClick = (res) => {
  listData.value.name = res.name;
  isActive.value = res.id;
  listData.value.filter = "";
  listData.value.pageIndex = 1;
  listData.value.pageSize = 10;
  setQueySpatialFields();
};
const setInsertDialog = () => {
  if (!formSql.value.value) {
    return ElMessage.error("请输入要查询的参数");
@@ -290,8 +310,23 @@

//页面初始化
const startQueryData = () => {
  var std = store.state.chekNowLayers;
  if (std.length <= 0) {
    ElMessage.error("请选择要查询的图层");
    setSpatialClose();
    return;
  }
  var str = std.filter((res) => {
    if (res.type == 2) {
      return res;
    }
  });

  menuList.value = str;
  listData.value.wkt = store.state.spatialQueryData.wkt;
  listData.value.name = "lunarplacenane";
  listData.value.name = menuList.value[0].name;
  isActive.value = menuList.value[0].id;

  listData.value.hasGeom = 1;
  //
  setQueySpatialFields();
@@ -303,7 +338,7 @@

<style lang="less" scoped>
.spatialBox {
  width: 800px;
  width: 900px;
  height: 400px;
  display: flex;
  flex-direction: column;
@@ -328,15 +363,46 @@
      font-size: 16px;
    }
  }
  .spatialContentBox {
    height: calc(100% - 40px);
    width: 100%;
    display: flex;
  }
  .spatialMenu {
    width: calc(20% - 20px);
    height: calc(100% - 26px);
    padding: 10px;
    border-right: 1px solid #d6e4ff;
    overflow: auto;
    font-family: Source Han Sans SC;
    ul {
      li {
        color: #d6e4ff;
        font-size: 12px;
        height: 20px;
        border-bottom: 1px solid #409eff;
        box-shadow: inset 0px 5px 20px 5px rgba(38, 47, 71, 1);
        padding: 10px 10px;
        display: flex;
        align-items: center;
      }
      li :hover {
        color: #409eff;
      }
    }
    .isActive {
      color: #409eff;
    }
  }
  .spatialContent {
    height: calc(100% - 10px);
    width: calc(100% - 20px);
    width: calc(80% - 20px);
    padding: 10px;

    .spatialTable {
      margin-top: 10px;
      width: 100%;
      height: calc(100% - 35px);
      height: 100%;
      position: relative;

      .el-table /deep/ .el-table__header-wrapper tr th {
@@ -425,6 +491,31 @@
  /deep/.el-dialog__title {
    color: #d6e4ff !important;
  }
  /* 修改滚动条的宽度为10px，颜色为白色 */
  ::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background: rgba(38, 47, 71, 0);
    border-radius: 10px;
  }

  /* 修改滚动条的轨道和滑块颜色 */
  ::-webkit-scrollbar-track {
    background: rgba(38, 47, 71, 0);
  }

  ::-webkit-scrollbar-thumb {
    background: #d6e4ff;
  }

  /* hover时滚动条轨道和滑块变色 */
  ::-webkit-scrollbar-thumb:hover {
    background: #d6e4ff;
  }

  ::-webkit-scrollbar-track:hover {
    background: rgba(38, 47, 71, 0);
  }
}
</style> 
<style lang="less"  >