投影图层管理功能修改

Surpriseplus

2023-08-24 3ddb9448058989b4f3662e38d45fc1d887c337cf

投影图层管理功能修改

 src/api/api.js

@@ -70,3 +70,12 @@
export function dataQuery_selectByGid(params) {
  return request.get('/dataQuery/selectByGid', { params: params });
}

//授权管理=>查询当前用户的投影图层授权
export function perms_selectProjectLayers(params) {
  return request.get('/perms/selectProjectLayers', { params: params });
}





 src/assets/js/Map/projectionServer.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,409 @@
import { getToken } from "@/utils/auth";
//配置文件地址
import config from "./config";
import store from "@/store";
const projection = {
  layerList: [],
  addTreeData(treeNode) {
    this.delLayerAll();
    //判断是否为代理
    if (treeNode.proxy) {
      this.addProxyAddress(treeNode); //有代理
    } else {
      this.addUrlAddress(treeNode); //无代理
    }
  },
  //代理地址
  addProxyAddress(res) {
    //判断数据类型
    switch (res.data) {
      case 1: //数字正射影像图
        this.setDataType(res);
        break;
      case 2: //场景地形数据
        this.setTerrainData(res);
        break;
      case 3: //数字高程模型（晕渲图）
        this.setDataType(res);
        break;
      case 4: //单波段栅格数据
        this.setDataType(res);
        break;
      case 5: //多光谱栅格数据
        this.setDataType(res);
        break;
      case 6: //高光谱栅格数据
        this.setDataType(res);
        break;
      case 7: //矢量图层
        this.setVectorData(res);
        break;
      case 8: //三维模型
        this.setModelData(res);
        break;
    }
  },
  //普通地址
  addUrlAddress(res) {
    switch (res.category) {
      case 0: //其他
        break;
      case 1: //GisServer
        this.addProxyAddress(res);
        break;
      case 2: //GeoServer
        this.addGeoServerAddress(res);
        break;
      case 3: //数简
        this.addProxyAddress(res);
        break;
    }
  },
  //Geoserver服务
  addGeoServerAddress(res) {
    //判断数据类型
    switch (res.data) {
      case 1: //数字正射影像图
        this.setGeoDataType(res);
        break;
      case 2: //场景地形数据
        this.setTerrainData(res);
        break;
      case 3: //数字高程模型（晕渲图）
        this.setGeoDataType(res);
        break;
      case 4: //单波段栅格数据
        this.setGeoDataType(res);
        break;
      case 5: //多光谱栅格数据
        this.setGeoDataType(res);
        break;
      case 6: //高光谱栅格数据
        this.setGeoDataType(res);
        break;
      case 7: //矢量图层
        this.setGeoVectorData(res);
        break;
      case 8: //三维模型
        this.setModelData(res);
        break;
    }
  },
  setGeoDataType(res) {
    switch (res.type) {
      case 0: //URL
        break;
      case 1: //TMS
        this.setAddTmsLayer(res);
        break;
      case 2: //WMTS
        this.setAddWmtsLayer(res);
        break;
      case 3: //WMS
        this.setAddGeoWmsLayer(res);
        break;
    }
  },
  setGeoVectorData(res) {
    switch (res.type) {
      case 0: //URL
        break;
      case 3: //WMS
        this.setAddGeoWmsLayer(res);
        break;
      case 4: //WFS
        break;
    }
  },
  setDataType(res) {
    switch (res.type) {
      case 0: //URL
        break;
      case 1: //TMS
        this.setAddTmsLayer(res);
        break;
      case 2: //WMTS
        this.setAddWmtsLayer(res);
        break;
      case 3: //WMS
        this.setAddWmsLayer(res);
        break;
    }
  },

  setTerrainData(res) {
    switch (res.type) {
      case 0: //URL
        this.setAddTearrinLayer(res);
        break;
      case 1: //TMS
        this.setAddTearrinLayer(res);
        break;
    }
  },
  setVectorData(res) {
    switch (res.type) {
      case 0: //URL
        break;
      case 3: //WMS
        this.setAddWmsLayer(res);
        break;
      case 4: //WFS
        break;
    }
  },
  setModelData(res) {
    switch (res.type) {
      case 0: //Tileset
        this.setAddModelLayer(res);
        break;
      case 3: //WMS
        this.setAddModelLayer(res);
        break;
      case 5: //WFS
        break;
    }
  },
  //获取服务地址
  getLayrUrl(res) {
    var url;
    if (res.proxy) {
      const token = getToken();
      url = config.proxy + res.proxy.replaceAll("{token}", token);
    } else {
      url = res.url;
    }
    return url;
  },
  //加载TMS服务
  setAddTmsLayer(res) {
    var url = this.getLayrUrl(res);
    let img_layer = earthCtrl.Creator.createUrlTemplateImageryProvider(
      "tms服务",
      {
        url: Cesium.buildModuleUrl(url + "/{z}/{x}/{reverseY}.png"),
      },
      "0",
      undefined,
      true,
      ""
    );
    this.layerList.push({ id: res.id, layerData: img_layer, type: "tms" });
  },
  //加载WMTS服务
  setAddWmtsLayer(res) {
    var url = this.getLayrUrl(res);
    var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
      sourceType: "wmts",
      url: url,
      layer: "",
      format: "image/png",
      tileMatrixSetID: "GoogleCRS84Quad01",
      tileMatrixLabels: [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
      ],
      style: "",
      tilingScheme: new Cesium.GeographicTilingScheme({
        ellipsoid: Cesium.Ellipsoid.MOON,
      }),
    });
    this.layerList.push({
      id: res.id,
      layerData: urlTemplateImageryProvider._primitive,
      type: "wmts",
    });
  },
  //加载地形服务
  setAddTearrinLayer(res) {
    this.setChangeTearrinLayer();
    var url = this.getLayrUrl(res);
    window.terrainLayer = new Cesium.CesiumTerrainProvider({
      url: url,
    });
    Viewer.terrainProvider = window.terrainLayer;
    this.layerList.push({ id: res.id, type: "dem" });
  },
  //加载WMS服务
  setAddWmsLayer(res) {
    var url = this.getLayrUrl(res);
    var img_layer = sgworld.Creator.createImageryProvider(
      "giserver",
      "wms",
      {
        url: url,
        layers: "",
        parameters: {
          format: "image/png",
          transparent: true,
        },
      },
      "0",
      undefined,
      true,
      ""
    );
    this.layerList.push({
      id: res.id,
      layerData: img_layer,
      type: "wmts",
    });
  },
  //加载模型服务
  setAddModelLayer(res) {
    var url = this.getLayrUrl(res);
    let tileset = Viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        name: res.cnName,
        url: url,
        skipLevelOfDetail: true, // åœ¨éåŽ†æ—¶å€™è·³è¿‡è¯¦æƒ…：false
        baseScreenSpaceError: 1024,
        maximumScreenSpaceError: 64, // æœ€å¤§å±å¹•ç©ºé—´é”™è¯¯ï¼š16，数值加大能让最终成像变模糊
        skipScreenSpaceErrorFactor: 16,
        skipLevels: 1,
        immediatelyLoadDesiredLevelOfDetail: false,
        loadSiblings: true, // è‡ªåŠ¨ä»Žä¸­å¿ƒå¼€å§‹è¶…清化模型：false
        cullWithChildrenBounds: true, // ä½¿ç”¨å­é¡¹è¾¹ç•Œä½“积的并集来剔除图块：true
        cullRequestsWhileMoving: true,
        cullRequestsWhileMovingMultiplier: 10, // å€¼è¶Šå°èƒ½å¤Ÿæ›´å¿«çš„剔除：60
        preloadWhenHidden: true,
        preferLeaves: true, // é¢„装子节点：false
        maximumMemoryUsage: 768, // å†…存分配变小有利于内存回收，提升性能体验
        progressiveResolutionHeightFraction: 0.5, // æ•°å€¼åäºŽ0能够让初始加载变得模糊
        dynamicScreenSpaceErrorDensity: 0.5, // æ•°å€¼åŠ å¤§ï¼Œèƒ½è®©å‘¨è¾¹åŠ è½½å˜å¿«
        dynamicScreenSpaceErrorFactor: 2, // åŠ¨æ€å±å¹•ç©ºé—´è¯¯å·®çš„系数
        dynamicScreenSpaceError: true, // å‡å°‘离相机较远的屏幕空间错误：false，全屏加载完之后才清晰化房屋
      })
    );
    tileset.readyPromise.then((tileset) => {
      tileset.id = res.id;
    });
    this.layerList.push({ id: res.id, layerData: tileset, type: "tileset" });
  },
  //地形移除事件
  setChangeTearrinLayer() {
    this.layerList.forEach((e, i) => {
      switch (e.type) {
        case "dem":
          window.Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(
            {}
          );
          this.layerList.splice(i, 1);
          break;
      }
    });
  },

  //清除图层
  delLayer(code) {
    this.layerList.forEach((e, i) => {
      if (e.id === code) {
        switch (e.type) {
          case "wmts":
            window.Viewer.imageryLayers.remove(e.layerData);
            break;
          case "tms":
            window.Viewer.imageryLayers.remove(e.layerData);
            break;
          case "dem":
            window.Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(
              {}
            );
            break;
          case "tileset":
            window.Viewer.scene.primitives.remove(e.layerData)
            break;
        }
        this.layerList.splice(i, 1);
      }
    });
  },

  delLayerAll() {
    this.layerList.forEach((e, i) => {
      switch (e.type) {
        case "wmts":
          window.Viewer.imageryLayers.remove(e.layerData);
          break;
        case "tms":
          window.Viewer.imageryLayers.remove(e.layerData);
          break;
        case "dem":
          window.Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(
            {}
          );
          break;
        case "tileset":
          window.Viewer.scene.primitives.remove(e.layerData)
          break;
      }
      this.layerList.splice(i, 1);
    });
    this.layerList = [];
  },
  //加载GeoServer-WMS服务
  setAddGeoWmsLayer(res) {
    var url = this.getLayrUrl(res);
    let layer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      url: url,
      layers: res.tab,
      parameters: {
        transparent: true,
        format: "image/png",
        srs: "EPSG:104903",
        styles: "",
      },
      tileWidth: 512,
      tileHeight: 512,
    });
    layer.name = `Wms_Layer${res.id}`;
    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 projection;

 src/assets/js/Map/server copy.js

