添加点击矢量图层详细信息展示功能，修改图层管理加载顺序

Surpriseplus

2023-08-23 1ff13ceb222d4059252201504cd963df26cafec8

添加点击矢量图层详细信息展示功能，修改图层管理加载顺序

 src/api/api.js

@@ -53,3 +53,20 @@
export function res_selectByPageAndCount(params) {
  return request.get("/res/selectByPageAndCount", { params: params });
}

//数据查询=>根据实体名查询表名
export function dataQuery_selectTabByEntity(params) {
  return request.get('/dataQuery/selectTabByEntity', { params: params });
}
//数据管理=>数据检索=>查询字段信息
export function inquiry_selectFields(params) {
  return request.get('/inquiry/selectFields', { params: params });
}
//数据管理=>数据检索=>查询值域信息
export function inquiry_selectDomains(params) {
  return request.get('/inquiry/selectDomains', { params: params });
}
//数据查询=>根据GID查询
export function dataQuery_selectByGid(params) {
  return request.get('/dataQuery/selectByGid', { params: params });
}

 src/assets/js/Map/server.js

@@ -1,7 +1,7 @@
import { getToken } from "@/utils/auth";
//配置文件地址
import config from "./config";

import store from "@/store";
const server = {
  layerList: [],
  addTreeData(treeNode) {
@@ -341,9 +341,16 @@
  //加载GeoServer-WMS服务
  setAddGeoWmsLayer(res) {
    var url = this.getLayrUrl(res);
    var that = this
    var getFeatureInfoFormat = new SmartEarth.Cesium.GetFeatureInfoFormat("html", null, function (html) {
      that.getFeatureInfo(html)
    });
    let layer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      url: url,
      layers: res.tab,
      getFeatureInfoParameters: { info_format: 'text/html' },
      enablePickFeatures: true,
      getFeatureInfoFormats: [getFeatureInfoFormat],
      parameters: {
        transparent: true,
        format: "image/png",
@@ -357,5 +364,33 @@
    let img_layer = window.Viewer.imageryLayers.addImageryProvider(layer);
    this.layerList.push({ id: res.id, layerData: img_layer, type: "wmts" });
  },
  getFeatureInfo(html) {
    store.state.details.showDetails = false;
    var start = html.indexOf("<caption class=\"featureInfo\">") + "<caption class=\"featureInfo\">".length;
    var end = html.indexOf("</caption>");
    var tab = html.substr(start, end - start);
    var std = html.substr(html.indexOf('<th>'), html.lastIndexOf('</th>') - html.indexOf('<th>') + 5).replaceAll(' ', '').replaceAll('\n', '').split('</th>')
    var gindex = null;
    for (var i = 0; i < std.length; i++) {
      if (std[i].indexOf('gid') > -1) {
        gindex = i;
        break;
      }
    }
    if (!gindex) return
    var str = html.substr(html.indexOf('<td>'), html.lastIndexOf('</td>') - html.indexOf('<td>') + 5).replaceAll(' ', '').replaceAll('\n', '').split('</td>')
    var gid = parseInt(str[gindex].replaceAll(
      '<td>', ''
    ))
    if (gid && tab) {

      store.state.details = {
        gid: gid,
        tab: tab,
        showDetails: true
      }
    }

  },
};
export default server;

 src/store/index.ts

@@ -21,6 +21,11 @@
    tab: null,
    doubleMap: false,
    doubleMenu: false,
    details: {
      gid: null,
      tab: null,
      showDetails: false,
    },
  },
  mutations: {
    //获取登录Code

 src/views/Index.vue

@@ -18,9 +18,10 @@
      v-if="layerLocationshow"
      @SETcoordClose="setCoordLocation"
    >

    </coord-location>
    <details-query v-if="store.state.details.showDetails">

    </details-query>
  </div>
</template>

@@ -48,6 +49,8 @@
import CoordLocation from "@/views/query/CoordLocation.vue";
//阴影分析
import mapclock from "@/views/mapClock/index.vue";
//矢量数据信息弹窗
import detailsQuery from "@/views/query/detailsQuery.vue";

import router from "@/router";
import { useStore } from "vuex"; // å¼•å…¥useStore æ–¹æ³•

 src/views/layer/doubleLayer.vue

@@ -43,7 +43,7 @@
                Delete
              </a>
            </span> -->
            <span
            <!-- <span
              class="button"
              v-if="data.isLayer == 1"
            >
@@ -63,7 +63,7 @@
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </span>
            </span> -->
          </span>
        </template>
      </el-tree>

 src/views/layer/layerDetail.vue

@@ -217,6 +217,7 @@
  height: 400px;
  margin-left: 20px;
  margin-top: 40px;
  min-width: 200px;
  z-index: 30;
  position: absolute;
  .title {

 src/views/layer/layerManage.vue

@@ -192,10 +192,12 @@
    layerAttributeIsshow.value = true;
    store.state.tab = e;
  } else {
    if (!e.checked) {
    var val = estreeRef.value!.getCheckedKeys(false);
    if (val.indexOf(e.id) > -1) {
      layerDetailIsshow.value = true;
    } else {
      return ElMessage.error("请先勾选图层");
    }
    layerDetailIsshow.value = true;
  }
};
const setSpatialClose = (res) => {
@@ -251,12 +253,12 @@
  const dt = await perms_selectLayers();
  if (dt.code == 200) {
    treeData.value = setTreeData(dt.result).sort(function (a, b) {
      return a.sort - b.sort;
      return a.orderNum - b.orderNum;
    });
    var std = [];
    var terrainId = null;
    dt.result.filter((res) => {
      if (res.isLayer == 1 && res.status == 1) {
      if (res.isLayer == 1 && res.isShow == 1) {
        if (res.type == 1 && res.data == 2) {
          if (!terrainId) {
            terrainId = res.id;
@@ -288,7 +290,7 @@
    let branchArr = cloneData.filter((child) => father.id == child.pid);
    if (branchArr.length > 0) {
      branchArr.sort(function (a, b) {
        return a.sort - b.sort;
        return a.orderNum - b.orderNum;
      });
    }


 src/views/query/detailsQuery.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,241 @@
<template>
  <div
    v-drag="true"
    class="showDetailsBox"
  >
    <div class="detailsTitles">
      <div>
        å±žæ€§ä¿¡æ¯
      </div>
      <div>
        <el-icon
          @click="setDetailsClose"
          :size="14"
        >
          <Close />
        </el-icon>
      </div>
    </div>
    <div class="detailsContent">
      <ul>
        <li
          v-for="(value,key) in tableData"
          :key="key"
        >
          {{ key }} {{value}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  reactive,
  defineProps,
  defineEmits,
  nextTick,
} from "vue";
import store from "@/store";
import {
  dataQuery_selectTabByEntity,
  inquiry_selectFields,
  inquiry_selectDomains,
  dataQuery_selectByGid,
} from "@/api/api";
import { ElMessage } from "element-plus";
const detailsData = ref({
  gid: null,
  name: null,
});
const tabByEntity = ref();
const fieldData = ref([]);
const domainData = ref([]);
const attributeData = ref([]);
const optionData = ref([]);
const tableData = ref({});
const setDetailsClose = () => {
  store.state.details.showDetails = false;
};
//查询实体类
const getTableByEntity = async () => {
  const res = await dataQuery_selectTabByEntity({
    name: detailsData.value.name,
  });
  if (res.code != 200) {
    ElMessage.error("未查询到实体类");
    return;
  }
  tabByEntity.value = res.result;
  getLayerFileds();
};
//查询字段信息
const getLayerFileds = async () => {
  const data = await inquiry_selectFields({
    name: detailsData.value.name,
  });
  if (data.code != 200) {
    ElMessage.error("未查询到字段信息");
    return;
  }
  fieldData.value = data.result;
  getLayerDomains();
};
const getLayerDomains = async () => {
  const data = await inquiry_selectDomains({ name: detailsData.value.name });
  if (data.code != 200) {
    ElMessage.error("未查询到值域信息");
    return;
  }
  domainData.value = data.result;
  optionData.value = data.result;
  getLayerAttribute();
};
const getLayerAttribute = () => {
  for (var i in fieldData.value) {
    if (fieldData.value[i].showtype == 1) {
      attributeData.value.push(fieldData.value[i]);
    }
  }
  getLayrData();
};
const getLayrData = async () => {
  const data = await dataQuery_selectByGid(detailsData.value);
  if (data.code != 200) {
    ElMessage.error("未查询到属性信息");
    return;
  }
  var valste = data.result;
  valste.dirid = valste.dirName;
  valste.depid = valste.depName;
  valste.verid = valste.verName;
  valste.createuser = valste.createName;
  valste.updateuser = valste.updateName;
  if (valste.createtime) {
    valste.createtime = format(valste.createtime);
  }
  if (valste.updatetime) {
    valste.updatetime = format(valste.updatetime);
  }
  for (var j in optionData.value) {
    if (
      optionData.value[j].domainNa != null &&
      optionData.value[j].domainNa != undefined
    ) {
      valste[optionData.value[j].field] = optionData.value[j].domainNa;
    }
  }
  var arr = {};
  for (var i = attributeData.value.length - 1; i >= 0; i--) {
    var vla = attributeData.value[i];
    if (vla.domainNa) {
      var val = optionData.value.filter((res) => {
        if (res.domName == vla.domainNa && res.domCode == valste[vla.field]) {
          return res;
        }
      });
      var vlue = null;
      if (val.length > 0) {
        vlue = val[0].codeDesc;
      } else {
        vlue = "";
      }
      arr[vla.alias] = vlue;
    } else {
      arr[vla.alias] = valste[vla.field];
    }
  }

  tableData.value = sortObj(arr);
};
const sortObj = (obj) => {
  var arr = [];
  for (var i in obj) {
    arr.push([obj[i], i]);
  }
  arr.reverse();
  var len = arr.length;
  var obj = {};
  for (var i = 0; i < len; i++) {
    obj[arr[i][1]] = arr[i][0];
  }
  return obj;
};

//格式化时间
const format = (shijianchuo) => {
  //shijianchuo是整数，否则要parseInt转换
  var time = new Date(shijianchuo);
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  var h = time.getHours();
  var mm = time.getMinutes();
  var s = time.getSeconds();
  return y + "-" + add0(m) + "-" + add0(d) + " " + h + ":" + mm + ":" + s;
};
//格式化时间
const add0 = (m) => {
  return m < 10 ? "0" + m : m;
};
onMounted(() => {
  detailsData.value.gid = store.state.details.gid;
  detailsData.value.name = store.state.details.tab.replaceAll("_", "");

  getTableByEntity();
});
</script>

<style lang="less" scoped>
.showDetailsBox {
  padding: 10px;
  background: rgba(7, 8, 14, 0.8);
  border: 1px solid #d6e4ff;
  z-index: 33;
  box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 250px;
  height: 350px;
  .detailsTitles {
    padding: 5px;
    width: calc(100% - 10px);
    height: 25px;
    color: #d6e4ff;
    font-size: 14px;
    border-bottom: 1px solid #d6e4ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .detailsContent {
    color: #d6e4ff;
    font-size: 12px;
    padding: 5px;
    height: 305px;
    overflow-y: auto;
    width: calc(100% - 10px);
    li {
      color: #d6e4ff;
      font-size: 12px;
      height: 30px;
    }
  }
  ::-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);
    border-radius: 0.5rem;
  }
}
</style>