ol对接各大地图算法备份

本文档介绍了如何使用OpenLayers库对接不同的地图服务,包括超图PGIS图层创建类和分辨率与比例尺转换的算法。同时展示了如何配置SuperMap iServer TileImage图层源,包括设置服务地址、切片版本、请求参数等。
摘要由CSDN通过智能技术生成
/**
 *  超图PGIS图层创建类
 *
 *  @example
 *  /src/utils/openlayers 实例化参数
 *       {
 *         type: 'SuperMap',
 *          path: 'http://53.1.238.17/iserver/services/map-pgisvec/rest/maps/pgisvecv1',
 *          center: [117.2794, 31.9265],
 *          zoom: 10,
 *          layerCreator(path, view, TileLayer) {
 *            return new TileLayer({
 *              source: new TileSuperMapRest({
 *                url: path
 *              }),
 *              projection: 'EPSG:4326'
 *            })
 *          }
 *        }
 */




var Unit = {
  /**  米 */
  METER: 'METER',

  /**  千米 */
  KILOMETER: 'KILOMETER',

  /**  英里 */
  MILE: 'MILE',

  /**  码 */
  YARD: 'YARD',

  /**  度 */
  DEGREE: 'DEGREE',

  /**  毫米 */
  MILLIMETER: 'MILLIMETER',

  /**  厘米 */
  CENTIMETER: 'CENTIMETER',

  /**  英寸 */
  INCH: 'INCH',

  /**  分米 */
  DECIMETER: 'DECIMETER',

  /**  英尺 */
  FOOT: 'FOOT',

  /**  秒 */
  SECOND: 'SECOND',

  /**  分 */
  MINUTE: 'MINUTE',

  /**  弧度 */
  RADIAN: 'RADIAN'
};
/**
 * @enum ServerType
 * @memberOf SuperMap
 * @description 服务器类型
 * @type {string}
 */

var ServerType = {
  /** ISERVER */
  ISERVER: 'ISERVER',

  /** IPORTAL */
  IPORTAL: 'IPORTAL',

  /** ONLINE */
  ONLINE: 'ONLINE'
};
/**
 * @function ol.supermap.Util.resolutionToScale
 * @description 通过分辨率计算比例尺。
 * @param {number} resolution - 分辨率。
 * @param {number} dpi - 屏幕分辨率。
 * @param {string} mapUnit - 地图单位。
 * @returns {number} 比例尺。
 */

function resolutionToScale(resolution, dpi, mapUnit) {
  var inchPerMeter = 1 / 0.0254; // 地球半径。

  var meterPerMapUnit = getMeterPerMapUnit(mapUnit);
  var scale = resolution * dpi * inchPerMeter * meterPerMapUnit;
  scale = 1 / scale;
  return scale;
}
/**
 * @function ol.supermap.Util.scaleToResolution
 * @description 通过比例尺计算分辨率。
 * @param {number} scale - 比例尺。
 * @param {number} dpi - 屏幕分辨率。
 * @param {string} mapUnit - 地图单位。
 * @returns {number} 分辨率。
 */


function scaleToResolution(scale, dpi, mapUnit) {
  var inchPerMeter = 1 / 0.0254;
  var meterPerMapUnitValue = this.getMeterPerMapUnit(mapUnit);
  var resolution = scale * dpi * inchPerMeter * meterPerMapUnitValue;
  resolution = 1 / resolution;
  return resolution;
}
/**
 * @private
 * @function ol.supermap.Util.getMeterPerMapUnit
 * @description 获取每地图单位多少米。
 * @param {string} mapUnit - 地图单位。
 * @returns {number} 返回每地图单位多少米。
 */


