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)
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