/** * 超图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 请求参数中的
ol对接各大地图算法备份
本文档介绍了如何使用OpenLayers库对接不同的地图服务,包括超图PGIS图层创建类和分辨率与比例尺转换的算法。同时展示了如何配置SuperMap iServer TileImage图层源,包括设置服务地址、切片版本、请求参数等。
摘要由CSDN通过智能技术生成