yjdp-web/src/utils/wmtsManager.ts

import axios from 'axios';
import { getMapProduct, getMapProduct2 } from "@/api/globalMap";
class WMTSManager {
  constructor(map) {
    this.map = map;
    this.wmtslayergroup = null;
    this.wmtsgroupid = 'wmtsgroup';
    this.mapLayerIds = [];
    this.currentMapLayerIds = [];
    this.index = 0; //记录调用次数
  }
  init() {
    this.createWmtsLayerGroups();
  }
  createWmtsLayerGroups() {
    const that = this;
    // let base_wmts_source = {
    //   type: "geojson",
    //   data: { type: "FeatureCollection", features: [] },
    // };
    // let layer = [
    //   {
    //     id: "wmtslayer",
    //     type: "circle",
    //     source: base_wmts_source,
    //   },
    // ];
    if (!that.wmtslayergroup) {
      // that.map.on("style.load", () => {

      // });
      // 新建图层组
      that.wmtslayergroup = new GeoGlobe.LayerGroup(that.map);
      // 添加指定图层到图层组中
      //that.wmtslayergroup.addGroup(that.map, that.wmtsgroupid, layer);
    } else {
      ElMessage({ message: '图层组已存在!', type: 'error' });
    }
  }
  addWmtsLayers(wmtsInfo, callback, isSpecialLayer) {
    const that = this;
    if (!wmtsInfo[0]) {
      ElMessage({ message: '请传入正确的参数!', type: 'error' });
      return false;
    }
    const val = wmtsInfo[that.index];
    if (val) {
      let obj = {};
      if (val.REQUEST) {
        obj = {
          REQUEST: val.REQUEST
        };
      }
      getMapProduct(val.serviceCode, obj).then((value) => {
        const format = new GeoGlobe.Format.WMTSCapabilities();
        //为了解决BoundingBox节点或者WGS84BoundingBox中存在“NaN NaN”的情况，导致format.read解析时报错，出现这个问题时，将坐标改为广东省范围
        if (value.indexOf('<ows:LowerCorner>NaN NaN</ows:LowerCorner>') >= 0 || value.indexOf('<ows:UpperCorner>NaN NaN</ows:UpperCorner>') >= 0) {
          value = value.replaceAll('<ows:LowerCorner>NaN NaN</ows:LowerCorner>', '<ows:LowerCorner>109.61 20</ows:LowerCorner>');
          value = value.replaceAll('<ows:UpperCorner>NaN NaN</ows:UpperCorner>', '<ows:UpperCorner>117.39 25.51</ows:UpperCorner>');
        } else if (value.indexOf('<ows:LowerCorner> </ows:LowerCorner>') >= 0 || value.indexOf('<ows:UpperCorner> </ows:UpperCorner>') >= 0) {
          value = value.replaceAll('<ows:LowerCorner> </ows:LowerCorner>', '<ows:LowerCorner>109.61 20</ows:LowerCorner>');
          value = value.replaceAll('<ows:UpperCorner> </ows:UpperCorner>', '<ows:UpperCorner>117.39 25.51</ows:UpperCorner>');
        }
        const json = format.read(value);
        const layerOptions = that.WMTSMatchAnalyzer(json, val.layerExtent, val.wmtsLoadParam);
        // window.location.origin +
        const serviceUrl = import.meta.env.VITE_APP_BASE_API + '/api/oneShare/proxyHandler/mm/' + val.serviceCode;
        const layerInf = that.createLayer(serviceUrl, layerOptions[0], isSpecialLayer);
        that.map.addSource(layerInf.source.id, layerInf.source);
        that.wmtslayergroup.addLayerToGroup(that.map, that.wmtsgroupid, layerInf.layer);
        let maxt = '';
        let extent = '';
        if (layerInf.layer.metadata[0]) {
          extent = layerInf.layer.metadata[0].maxExtent.split(',');
          maxt = GeoGlobe.LngLatBounds.fromString(layer.metadata[0].maxExtent);
        } else if (layerInf.layer.metadata.maxExtent) {
          extent = layerInf.layer.metadata.maxExtent.split(',');
          maxt = GeoGlobe.LngLatBounds.fromString(layerInf.layer.metadata.maxExtent);
        } else if (layerInf.layer.metadata.tileFullExtent) {
          extent = layerInf.layer.metadata.tileFullExtent.split(',');
          maxt = GeoGlobe.LngLatBounds.fromString(layerInf.layer.metadata.tileFullExtent);
        }
        if (val.layerExtent) {
          that.map.fitBounds([
            [val.layerExtent.left, val.layerExtent.bottom],
            [val.layerExtent.right, val.layerExtent.top]
          ]);
        } else {
          if (that.map.getZoom() < layerInf.layer.minzoom || that.map.getZoom() > layerInf.layer.maxzoom) {
            that.map.setZoom(layerInf.layer.minzoom);
          }
          // 根据地图返回的范围设置地图中心
          // if (maxt) {
          //   //如果当前坐标单位为经纬度，判断范围中的坐标是否在有效范围内
          //   if (that.map.units === 'degrees') {
          //     if (
          //       that.validLonCoord(maxt.getEast()) &&
          //       that.validLonCoord(maxt.getWest()) &&
          //       that.validLatCoord(maxt.getSouth()) &&
          //       that.validLatCoord(maxt.getNorth())
          //     ) {
          //       var centerPoint = maxt.getCenterLonLat();
          //       that.map.setCenter(centerPoint);
          //     }
          //   } else {
          //     var centerPoint = maxt.getCenterLonLat();
          //     that.map.setCenter(centerPoint);
          //   }
          //   var centerPoint = maxt.getCenterLonLat();
          //   that.map.setCenter(centerPoint);
          // }
        }
        that.mapLayerIds.push(layerInf.layer.id);
        that.currentMapLayerIds.push(layerInf.layer.id);
        that.index++;
        that.addWmtsLayers(wmtsInfo, callback);
      });
    } else {
      that.index = 0;
      callback(true, that.currentMapLayerIds);
      that.currentMapLayerIds = [];
    }
  }
  addWmtsLayers2(wmtsInfo, callback, isSpecialLayer) {
    const that = this;
    if (!wmtsInfo[0]) {
      ElMessage({ message: '请传入正确的参数!', type: 'error' });
      return false;
    }
    const val = wmtsInfo[that.index];
    if (val) {
      getMapProduct2(val).then((value) => {
        const format = new GeoGlobe.Format.WMTSCapabilities();
        //为了解决BoundingBox节点或者WGS84BoundingBox中存在“NaN NaN”的情况，导致format.read解析时报错，出现这个问题时，将坐标改为广东省范围
        if (value.indexOf('<ows:LowerCorner>NaN NaN</ows:LowerCorner>') >= 0 || value.indexOf('<ows:UpperCorner>NaN NaN</ows:UpperCorner>') >= 0) {
          value = value.replaceAll('<ows:LowerCorner>NaN NaN</ows:LowerCorner>', '<ows:LowerCorner>109.61 20</ows:LowerCorner>');
          value = value.replaceAll('<ows:UpperCorner>NaN NaN</ows:UpperCorner>', '<ows:UpperCorner>117.39 25.51</ows:UpperCorner>');
        } else if (value.indexOf('<ows:LowerCorner> </ows:LowerCorner>') >= 0 || value.indexOf('<ows:UpperCorner> </ows:UpperCorner>') >= 0) {
          value = value.replaceAll('<ows:LowerCorner> </ows:LowerCorner>', '<ows:LowerCorner>109.61 20</ows:LowerCorner>');
          value = value.replaceAll('<ows:UpperCorner> </ows:UpperCorner>', '<ows:UpperCorner>117.39 25.51</ows:UpperCorner>');
        }
        const json = format.read(value);
        const layerOptions = that.WMTSMatchAnalyzer(json, val.layerExtent, val.wmtsLoadParam);
        const serviceUrl = window.location.origin + import.meta.env.VITE_APP_BASE_API + '/gmap/proxyHandler?paasId=' + val.paasId + "&paasToken=" + val.paasToken + "&serviceCode=" + val.serviceCode + "&url=" + val.url;
        const layerInf = that.createLayer(serviceUrl, layerOptions[0], isSpecialLayer);
        that.map.addSource(layerInf.source.id, layerInf.source);
        that.wmtslayergroup.addLayerToGroup(that.map, that.wmtsgroupid, layerInf.layer);
        let maxt = '';
        let extent = '';
        if (layerInf.layer.metadata[0]) {
          extent = layerInf.layer.metadata[0].maxExtent.split(',');
          maxt = GeoGlobe.LngLatBounds.fromString(layer.metadata[0].maxExtent);
        } else if (layerInf.layer.metadata.maxExtent) {
          extent = layerInf.layer.metadata.maxExtent.split(',');
          maxt = GeoGlobe.LngLatBounds.fromString(layerInf.layer.metadata.maxExtent);
        } else if (layerInf.layer.metadata.tileFullExtent) {
          extent = layerInf.layer.metadata.tileFullExtent.split(',');
          maxt = GeoGlobe.LngLatBounds.fromString(layerInf.layer.metadata.tileFullExtent);
        }
        if (val.layerExtent) {
          that.map.fitBounds([
            [val.layerExtent.left, val.layerExtent.bottom],
            [val.layerExtent.right, val.layerExtent.top]
          ]);
        } else {
          if (that.map.getZoom() < layerInf.layer.minzoom || that.map.getZoom() > layerInf.layer.maxzoom) {
            that.map.setZoom(layerInf.layer.minzoom);
          }
          // 根据地图返回的范围设置地图中心
          // if (maxt) {
          //   //如果当前坐标单位为经纬度，判断范围中的坐标是否在有效范围内
          //   if (that.map.units === 'degrees') {
          //     if (
          //       that.validLonCoord(maxt.getEast()) &&
          //       that.validLonCoord(maxt.getWest()) &&
          //       that.validLatCoord(maxt.getSouth()) &&
          //       that.validLatCoord(maxt.getNorth())
          //     ) {
          //       var centerPoint = maxt.getCenterLonLat();
          //       that.map.setCenter(centerPoint);
          //     }
          //   } else {
          //     var centerPoint = maxt.getCenterLonLat();
          //     that.map.setCenter(centerPoint);
          //   }
          //   var centerPoint = maxt.getCenterLonLat();
          //   that.map.setCenter(centerPoint);
          // }
        }
        that.mapLayerIds.push(layerInf.layer.id);
        that.currentMapLayerIds.push(layerInf.layer.id);
        that.index++;
        that.addWmtsLayers(wmtsInfo, callback);
      });
    } else {
      that.index = 0;
      callback(true, that.currentMapLayerIds);
      that.currentMapLayerIds = [];
    }
  }

