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

Surpriseplus

2023-08-17 384fe106ad1efd66ef0910a824bff907322570ea

 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;