图层管理，数据类行加载方式修改

Surpriseplus

2023-08-17 384fe106ad1efd66ef0910a824bff907322570ea

图层管理，数据类行加载方式修改

 src/assets/img/2D.png

 src/assets/img/3D.png

 src/assets/js/Map/config.js

@@ -16,7 +16,7 @@
  //Wmtsserver
  moonWmts:
    "http://172.16.2.10:50001/sj_raster/v6/wmts/service/system/10000201/3?ak=mf72ff9295c740ec0f37e61433e8a3ad8d&srs=ESRI:104903",

  proxy: 'http://192.168.20.83:8088/MoonServer',
  //地形
  moonTerrain: "http://172.16.2.10:50001/sj_raster/v6/terrain_mesh/10013901/45",
  BASE_URL: "http://192.168.20.83:8088/MoonServer",

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,321 @@
import { getToken } from "@/utils/auth";
//配置文件地址
import config from "./config";

const server = {
  layerList: [],
  addTreeData(treeNode) {
    if (!treeNode.checked) {
      this.delLayer(treeNode.id);
      return;
    }
    // WMTS -> å›¾ç‰‡
    // DOM\DEM å½©è‰²\黑白

    // TMS -> DOM、DEM
    // DOM->图片
    // DEM -> Terrain

    // URL -> URL
    // TMS -> URL DOM DEM
    // WMTS -> URL DOM DEM
    // WMS -> URL
    // WFS -> URL
    // Tileset -> URL`
    //comment on table lf.sys_res is '资源表';
    // comment on column lf.sys_res.id is '主键ID';
    // comment on column lf.sys_res.pid is '父ID：0-根节点';
    // comment on column lf.sys_res.cn_name is '中文名称';
    // comment on column lf.sys_res.en_name is '英文名称';
    // comment on column lf.sys_res.type is '类型：1-图层组,2-普通图层,3-代理图层';
    // comment on column lf.sys_res.status is '状态：-1-废弃，0-停用，1-启用';
    // comment on column lf.sys_res.category is '类型：0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset';
    // comment on column lf.sys_res.firm is '厂商：0-其他，1-GisServer，2-GeoServer，3-数简';
    // comment on column lf.sys_res.url is '服务地址';
    // comment on column lf.sys_res.test is '测试地址';
    // comment on column lf.sys_res.proxy is '代理地址';
    // comment on column lf.sys_res.descr is '描述';
    // comment on column lf.sys_res.depid is '单位编码';
    // comment on column lf.sys_res.dirid is '项目编码';
    // comment on column lf.sys_res.img is '缩略图';
    // comment on column lf.sys_res.level is '层级：0-根节点';
    // comment on column lf.sys_res.sort is '排序';
    // comment on column lf.sys_res.create_user is '创建人ID';
    // comment on column lf.sys_res.create_time is '创建时间';
    // comment on column lf.sys_res.update_user is '更新人ID';
    // comment on column lf.sys_res.update_time is '更新时间';
    // comment on column lf.sys_res.bak is '备注';
    //     ä»£ç†ï¼š/proxy/{token}/4
    // åœ°å€ï¼šhttp://192.168.20.83:8088/MoonServer + proxy.replace("{token}", token)
    // order_num -> sort
    // serve_type -> category

    // switch (treeNode.type) {
    //   case 1:
    //     treeNode.useUrl = treeNode.url;
    //     break;
    //   case 2:
    //     treeNode.useUrl = treeNode.url;
    //     break;
    //   case 3:
    //     treeNode.useUrl = treeNode.url;
    //   
    //     break;
    // }


    //
    // if (treeNode.resid && treeNode.resid > 0) {

    // } else {

    // }

    //判断是否代理
    //treeNode.proxy有数据代理,数据不代理


    if (treeNode.proxy) {
      this.addProxyAddress(treeNode);//有代理
    } else {
      this.addUrlAddress(treeNode);//无代理
    }


    // this.addGisServer(treeNode);
    // if (treeNode.firm == 2) {
    //   this.addGeoServer(treeNode);
    // } else {
    //   this.addGisServer(treeNode);
    // }
  },
  addProxyAddress(res) {
    switch (res.data) {
      case 1://dom
        this.addGisServer(res)
        break;
      case 2://地形
        this.addGisServer(res)
        break;
      case 3:
        this.addGisServer(res)
        break;
      case 4:
        this.addGisServer(res)
        break;
      case 5:
        this.addGisServer(res)
        break;
      case 6:
        this.addGisServer(res)
        break;
      case 7:
        this.addGisServer(res)
        break;
      case 8:
        break;
    }
  },

  addUrlAddress(res) {
    switch (res.data) {
      case 1://dom
        this.addGeoServer(res)
        break;
      case 2://地形
        this.addGeoServer(res)
        break;
      case 3:
        this.addGeoServer(res)
        break;
      case 4:
        this.addGeoServer(res)
        break;
      case 5:
        this.addGeoServer(res)
        break;
      case 6:
        this.addGeoServer(res)
        break;
      case 7:
        this.addGeoServer(res)
        break;
      case 8:
        break;
    }
  },


  //清除图层
  delLayer(code) {
    this.layerList.forEach((e, i) => {
      if (e.id === code) {
        switch (e.type) {
          case "wmts":
            window.Viewer.imageryLayers.remove(e.layerData.item);
            break;
          case "tms":
            window.Viewer.imageryLayers.remove(e.layerData.item);
            break;
          case "dem":
            window.Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(
              {}
            );
            break;
        }
        this.layerList.splice(i, 1);
      }
    });
  },
  addGisServer(treeNode) {
    // 0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset'; 
    //判断服务是否已存在
    var service = [];
    if (this.layerList.length > 0) {
      service = this.layerList.filter((res) => {
        if (res.id == treeNode.id) {
          return res
        }
      })
    }
    if (service.length > 0) return
    var url = null;

    if (treeNode.proxy && treeNode.proxy.indexOf('{token}') > -1) {
      const token = getToken()
      url = config.proxy + treeNode.proxy.replaceAll("{token}", token)
    }
    console.log(url)
    switch (treeNode.type) {
      case 1:
        this.AddTmsLayer(url, treeNode.data, treeNode.id);
        break;
      case 2:
        this.AddWmtesLayer(url, treeNode.id);
        break;
      case 3:
        break;
      case 4:
        break;
    }
  },
  addGeoServer(treeNode) {
    // 0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset';

    switch (treeNode.type) {
      case 1:
        break;
      case 2:

        break;
      case 3:
        this.AddGeoWmsLayer(treeNode.url, treeNode.id, treeNode.tab);
        break;
      case 4:
        break;
    }
  },
  //添加geoserver服务wms服务
  AddGeoWmsLayer(url, id, tab) {
    if (!tab) return

    let layer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      // url: "http://192.168.22.198:8090/geoserver/moon/wms",
      url: url,
      layers: "moon:geo_alkaline_rock_suite",
      parameters: {
        transparent: true,
        format: "image/png",
        srs: "EPSG:104903",
        styles: "",
      },
      tileWidth: 512,
      tileHeight: 512,
    });
    layer.name = `Wms_Layer${id}`;

    let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
    this.layerList.push({ id: id, layerData: img_layer, type: "wmts" });
  },
  //添加GisServer服务TMS切片服务
  AddTmsLayer(url, data, id) {
    // var urlTemplateImageryProvider = new SmartEarth.Cesium.UrlTemplateImageryProvider({
    //   url: url + "/{z}/{x}/{y}.png"
    // });
    // Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);

    if (data == '0' || data == '1') {
      let img_layer = earthCtrl.Creator.createUrlTemplateImageryProvider(
        "tms服务",
        {
          url: Cesium.buildModuleUrl(url + "/{z}/{x}/{y}.png"),
        },
        "0",
        undefined,
        true,
        ""
      );
      this.layerList.push({ id: id, layerData: img_layer, type: "tms" });
    } else if (data == '2') {
      window.terrainLayer = new Cesium.CesiumTerrainProvider({
        url: url
      });
      Viewer.terrainProvider = window.terrainLayer
      this.layerList.push({ id: id, type: "dem", });
    }
  },
  AddWmtesLayer(url, id) {
    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,
      }),
    });
    console.log(urlTemplateImageryProvider);
    this.layerList.push({
      id: id,
      layerData: urlTemplateImageryProvider._primitive,
      type: "wmts",
    });
  },
  AddDemLayer(url, id) {
    var terrain = new Cesium.CesiumTerrainProvider({
      url: config.moonTerrain,
      // url: url,
      tilingScheme: new Cesium.GeographicTilingScheme({
        ellipsoid: Cesium.Ellipsoid.MOON,
      }),
    });
    window.Viewer.terrainProvider = terrain;

    // let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
    this.layerList.push({ id: id, type: "dem" });
  },
};
export default server;

 src/assets/js/Map/server.js

