Skip to content

Commit 899cd0f

Browse files
committed
【fix】leaflet imagelayer在缩放时出现的顺序不对问题
1 parent cbd8c08 commit 899cd0f

File tree

3 files changed

+330
-287
lines changed

3 files changed

+330
-287
lines changed

src/leaflet/mapping/ImageMapLayer.js

Lines changed: 21 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -256,49 +256,26 @@ export var ImageMapLayer = Layer.extend({
256256
if (!this._map) {
257257
return;
258258
}
259-
260-
var image = new ImageOverlay(url, bounds, {
261-
opacity: 0,
262-
alt: this.options.alt,
263-
zIndex: this.options.zIndex,
264-
className: this.options.className,
265-
errorOverlayUrl: this.options.error,
266-
crossOrigin: this.options.crossOrigin,
267-
pane: this.options.pane || this.getPane(),
268-
interactive: this.options.interactive
269-
}).addTo(this._map);
270-
271-
var onLoad = function(e) {
272-
image.off('error', onError, this);
259+
if(this._currentImage) {
260+
this._currentImage.setUrl(url);
261+
}else{
262+
this._currentImage = new ImageOverlay(url, bounds, {
263+
opacity: this.options.opacity,
264+
alt: this.options.alt,
265+
zIndex: this.options.zIndex,
266+
className: this.options.className,
267+
errorOverlayUrl: this.options.error,
268+
crossOrigin: this.options.crossOrigin,
269+
pane: this.options.pane || this.getPane(),
270+
interactive: this.options.interactive
271+
}).addTo(this._map);
272+
}
273+
var onLoad = function() {
273274
var map = this._map;
274275
if (!map) {
275276
return;
276277
}
277-
278-
var newImage = e.target;
279-
var oldImage = this._currentImage;
280-
281-
if (newImage._bounds && newImage._bounds.equals(bounds) && newImage._bounds.equals(map.getBounds())) {
282-
this._currentImage = newImage;
283-
284-
if (this.options.position === 'front') {
285-
this.bringToFront();
286-
}
287-
if (this.options.position === 'back') {
288-
this.bringToBack();
289-
}
290-
291-
if (this._currentImage._map) {
292-
this._currentImage.setOpacity(this.options.opacity);
293-
}
294-
295-
oldImage && map.removeLayer(oldImage);
296-
297-
oldImage && oldImage._map && oldImage._map.removeLayer(oldImage);
298-
} else {
299-
map.removeLayer(newImage);
300-
}
301-
278+
this._currentImage.setBounds(bounds);
302279
/**
303280
* @event ImageMapLayer#load
304281
* @description 请求图层加载完成后触发。
@@ -307,19 +284,17 @@ export var ImageMapLayer = Layer.extend({
307284
this.fire('load', { bounds: bounds });
308285
};
309286
var onError = function() {
310-
this._map.removeLayer(image);
287+
this._map && this._map.removeLayer(this._currentImage);
311288
/**
312289
* @event ImageMapLayer#error
313290
* @description 请求图层加载失败后触发。
314291
*/
315292
this.fire('error');
316-
image.off('load', onLoad, this);
317293
}
318-
319-
image.once('load', onLoad, this);
320-
321-
image.once('error', onError, this);
322-
294+
this._currentImage.off('load');
295+
this._currentImage.once('load', onLoad, this);
296+
this._currentImage.off('error');
297+
this._currentImage.once('error', onError, this);
323298
/**
324299
* @event ImageMapLayer#loading
325300
* @description 请求图层加载中触发。

0 commit comments

Comments
 (0)