Skip to content

Commit 54cbd33

Browse files
songyumengsongyumeng
committed
【fix】ol.source.ImageSuperMapRest以全图方式出图 review by luox
1 parent 902b429 commit 54cbd33

File tree

2 files changed

+145
-170
lines changed

2 files changed

+145
-170
lines changed

‎src/openlayers/mapping/ImageSuperMapRest.js

Lines changed: 128 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -6,61 +6,87 @@ import { Unit } from '@supermap/iclient-common/REST';
66
import { Util as CommonUtil } from '@supermap/iclient-common/commontypes/Util';
77
import { ServerGeometry } from '@supermap/iclient-common/iServer/ServerGeometry';
88
import { Util } from '../core/Util';
9-
import TileImage from 'ol/source/TileImage';
9+
import ImageSource, { defaultImageLoadFunction } from 'ol/source/Image';
10+
import ImageWrapper from 'ol/Image';
1011
import Geometry from 'ol/geom/Geometry';
1112
import GeoJSON from 'ol/format/GeoJSON';
12-
import * as olSize from 'ol/size';
13-
import * as olTilegrid from 'ol/tilegrid';
14-
import TileGrid from 'ol/tilegrid/TileGrid';
13+
import { containsExtent, getCenter, getHeight, getWidth, getForViewAndSize } from 'ol/extent';
1514

