-
-
Save Zverik/5757305 to your computer and use it in GitHub Desktop.
| /* | |
| * L.SingleTile uses L.ImageOverlay to display a single-tile WMS layer. | |
| * url parameter must accept WMS-style width, height and bbox. | |
| */ | |
| L.SingleTile = L.ImageOverlay.extend({ | |
| defaultWmsParams: { | |
| service: 'WMS', | |
| request: 'GetMap', | |
| version: '1.1.1', | |
| layers: '', | |
| styles: '', | |
| format: 'image/jpeg', | |
| transparent: false | |
| }, | |
| initialize: function( url, options ) { | |
| this.wmsParams = L.extend({}, this.defaultWmsParams); | |
| L.ImageOverlay.prototype.initialize.call(this, url, null, options); | |
| }, | |
| setParams: function (params) { | |
| L.extend(this.wmsParams, params); | |
| return this; | |
| }, | |
| redraw: function () { | |
| this._updateImageUrl(); | |
| }, | |
| onAdd: function (map) { | |
| var projectionKey = parseFloat(this.wmsParams.version) >= 1.3 ? 'crs' : 'srs'; | |
| // this.wmsParams[projectionKey] = 'EPSG:4326'; // this is incorrect! | |
| this.wmsParams[projectionKey] = map.options.crs.code; | |
| L.ImageOverlay.prototype.onAdd.call(this, map); | |
| map.on('moveend', this._updateImageUrl, this); | |
| }, | |
| onRemove: function (map) { | |
| map.on('moveend', this._updateImageUrl, this); | |
| L.ImageOverlay.prototype.onRemove.call(this, map); | |
| }, | |
| // Copypasted from L.ImageOverlay (dirty hack) | |
| _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(); | |
| this._bounds = this._map.getBounds(); | |
| //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._constructUrl() | |
| }); | |
| }, | |
| _onImageLoad: function () { | |
| this._bounds = this._map.getBounds(); | |
| this._reset(); | |
| this.fire('load'); | |
| }, | |
| _updateImageUrl: function () { | |
| this._image.src = this._constructUrl(); | |
| }, | |
| _constructUrl: function () { | |
| var size = this._map.getSize(); | |
| var b = this._map.getBounds(); | |
| return this._url + L.Util.getParamString(this.wmsParams, this._url) + "&width=" + size.x + "&height=" + size.y + "&bbox=" + b.toBBoxString(); | |
| } | |
| }); | |
| L.singleTile = function (url, options) { | |
| return new L.SingleTile(url, options); | |
| }; |
Thanks, added this function to the gist.
Hi,
Tried this layer to get png files from mapserver/mapscript/asp.net handler - application.
Works good!
In my application I switch from a geojson layer ( L.GeoJSON.AJAX) to a singletile layer when there are large quantities of polygons and switch back to geojson when there are small quantities of polygons.
Found a problem when the singletile-layer is removed from the map. But checking on (this._map != null) in the constructURL function did the trick.
I also added a random parameter to make sure that a redraw is forced when there is no zooming or panning. This was necessary for changing a theme triggered by a button. With no url changes the map from the cache is shown.
Thanks, Hans
_constructUrl: function () {
if (this._map != null) {
var size = this._map.getSize();
var b = this._map.getBounds();
var valrandom = {
item: Math.random(),
toString: function () {
return this.item;
}
};
return this._url + L.Util.getParamString(this.wmsParams, this._url) + "&width=" + size.x + "&height=" + size.y + "&test=" + valrandom + "&bbox=" + b.toBBoxString();
}
}
This is an awesome script and very useful. I've tried to use it to plot a canvas image in leaflet maps. But I had no success. First I created a canvas image then I converted it to URL string using the following command my_canvas.toDataURL(). Finally, I used L.SingleTile to display my canvas image in leaflet but I did not work. Do you have any idea why it does not work with canvas image?
Very useful! I added the following function to enable the layer to be re-drawn when WMS parameters are updated: