deferred tile loading, i.e. the Google Maps way, p=pgiraud,ahocevar,me, r=ahocevar,me (closes #2998)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11159 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Éric Lemoine
2011-02-21 09:45:22 +00:00
parent 7f34868fe2
commit 08acb65e0e
4 changed files with 99 additions and 64 deletions

View File

@@ -1,4 +1,5 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
<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" />
@@ -6,10 +7,8 @@
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
body {
html, body, #map {
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
@@ -25,30 +24,7 @@
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"});
var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png" });
map.addLayers([ol_wms, jpl_wms, dm_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 6);
//map.zoomToMaxExtent();
}
</script>
<script src="fullScreen.js"></script>
</head>
<body onload="init()">
<div id="map"></div>
@@ -65,8 +41,11 @@
</p>
<div id="docs">
This example uses CSS to define the dimensions of the map element in order to fill the screen.
When the user resizes the window, the map size changes correspondingly. No scroll bars!
<p>This example uses CSS to define the dimensions of the map element in order to fill the screen.
When the user resizes the window, the map size changes correspondingly. No scroll bars!</p>
<p>See the
<a href="fullScreen.js" target="_blank">fullScreen.js source</a>
to see how this is done.</p>
</div>
</div>
</body>