source: sandbox/camptocamp/canvas/openlayers/examples/raster-reprojection.html

Last change on this file was 10506, checked in by tsauerwein, 6 years ago

use proxy.cgi in examples folder

  • Property svn:mime-type set to text/plain
File size: 3.1 KB
Line 
1<html xmlns="http://www.w3.org/1999/xhtml">
2  <head>
3    <title>OpenLayers: Displaying a reprojected WMS layer</title>
4    <link rel="stylesheet" href="style.css" type="text/css" />
5
6    <script src="../lib/OpenLayers.js"></script>
7    <script src="http://proj4js.org/lib/proj4js-combined.js" type="text/javascript" charset="utf-8"></script>
8    <script src="../lib/gdalwarp-js/gdalwarp.js"></script>
9    <script type="text/javascript">
10        var map, wmsLayer;
11
12        function init(){
13            var wgs84 = new OpenLayers.Projection("EPSG:4326");
14           
15            var options = {
16                projection: new OpenLayers.Projection("EPSG:900913"),
17                displayProjection: wgs84,
18                units: "m",
19                maxResolution: 156543.0339,
20                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
21                                                 20037508.34, 20037508.34)
22            };
23            map = new OpenLayers.Map('map', options);
24           
25            var mapnik = new OpenLayers.Layer.OSM("OSM (EPSG:900913)");
26           
27            wmsLayer = new OpenLayers.Layer.WMS( "WMS (EPSG:4326)",
28                "proxy.cgi?url=http://labs.metacarta.com/wms/vmap0?",
29                {layers: 'basic'},
30                {
31                    isBaseLayer: false,
32                    opacity: 0.8,
33                    projection: wgs84,
34                    singleTile: true,
35                    useCanvas: OpenLayers.Layer.Grid.ONECANVASPERTILE,
36                    proj4JSPath: "http://proj4js.org/lib/proj4js-combined.js",
37                    gdalwarpWebWorkerPath: "../lib/gdalwarp-js/gdalwarp-webworker.js"
38                });
39               
40            wmsLayer.events.register("tileReprojectionProgress", null, function(event) {
41                document.getElementById("progressBar").value = event.progress;   
42                document.getElementById("progressBarFallback").innerHTML = event.progress;
43            });
44           
45
46            map.addLayers([mapnik, wmsLayer]);
47
48            map.addControl(new OpenLayers.Control.LayerSwitcher());
49
50            map.zoomToExtent(
51                new OpenLayers.Bounds(
52                    68.774414, 11.381836, 123.662109, 34.628906
53                ).transform(map.displayProjection, map.projection)
54            );
55        }
56       
57        function toggleUseWebWorkers() {
58            wmsLayer.canvasAsync = document.getElementById("useWebWorkers").checked;   
59        }
60    </script>
61  </head>
62  <body onload="init()">
63      <h1 id="title">Displaying a reprojected WMS layer</h1>
64
65      <div id="tags"></div>
66
67      <p id="shortdesc">
68          A WMS layer with EPSG:4326 is displayed reprojected on top of a OpenStreetMap layer (EPSG:900913).
69      </p>
70
71    <div id="map" class="smallmap"></div>
72    <p>
73        <input type="checkbox" id="useWebWorkers" onclick="toggleUseWebWorkers()"/> Use Web Workers (only the latest dev. snapshots)
74    </p>
75    <p>
76        Reprojection progress:
77        <progress id="progressBar" value="0" max="100">
78            <span id="progressBarFallback">0</span>%
79        </progress>
80    </p>
81
82    <div id="docs"></div>
83  </body>
84</html>
Note: See TracBrowser for help on using the repository browser.