Skip to content

Commit 1b7979d

Browse files
luoxiao-supermapluoxiao-supermap
committed
[fix]ol 10.5.2升级 imageSource 变更问题
1 parent 88dbc59 commit 1b7979d

File tree

4 files changed

+90
-29
lines changed

4 files changed

+90
-29
lines changed

‎dist/ol/include-ol.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
// 在线
5858
if (!inArray(includes, 'ol-debug') && !inArray(includes, 'ol@4.6.5') && !inArray(excludes, 'ol')) {
5959
inputCSS(libsurl + '/openlayers/10.5.0/ol.min.css');
60-
inputScript(libsurl + '/openlayers//10.5.0/ol.js');
60+
inputScript(libsurl + '/openlayers/10.5.0/ol.min.js');
6161
}
6262
if (inArray(includes, 'ol@4.6.5')) {
6363
inputCSS(libsurl + '/openlayers/4.6.5/ol.css');

‎src/openlayers/mapping/ImageSuperMapRest.js‎

Lines changed: 67 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { Unit } from '@supermapgis/iclient-common/REST';
66
import { Util as CommonUtil } from '@supermapgis/iclient-common/commontypes/Util';
77
import { ServerGeometry } from '@supermapgis/iclient-common/iServer/ServerGeometry';
88
import { Util } from '../core/Util';
9-
import ImageSource, { defaultImageLoadFunction } from 'ol/source/Image';
10-
import ImageWrapper from 'ol/Image';
9+
import ImageSource from 'ol/source/Image';
10+
import ImageWrapper, { decode } from 'ol/Image';
1111
import Geometry from 'ol/geom/Geometry';
1212
import GeoJSON from 'ol/format/GeoJSON';
1313
import { containsExtent, getCenter, getHeight, getWidth, getForViewAndSize } from 'ol/extent';
@@ -42,12 +42,23 @@ import { containsExtent, getCenter, getHeight, getWidth, getForViewAndSize } fro
4242
* @param {string} [options.tileProxy] - 代理地址。
4343
* @param {NDVIParameter|HillshadeParameter} [options.rasterfunction] - 栅格分析参数。
4444
* @param {string} [options.format = 'png'] - 瓦片表述类型，支持 "png" 、"webp"、"bmp" 、"jpg"、"gif" 等图片类型。
45-
* @param {Function} [options.imageLoadFunction] - 加载图片的方法。默认为function(imageTile, src) {imageTile.getImage().src = src;};
45+
* @deprecated {Function} [options.imageLoadFunction] - 加载图片的方法。默认为function(imageTile, src) {imageTile.getImage().src = src;};
4646
* @param {string} [options.ratio=1.5] - 请求图片大小比例。 1 表示请求图片大小和地图视窗范围一致，2 表示请求图片大小是地图视窗范围的2倍，以此类推。
4747
* @extends {ol.source.Image}
4848
* @usage
4949
*/
50-
export class ImageSuperMapRest extends ImageSource {
50+
51+
function defaultImageLoadFunction(image, src) {
52+
image.getImage().src = src;
53+
}
54+
55+
function fromResolutionLike(resolution) {
56+
if (Array.isArray(resolution)) {
57+
return Math.min(...resolution);
58+
}
59+
return resolution;
60+
}
61+
export class ImageSuperMapRest extends ImageSource {
5162
constructor(options) {
5263
super({
5364
attributions: options.attributions,
@@ -150,7 +161,8 @@ import { containsExtent, getCenter, getHeight, getWidth, getForViewAndSize } fro
150161
this.tileProxy = options.tileProxy;
151162
}
152163
}
153-
getImageInternal(extent, resolution, pixelRatio) {
164+
165+
_getImageInternalParams(extent, resolution, pixelRatio) {
154166
resolution = this.findNearestResolution(resolution);
155167
const imageResolution = resolution / pixelRatio;
156168
const center = getCenter(extent);
@@ -160,6 +172,19 @@ import { containsExtent, getCenter, getHeight, getWidth, getForViewAndSize } fro
160172
const requestWidth = Math.ceil((this.ratio_ * getWidth(extent)) / imageResolution);
161173
const requestHeight = Math.ceil((this.ratio_ * getHeight(extent)) / imageResolution);
162174
const requestExtent = getForViewAndSize(center, imageResolution, 0, [requestWidth, requestHeight]);
175+
const imageSize = [
176+
Math.round(getWidth(requestExtent) / imageResolution),
177+
Math.round(getHeight(requestExtent) / imageResolution)
178+
];
179+
const src = this._getRequestUrl(requestExtent, imageSize);
180+
return { imageSize, src, requestExtent, resolution, viewExtent };
181+
}
182+
_getImageInternalBy8(extent, resolutionVal, pixelRatio) {
183+
const { src, resolution, requestExtent, viewExtent } = this._getImageInternalParams(
184+
extent,
185+
resolutionVal,
186+
pixelRatio
187+
);
163188
const image = this._image;
164189
if (
165190
image &&
@@ -170,23 +195,54 @@ import { containsExtent, getCenter, getHeight, getWidth, getForViewAndSize } fro
170195
) {
171196
return image;
172197
}
173-
const imageSize = [
174-
Math.round(getWidth(requestExtent) / imageResolution),
175-
Math.round(getHeight(requestExtent) / imageResolution)
176-
];
177-
const imageUrl = this._getRequestUrl(requestExtent, imageSize);
178198
this._image = new ImageWrapper(
179199
requestExtent,
180200
resolution,
181201
pixelRatio,
182-
imageUrl,
202+
src,
183203
this._crossOrigin,
184204
this.imageLoadFunction_
185205
);
186206
this.renderedRevision_ = this.getRevision();
187207
this._image.addEventListener('change', this.handleImageChange.bind(this));
188208
return this._image;
189209
}
210+
211+
_getImageInternal(extent, resolutionVal, pixelRatio) {
212+
const { src, resolution, requestExtent } = this._getImageInternalParams(extent, resolutionVal, pixelRatio);
213+
if (this.image) {
214+
if (
215+
((this.wantedExtent_ && containsExtent(this.wantedExtent_, requestExtent)) ||
216+
containsExtent(this.image.getExtent(), requestExtent)) &&
217+
((this.wantedResolution_ && fromResolutionLike(this.wantedResolution_) === resolution) ||
218+
fromResolutionLike(this.image.getResolution()) === resolution)
219+
) {
220+
return this.image;
221+
}
222+
}
223+
this.wantedExtent_ = requestExtent;
224+
this.wantedResolution_ = resolution;
225+
this.loader = this.createLoader({ src, crossOrigin: this._crossOrigin });
226+
this.image = new ImageWrapper(requestExtent, resolution, pixelRatio, this.loader);
227+
this.image.addEventListener('change', this.handleImageChange.bind(this));
228+
return this.image;
229+
}
230+
231+
createLoader({ src, crossOrigin }) {
232+
const loadCallback = decode;
233+
return (extent, resolution, pixelRatio) => {
234+
const image = new Image();
235+
image.crossOrigin = crossOrigin ?? null;
236+
return loadCallback(image, src).then((image) => ({ image, extent, pixelRatio }));
237+
};
238+
}
239+
240+
getImageInternal(extent, resolutionVal, pixelRatio) {
241+
if (Number(Util.getOlVersion()) < 8) {
242+
return this._getImageInternalBy8(extent, resolutionVal, pixelRatio);
243+
}
244+
return this._getImageInternal(extent, resolutionVal, pixelRatio);
245+
}
190246
_getRequestUrl(extent, imageSize) {
191247
const params = {
192248
width: imageSize[0],

‎test/openlayers/mapping/ImageSuperMapRestSpec.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import { MapService } from '../../../src/openlayers/services/MapService';
33
import { NDVIParameter } from '../../../src/common/iServer/NDVIParameter';
44
import { HillshadeParameter } from '../../../src/common/iServer/HillshadeParameter';
55
import { getQueryValue } from '../../tool/utils';
6-
6+
import { Util } from '../../../src/openlayers/core/Util';
77
import Map from 'ol/Map';
88
import View from 'ol/View';
99
import ImageLayer from 'ol/layer/Image';
1010
import Point from 'ol/geom/Point';
11-
import * as olProj from 'ol/proj';
1211

1312
var url = GlobeParameter.imageURL;
1413
describe('openlayers_ImageSuperMapRest', () => {
@@ -69,22 +68,28 @@ describe('openlayers_ImageSuperMapRest', () => {
6968
});
7069

7170
it('getImageInternal', () => {
72-
73-
var tileUrl = imageTileSource.getImageInternal(extent, resolution, pixelRatio).src_;
71+
var tileUrl = imageTileSource._getImageInternalParams(extent, resolution, pixelRatio).src;
7472
expect(tileUrl).toBe(
7573
url +
7674
'/image.png?transparent=true&cacheEnabled=true&redirect=false&width=3840&height=794&viewBounds=%7B%22leftBottom%22%3A%7B%22x%22%3A-159.16992187500045%2C%22y%22%3A-22.895507812500092%7D%2C%22rightTop%22%3A%7B%22x%22%3A178.33007812500045%2C%22y%22%3A46.88964843750009%7D%7D'
7775
);
76+
const image = imageTileSource.getImageInternal(extent, resolution, pixelRatio);
77+
expect(image).not.toBeNull();
7878
});
7979

80+
it('getImageInternal ol < 8', () => {
81+
spyOn(Util, 'getOlVersion').and.returnValue('7.5.2');
82+
const image = imageTileSource.getImageInternal(extent, resolution, pixelRatio);
83+
expect(image).not.toBeNull();
84+
});
8085
it('tileUrlFunction_tilePoxy', () => {
8186
imageTileOptions.tileProxy = 'tileProxy';
8287
var imageTileSourcetilePoxy = new ImageSuperMapRest(imageTileOptions);
8388
var tempOptions = {
8489
redirect: true,
8590
prjCoordSys: { epsgCode: 4326 }
8691
};
87-
var tileUrl = imageTileSourcetilePoxy.getImageInternal(extent, resolution, pixelRatio).src_;
92+
var tileUrl = imageTileSourcetilePoxy._getImageInternalParams(extent, resolution, pixelRatio).src;
8893
expect(tileUrl.startsWith('tileProxy')).toBeTrue();
8994
});
9095

@@ -100,28 +105,28 @@ describe('openlayers_ImageSuperMapRest', () => {
100105
};
101106
var pixelRatio = '245';
102107
var coords = new Point(120.14, 30.24);
103-
var tileUrl = imageTile.getImageInternal(extent, resolution, pixelRatio).src_;
108+
var tileUrl = imageTile._getImageInternalParams(extent, resolution, pixelRatio).src;
104109
var urlTemp = tileUrl.split('?')[0];
105110
var format = urlTemp.substring(urlTemp.length - 3, urlTemp.length);
106111
expect(format).toBe('png');
107112

108113
imageTileOptions.format = 'bmp';
109114
imageTile = new ImageSuperMapRest(imageTileOptions);
110-
tileUrl = imageTile.getImageInternal(extent, resolution, pixelRatio).src_;
115+
tileUrl = imageTile._getImageInternalParams(extent, resolution, pixelRatio).src;
111116
urlTemp = tileUrl.split('?')[0];
112117
format = urlTemp.substring(urlTemp.length - 3, urlTemp.length);
113118
expect(format).toBe('bmp');
114119

115120
imageTileOptions.format = 'jpg';
116121
imageTile = new ImageSuperMapRest(imageTileOptions);
117-
tileUrl = imageTile.getImageInternal(extent, resolution, pixelRatio).src_;
122+
tileUrl = imageTile._getImageInternalParams(extent, resolution, pixelRatio).src;
118123
urlTemp = tileUrl.split('?')[0];
119124
format = urlTemp.substring(urlTemp.length - 3, urlTemp.length);
120125
expect(format).toBe('jpg');
121126

122127
imageTileOptions.format = 'gif';
123128
imageTile = new ImageSuperMapRest(imageTileOptions);
124-
tileUrl = imageTile.getImageInternal(extent, resolution, pixelRatio).src_;
129+
tileUrl = imageTile._getImageInternalParams(extent, resolution, pixelRatio).src;
125130
urlTemp = tileUrl.split('?')[0];
126131
format = urlTemp.substring(urlTemp.length - 3, urlTemp.length);
127132
expect(format).toBe('gif');
@@ -131,7 +136,7 @@ describe('openlayers_ImageSuperMapRest', () => {
131136
var imageTile = new ImageSuperMapRest(imageTileOptions);
132137
var pixelRatio = '245';
133138
var coords = new Point(120.14, 30.24);
134-
var tileUrl = imageTile.getImageInternal(extent, resolution, pixelRatio).src_;
139+
var tileUrl = imageTile._getImageInternalParams(extent, resolution, pixelRatio).src;
135140
expect(tileUrl).not.toBeNull();
136141
const ndviParameterValue = getQueryValue(tileUrl, 'rasterfunction');
137142
expect(ndviParameterValue).not.toBeNull;
@@ -148,7 +153,7 @@ describe('openlayers_ImageSuperMapRest', () => {
148153
var imageTile = new ImageSuperMapRest(imageTileOptions);
149154
var pixelRatio = '245';
150155
var coords = new Point(120.14, 30.24);
151-
var tileUrl = imageTile.getImageInternal(extent, resolution, pixelRatio).src_;
156+
var tileUrl = imageTile._getImageInternalParams(extent, resolution, pixelRatio).src;
152157
expect(tileUrl).not.toBeNull();
153158
const hillshadeParameterValue = getQueryValue(tileUrl, 'rasterfunction');
154159
expect(hillshadeParameterValue).not.toBeNull;

‎test/openlayers/overlay/GraphicSpec.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,7 @@ describe('openlayers_GraphicLayer', () => {
428428
source: new GraphicSource({
429429
graphics: graphics,
430430
map: map,
431-
color: 'red'
431+
color: [255, 0, 0, 1]
432432
})
433433
});
434434
map.addLayer(graphicLayer);
@@ -437,7 +437,7 @@ describe('openlayers_GraphicLayer', () => {
437437
unByKey(key);
438438
const state = graphicLayer.getSource().getLayerState();
439439
expect(state).not.toBeNull();
440-
expect(state.color).toEqual('red');
440+
expect(state.color).toEqual([ 255, 0, 0, 1 ]);
441441
done();
442442
}
443443
});
@@ -511,18 +511,18 @@ describe('openlayers_GraphicLayer', () => {
511511
source: new GraphicSource({
512512
graphics: graphics,
513513
map: map,
514-
color: 'red'
514+
color: [255, 0, 0, 1]
515515
})
516516
});
517517
map.addLayer(graphicLayer);
518518
const key = graphicLayer.on('postrender', function () {
519519
if (graphicLayer.getSource().renderer) {
520520
unByKey(key);
521-
expect(graphicLayer.getSource().color).toEqual('red');
521+
expect(graphicLayer.getSource().color).toEqual([ 255, 0, 0, 1 ]);
522522
graphicLayer.getSource().setStyle({
523-
color: 'blue'
523+
color: [ 0, 0, 255, 1 ]
524524
});
525-
expect(graphicLayer.getSource().color).toEqual('blue');
525+
expect(graphicLayer.getSource().color).toEqual([ 0, 0, 255, 1 ]);
526526
done();
527527
}
528528
});

0 commit comments

Comments
 (0)