1615
/**
1716
* @class ol.source.ImageSuperMapRest
1817
* @category iServer Map Tile
1918
* @classdesc SuperMap iServer Image 图层源。
2019
* @param {Object} options - 参数。
21-
* @param {string} options.url - 服务地址,例如: http://{ip}:{port}/iserver/services/map-world/rest/maps/World。
22-
* @param {ol.tilegrid.TileGrid} [options.tileGrid] - 瓦片网格对象。
20+
* @param {string} options.url - 地图服务地址,例如: http://{ip}:{port}/iserver/services/map-world/rest/maps/World。
21+
* @param {SuperMap.ServerType} [options.serverType=SuperMap.ServerType.ISERVER] - 服务类型 ISERVER|IPORTAL|ONLINE。
2322
* @param {boolean} [options.redirect=false] - 是否重定向。
2423
* @param {boolean} [options.transparent=true] - 瓦片是否透明。
24+
* @param {boolean} [options.antialias=false] - 是否反走样地图。
2525
* @param {boolean} [options.cacheEnabled=true] - 是否使用服务端的缓存，true 表示使用服务端的缓存。
2626
* @param {Object} [options.prjCoordSys] - 请求的地图的坐标参考系统。当此参数设置的坐标系统不同于地图的原有坐标系统时， 系统会进行动态投影，并返回动态投影后的地图瓦片。例如：{"epsgCode":3857}。
2727
* @param {string} [options.layersID] - 获取进行切片的地图图层 ID，即指定进行地图切片的图层，可以是临时图层集，也可以是当前地图中图层的组合。
2828
* @param {boolean} [options.clipRegionEnabled = false] - 是否地图只显示该区域覆盖的部分。true 表示地图只显示该区域覆盖的部分。
29-
* @param {ol.geom.Geometry} [options.clipRegion] - 地图显示裁剪的区域。是一个面对象，当 clipRegionEnabled = true 时有效，即地图只显示该区域覆盖的部分。
29+
* @param {(ol/geom/Geometry|ol/geom/Geometry)} [options.clipRegion] - 地图显示裁剪的区域。是一个面对象，当 clipRegionEnabled = true 时有效，即地图只显示该区域覆盖的部分。
3030
* @param {boolean} [options.overlapDisplayed=false] - 地图对象在同一范围内时，是否重叠显示。如果为 true，则同一范围内的对象会直接压盖；如果为 false 则通过 overlapDisplayedOptions 控制对象不压盖显示。
31-
* @param {OverlapDisplayedOptions} [options.overlapDisplayedOptions] - 避免地图对象压盖显示的过滤选项，当 overlapDisplayed 为 false 时有效，用来增强对地图对象压盖时的处理。
31+
* @param {SuperMap.OverlapDisplayedOptions} [options.overlapDisplayedOptions] - 避免地图对象压盖显示的过滤选项，当 overlapDisplayed 为 false 时有效，用来增强对地图对象压盖时的处理。
32+
* @param {boolean} [options.markerAngleFixed=false] - 指定点状符号的角度是否固定。
33+
* @param {boolean} [options.textAngleFixed=false] - 文本角度是否固定。
34+
* @param {boolean} [options.textOrientationFixed=false] - 文本朝向是否固定。
35+
* @param {boolean} [options.paintBackground=false] - 是否绘制地图背景。
36+
* @param {boolean} [options.maxVisibleTextSize] - 文本的最大可见尺寸，单位为像素。
37+
* @param {boolean} [options.maxVisibleVertex] - 最大几何对象可见节点数。 如果几何对象的节点数超过指定的个数，则超过的那部分节点不显示。
38+
* @param {boolean} [options.minVisibleTextSize] - 文本的最小可见尺寸，单位为像素。
3239
* @param {string} [options.tileversion] - 切片版本名称，_cache 为 true 时有效。
33-
* @param {string} [options.tileProxy] - 服务代理地址。
34-
* @param {(NDVIParameter|HillshadeParameter)} [options.rasterfunction] - 栅格分析参数。
40+
* @param {string} [options.tileProxy] - 代理地址。
41+
* @param {(SuperMap.NDVIParameter|SuperMap.HillshadeParameter)} [options.rasterfunction] - 栅格分析参数。
3542
* @param {string} [options.format = 'png'] - 瓦片表述类型，支持 "png" 、"webp"、"bmp" 、"jpg"、 "gif" 等图片类型。
43+
* @param {Function} [options.imageLoadFunction] - 加载图片的方法。默认为function(imageTile, src) {imageTile.getImage().src = src;};
44+
* @param {string} [options.ratio=1.5] - 请求图片大小比例. 1 表示请求图片大小和地图视窗范围一致, 2 表示请求图片大小是地图视窗范围的2倍，以此类推。
3645
* @extends {ol.source.TileImage}
3746
*/
38-
export class ImageSuperMapRest extends TileImage {
47+
export class ImageSuperMapRest extends ImageSource {
3948
constructor(options) {
40-
options.attributions =
41-
options.attributions || "Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <a href='https://iclient.supermap.io/'>© SuperMap iClient</a>"
49+
super({
50+
attributions: options.attributions,
51+
imageSmoothing: options.imageSmoothing,
52+
projection: options.projection,
53+
resolutions: options.resolutions
54+
});
55+
if (options.url === undefined) {
56+
return;
57+
}
58+
this.imageLoadFunction_ =
59+
options.imageLoadFunction !== undefined ? options.imageLoadFunction : defaultImageLoadFunction;
60+
this._image = null;
61+
this.renderedRevision_ = 0;
62+
this._crossOrigin = options.crossOrigin !== undefined ? options.crossOrigin : null;
63+
this._url = options.url;
64+
this.ratio_ = options.ratio !== undefined ? options.ratio : 1.5;
4265

43-
options.format = options.format ? options.format : 'png'
44-
var layerUrl = CommonUtil.urlPathAppend(options.url, "image." + options.format);
66+
options.attributions =
67+
options.attributions ||
68+
"Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <a href='https://iclient.supermap.io/'>© SuperMap iClient</a>";
4569

70+
options.format = options.format ? options.format : 'png';
71+
this._layerUrl = CommonUtil.urlPathAppend(options.url, 'image.' + options.format);
4672
//为url添加安全认证信息片段
47-
layerUrl = SecurityManager.appendCredential(layerUrl);
73+
this._layerUrl = SecurityManager.appendCredential(this._layerUrl);
4874

4975
const params = {};
5076
//切片是否透明
51-
var transparent = options.transparent !== undefined ? options.transparent : true;
77+
const transparent = options.transparent !== undefined ? options.transparent : true;
5278
params['transparent'] = transparent;
5379

5480
//是否使用缓存吗，默认为true
55-
var cacheEnabled = options.cacheEnabled !== undefined ? options.cacheEnabled : true;
81+
const cacheEnabled = options.cacheEnabled !== undefined ? options.cacheEnabled : true;
5682
params['cacheEnabled'] = cacheEnabled;
5783

5884
//如果有layersID，则是在使用专题图
5985
if (options.layersID !== undefined) {
6086
params['layersID'] = options.layersID;
6187
}
6288
//是否重定向,默认为false
63-
var redirect = false;
89+
let redirect = false;
6490
if (options.redirect !== undefined) {
6591
redirect = options.redirect;
6692
}
@@ -86,117 +112,107 @@ export class ImageSuperMapRest extends TileImage {
86112
if (options.rasterfunction) {
87113
params['rasterfunction'] = JSON.stringify(options.rasterfunction);
88114
}
89-
layerUrl = CommonUtil.urlAppend(encodeURI(layerUrl), CommonUtil.getParameterString(params));
90-
super({
91-
attributions: options.attributions,
92-
cacheSize: options.cacheSize,
93-
crossOrigin: options.crossOrigin,
94-
logo: Util.getOlVersion() === '4' ? options.logo : null,
95-
opaque: options.opaque,
96-
projection: options.projection,
97-
reprojectionErrorThreshold: options.reprojectionErrorThreshold,
98-
state: options.state,
99-
tileClass: options.tileClass,
100-
tileGrid: options.tileGrid,
101-
tileLoadFunction: options.tileLoadFunction,
102-
tilePixelRatio: options.tilePixelRatio,
103-
tileUrlFunction: tileUrlFunction,
104-
wrapX: options.wrapX !== undefined ? options.wrapX : false,
105-
cacheEnabled: options.cacheEnabled,
106-
layersID: options.layersID
107-
});
115+
//是否反走样地图,默认为false
116+
if (options.antialias !== undefined) {
117+
params['antialias'] = options.antialias;
118+
}
119+
if (options.markerAngleFixed !== undefined) {
120+
params['markerAngleFixed'] = options.markerAngleFixed;
121+
}
122+
if (options.textAngleFixed !== undefined) {
123+
params['textAngleFixed'] = options.textAngleFixed;
124+
}
125+
if (options.textOrientationFixed !== undefined) {
126+
params['textOrientationFixed'] = options.textOrientationFixed;
127+
}
128+
if (options.paintBackground !== undefined) {
129+
params['paintBackground'] = options.paintBackground;
130+
}
131+
if (!isNaN(options.maxVisibleTextSize)) {
132+
params['maxVisibleTextSize'] = +options.maxVisibleTextSize;
133+
}
134+
if (!isNaN(options.minVisibleTextSize)) {
135+
params['maxVisibleTextSize'] = +options.minVisibleTextSize;
136+
}
137+
if (!isNaN(options.maxVisibleVertex)) {
138+
params['maxVisibleVertex'] = Math.round(+options.maxVisibleVertex);
139+
}
140+
141+
this._layerUrl = CommonUtil.urlAppend(encodeURI(this._layerUrl), CommonUtil.getParameterString(params));
108142

109143
//存储一个cacheEnabled
110144
this.cacheEnabled = cacheEnabled;
111145

112146
if (options.tileProxy) {
113147
this.tileProxy = options.tileProxy;
114148
}
115-
var me = this;
116-
117-
/**
118-
* @function ol.source.ImageSuperMapRest.prototype.tileUrlFunction
119-
* @param {Object} tileCoord - 瓦片坐标系。
120-
* @param {Object} pixelRatio - 像素密度。
121-
* @param {string} projection - 投影参考系。
122-
* @description 瓦片地址参数。
123-
* @returns {string} 返回瓦片地址参数
124-
*/
125-
function tileUrlFunction(tileCoord, pixelRatio, projection) {
126-
if (!this.tileGrid) {
127-
this.tileGrid = this.getTileGridForProjection && this.getTileGridForProjection(projection);
128-
}
129-
if (!this.tileGrid) {
130-
if (options.extent) {
131-
this.tileGrid = ImageSuperMapRest.createTileGrid(options.extent);
132-
if (this.resolutions) {
133-
this.tileGrid.resolutions = me.resolutions;
134-
}
135-
} else {
136-
if (projection.getCode() === 'EPSG:3857') {
137-
this.tileGrid = ImageSuperMapRest.createTileGrid([
138-
-20037508.3427892,
139-
-20037508.3427892,
140-
20037508.3427892,
141-
20037508.3427892
142-
]);
143-
this.extent = [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892];
144-
}
145-
if (projection.getCode() === 'EPSG:4326') {
146-
this.tileGrid = ImageSuperMapRest.createTileGrid([-180, -90, 180, 90]);
147-
this.extent = [-180, -90, 180, 90];
148-
}
149-
}
150-
}
151-
var tileExtent = this.tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent_);
152-
var tileSize = olSize.toSize(this.tileGrid.getTileSize(tileCoord[0]), this.tmpSize);
153-
var url =
154-
layerUrl +
155-
encodeURI(
156-
'&width=' +
157-
tileSize[0] +
158-
'&height=' +
159-
tileSize[1] +
160-
'&viewBounds=' +
161-
'{"leftBottom" : {"x":' +
162-
tileExtent[0] +
163-
',"y":' +
164-
tileExtent[1] +
165-
'},"rightTop" : {"x":' +
166-
tileExtent[2] +
167-
',"y":' +
168-
tileExtent[3] +
169-
'}}'
170-
);
171-
172-
//支持代理
173-
if (me.tileProxy) {
174-
url = me.tileProxy + encodeURIComponent(url);
175-
}
176-
//不启用缓存时启用时间戳
177-
if (!me.cacheEnabled) {
178-
url += '&_t=' + new Date().getTime();
179-
}
180-
181-
return url;
149+
}
150+
getImageInternal(extent, resolution, pixelRatio) {
151+
resolution = this.findNearestResolution(resolution);
152+
const imageResolution = resolution / pixelRatio;
153+
const center = getCenter(extent);
154+
const viewWidth = Math.ceil(getWidth(extent) / imageResolution);
155+
const viewHeight = Math.ceil(getHeight(extent) / imageResolution);
156+
const viewExtent = getForViewAndSize(center, imageResolution, 0, [viewWidth, viewHeight]);
157+
const requestWidth = Math.ceil((this.ratio_ * getWidth(extent)) / imageResolution);
158+
const requestHeight = Math.ceil((this.ratio_ * getHeight(extent)) / imageResolution);
159+
const requestExtent = getForViewAndSize(center, imageResolution, 0, [requestWidth, requestHeight]);
160+
const image = this._image;
161+
if (
162+
image &&
163+
this.renderedRevision_ === this.getRevision() &&
164+
image.getResolution() === resolution &&
165+
image.getPixelRatio() === pixelRatio &&
166+
containsExtent(image.getExtent(), viewExtent)
167+
) {
168+
return image;
182169
}
170+
const imageSize = [
171+
Math.round(getWidth(requestExtent) / imageResolution),
172+
Math.round(getHeight(requestExtent) / imageResolution)
173+
];
174+
const imageUrl = this._getRequestUrl(requestExtent, imageSize);
175+
this._image = new ImageWrapper(
176+
requestExtent,
177+
resolution,
178+
pixelRatio,
179+
imageUrl,
180+
this._crossOrigin,
181+
this.imageLoadFunction_
182+
);
183+
this.renderedRevision_ = this.getRevision();
184+
this._image.addEventListener('change', this.handleImageChange.bind(this));
185+
return this._image;
186+
}
187+
_getRequestUrl(extent, imageSize) {
188+
const params = {
189+
width: imageSize[0],
190+
height: imageSize[1],
191+
viewBounds: { leftBottom: { x: extent[0], y: extent[1] }, rightTop: { x: extent[2], y: extent[3] } }
192+
};
193+
//不启用缓存时启用时间戳
194+
if (!this.cacheEnabled) {
195+
params['_t'] = new Date().getTime();
196+
}
197+
let imageUrl = CommonUtil.urlAppend(this._layerUrl, CommonUtil.getParameterString(params));
198+
//支持代理
199+
if (this.tileProxy) {
200+
imageUrl = this.tileProxy + encodeURIComponent(imageUrl);
201+
}
202+
return imageUrl;
183203
}
184-
185204
/**
186205
* @function ol.source.ImageSuperMapRest.optionsFromMapJSON
187-
* @param {string} url - 服务地址。
206+
* @param {string} url - 地址。
188207
* @param {Object} mapJSONObj - 地图 JSON。
189208
* @description 获取地图 JSON 信息。
190209
*/
191210
static optionsFromMapJSON(url, mapJSONObj) {
192-
var options = {};
193-
options.url = url;
194-
options.crossOrigin = 'anonymous';
195211
var extent = [mapJSONObj.bounds.left, mapJSONObj.bounds.bottom, mapJSONObj.bounds.right, mapJSONObj.bounds.top];
196212
var resolutions = getResolutions();
197213

198214
function getResolutions() {
199-
var level = 17;
215+
var level = 28;
200216
var dpi = 96;
201217
var width = extent[2] - extent[0];
202218
var height = extent[3] - extent[1];
@@ -228,37 +244,6 @@ export class ImageSuperMapRest extends TileImage {
228244

229245
return resolutions.sort(sortNumber);
230246
}
231-
232-
options.tileGrid = new TileGrid({
233-
extent: extent,
234-
resolutions: resolutions
235-
});
236-
return options;
237-
}
238-
239-
/**
240-
* @function ol.source.ImageSuperMapRest.createTileGrid
241-
* @param {number} extent - 长度。
242-
* @param {number} maxZoom - 最大的放大级别。
243-
* @param {number} minZoom - 最小的放大级别。
244-
* @param {number} tileSize - 瓦片的尺寸。
245-
* @param {number} origin - 原点。
246-
* @description 创建网格切片。
247-
* @returns {ol.tilegrid.TileGrid} 创建的网格切片
248-
*/
249-
static createTileGrid(extent, maxZoom, minZoom, tileSize, origin) {
250-
var tilegrid = olTilegrid.createXYZ({
251-
extent: extent,
252-
maxZoom: maxZoom,
253-
minZoom: minZoom,
254-
tileSize: tileSize
255-
});
256-
return new TileGrid({
257-
extent: extent,
258-
minZoom: minZoom,
259-
origin: origin,
260-
resolutions: tilegrid.getResolutions(),
261-
tileSize: tilegrid.getTileSize()
262-
});
247+
return { url,resolutions };
263248
}
264249
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy