Last active
December 17, 2015 16:39
-
-
Save pka/5639981 to your computer and use it in GitHub Desktop.
Progressive WMS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.12/theme/default/style.css" type="text/css"> | |
| <link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.12/examples/style.css" type="text/css"> | |
| <script src="http://dev.openlayers.org/releases/OpenLayers-2.12/OpenLayers.light.js"></script> | |
| <script type="text/javascript"> | |
| OpenLayers.Layer.LowResWMS = OpenLayers.Class(OpenLayers.Layer.WMS, { | |
| resizeFactor: 4, | |
| wmsLayer: null, | |
| lastScale: null, | |
| initialize: function(wmsLayer, resizeFactor) { | |
| this.wmsLayer = wmsLayer; | |
| this.resizeFactor = resizeFactor || this.resizeFactor; | |
| var url = wmsLayer.url; | |
| var params = OpenLayers.Util.upperCaseObject(wmsLayer.params); | |
| if (params.DPI != undefined) { | |
| params.DPI = Math.floor(params.DPI / this.resizeFactor); | |
| //TODO: DPI params for other WMS servers | |
| } | |
| var options = wmsLayer.options; | |
| options.transitionEffect = null; | |
| options.displayInLayerSwitcher = false; | |
| OpenLayers.Layer.WMS.prototype.initialize.apply(this, ["Low Res WMS", url, params, options]); | |
| }, | |
| onWmsLayerMoveend: function() { | |
| this.setVisibility(this.lastScale <= this.map.getScale()); | |
| this.lastScale = this.map.getScale(); | |
| }, | |
| onWmsLayerLoadend: function() { | |
| this.setVisibility(false); | |
| }, | |
| onWmsLayerChange: function(e) { | |
| if (e.layer.id === this.wmsLayer.id && e.property === 'params') { | |
| // update params except DPI and FORMAT | |
| var newParams = OpenLayers.Util.upperCaseObject(this.wmsLayer.params); | |
| delete newParams.DPI; | |
| delete newParams.FORMAT; | |
| this.mergeNewParams(newParams); | |
| } | |
| }, | |
| afterAdd: function() { | |
| this.lastScale = 0; // low res layer is visible in initial view | |
| /* | |
| * - show low res layer on pan and zoom out | |
| * - resize high res on zoom in | |
| * - hide low res layer after high res has loaded | |
| */ | |
| this.wmsLayer.events.register('moveend', this, this.onWmsLayerMoveend); | |
| this.wmsLayer.events.register('loadend', this, this.onWmsLayerLoadend); | |
| this.map.events.register('changelayer', this, this.onWmsLayerChange); | |
| }, | |
| removeMap: function(map) { | |
| this.wmsLayer.events.unregister('moveend', this, this.onWmsLayerMoveend); | |
| this.wmsLayer.events.unregister('loadend', this, this.onWmsLayerLoadend); | |
| this.map.events.unregister('changelayer', this, this.onWmsLayerChange); | |
| }, | |
| getFullRequestString:function(newParams, altUrl) { | |
| newParams.WIDTH = Math.floor(newParams.WIDTH / this.resizeFactor); | |
| newParams.HEIGHT = Math.floor(newParams.HEIGHT / this.resizeFactor); | |
| return OpenLayers.Layer.WMS.prototype.getFullRequestString.apply(this, arguments); | |
| } | |
| }); | |
| var map; | |
| function init(){ | |
| map = new OpenLayers.Map( 'map' , | |
| { | |
| projection: new OpenLayers.Projection("EPSG:3857"), | |
| allOverlays: true, | |
| fractionalZoom: true | |
| }); | |
| var layer_high = new OpenLayers.Layer.WMS( | |
| "Complex WMS", | |
| "http://wms.qgiscloud.com/elejan/CloudEROSIONDUSOLCAROLE", | |
| { | |
| layers: 'aleaErosionSol76ete,aleaErosionSol27ete,aleaErosionSol76hiver,aleaErosionSol27hiver,aleaErosionSol27printemps,aleaErosionSol76printemps,Tissuurbaincntinuetdiscontinu,espacesagricoles,Systemesculturauxparcellairescomplexes,TerresArablesHorsperimetreirrigation,Pelousesetpaturages_321,Prairies_231,Landesetbroussailles_322,Foretsmelenages_313,Foretdefeuillus_311,Foretsdeconiferes_312,Vergersetpetitsfruits,CoursdeauHauteNormandie', | |
| format:'image/png; mode=8bit', | |
| transparent: true, | |
| dpi: 96 | |
| }, | |
| { | |
| buffer: 0, | |
| singleTile: true, | |
| transitionEffect: "resize", | |
| ratio: 1 | |
| } | |
| ); | |
| // Add low res layer before high res | |
| var layer_low = new OpenLayers.Layer.LowResWMS(layer_high, 4); | |
| map.addLayer(layer_low); | |
| map.addLayer(layer_high); | |
| map.zoomToExtent(new OpenLayers.Bounds(-41461.38,6282901.82,237992.39,6448923.05)); | |
| } | |
| </script> | |
| </head> | |
| <body onload="init()"> | |
| <h1 id="title">Progressive WMS Example</h1> | |
| <div id="map" style="width: 100%; height: 512px;"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment