Leaflet/src/layer/ImageOverlay.js

87 lines
2.2 KiB
JavaScript
Raw Normal View History

2010-09-27 22:02:00 +08:00
L.ImageOverlay = L.Class.extend({
includes: L.Mixin.Events,
options: {
opacity: 1
},
initialize: function (url, bounds, options) { // (String, LatLngBounds)
2010-09-27 22:02:00 +08:00
this._url = url;
this._bounds = bounds;
L.Util.setOptions(this, options);
2010-09-27 22:02:00 +08:00
},
2011-12-09 22:51:31 +08:00
onAdd: function (map) {
2010-09-27 22:02:00 +08:00
this._map = map;
if (!this._image) {
this._initImage();
}
2012-02-15 19:17:25 +08:00
map._panes.overlayPane.appendChild(this._image);
map.on('zoomanim', this._zoomAnimation, this);
map.on('viewreset', this._reset, this);
this._reset();
},
2011-12-09 22:51:31 +08:00
onRemove: function (map) {
map.getPanes().overlayPane.removeChild(this._image);
map.off('viewreset', this._reset, this);
},
setOpacity: function (opacity) {
this.options.opacity = opacity;
this._updateOpacity();
},
2011-12-09 22:51:31 +08:00
_initImage: function () {
this._image = L.DomUtil.create('img', 'leaflet-image-layer leaflet-zoom-animated');
2010-09-27 22:02:00 +08:00
this._image.style.visibility = 'hidden';
this._updateOpacity();
2011-03-22 23:58:35 +08:00
//TODO createImage util method to remove duplication
2010-09-27 22:02:00 +08:00
L.Util.extend(this._image, {
galleryimg: 'no',
onselectstart: L.Util.falseFn,
onmousemove: L.Util.falseFn,
onload: L.Util.bind(this._onImageLoad, this),
2010-09-27 22:02:00 +08:00
src: this._url
});
},
_zoomAnimation: function (opt) {
var image = this._image,
topLeft = this._map._latLngToNewLayerPoint(this._bounds.getNorthWest(), opt.zoom, opt.center),
size = this._map._latLngToNewLayerPoint(this._bounds.getSouthEast(), opt.zoom, opt.center).subtract(topLeft);
L.DomUtil.setPosition(image, topLeft);
//image.style.webkitTransform += ' scale(0.5)';
image.style.width = size.x + 'px';
image.style.height = size.y + 'px';
},
2011-12-09 22:51:31 +08:00
_reset: function () {
2012-02-15 19:17:25 +08:00
var image = this._image,
topLeft = this._map.latLngToLayerPoint(this._bounds.getNorthWest()),
size = this._map.latLngToLayerPoint(this._bounds.getSouthEast()).subtract(topLeft);
2012-02-15 19:17:25 +08:00
L.DomUtil.setPosition(image, topLeft);
2012-02-15 19:17:25 +08:00
image.style.width = size.x + 'px';
image.style.height = size.y + 'px';
2010-09-27 22:02:00 +08:00
},
2011-12-09 22:51:31 +08:00
_onImageLoad: function () {
this._image.style.visibility = '';
this.fire('load');
},
_updateOpacity: function () {
L.DomUtil.setOpacity(this._image, this.options.opacity);
2010-09-27 22:02:00 +08:00
}
});