pka/index.html

## index.html
<!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>
	<!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>