  /**
   * 验证经度坐标值是否为有效值范围内
   * @param {number} coord
   */
  validLonCoord(coord) {
    return coord >= -180 && coord <= 180;
  }

  /**
   * 验证纬度坐标值是否为有效值范围内
   * @param {number} coord
   * @returns
   */
  validLatCoord(coord) {
    return coord >= -90 && coord <= 90;
  }

  WMTSMatchAnalyzer(json, layerExtent, wmtsLoadParam) {
    const layers = json.contents.layers;
    const tileMatrixSets = json.contents.tileMatrixSets;
    const layerArr = [];
    for (const data of layers) {
      const layerObj = {};
      layerObj['name'] = data.identifier;
      layerObj['type'] = 'WMTS';
      layerObj['alias'] = data.identifier;
      layerObj['opacity'] = 1;
      layerObj['visibility'] = true;
      layerObj['formats'] = data.formats;
      if (wmtsLoadParam && wmtsLoadParam.format && wmtsLoadParam.layer == data.identifier) {
        layerObj['format'] = wmtsLoadParam.format;
      } else {
        layerObj['format'] = data.formats[0];
      }

      if (wmtsLoadParam && wmtsLoadParam.style && wmtsLoadParam.layer == data.identifier) {
        layerObj['style'] = wmtsLoadParam.style;
      } else {
        layerObj['style'] = data.styles[0].identifier;
      }

      if (layerExtent) {
        layerObj['tileFullExtent'] = layerExtent.left + ',' + layerExtent.bottom + ',' + layerExtent.right + ',' + layerExtent.top;
      } else if (data.bounds) {
        layerObj['tileFullExtent'] =
          data.bounds.getWest() + ',' + data.bounds.getSouth() + ',' + data.bounds.getEast() + ',' + data.bounds.getNorth();
      }

      if (wmtsLoadParam && wmtsLoadParam.tileMatrixset && wmtsLoadParam.layer == data.identifier) {
        layerObj['matrixSet'] = wmtsLoadParam.tileMatrixset;
      } else {
        layerObj['matrixSet'] = data.tileMatrixSetLinks[0].tileMatrixSet;
      }

      const matrixIds = [];
      for (const d of tileMatrixSets[layerObj.matrixSet].matrixIds) {
        const matrixid = {};
        matrixid.identifier = d.identifier;
        matrixid.scaleDenominator = d.scaleDenominator;
        matrixid.tileHeight = d.tileHeight;
        matrixid.tileWidth = d.tileWidth;
        matrixIds.push(matrixid);
      }
      layerObj['matrixIds'] = matrixIds;
      layerArr.push(layerObj);
    }
    return layerArr;
  }