ÎļþÒÑɾ³ý

 src/assets/js/Map/server.js

@@ -338,6 +338,29 @@
      }
    });
  },

  delLayerAll() {
    this.layerList.forEach((e, i) => {
      switch (e.type) {
        case "wmts":
          window.Viewer.imageryLayers.remove(e.layerData);
          break;
        case "tms":
          window.Viewer.imageryLayers.remove(e.layerData);
          break;
        case "dem":
          window.Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(
            {}
          );
          break;
        case "tileset":
          window.Viewer.scene.primitives.remove(e.layerData)
          break;
      }
      this.layerList.splice(i, 1);
    });

  },
  //加载GeoServer-WMS服务
  setAddGeoWmsLayer(res) {
    var url = this.getLayrUrl(res);

 src/store/index.ts

@@ -26,6 +26,7 @@
      tab: null,
      showDetails: false,
    },
    restLayer: false,
  },
  mutations: {
    //获取登录Code

 src/views/baseMapSwitching/baseMapSwitching.vue

@@ -8,7 +8,7 @@
        <div class="titleImg">
          <ArrowLeft />
        </div>
        <div class="titleLable"></div>
        <div class="titleLable"> æŠ•å½±å›¾å±‚管理</div>
      </div>
    </div>
    <div class="baseMapSwitching_content">
@@ -17,9 +17,10 @@
          class="baseMapSwitching_list_tr"
          v-for="(item, i) in list"
          :key="i"
          @click="setProjectionLayerChange(item)"
        >
          <div class="baseMapSwitching_list_tr_name">
            <span>{{ item.name }}</span>
            <span :class="{  'baseMapActive' : activceIndex == item.id}">{{item.cnName }}</span>
          </div>
        </div>
      </div>
@@ -36,23 +37,33 @@
  defineProps,
  defineEmits,
} from "vue";
let list = ref([
  {
    name: "等距离柱投影 ( <75)",
    type: "poi",
    icon: "d.png",
  },
  {
    name: "北极平面投影",
    type: "line",
    icon: "x.png",
  },
  {
    name: "南极平面投影",
    type: "cover",
    icon: "m.png",
  },
]);
import { perms_selectProjectLayers } from "@/api/api";
import server from "@/assets/js/Map/server";
import store from "@/store";

