Addressing @elemoine's review comments.

Now the application no longer needs to care about the tile origin, because the CacheWrite control modifies the url if the CORS image loading is disabled and it is from a different origin. This only requires OpenLayers.ProxyHost to be properly configured. Also local storage keys use the original url instead of the proxied url, to make the CacheRead control work without proxy settings.
No deferred exceptions are thrown any more. Instead, OpenLayers.Console is used to show an error message for security exceptions.
We now check for OpenLayers.Tile.Image, because other tile types (e.g. UTFGrid) are not supported (yet).
To make the same origin handling in the CacheWrite control easier, OpenLayers.Request now exposes the same origin logic from request.issue as a separate function, so it can also be used by other components.
This commit is contained in:
ahocevar
2012-03-11 22:15:34 +01:00
parent 3d8a9168f0
commit bd262fce41
8 changed files with 138 additions and 72 deletions

View File

@@ -1,5 +1,5 @@
var map, cacheRead;
function init(){
function init() {
map = new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
@@ -8,15 +8,11 @@ function init(){
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],
center: [0, 0],
zoom: 1
});
cacheRead = new OpenLayers.Control.CacheRead();
@@ -25,8 +21,8 @@ function init(){
// User interface
var status = document.getElementById("status");
var hits = 0;
var status = document.getElementById("status"),
hits = 0;
// update the number of cached tiles and detect local storage support
function updateHits(evt) {

View File

@@ -8,6 +8,7 @@
<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>OpenLayers.Console = window.console;</script>
<script src="cache-write.js"></script>
</head>
<body onload="init()">

View File

@@ -1,5 +1,9 @@
// Use proxy to get same origin URLs for tiles that don't support CORS.
OpenLayers.ProxyHost = "proxy.cgi?url=";
var map, cacheWrite;
function init(){
function init() {
map = new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
@@ -8,15 +12,11 @@ function init(){
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],
center: [0, 0],
zoom: 1
});
cacheWrite = new OpenLayers.Control.CacheWrite({

View File

@@ -13,6 +13,7 @@
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script>OpenLayers.Console = window.console;</script>
<script src="offline-storage.js"></script>
</head>
<body onload="init()">

View File

@@ -1,5 +1,9 @@
// Use proxy to get same origin URLs for tiles that don't support CORS.
OpenLayers.ProxyHost = "proxy.cgi?url=";
var map, cacheWrite, cacheRead1, cacheRead2;
function init(){
function init() {
map = new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
@@ -14,28 +18,13 @@ function init(){
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],
center: [0, 0],
zoom: 1
});
cacheWrite = new OpenLayers.Control.CacheWrite({
imageFormat: "image/jpeg",
eventListeners: {
cachefull: function() {
if (seeding) {
stopSeeding();
}
status.innerHTML = "Cache full.";
}
}
});
// try cache before loading from remote resource
cacheRead1 = new OpenLayers.Control.CacheRead({
eventListeners: {
@@ -54,8 +43,19 @@ function init(){
}
}
});
cacheWrite = new OpenLayers.Control.CacheWrite({
imageFormat: "image/jpeg",
eventListeners: {
cachefull: function() {
if (seeding) {
stopSeeding();
}
status.innerHTML = "Cache full.";
}
}
});
var layerSwitcher = new OpenLayers.Control.LayerSwitcher();
map.addControls([cacheWrite, cacheRead1, cacheRead2, layerSwitcher]);
map.addControls([cacheRead1, cacheRead2, cacheWrite, layerSwitcher]);
layerSwitcher.maximizeControl();
@@ -63,7 +63,6 @@ function init(){
// add UI and behavior
var status = document.getElementById("status"),
hits = document.getElementById("hits"),
previousCount = -1,
cacheHits = 0,
seeding = false;
var read = document.getElementById("read");
@@ -107,7 +106,7 @@ function init(){
} else {
status.innerHTML = "Local storage not supported. Try a different browser.";
}
if (evt.tile.url.substr(0, 5) === "data:") {
if (evt && evt.tile.url.substr(0, 5) === "data:") {
cacheHits++;
}
hits.innerHTML = cacheHits + " cache hits.";