function getMeterPerMapUnit(mapUnit) {
  var earchRadiusInMeters = 6378137;
  var meterPerMapUnit;

  if (mapUnit === Unit.METER) {
    meterPerMapUnit = 1;
  } else if (mapUnit === Unit.DEGREE) {
    // 每度表示多少米。
    meterPerMapUnit = Math.PI * 2 * earchRadiusInMeters / 360;
  } else if (mapUnit === Unit.KILOMETER) {
    meterPerMapUnit = 1.0E-3;
  } else if (mapUnit === Unit.INCH) {
    meterPerMapUnit = 1 / 2.5399999918E-2;
  } else if (mapUnit === Unit.FOOT) {
    meterPerMapUnit = 0.3048;
  } else {
    return meterPerMapUnit;
  }

  return meterPerMapUnit;
}
/**
 * @class ol.source.TileSuperMapRest
 * @category iServer Map
 * @classdesc SuperMap iServer TileImage 图层源。
 * @param {Object} options - 参数。
 * @param {string} options.url - 服务地址。
 * @param {(ol.tilegrid.TileGrid|ol.tilegrid.TileGrid)} [options.tileGrid] - 瓦片网格对象。当不指定时,会通过 options.extent 或投影范围生成。
 * @param {SuperMap.ServerType} [options.serverType=ServerType.ISERVER] - 服务类型 iServer|iPortal|online。
 * @param {boolean} [options.redirect = false] - 是否重定向。
 * @param {boolean} [options.transparent = true] - 瓦片是否透明。
 * @param {boolean} [options.cacheEnabled = true] - 是否使用服务端的缓存。
 * @param {Object} [options.prjCoordSys] - 请求的地图的坐标参考系统。当此参数设置的坐标系统不同于地图的原有坐标系统时, 系统会进行动态投影,并返回动态投影后的地图瓦片。例如:{'epsgCode':3857}。
 * @param {string} [options.layersID] - 获取进行切片的地图图层 ID,即指定进行地图切片的图层,可以是临时图层集,也可以是当前地图中图层的组合。
 * @param {boolean} [options.clipRegionEnabled = false] - 是否只地图只显示该区域覆盖的部分。true 表示地图只显示该区域覆盖的部分。
 * @param {(ol.geom.Geometry|ol.geom.Geometry)} [options.clipRegion] - 地图显示裁剪的区域。是一个面对象,当 clipRegionEnabled = true 时有效,即地图只显示该区域覆盖的部分。
 * @param {boolean} [options.overlapDisplayed = false] - 地图对象在同一范围内时,是否重叠显示。如果为 true,则同一范围内的对象会直接压盖;如果为 false 则通过 overlapDisplayedOptions 控制对象不压盖显示。
 * @param {SuperMap.OverlapDisplayedOptions} [options.overlapDisplayedOptions] - 避免地图对象压盖显示的过滤选项,当 overlapDisplayed 为 false 时有效,用来增强对地图对象压盖时的处理。
 * @param {string} [options.tileversion] - 切片版本名称,_cache 为 true 时有效。
 * @param {string} [options.tileProxy] - 代理地址。
 * @param {string} [options.format = 'png'] - 瓦片表述类型,支持 'png' 、'bmp' 、'jpg' 和 'gif' 四种表述类型。
 * @extends {ol.source.TileImage}
 */