  createLayer(url, options, isSpecialLayer) {
    const layerInf = {};
    if (url.indexOf('?') > -1) {
      url =
        url +
        '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
        options.name +
        '&STYLE=' +
        options.style +
        '&TILEMATRIXSET=' +
        options.matrixSet +
        '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=' +
        options.formats[0];
    } else {
      url =
        url +
        '?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' +
        options.name +
        '&STYLE=' +
        options.style +
        '&TILEMATRIXSET=' +
        options.matrixSet +
        '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=' +
        options.formats[0];
    }
    // let index = url.lastIndexOf("?")
    // var resolves = url.substring(index + 1, url.length);
    // if(resolves.indexOf('token')>-1||resolves.indexOf('TOKEN')>-1){

    // }
    const matrixIds = options.matrixIds;
    const minzoom = matrixIds[0].identifier;
    const maxzoom = matrixIds[matrixIds.length - 1].identifier;
    const wmtsSource = new GeoGlobe.Source.RasterSource({
      id:
        'sourceId_' +
        options.name +
        (isSpecialLayer ? '_isSpecialLayer' : '') +
        '_' +
        // Date.parse(new Date()),
        this.guid(),
      type: 'raster',
      url: [url],
      minzoom: parseInt(minzoom),
      maxzoom: parseInt(maxzoom) + 1,
      // tileSize: 256
      tileSize: 1024
    });
    wmtsSource['minzoom'] = parseInt(minzoom);
    wmtsSource['maxzoom'] = parseInt(maxzoom) + 1;
    let visibility = options.visibility;
    if (options.cityName && parseInt(minzoom) > 17) {
      visibility = 'false';
    }
    const wmtsLayer = new GeoGlobe.Layer.RasterLayer({
      id: 'layerId_' + options.name + '_' + this.guid(),
      type: 'raster',
      source: wmtsSource.id,
      name: options.name,
      metadata: options,
      minzoom: parseInt(minzoom),
      maxzoom: parseInt(maxzoom) + 2,
      paint: {
        'raster-opacity': 1
      },
      layout: {
        visibility: visibility == true || visibility == 'true' ? 'visible' : 'none'
      }
    });
    layerInf['layer'] = wmtsLayer;
    layerInf['source'] = wmtsSource;
    return layerInf;
  }

  S4() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }

  guid() {
    return this.S4() + this.S4() + '-' + this.S4() + '-' + this.S4() + '-' + this.S4() + '-' + this.S4() + this.S4() + this.S4();
  }

  removeWmtsLayers() {
    if (this.mapLayerIds) {
      for (const val of this.mapLayerIds) {
        const layer = this.map.getLayer(val);
        if (layer) {
          this.map.removeLayer(layer.id);
          if (this.map.getSource(layer.source)) {
            this.map.removeSource(layer.source);
          }
        }
      }
    }
  }
}

export default WMTSManager;