@@ -9,192 +9,204 @@
      this.delLayer(treeNode.id);
      return;
    }
    // WMTS -> å›¾ç‰‡
    // DOM\DEM å½©è‰²\黑白

    // TMS -> DOM、DEM
    // DOM->图片
    // DEM -> Terrain

    // URL -> URL
    // TMS -> URL DOM DEM
    // WMTS -> URL DOM DEM
    // WMS -> URL
    // WFS -> URL
    // Tileset -> URL`
    //comment on table lf.sys_res is '资源表';
    // comment on column lf.sys_res.id is '主键ID';
    // comment on column lf.sys_res.pid is '父ID：0-根节点';
    // comment on column lf.sys_res.cn_name is '中文名称';
    // comment on column lf.sys_res.en_name is '英文名称';
    // comment on column lf.sys_res.type is '类型：1-图层组,2-普通图层,3-代理图层';
    // comment on column lf.sys_res.status is '状态：-1-废弃，0-停用，1-启用';
    // comment on column lf.sys_res.category is '类型：0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset';
    // comment on column lf.sys_res.firm is '厂商：0-其他，1-GisServer，2-GeoServer，3-数简';
    // comment on column lf.sys_res.url is '服务地址';
    // comment on column lf.sys_res.test is '测试地址';
    // comment on column lf.sys_res.proxy is '代理地址';
    // comment on column lf.sys_res.descr is '描述';
    // comment on column lf.sys_res.depid is '单位编码';
    // comment on column lf.sys_res.dirid is '项目编码';
    // comment on column lf.sys_res.img is '缩略图';
    // comment on column lf.sys_res.level is '层级：0-根节点';
    // comment on column lf.sys_res.sort is '排序';
    // comment on column lf.sys_res.create_user is '创建人ID';
    // comment on column lf.sys_res.create_time is '创建时间';
    // comment on column lf.sys_res.update_user is '更新人ID';
    // comment on column lf.sys_res.update_time is '更新时间';
    // comment on column lf.sys_res.bak is '备注';
    //     ä»£ç†ï¼š/proxy/{token}/4
    // åœ°å€ï¼šhttp://192.168.20.83:8088/MoonServer + proxy.replace("{token}", token)
    // order_num -> sort
    // serve_type -> category

    // switch (treeNode.type) {
    //   case 1:
    //     treeNode.useUrl = treeNode.url;
    //     break;
    //   case 2:
    //     treeNode.useUrl = treeNode.url;
    //     break;
    //   case 3:
    //     treeNode.useUrl = treeNode.url;
    //     // var token = getToken();
    //     // treeNode.useUrl = BASE_URL + treeNode.proxy.replace("{token}", token);
    //     break;
    // }



    if (treeNode.resid && treeNode.resid > 0) {

    //判断是否为代理
    if (treeNode.proxy) {
      this.addProxyAddress(treeNode);//有代理
    } else {
      console.log(treeNode)
      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;
    }

    this.addGisServer(treeNode);
    // if (treeNode.firm == 2) {
    //   this.addGeoServer(treeNode);
    // } else {
    //   this.addGisServer(treeNode);
    // }
  },
  //清除图层
  delLayer(code) {
    this.layerList.forEach((e, i) => {
      if (e.id === code) {
        switch (e.type) {
          case "wmts":
            window.Viewer.imageryLayers.remove(e.layerData.item);
            break;
          case "tms":

            window.Viewer.imageryLayers.remove(e.layerData.item);
            break;
          case "dem":
            window.Viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider(
              {}
            );
            break;
        }
        this.layerList.splice(i, 1);
      }
    });
  },
  addGisServer(treeNode) {
    // 0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset'; 
    //判断服务是否已存在
    var service = [];
    if (this.layerList.length > 0) {
      service = this.layerList.filter((res) => {
        if (res.id == treeNode.id) {
          return res
        }
      })
  //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;
    }
    if (service.length > 0) return
    var url = null;
    if (treeNode.useUrl && treeNode.useUrl.indexOf('{token}') > -1) {
  },
  setGeoDataType() {
    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.BASE_URL + treeNode.proxy.replaceAll("{token}", token)
      url = config.proxy + res.proxy.replaceAll("{token}", token)
    } else {
      url = treeNode.useUrl
      url = res.url;
    }
    switch (treeNode.type) {
      case 1:
        this.AddTmsLayer(url, treeNode.data, treeNode.id);
        break;
      case 2:
        this.AddWmtesLayer(url, treeNode.id);
        break;
      case 3:
        break;
      case 4:
        break;
    }
    return url
  },
  addGeoServer(treeNode) {
    // 0-URL，1-TMS，2-WMTS，3-WFS，4-Tileset';
    switch (treeNode.type) {
      case 1:
        break;
      case 2:
        this.AddGeoWmsLayer(treeNode.useUrl, treeNode.id, treeNode.tab);
        break;
      case 3:
        break;
      case 4:
        break;
    }
  },
  //添加geoserver服务wms服务
  AddGeoWmsLayer(url, id, tab) {
    let layer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      // url: "http://192.168.22.198:8090/geoserver/moon/wms",
      url: url,
      layers: tab,
      parameters: {
        transparent: true,
        format: "image/png",
        srs: "EPSG:104903",
        styles: "",
  //加载TMS服务
  setAddTmsLayer(res) {
    var url = this.getLayrUrl(res)
    let img_layer = earthCtrl.Creator.createUrlTemplateImageryProvider(
      "tms服务",
      {
        url: Cesium.buildModuleUrl(url + "/{z}/{x}/{y}.png"),
      },
      tileWidth: 512,
      tileHeight: 512,
    });
    layer.name = `Wms_Layer${id}`;

    let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
    this.layerList.push({ id: id, layerData: img_layer, type: "wmts" });
      "0",
      undefined,
      true,
      ""
    );
    this.layerList.push({ id: res.id, layerData: img_layer, type: "tms" });
  },
  //添加GisServer服务TMS切片服务
  AddTmsLayer(url, data, id) {
    // var urlTemplateImageryProvider = new SmartEarth.Cesium.UrlTemplateImageryProvider({
    //   url: url + "/{z}/{x}/{y}.png"
    // });
    // Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);

    if (data == '0' || data == '1') {
      let img_layer = earthCtrl.Creator.createUrlTemplateImageryProvider(
        "tms服务",
        {
          url: Cesium.buildModuleUrl(url + "/{z}/{x}/{y}.png"),
        },
        "0",
        undefined,
        true,
        ""
      );
      this.layerList.push({ id: id, layerData: img_layer, type: "tms" });
    } else if (data == '2') {
      window.terrainLayer = new Cesium.CesiumTerrainProvider({
        url: url
      });
      Viewer.terrainProvider = window.terrainLayer
      this.layerList.push({ id: id, type: "dem", });
    }
  },
  AddWmtesLayer(url, id) {
  //加载WMTS服务
  setAddWmtsLayer(res) {
    var url = this.getLayrUrl(res)
    var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
      sourceType: "wmts",
      url: url,
@@ -227,25 +239,127 @@
        ellipsoid: Cesium.Ellipsoid.MOON,
      }),
    });
    console.log(urlTemplateImageryProvider);
    this.layerList.push({
      id: id,
      id: res.id,
      layerData: urlTemplateImageryProvider._primitive,
      type: "wmts",
    });
  },
  AddDemLayer(url, id) {
    var terrain = new Cesium.CesiumTerrainProvider({
      url: config.moonTerrain,
      // url: url,
      tilingScheme: new Cesium.GeographicTilingScheme({
        ellipsoid: Cesium.Ellipsoid.MOON,
      }),
  //加载地形服务
  setAddTearrinLayer(res) {
    this.setChangeTearrinLayer();
    var url = this.getLayrUrl(res)
    window.terrainLayer = new Cesium.CesiumTerrainProvider({
      url: url
    });
    window.Viewer.terrainProvider = terrain;
    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",
    });

    // let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
    this.layerList.push({ id: id, type: "dem" });
  },
  //加载模型服务
  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;
    });
  },
  //地形移除事件
  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":
            debugger
            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 "":
            break;
        }
        this.layerList.splice(i, 1);
      }
    });
  },
  //加载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" });
  },
};
export default server;

 src/utils/auth.js