var TileSuperMapRest_TileSuperMapRest = /*#__PURE__*/function (_TileImage) {
  _inherits(TileSuperMapRest, _TileImage);

  var _super = _createSuper(TileSuperMapRest);

  // eslint-disable-next-line
  function TileSuperMapRest(options) {
    var _this;

    _classCallCheck(this, TileSuperMapRest);

    options = options || {};

    if (options.url === undefined) {
      return _possibleConstructorReturn(_this);
    }

    options.format = options.format ? options.format : 'png';
    var layerUrl = options.url + '/tileImage.' + options.format + '?';
    options.serverType = options.serverType || ServerType.ISERVER;
    _this = _super.call(this, {
      attributions: options.attributions,
      cacheSize: options.cacheSize,
      crossOrigin: options.crossOrigin,
      logo: options.logo,
      opaque: options.opaque,
      projection: options.projection,
      reprojectionErrorThreshold: options.reprojectionErrorThreshold,
      state: options.state,
      tileClass: options.tileClass,
      tileGrid: options.tileGrid,
      tileLoadFunction: options.tileLoadFunction,
      tilePixelRatio: options.tilePixelRatio,
      tileUrlFunction: tileUrlFunction,
      url: options.url,
      urls: options.urls,
      wrapX: options.wrapX !== undefined ? options.wrapX : false,
      cacheEnabled: options.cacheEnabled,
      layersID: options.layersID
    });

    if (options.tileProxy) {
      _this.tileProxy = options.tileProxy;
    }

    _this.options = options;
    _this._url = options.url; // 当前切片在切片集中的index

    _this.tileSetsIndex = -1;
    _this.tempIndex = -1;

    var me = _assertThisInitialized(_this);
    /**
     * @function  ol.source.TileSuperMapRest.prototype.getAllRequestParams
     * @description 获取全部请求参数。
     */


    function getAllRequestParams() {
      var me = this,
          params = {};
      params.redirect = options.redirect !== undefined ? options.redirect : false; // 切片是否透明

      params.transparent = options.transparent !== undefined ? options.transparent : true;
      params.cacheEnabled = !(options.cacheEnabled === false); // 存储一个cacheEnabled参数

      me.cacheEnabled = params.cacheEnabled;
      params._cache = params.cacheEnabled; // 设置切片原点

      if (this.origin) {
        params.origin = JSON.stringify({
          x: this.origin[0],
          y: this.origin[1]
        });
      }

      if (options.prjCoordSys) {
        params.prjCoordSys = JSON.stringify(options.prjCoordSys);
      }

      if (options.layersID) {
        params.layersID = options.layersID.toString();
      }

      if (!options.overlapDisplayed) {
        params.overlapDisplayed = false;

        if (options.overlapDisplayedOptions) {
          params.overlapDisplayedOptions = me.overlapDisplayedOptions.toString();
        }
      } else {
        params.overlapDisplayed = true;
      }

      if (options.cacheEnabled && options.tileversion) {
        params.tileversion = options.tileversion.toString();
      }

      return params;
    }
    /**
     * @function  ol.source.TileSuperMapRest.prototype.getFullRequestUrl
     * @description 获取完整的请求地址。
     */


    function getFullRequestUrl() {
      if (this._paramsChanged) {
        this._layerUrl = createLayerUrl.call(this);
        this._paramsChanged = false;
      }

      return this._layerUrl || createLayerUrl.call(this);
    }
    /**
     * @function  ol.source.TileSuperMapRest.prototype.createLayerUrl
     * @description 获取新建图层地址。
     */


    function createLayerUrl() {
      this._layerUrl = layerUrl + encodeURI(getRequestParamString.call(this));
      return this._layerUrl;
    }
    /**
     * @function  ol.source.TileSuperMapRest.prototype.getRequestParamString
     * @description 获取请求参数的字符串。
     */


    function getRequestParamString() {
      this.requestParams = this.requestParams || getAllRequestParams.call(this);
      var params = [];

      for (var key in this.requestParams) {
        params.push(key + '=' + this.requestParams[key]);
      }

      return params.join('&');
    }

    function tileUrlFunction(tileCoord, pixelRatio, projection) {
      if (!me.tileGrid) {
        if (me.extent) {
          me.tileGrid = TileSuperMapRest.createTileGrid(options.extent);

          if (me.resolutions) {
            me.tileGrid.resolutions = me.resolutions;
          }
        } else {
          if (projection.getCode() === 'EPSG:3857') {
            me.tileGrid = TileSuperMapRest.createTileGrid([-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892]);
            me.extent = [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892];
          }

          if (projection.getCode() === 'EPSG:4326') {
            me.tileGrid = TileSuperMapRest.createTileGrid([-180, -90, 180, 90]);
            me.extent = [-180, -90, 180, 90];
          }
        }
      }

      me.origin = me.tileGrid.getOrigin(0);
      var z = tileCoord[0];
      var x = tileCoord[1];
      var y = -tileCoord[2] - 1;
      var resolution = me.tileGrid.getResolution(z);
      var dpi = 96;
      var unit = projection.getUnits();

      if (unit === 'degrees') {
        unit = Unit.DEGREE;
      }

      if (unit === 'm') {
        unit = Unit.METER;
      }

      var scale = resolutionToScale(resolution, dpi, unit);
      var tileSize = Object(ol_size["c" /* toSize */])(me.tileGrid.getTileSize(z, me.tmpSize));
      var layerUrl = getFullRequestUrl.call(me);
      var url = layerUrl + encodeURI('&x=' + x + '&y=' + y + '&width=' + tileSize[0] + '&height=' + tileSize[1] + '&scale=' + scale); // 支持代理

      if (me.tileProxy) {
        url = me.tileProxy + encodeURIComponent(url);
      }

      if (!me.cacheEnabled) {
        url += '&_t=' + new Date().getTime();
      }

      return url;
    }

    return _this;
  }
  /**
   * @function  ol.source.TileSuperMapRest.prototype.setTileSetsInfo
   * @description 设置瓦片集信息。
   * @param {Object} tileSets - 瓦片集合。
   */


  _createClass(TileSuperMapRest, [{
    key: "setTileSetsInfo",
    value: function setTileSetsInfo(tileSets) {
      this.tileSets = tileSets;

      if (Array.isArray(this.tileSets)) {
        this.tileSets = tileSets[0];
      }

      if (!this.tileSets) {
        return;
      }

      this.dispatchEvent({
        type: 'tilesetsinfoloaded',
        value: {
          tileVersions: this.tileSets.tileVersions
        }
      });
      this.changeTilesVersion();
    }
    /**
     * @function  ol.source.TileSuperMapRest.prototype.lastTilesVersion
     * @description 请求上一个版本切片,并重新绘制。
     */

  }, {
    key: "lastTilesVersion",
    value: function lastTilesVersion() {
      this.tempIndex = this.tileSetsIndex - 1;
      this.changeTilesVersion();
    }
    /**
     * @function  ol.source.TileSuperMapRest.prototype.nextTilesVersion
     * @description 请求下一个版本切片,并重新绘制。
     */

  }, {
    key: "nextTilesVersion",
    value: function nextTilesVersion() {
      this.tempIndex = this.tileSetsIndex + 1;
      this.changeTilesVersion();
    }
    /**
     * @function  ol.source.TileSuperMapRest.prototype.changeTilesVersion
     * @description 切换到某一版本的切片,并重绘。通过 this.tempIndex 保存需要切换的版本索引。
     */

  }, {
    key: "changeTilesVersion",
    value: function changeTilesVersion() {
      var me = this; // 切片版本集信息是否存在

      if (me.tileSets == null) {
        return;
      }

      if (me.tempIndex === me.tileSetsIndex || this.tempIndex < 0) {
        return;
      } // 检测index是否可用


      var tileVersions = me.tileSets.tileVersions;

      if (tileVersions && me.tempIndex < tileVersions.length && me.tempIndex >= 0) {
        var name = tileVersions[me.tempIndex].name;
        var result = me.mergeTileVersionParam(name);

        if (result) {
          me.tileSetsIndex = me.tempIndex;
          me.dispatchEvent({
            type: 'tileversionschanged',
            value: {
              tileVersion: tileVersions[me.tempIndex]
            }
          });
        }
      }
    }
    /**
     * @function  ol.source.TileSuperMapRest.prototype.updateCurrentTileSetsIndex
     * @description 更新当前切片集索引,目前主要提供给控件使用。
     * @param {number} index - 索引号。
     */

  }, {
    key: "updateCurrentTileSetsIndex",
    value: function updateCurrentTileSetsIndex(index) {
      this.tempIndex = index;
    }
    /**
     * @function  ol.source.TileSuperMapRest.prototype.mergeTileVersionParam
     * @description 更改 URL 请求参数中的
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值