import projection from "@/assets/js/Map/projectionServer";
let list = ref([]);
const activceIndex = ref();
const setProjectionLayerChange = (res) => {
  server.delLayerAll();
  projection.addTreeData(res);
  activceIndex.value = res.id;
  store.state.restLayer = true;
};
const getProjectionLayer = async () => {
  const data = await perms_selectProjectLayers();
  if (data.code != 200) return;
  var result = data.result.filter((res) => {
    if (res.isLayer == 1) {
      return res;
    }
  });
  list.value = result.reverse();
  if (!activceIndex.value) {
    setProjectionLayerChange(list.value[0]);
  }
};
getProjectionLayer();
</script>

<style lang="less" scoped>
@@ -78,7 +89,7 @@
      align-items: center;

      .titleLable {
        font-size: 24px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
@@ -122,6 +133,9 @@
          margin-left: 10px;
        }
      }
      .baseMapActive {
        color: #73a1fa !important;
      }
    }
  }
}

 src/views/layer/layerManage.vue

@@ -97,6 +97,7 @@
  defineProps,
  defineEmits,
  nextTick,
  watch,
} from "vue";
import layerSet from "./layerSet";
import attributeList from "./attributeList";
@@ -147,12 +148,17 @@
  let isCheck = checked.checkedKeys.indexOf(data.id) > -1;
  // this.setVisiable(data, isCheck);

  let son = estreeRef.value.getCheckedNodes();

  let son = estreeRef.value.getCheckedNodes().reverse();
  server.delLayerAll();
  for (var i in son) {
    var layerArr = son[i];
    layerArr.checked = true;
    server.addTreeData(layerArr);
  }
  store.commit("SET_CHECKLAYER", son);
  setVisiable(data, isCheck);
  // setVisiable(data, isCheck);

  // server.addLayer(layerArr, isCheck);
  //
};
const setVisiable = (treeNode, checked) => {
  if (checked !== undefined) {
@@ -250,6 +256,8 @@
};

const getLayer = async () => {
  store.state.restLayer = false;
  server.delLayerAll();
  const dt = await perms_selectLayers();
  if (dt.code == 200) {
    treeData.value = setTreeData(dt.result).sort(function (a, b) {
@@ -300,6 +308,15 @@
    return father.pid == 0; // è¿”回一级菜单
  });
}
watch(
  () => store.state.restLayer,
  (nVal, oVal) => {
    if (nVal) {
      getLayer();
    }
  },
  { deep: true }
);
getLayer();
onMounted(() => {});
</script>