142 lines
3.3 KiB
JavaScript
142 lines
3.3 KiB
JavaScript
/*
|
|
* L.ImageOverlay is used to overlay images over the map (to specific geographical bounds).
|
|
*/
|
|
|
|
L.ImageOverlay = L.Class.extend({
|
|
includes: L.Mixin.Events,
|
|
|
|
options: {
|
|
opacity: 1
|
|
},
|
|
|
|
initialize: function (url, bounds, options) { // (String, LatLngBounds, Object)
|
|
this._url = url;
|
|
this._bounds = L.latLngBounds(bounds);
|
|
|
|
L.setOptions(this, options);
|
|
},
|
|
|
|
onAdd: function (map) {
|
|
this._map = map;
|
|
|
|
if (!this._image) {
|
|
this._initImage();
|
|
}
|
|
|
|
map._panes.overlayPane.appendChild(this._image);
|
|
|
|
map.on('viewreset', this._reset, this);
|
|
|
|
if (map.options.zoomAnimation && L.Browser.any3d) {
|
|
map.on('zoomanim', this._animateZoom, this);
|
|
}
|
|
|
|
this._reset();
|
|
},
|
|
|
|
onRemove: function (map) {
|
|
L.DomUtil.remove(this._image);
|
|
|
|
map.off('viewreset', this._reset, this);
|
|
|
|
if (map.options.zoomAnimation) {
|
|
map.off('zoomanim', this._animateZoom, this);
|
|
}
|
|
},
|
|
|
|
addTo: function (map) {
|
|
map.addLayer(this);
|
|
return this;
|
|
},
|
|
|
|
setOpacity: function (opacity) {
|
|
this.options.opacity = opacity;
|
|
this._updateOpacity();
|
|
return this;
|
|
},
|
|
|
|
// TODO remove bringToFront/bringToBack duplication from TileLayer/Path
|
|
bringToFront: function () {
|
|
if (this._image) {
|
|
this._map._panes.overlayPane.appendChild(this._image);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
bringToBack: function () {
|
|
var pane = this._map._panes.overlayPane;
|
|
if (this._image) {
|
|
pane.insertBefore(this._image, pane.firstChild);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
setUrl: function (url) {
|
|
this._url = url;
|
|
this._image.src = this._url;
|
|
},
|
|
|
|
getAttribution: function () {
|
|
return this.options.attribution;
|
|
},
|
|
|
|
_initImage: function () {
|
|
this._image = L.DomUtil.create('img', 'leaflet-image-layer');
|
|
|
|
if (this._map.options.zoomAnimation && L.Browser.any3d) {
|
|
L.DomUtil.addClass(this._image, 'leaflet-zoom-animated');
|
|
} else {
|
|
L.DomUtil.addClass(this._image, 'leaflet-zoom-hide');
|
|
}
|
|
|
|
this._updateOpacity();
|
|
|
|
//TODO createImage util method to remove duplication
|
|
L.extend(this._image, {
|
|
galleryimg: 'no',
|
|
onselectstart: L.Util.falseFn,
|
|
onmousemove: L.Util.falseFn,
|
|
onload: L.bind(this._onImageLoad, this),
|
|
src: this._url
|
|
});
|
|
},
|
|
|
|
_animateZoom: function (e) {
|
|
var map = this._map,
|
|
image = this._image,
|
|
scale = map.getZoomScale(e.zoom),
|
|
nw = this._bounds.getNorthWest(),
|
|
se = this._bounds.getSouthEast(),
|
|
|
|
topLeft = map._latLngToNewLayerPoint(nw, e.zoom, e.center),
|
|
size = map._latLngToNewLayerPoint(se, e.zoom, e.center)._subtract(topLeft),
|
|
origin = topLeft._add(size._multiplyBy((1 / 2) * (1 - 1 / scale)));
|
|
|
|
image.style[L.DomUtil.TRANSFORM] =
|
|
L.DomUtil.getTranslateString(origin) + ' scale(' + scale + ') ';
|
|
},
|
|
|
|
_reset: function () {
|
|
var image = this._image,
|
|
topLeft = this._map.latLngToLayerPoint(this._bounds.getNorthWest()),
|
|
size = this._map.latLngToLayerPoint(this._bounds.getSouthEast())._subtract(topLeft);
|
|
|
|
L.DomUtil.setPosition(image, topLeft);
|
|
|
|
image.style.width = size.x + 'px';
|
|
image.style.height = size.y + 'px';
|
|
},
|
|
|
|
_onImageLoad: function () {
|
|
this.fire('load');
|
|
},
|
|
|
|
_updateOpacity: function () {
|
|
L.DomUtil.setOpacity(this._image, this.options.opacity);
|
|
}
|
|
});
|
|
|
|
L.imageOverlay = function (url, bounds, options) {
|
|
return new L.ImageOverlay(url, bounds, options);
|
|
};
|