@@ -1,7 +1,7 @@
const TokenKey = 'Admin-Token';

export function getToken() {
    console.log(window.sessionStorage.getItem(TokenKey));
    // console.log(window.sessionStorage.getItem(TokenKey));
    return window.sessionStorage.getItem(TokenKey);
}


 src/utils/request.js

@@ -48,7 +48,7 @@
    if (response.data.code !== 200) {
      // ElMessage.error(response.data.msg);
    }
    if (response.data.code !== 200 && response.data.msg == "用户未登录") {
    if (response.data.code !== 200 && response.data.result == "用户未登录") {
      ElMessage.error("登录过期，请重新登录");
      router.push({ path: "/login" });
    }

 src/views/layer/layerManage.vue

@@ -167,10 +167,7 @@
    DefaultId.value.forEach((v) => {
      if (e.id == v) {
        setVisiable(e, true);
      } else {
        if (e.children) {
          defaultLayer(e.children);
        }
        // return;
      }
    });
  });
@@ -261,7 +258,7 @@

    //添加默认选中图层
    layerListData.value = dt.result;
    defaultLayer(treeData.value);
    defaultLayer(dt.result);
    nextTick(() => {
      let son = estreeRef.value.getCheckedNodes();


 src/views/layer/layerSet.vue

@@ -20,14 +20,51 @@
          @node-click="handleNodeClick"
          ref="treeRef"
        />

        <!-- <div class="contentBox" v-for="(item, i) in menuOption" :key="i">
          <div
            class="contentTile"
            @click.stop="selectList(item)"
            :class="{ highlight: item.id == selectedNodeId }"
          >
            <div class="contentLeft">
              <div class="contentImg"></div>
              <div class="contentLabel">{{ item.name }}</div>
            </div>
            <div class="contentRight">
              <div>
                <div
                  @click="handlIsShow(item.name)"
                  class="contentUP"
                  :class="{ accordion: item.isShow }"
                ></div>
              </div>
            </div>
          </div>

          <div class="content" v-show="item.isShow">
            <div
              class="layer_box"
              v-for="(v, k) in item.children"
              :key="k"
              @click.stop="selectList(v)"
              :class="{ highlight: v.id == selectedNodeId }"
            >
              <div class="contentLeft">
                <div class="contentImg"></div>
                <div class="contentLabel">{{ v.name }}</div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="edit_box">
      <div class="edit_box_btn btnstyle">
        <el-button type="primary" :icon="Plus" @click="insertLayerData(1)"
        <el-button type="primary" :icon="Plus" @click="added('t')"
          >新增同级</el-button
        >
        <el-button type="primary" :icon="Plus" @click="insertLayerData(2)"
        <el-button type="primary" :icon="Plus" @click="added('z')"
          >新增子级</el-button
        >
        <el-button
@@ -45,168 +82,44 @@
        >
      </div>
      <div class="edit_box_form">
        <el-form :model="formInline" label-width="120px">
        <el-form :model="form" label-width="120px">
          <el-form-item label="选中图层">
            <el-select style="width: 100%" v-model="formInline.isLayer">
              <el-option label="图层组" value="0"></el-option>
              <el-option label="图层" value="1"></el-option>
            </el-select>
            <el-input
              v-model="form.selectName"
              disabled
              placeholder="点击图层树选择"
            />
          </el-form-item>
          <!-- æœåŠ¡èµ„源-->
          <el-form-item v-show="formInline.isLayer == 1" label="服务资源">
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('0')"
              key="0"
              :class="{ serviceActive: !serviceActive }"
              >否</el-button
            >
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('1')"
              key="1"
              :class="{ serviceActive: serviceActive }"
              >是</el-button
            >
          </el-form-item>

          <el-form-item label="图层名称">
            <el-input
              v-model="formInline.cnName"
              placeholder="请输入图层名称"
            />
            <el-input v-model="form.name" placeholder="请输入图层名称" />
          </el-form-item>
          <!-- æ•°æ®ç±»åž‹ -->
          <el-form-item v-show="formInline.isLayer == 1" label="数据类型">
          <el-form-item label="图层类型">
            <el-select
              style="width: 100%"
              v-model="formInline.data"
              :disabled="serviceActive"
              @change="setFromDataTypeClick"
              v-model="form.region"
              placeholder="请选择图层类型"
            >
              <el-option
                v-for="item in serveType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- æ•°æ®ç±»åž‹ -->
          <el-form-item v-show="formInline.isLayer == 1" label="服务类型">
            <el-select
              style="width: 100%"
              v-model="formInline.type"
              :disabled="serviceActive"
            >
              <el-option
                v-for="item in dataType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
                v-for="(e, i) in stretchOptions"
                :label="e.label"
                :value="e.value"
                :key="i"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="服务地址" v-show="formInline.isLayer == 1">
            <el-input
              v-model="formInline.serviceUrl"
              placeholder="请输入服务地址"
              :disabled="serviceActive"
            />
          <el-form-item label="服务地址">
            <el-input v-model="form.layerUrl" placeholder="请输入服务地址" />
          </el-form-item>
          <el-form-item>
            <div class="btnstyle editBtn">
            <!-- <div class="btnstyle editBtn">
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button class="delbtn" @click="updateRest">取消</el-button>
            </div>
              <el-button class="delbtn">取消</el-button>
            </div> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog title="新增" v-model:visible="dialogVisible" width="50%">
      <div style="width: 100%; max-height: 63vh; overflow-y: auto">
        <el-form :model="formInline" label-width="120px">
          <el-form-item label="选中图层">
            <el-select style="width: 100%" v-model="formInline.isLayer">
              <el-option label="图层组" value="0"></el-option>
              <el-option label="图层" value="1"></el-option>
            </el-select>
          </el-form-item>
          <!-- æœåŠ¡èµ„源-->
          <el-form-item v-show="formInline.isLayer == 1" label="服务资源">
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('0')"
              key="0"
              :class="{ serviceActive: !serviceActive }"
              >否</el-button
            >
            <el-button
              size="small"
              class="serviceButton"
              @click="setServiceChange('1')"
              key="1"
              :class="{ serviceActive: serviceActive }"
              >是</el-button
            >
          </el-form-item>

          <el-form-item label="图层名称">
            <el-input
              v-model="formInline.cnName"
              placeholder="请输入图层名称"
            />
          </el-form-item>
          <!-- æ•°æ®ç±»åž‹ -->
          <el-form-item v-show="formInline.isLayer == 1" label="数据类型">
            <el-select
              style="width: 100%"
              v-model="formInline.data"
              @change="setFromDataTypeClick"
            >
              <el-option
                v-for="item in serveType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- æ•°æ®ç±»åž‹ -->
          <el-form-item v-show="formInline.isLayer == 1" label="服务类型">
            <el-select style="width: 100%" v-model="formInline.type">
              <el-option
                v-for="item in dataType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="服务地址" v-show="formInline.isLayer == 1">
            <el-input
              v-model="formInline.serviceUrl"
              placeholder="请输入服务地址"
            />
          </el-form-item>
          <el-form-item>
            <div class="btnstyle editBtn">
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button class="delbtn" @click="updateRest">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

@@ -221,8 +134,6 @@
} from "vue";
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { serve_type, data_type } from "./js/layerManage.js";
import { removeToken, getToken } from "@/utils/auth";
const stretchValue = ref("");
const emits = defineEmits(["SETstate", "addlayer", "delLayer"]);
//defineProps æ¥æŽ¥æ”¶ç»„件的传值
@@ -254,134 +165,21 @@
  },
];

