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

Surpriseplus

2023-08-23 1ff13ceb222d4059252201504cd963df26cafec8

 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) {
@@ -11,37 +11,37 @@
    }
    //判断是否为代理
    if (treeNode.proxy) {
      this.addProxyAddress(treeNode);//有代理
      this.addProxyAddress(treeNode); //有代理
    } else {
      this.addUrlAddress(treeNode);//无代理
      this.addUrlAddress(treeNode); //无代理
    }
  },
  //代理地址
  addProxyAddress(res) {
    //判断数据类型
    switch (res.data) {
      case 1://数字正射影像图
      case 1: //数字正射影像图
        this.setDataType(res);
        break;
      case 2://场景地形数据
      case 2: //场景地形数据
        this.setTerrainData(res);
        break;
      case 3://数字高程模型（晕渲图）
      case 3: //数字高程模型（晕渲图）
        this.setDataType(res);
        break;
      case 4://单波段栅格数据
      case 4: //单波段栅格数据
        this.setDataType(res);
        break;
      case 5://多光谱栅格数据
      case 5: //多光谱栅格数据
        this.setDataType(res);
        break;
      case 6://高光谱栅格数据
      case 6: //高光谱栅格数据
        this.setDataType(res);
        break;
      case 7://矢量图层
      case 7: //矢量图层
        this.setVectorData(res);
        break;
      case 8://三维模型
      case 8: //三维模型
        this.setModelData(res);
        break;
    }
@@ -49,94 +49,86 @@
  //普通地址
  addUrlAddress(res) {
    switch (res.category) {
      case 0://其他

      case 0: //其他
        break;
      case 1://GisServer
      case 1: //GisServer
        this.addProxyAddress(res);
        break;
      case 2://GeoServer
      case 2: //GeoServer
        this.addGeoServerAddress(res);
        break;
      case 3://数简
      case 3: //数简
        this.addProxyAddress(res);
        break;
    }

  },
  //Geoserver服务
  addGeoServerAddress(res) {
    //判断数据类型
    switch (res.data) {
      case 1://数字正射影像图
      case 1: //数字正射影像图
        this.setGeoDataType(res);
        break;
      case 2://场景地形数据
      case 2: //场景地形数据
        this.setTerrainData(res);
        break;
      case 3://数字高程模型（晕渲图）
      case 3: //数字高程模型（晕渲图）
        this.setGeoDataType(res);
        break;
      case 4://单波段栅格数据
      case 4: //单波段栅格数据
        this.setGeoDataType(res);
        break;
      case 5://多光谱栅格数据
      case 5: //多光谱栅格数据
        this.setGeoDataType(res);
        break;
      case 6://高光谱栅格数据
      case 6: //高光谱栅格数据
        this.setGeoDataType(res);
        break;
      case 7://矢量图层
      case 7: //矢量图层
        this.setGeoVectorData(res);
        break;
      case 8://三维模型
      case 8: //三维模型
        this.setModelData(res);
        break;
    }
  },
  setGeoDataType(res) {
    switch (res.type) {
      case 0://URL
      case 0: //URL
        break;
      case 1://TMS
      case 1: //TMS
        this.setAddTmsLayer(res);
        break;
      case 2://WMTS
      case 2: //WMTS
        this.setAddWmtsLayer(res);
        break;
      case 3://WMS
      case 3: //WMS
        this.setAddGeoWmsLayer(res);
        break;
    }
  },
  setGeoVectorData(res) {
    switch (res.type) {
      case 0://URL
      case 0: //URL
        break;
      case 3://WMS
      case 3: //WMS
        this.setAddGeoWmsLayer(res);
        break;
      case 4://WFS

      case 4: //WFS
        break;
    }
  },





  setDataType(res) {
    switch (res.type) {
      case 0://URL
      case 0: //URL
        break;
      case 1://TMS
      case 1: //TMS
        this.setAddTmsLayer(res);
        break;
      case 2://WMTS
      case 2: //WMTS
        this.setAddWmtsLayer(res);
        break;
      case 3://WMS
      case 3: //WMS
        this.setAddWmsLayer(res);
        break;
    }
@@ -144,37 +136,34 @@

  setTerrainData(res) {
    switch (res.type) {
      case 0://URL
        this.setAddTearrinLayer(res)
      case 0: //URL
        this.setAddTearrinLayer(res);
        break;
      case 1://TMS
      case 1: //TMS
        this.setAddTearrinLayer(res);
        break;
    }
  },
  setVectorData(res) {
    switch (res.type) {
      case 0://URL

      case 0: //URL
        break;
      case 3://WMS
      case 3: //WMS
        this.setAddWmsLayer(res);
        break;
      case 4://WFS

      case 4: //WFS
        break;
    }
  },
  setModelData(res) {
    switch (res.type) {
      case 0://Tileset
      case 0: //Tileset
        this.setAddModelLayer(res);
        break;
      case 3://WMS
      case 3: //WMS
        this.setAddModelLayer(res);
        break;
      case 5://WFS

      case 5: //WFS
        break;
    }
  },
@@ -182,20 +171,20 @@
  getLayrUrl(res) {
    var url;
    if (res.proxy) {
      const token = getToken()
      url = config.proxy + res.proxy.replaceAll("{token}", token)
      const token = getToken();
      url = config.proxy + res.proxy.replaceAll("{token}", token);
    } else {
      url = res.url;
    }
    return url
    return url;
  },
  //加载TMS服务
  setAddTmsLayer(res) {
    var url = this.getLayrUrl(res)
    var url = this.getLayrUrl(res);
    let img_layer = earthCtrl.Creator.createUrlTemplateImageryProvider(
      "tms服务",
      {
        url: Cesium.buildModuleUrl(url + "/{z}/{x}/{y}.png"),
        url: Cesium.buildModuleUrl(url + "/{z}/{x}/{reverseY}.png"),
      },
      "0",
      undefined,
@@ -206,7 +195,7 @@
  },
  //加载WMTS服务
  setAddWmtsLayer(res) {
    var url = this.getLayrUrl(res)
    var url = this.getLayrUrl(res);
    var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
      sourceType: "wmts",
      url: url,
@@ -248,30 +237,37 @@
  //加载地形服务
  setAddTearrinLayer(res) {
    this.setChangeTearrinLayer();
    var url = this.getLayrUrl(res)
    var url = this.getLayrUrl(res);
    window.terrainLayer = new Cesium.CesiumTerrainProvider({
      url: url
      url: url,
    });
    Viewer.terrainProvider = window.terrainLayer
    this.layerList.push({ id: res.id, type: "dem", });
    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, "");
    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) {
@@ -298,7 +294,6 @@
        dynamicScreenSpaceErrorFactor: 2, // 动态屏幕空间误差的系数
        dynamicScreenSpaceError: true, // 减少离相机较远的屏幕空间错误：false，全屏加载完之后才清晰化房屋
      })

    );
    tileset.readyPromise.then((tileset) => {
      tileset.id = res.id;
@@ -316,7 +311,7 @@
          this.layerList.splice(i, 1);
          break;
      }
    })
    });
  },

  //清除图层
@@ -346,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",
@@ -362,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;