投影图层修改，在线制图修改

surprise

2023-10-31 b7e62ad2625121586b1254dab69b3c3d38da71de

 src/assets/js/Map/server.js

@@ -1,50 +1,607 @@
import { getToken } from "@/utils/auth";
//配置文件地址
// import config from "../../../../public/config/config";
import store from "@/store";
import { nextTick } from "vue";
const server = {
  //添加geoserver服务wms服务
  AddGeoWmsLayer(url) {
    window.layerWMS = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      url: "http://192.168.22.198:8090/geoserver/moon/wms",
      layers: "moon:lunar_place_nane",
  layerList: [],
  graticules: null,
  alpha: null,//透明度
  geoLayer: [],
  geoUrl: null,
  wmsLayerId: null,
  addTreeData(treeNode) {
    // if (!treeNode.checked) {
    //  debugger
    // this.delLayer(treeNode.id);
    // return;
    // }

    this.alpha = this.getResLayersAlpha(treeNode);
    //判断是否为代理
    if (treeNode.proxy) {
      this.addProxyAddress(treeNode); //有代理
    } else {
      this.addUrlAddress(treeNode); //无代理
    }

    if (this.graticules) {
      window.Viewer.imageryLayers.raiseToTop(this.graticules.imageryLayer);
    }
  },
  showlonlatLine() {
    if (!this.graticules) {
      SmartEarth.Cesium.Ellipsoid.WGS84 = new SmartEarth.Cesium.Ellipsoid(
        1737400.0,
        1737400.0,
        1737400.0
      );

      this.graticules = new SmartEarth.Cesium.Graticules(
        earthCtrl.Viewer,
        SmartEarth.Cesium.Color.PALEGREEN
      );
      // graticules.makeCoordAxiss();
      var that = this;
      earthCtrl.Viewer.scene.preUpdate.addEventListener(function () {
        that.graticules.update();
      });
    } else {
      this.graticules.enabled = !this.graticules.enabled;
    }
  },
  //代理地址
  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);
        this.setAddGeoWmsLayer(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);
        this.setAddGeoWmsLayer(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) {
    this.delLayer(res.id);
    var url = this.getLayrUrl(res);
    let urlTemplateImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
      sourceType: "wmts",
      url: url,
      layer: "",
      id: res.id,
      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,
      }),
    })
    var imageLayer = window.Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
    imageLayer.id = res.id

    imageLayer.alpha = this.alpha;
    // urlTemplateImageryProvider.id = res.id
    this.layerList.push({
      id: res.id,
      layerData: imageLayer,
      type: "wmts",
      alpha: imageLayer,
    });
  },
  //获取图层之前的透明度
  getResLayersAlpha(result) {
    var std = this.layerList.filter(res => {
      if (res.id == result.id) {
        return res;
      }
    });

    if (std.length <= 0) {
      return 1;
    } else {
      var id = std[0].id;
      var val = null;
      var layers = window.Viewer.imageryLayers._layers;
      for (var i in layers) {
        if (layers[i].id == id) {
          val = id;
          return layers[i].alpha;
        }
      }
      if (!null) {
        return 1
      }
    }
  },
  //加载地形服务
  setAddTearrinLayer(res) {
    this.setChangeTearrinLayer();
    var url = this.getLayrUrl(res);
    window.terrainLayer = new Cesium.CesiumTerrainProvider({
      url: url,
      tilingScheme: new Cesium.GeographicTilingScheme({
        ellipsoid: Cesium.Ellipsoid.MOON,
      }),
    });
    Viewer.terrainProvider = window.terrainLayer;
    Viewer.scene.globe.terrainExaggeration = 1.0000001;
    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 "wms":
            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) => {
      this.setRemoveLayer(e);
      this.layerList.splice(i, 1);
    });
  },
  setRemoveLayer(e) {
    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;

    }
  },
  //加载GeoServer-WMS服务
  setAddGeoWmsLayer(res, alpha) {
    // 
    var url = res.url;
    var that = this;
    this.delLayer(res.id)
    var getFeatureInfoFormat = new SmartEarth.Cesium.GetFeatureInfoFormat(
      "html",
      null,
      function (html) {
        that.getFeatureInfo(html);
      }
    );
    if (url.indexOf('{token}') > -1) {
      const token = getToken();
      url = config.proxy + url.replaceAll("{token}", token);
    } else {
      url = url;
    }

    let layer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      url: url,
      layers: res.tab,
      id: res.id,
      getFeatureInfoParameters: { info_format: "text/html", srs: "EPSG:104903" },
      enablePickFeatures: true,
      getFeatureInfoFormats: [getFeatureInfoFormat],
      parameters: {
        transparent: true,
        format: "image/png",
        srs: "EPSG:4490",
        srs: "EPSG:104903",
        styles: "",
      },
      tileWidth: 512,
      tileHeight: 512,
    });
    layerWMS.name = "Wms_Layer";

    Viewer.imageryLayers.addImageryProvider(window.layerWMS);
    let img_layer = window.Viewer.imageryLayers.addImageryProvider(layer);
    img_layer.name = `Wms_Layer${res.id}`;
    img_layer.id = res.id
    img_layer.alpha = alpha ? alpha : 1;
    this.layerList.push({ id: res.id, layerData: img_layer, type: "wmts" });
  },
  //添加GisServer服务TMS切片服务
  AddTmsLayer(url) {
    var urlTemplateImageryProvider =
      new SmartEarth.Cesium.UrlTemplateImageryProvider({
        url: url + "/{z}/{x}/{reverseY}.png",
        maximumLevel: 4,
        minimumLevel: 1,
        tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({
          numberOfLevelZeroTilesX: 2,
          numberOfLevelZeroTilesY: 1,
        }),
      });
    window.Viewer.imageryLayers.addImageryProvider(urlTemplateImageryProvider);
  },
  AddWmtesLayer(url) {
    var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
      sourceType: "wmts",
  addGeoServerMmsLayers(layer, url) {
    this.geoLayer = layer;
    this.geoUrl = url;
    var that = this;
    var getFeatureInfoFormat = new SmartEarth.Cesium.GetFeatureInfoFormat(
      "html",
      null,
      function (html) {
        that.getFeatureInfo(html);
      }
    );
    if (url.indexOf('{token}') > -1) {
      const token = getToken();
      url = config.proxy + url.replaceAll("{token}", token);
    } else {
      url = url;
    }

    if (!this.wmsLayerId) {
      this.wmsLayerId = new Date();
    }
    let wmslayer = new SmartEarth.Cesium.WebMapServiceImageryProvider({
      url: url,
      layer: "",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleCRS84Quad01",
      minimumLevel: 0,
      maximumLevel: 18,
      style: "",
      tilingScheme: new SmartEarth.Cesium.GeographicTilingScheme({
        ellipsoid: SmartEarth.Cesium.Ellipsoid.MOON,
      }),
      id: this.wmsLayerId,
      layers: layer.toString(),
      getFeatureInfoParameters: { info_format: "text/html", srs: "EPSG:104903" },
      enablePickFeatures: true,
      getFeatureInfoFormats: [getFeatureInfoFormat],
      parameters: {
        transparent: true,
        format: "image/png",
        srs: "EPSG:104903",
        styles: "",
      },
      tileWidth: 512,
      tileHeight: 512,
    });

    let img_layer = window.Viewer.imageryLayers.addImageryProvider(wmslayer);
    img_layer.id = this.wmsLayerId;
    this.layerList.push({ id: this.wmsLayerId, layerData: img_layer, type: "wmts" });
  },
  getGeoLayerChangeAlpha(res) {
    var std = [];
    for (var i in this.geoLayer) {
      if (this.geoLayer[i] != res.tab) {
        std.push(this.geoLayer[i])
      }
    }
    this.geoLayer = [];
    this.geoLayer = std;
    var imageLayers = window.Viewer.imageryLayers._layers;
    for (var i in imageLayers) {
      if (imageLayers[i].id == this.wmsLayerId) {

        window.Viewer.imageryLayers.remove(imageLayers[i])
      }
    }
    for (var i in this.layerList) {
      if (this.layerList[i].id == this.wmsLayerId) {
        this.layerList.splice(i, 1)
      }
    }
    if (this.geoLayer.length > 0) {
      this.addGeoServerMmsLayers(this.geoLayer, this.geoUrl)
    }
    this.setAddGeoWmsLayer(res);
    for (var i in this.layerList) {
      if (this.layerList[i].id == res.id) {
        return {
          id: i,
          layer: this.layerList[i]
        };
        break;
      }
    }
  },
  getFeatureInfo(html) {
    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;