ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Additional simple examples for just CacheRead and CacheWrite.

Browse Source 
* Abort seeding immediately when cache is full.
* Abort seeding immediately when CORS image requests are not supported.
This commit is contained in:
ahocevar
2012-03-09 15:32:04 +01:00
parent e366722375
commit 51a11e053f
5 changed files with 215 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
examples/cache-read.html Normal file
View File

@@ -0,0 +1,36 @@
<!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">
<title>OpenLayers Cache Read Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script src="cache-read.js"></script>
</head>
<body onload="init()">
<h1 id="title">Cache Read Example</h1>
<div id="tags">
local storage, persistence, cache, html5
</div>
<div id="shortdesc">Caching viewed tiles</div>
<div id="map" class="smallmap"></div>
<div id="status"></div>
<br>
<div id="docs">
<p>This example shows how to use the CacheRead control to fetch cached
tiles from the browser's Local Storage. As you pan and zoom the map,
you can see how the number of cache hits incrases as you browse regions
that are available in the cache.</p>
<p>To fill the cache with tiles, switch to the
<a href="cache-write.html">cache-write.html</a> example.</p>
<p>See <a href="cache-read.js">cache-read.js</a> for the source
code.</p>
</div>
</body>
</html>

40
examples/cache-read.js Normal file
View File

@@ -0,0 +1,40 @@
var map, cacheRead;
function init(){
map = new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
layers: [
new OpenLayers.Layer.WMS("OSGeo", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
layers: "basic"
}, {
eventListeners: {
tileloadstart: function(evt) {
// send requests through proxy
evt.tile.url = "proxy.cgi?url=" + encodeURIComponent(evt.tile.url);
},
tileloaded: updateHits
}
})
],
center: [0,0],
zoom: 1
});
cacheRead = new OpenLayers.Control.CacheRead();
map.addControl(cacheRead);
// User interface
var status = document.getElementById("status");
var hits = 0;
// update the number of cached tiles and detect local storage support
function updateHits(evt) {
hits += evt.tile.url.substr(0, 5) === "data:";
if (window.localStorage) {
status.innerHTML = hits + " cache hits.";
} else {
status.innerHTML = "Local storage not supported. Try a different browser.";
}
}
}

36
examples/cache-write.html Normal file
View File

@@ -0,0 +1,36 @@
<!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">
<title>OpenLayers Cache Write Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script src="cache-write.js"></script>
</head>
<body onload="init()">
<h1 id="title">Cache Write Example</h1>
<div id="tags">
local storage, persistence, cache, html5
</div>
<div id="shortdesc">Caching viewed tiles</div>
<div id="map" class="smallmap"></div>
<div>Cache status: <span id="status"></span></div>
<div><button id="clear">Clear cache</button></div>
<br>
<div id="docs">
<p>This example shows how to use the CacheWrite control to cache the
tiles. Caching is turned on, and as you pan and zoom the map, every
tile that is loaded is also copied to the browsers Local Storage.</p>
<p>To use the cached tiles, switch to the
<a href="cache-read.html">cache-read.html</a> example.</p>
<p>See <a href="cache-write.js">cache-write.js</a> for the source
code.</p>
</div>
</body>
</html>

48
examples/cache-write.js Normal file
View File

@@ -0,0 +1,48 @@
var map, cacheWrite;
function init(){
map = new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
layers: [
new OpenLayers.Layer.WMS("OSGeo", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
layers: "basic"
}, {
eventListeners: {
tileloadstart: function(evt) {
// send requests through proxy
evt.tile.url = "proxy.cgi?url=" + encodeURIComponent(evt.tile.url);
},
tileloaded: updateStatus
}
})
],
center: [0,0],
zoom: 1
});
cacheWrite = new OpenLayers.Control.CacheWrite({
autoActivate: true,
imageFormat: "image/jpeg",
eventListeners: {
cachefull: function() { status.innerHTML = "Cache full."; }
}
});
map.addControl(cacheWrite);
// User interface
var status = document.getElementById("status");
document.getElementById("clear").onclick = function() {
OpenLayers.Control.CacheWrite.clearCache();
updateStatus();
};
// update the number of cached tiles and detect local storage support
function updateStatus() {
if (window.localStorage) {
status.innerHTML = localStorage.length + " entries in cache.";
} else {
status.innerHTML = "Local storage not supported. Try a different browser.";
}
}
}

86
examples/offline-storage.js
View File