const formInline = ref({
  cnName: null,
  type: null,
  serveType: null,
  url: null,
  dataType: null,
  bak: null,
  isShow: "1",
  isProject: "0",
  enName: "",
  isLayer: null,
  category: null,
  status: null,
  service: "0",
  serviceUrl: null,
});
const insertData = ref({
  cnName: null,
  type: null,
  serveType: null,
  url: null,
  dataType: null,
  bak: null,
  isShow: "1",
  isProject: "0",
  enName: "",
  isLayer: null,
  category: null,
  status: null,
  service: "0",
  serviceUrl: null,
const form = reactive({
  name: "",
  region: "",
  selectName: "",
  layerUrl: "",
  children: [],
});
const props = {
  label: "cnName",
  children: "children",
};
let dialogVisible = ref(false);
// å½“前选中的节点 id
const selectedNodeId = ref(null as any); //做类型断言处理
const selectedObj = ref(null);
let menuOption = ref([]);
let serviceActive = ref(false);
let dataType = ref(null);
let serveType = ref(null);
let backUpData = ref(null);
const insertLayerData = (res) => {
  // if (res == 1) {
  //   //新增同级
  //   id = this.formInline.pid;
  //   let pchildNodes = this.$refs.tree.getNode(this.newNode.id).parent
  //     .childNodes;
  //   orderNum = this.getMaxOrderNum(pchildNodes);
  //   lever = this.formInline.level;
  // } else if (res == 2) {
  //   //新增子级
  //   id = this.formInline.id;
  //   let pchildNodes = this.$refs.tree.getNode(this.newNode.id).childNodes;
  //   orderNum = this.getMaxOrderNum(pchildNodes);
  //   lever = this.formInline.level + 1;
  // }
  // this.insertData.pid = id;
  // this.insertData.level = lever;
  // this.insertData.orderNum = orderNum;

  dialogVisible.value = true;
};
//修改重置
const updateRest = () => {
  var res = JSON.parse(backUpData.value);
  formInline.value = res;
  formInline.value.isLayer = res.isLayer.toString();

  formInline.value.status = res.status.toString();
  // this.formInline.isProject = res.isProject.toString();
};
//下拉菜单初始化
const optionsStart = () => {
  var std = [];
  var ste = [];
  for (var i in serve_type) {
    ste.push({
      value: serve_type[i].value,
      label: serve_type[i].name,
    });
  }
  serveType.value = std;
  for (var i in data_type) {
    std.push({
      value: data_type[i].value,
      label: data_type[i].name,
      children: data_type[i].children,
    });
  }
  dataType.value = ste;
};
const setInsertDataTypeChange = (res) => {
  var filter = serveType.value.filter((rs) => {
    if (rs.value == res) {
      return rs;
    }
  });
  if (filter.length <= 0) return;
  var std = [];
  var data = filter[0].children;
  for (var i in data) {
    for (var j in serve_type) {
      if (serve_type[j].value == data[i]) {
        std.push({
          value: serve_type[j].value,
          label: serve_type[j].name,
        });
      }
    }
  }
  dataType.value = std;
};
const setFromDataTypeClick = (res) => {
  setInsertDataTypeChange(res);
  formInline.value.type = dataType.value[0].value;
};
const setServiceChange = (res) => {
  if (res == "1") {
    // this.setServiceRest()
  } else {
    serviceActive.value = false;
    formInline.value.resid = 0;
  }
};
const handleCheckChange = (
  data: Tree,
  checked: boolean,
@@ -396,35 +194,14 @@
// å¤„理节点点击事件
function handleNodeClick(data: any) {
  console.log(data);
  console.log(formInline.value);
  if (data.id === selectedNodeId.value) {
    // å¦‚果当前节点已经选中，则取消选中
    selectedNodeId.value = null;
  } else {
    // å¦åˆ™é€‰ä¸­å½“前节点
    selectedNodeId.value = data.id;
    form.selectName = data.cnName;
    selectedObj.value = data;
    backUpData.value = JSON.stringify(data);
    // this.currentData = JSON.stringify(result)
    formInline.value = data;
    formInline.value.isLayer = data.isLayer.toString();
    if (data.resid && data.resid > 0) {
      serviceActive.value = true;
    } else {
      serviceActive.value = false;
    }
    var url;
    if (!serviceActive.value) {
      url = data.url;
    } else if (serviceActive.value) {
      var token = getToken();
      if (data.url.indexOf("{token}") > -1) {
        url = BASE_URL + data.url.replaceAll("{token}", token);
      } else {
        url = data.url;
      }
    }
    formInline.value.serviceUrl = url;
  }
}
//新增
@@ -435,17 +212,14 @@
  }
  var addObj = {
    id: id,
    cnName: formInline.value.name,
    region: formInline.value.region,
    url: formInline.value.layerUrl,
    cnName: form.name,
    region: form.region,
    layerUrl: form.layerUrl,
    children: [],
    type: 2, //数据类型
    proxy: null,
    data: 0,
    tab: "", //Geoserver åç§°ï¼Œ
    category: "", //服务类别 Geoserver ,
    type: 2,
    parentId: null,
  };
  if (formInline.value.region == "目录") {
  if (form.region == "目录") {
    addObj.type = 1;
  }

@@ -514,7 +288,6 @@
  }
  emits("addlayer", { type: type, id: selectedObj.value.id });
};
optionsStart();
</script>

<style lang="less" scoped>
@@ -570,8 +343,7 @@
  width: 359px;
  height: 615px;
  background: rgba(7, 8, 14, 0.8);
  // padding-bottom: 60px;
  box-sizing: border-box;

  .layerTitle {
    width: calc(100% - 27px);
    height: 42px;
@@ -606,19 +378,6 @@
  }
  .layerContent {
    padding: 0 8px;
    height: 92%;
    overflow: auto;
  }
  .layerContent::-webkit-scrollbar {
    width: 8px;
  }
  .layerContent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }
  .layerContent::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
  }
  .contentBox {
    margin-top: 3px;
@@ -714,7 +473,6 @@
    }
  }
}

.editBtn {
  width: 100%;
  display: flex;
@@ -759,14 +517,5 @@
// }
.highlight {
  background: rgba(104, 156, 255, 0.5) !important;
}
.serviceButton {
  background: transparent !important;
  color: #dcdfe6;
}
.serviceActive {
  background: transparent !important;
  color: #46a6ff;
  border: 1px solid #46a6ff;
}
</style>