@@ -30,6 +30,9 @@ function init(){
imageFormat: "image/jpeg", imageFormat: "image/jpeg",
eventListeners: { eventListeners: {
cachefull: function() { cachefull: function() {
if (seeding) {
stopSeeding();
}
status.innerHTML = "Cache full."; status.innerHTML = "Cache full.";
cacheFull = true; cacheFull = true;
} }
@@ -56,13 +59,16 @@ function init(){
var layerSwitcher = new OpenLayers.Control.LayerSwitcher(); var layerSwitcher = new OpenLayers.Control.LayerSwitcher();
map.addControls([cacheWrite, cacheRead1, cacheRead2, layerSwitcher]); map.addControls([cacheWrite, cacheRead1, cacheRead2, layerSwitcher]);
layerSwitcher.maximizeControl(); layerSwitcher.maximizeControl();
// add UI and behavior // add UI and behavior
var status = document.getElementById("status"), var status = document.getElementById("status"),
hits = document.getElementById("hits"), hits = document.getElementById("hits"),
previousCount = -1, previousCount = -1,
cacheHits = 0, cacheHits = 0,
cacheFull = false; cacheFull = false,
seeding = false;
updateLayerInfo(); updateLayerInfo();
var read = document.getElementById("read"); var read = document.getElementById("read");
read.checked = true; read.checked = true;
@@ -75,7 +81,7 @@ function init(){
tileloadstart.checked = "checked"; tileloadstart.checked = "checked";
tileloadstart.onclick = setType; tileloadstart.onclick = setType;
document.getElementById("tileerror").onclick = setType; document.getElementById("tileerror").onclick = setType;
document.getElementById("seed").onclick = seedCache; document.getElementById("seed").onclick = startSeeding;
// update the number of cached tiles and detect local storage support // update the number of cached tiles and detect local storage support
function updateLayerInfo(evt) { function updateLayerInfo(evt) {
@@ -88,6 +94,7 @@ function init(){
status.innerHTML = "Local storage not supported. Try a different browser."; status.innerHTML = "Local storage not supported. Try a different browser.";
} }
} }
// update the number of cache hits and detect missing CORS support // update the number of cache hits and detect missing CORS support
function updateTileInfo(evt) { function updateTileInfo(evt) {
if (cacheWrite.active) { if (cacheWrite.active) {
@@ -100,6 +107,9 @@ function init(){
status.innerHTML = "Canvas not supported. Try a different browser."; status.innerHTML = "Canvas not supported. Try a different browser.";
} }
} catch(e) { } catch(e) {
if (seeding) {
stopSeeding();
}
status.innerHTML = "CORS image requests not supported. Try a different layer."; status.innerHTML = "CORS image requests not supported. Try a different layer.";
} }
} }
@@ -140,15 +150,18 @@ function init(){
} }
} }
// seed the cache // start seeding the cache
function seedCache() { function startSeeding() {
var zoom = map.getZoom(); var layer = map.baseLayer,
var extent = map.getExtent(); zoom = map.getZoom();
var center = map.getCenter(); seeding = {
var active = cacheWrite.active; zoom: zoom,
var tileWidth = map.baseLayer.tileSize.w; extent: map.getExtent(),
var layer = map.baseLayer; center: map.getCenter(),
var buffer = layer.buffer; cacheWriteActive: cacheWrite.active,
buffer: layer.buffer,
layer: layer
};
// make sure the next setCenter triggers a load // make sure the next setCenter triggers a load
map.zoomTo(zoom === layer.numZoomLevels-1 ? zoom - 1 : zoom + 1); map.zoomTo(zoom === layer.numZoomLevels-1 ? zoom - 1 : zoom + 1);
// turn on cache writing // turn on cache writing
@@ -157,27 +170,38 @@ function init(){
cacheRead1.deactivate(); cacheRead1.deactivate();
cacheRead2.deactivate(); cacheRead2.deactivate();
layer.events.register("loadend", this, function next() { layer.events.register("loadend", null, seed);
var nextZoom = map.getZoom() + 1;
var extentWidth = extent.getWidth() / map.getResolutionForZoom(nextZoom);
// adjust the layer's buffer size so we don't have to pan
layer.buffer = Math.ceil((extentWidth / tileWidth - map.getSize().w / tileWidth) / 2);
map.zoomIn();
if (cacheFull || nextZoom === layer.numZoomLevels-1) {
// we're done - restore previous settings
layer.events.unregister("loadend", this, next);
layer.buffer = buffer;
map.setCenter(center, zoom);
if (!active) {
cacheWrite.deactivate();
}
if (read.checked) {
setType();
}
}
});
// start seeding // start seeding
map.setCenter(center, zoom); map.setCenter(seeding.center, zoom);
}
// seed a zoom level based on the extent at the time startSeeding was called
function seed() {
var layer = seeding.layer;
var tileWidth = layer.tileSize.w;
var nextZoom = map.getZoom() + 1;
var extentWidth = seeding.extent.getWidth() / map.getResolutionForZoom(nextZoom);
// adjust the layer's buffer size so we don't have to pan
layer.buffer = Math.ceil((extentWidth / tileWidth - map.getSize().w / tileWidth) / 2);
map.zoomIn();
if (cacheFull || nextZoom === layer.numZoomLevels-1) {
stopSeeding();
}
}
// stop seeding (when done or when cache is full)
function stopSeeding() {
// we're done - restore previous settings
seeding.layer.events.unregister("loadend", null, seed);
seeding.layer.buffer = seeding.buffer;
map.setCenter(seeding.center, seeding.zoom);
if (!seeding.cacheWriteActive) {
cacheWrite.deactivate();
}
if (read.checked) {
setType();
}
seeding = false;
} }
} }