136 lines
3.1 KiB
JavaScript
136 lines
3.1 KiB
JavaScript
|
var spriteRanges = {
|
||
|
|
// tl = top_left
|
||
|
|
// br = bottom_right
|
||
|
|
// {zoom: {tl: {}, br: {}}
|
||
|
|
0: {
|
||
|
|
tl: {x: 0, y: 0},
|
||
|
|
br: {x: 0, y: 0}
|
||
|
|
},
|
||
|
|
1: {
|
||
|
|
tl: {x: 1, y: 0},
|
||
|
|
br: {x: 1, y: 0}
|
||
|
|
},
|
||
|
|
2: {
|
||
|
|
tl: {x: 2, y: 1},
|
||
|
|
br: {x: 2, y: 1}
|
||
|
|
},
|
||
|
|
3: {
|
||
|
|
tl: {x: 4, y: 2},
|
||
|
|
br: {x: 4, y: 2}
|
||
|
|
},
|
||
|
|
4: {
|
||
|
|
tl: {x: 9, y: 5},
|
||
|
|
br: {x: 9, y: 5}
|
||
|
|
},
|
||
|
|
5: {
|
||
|
|
tl: {x: 18, y: 10},
|
||
|
|
br: {x: 18, y: 10}
|
||
|
|
},
|
||
|
|
6: {
|
||
|
|
tl: {x: 36, y: 20},
|
||
|
|
br: {x: 36, y: 20}
|
||
|
|
},
|
||
|
|
7: {
|
||
|
|
tl: {x: 73, y: 41},
|
||
|
|
br: {x: 73, y: 41}
|
||
|
|
},
|
||
|
|
8: {
|
||
|
|
tl: {x: 147, y: 82},
|
||
|
|
br: {x: 147, y: 82}
|
||
|
|
},
|
||
|
|
9: {
|
||
|
|
tl: {x: 294, y: 164},
|
||
|
|
br: {x: 295, y: 164}
|
||
|
|
},
|
||
|
|
10: {
|
||
|
|
tl: {x: 589, y: 328},
|
||
|
|
br: {x: 591, y: 329}
|
||
|
|
},
|
||
|
|
11: {
|
||
|
|
tl: {x: 1179, y: 657},
|
||
|
|
br: {x: 1182, y: 659}
|
||
|
|
},
|
||
|
|
12: {
|
||
|
|
tl: {x: 2358, y: 1315},
|
||
|
|
br: {x: 2364, y: 1319}
|
||
|
|
},
|
||
|
|
13: {
|
||
|
|
tl: {x: 4717, y: 2630},
|
||
|
|
br: {x: 4728, y: 2639}
|
||
|
|
},
|
||
|
|
14: {
|
||
|
|
tl: {x: 9439, y: 5262},
|
||
|
|
br: {x: 9452, y: 5277}
|
||
|
|
},
|
||
|
|
15: {
|
||
|
|
tl: {x: 18878, y: 10525},
|
||
|
|
br: {x: 18905, y: 10554}
|
||
|
|
},
|
||
|
|
16: {
|
||
|
|
tl: {x: 37757, y: 21051},
|
||
|
|
br: {x: 37810, y: 21108}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var max_zoom = 13;
|
||
|
|
|
||
|
|
var webStorage = new WebStorageFactory().getWebStorage();
|
||
|
|
|
||
|
|
function imageToBase64(image) {
|
||
|
|
var canvas = document.createElement("canvas");
|
||
|
|
canvas.width = image.width;
|
||
|
|
canvas.height = image.height;
|
||
|
|
|
||
|
|
var context = canvas.getContext("2d");
|
||
|
|
context.drawImage(image, 0, 0);
|
||
|
|
|
||
|
|
return canvas.toDataURL("image/png");
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadImageToWebStorage(zoom, x, y){
|
||
|
|
var url = "cache/" + zoom + "/" + x + "_" + y + ".png";
|
||
|
|
var image = new Image();
|
||
|
|
image.onload = function() {
|
||
|
|
webStorage.setItem([zoom, x, y].join('_'), imageToBase64(image));
|
||
|
|
};
|
||
|
|
image.src = url;
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearWebStorage() {
|
||
|
|
webStorage.clear();
|
||
|
|
}
|
||
|
|
|
||
|
|
function prepareWebStorage() {
|
||
|
|
for (var zoom in spriteRanges) {
|
||
|
|
if (zoom > max_zoom) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
var sprites = spriteRanges[zoom];
|
||
|
|
for (var x=sprites.tl.x; x<=sprites.br.x; x++) {
|
||
|
|
for (var y=sprites.tl.y; y<=sprites.br.y; y++) {
|
||
|
|
loadImageToWebStorage(zoom, x, y);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkTileInSprites(coord, zoom) {
|
||
|
|
var sprites = spriteRanges[zoom];
|
||
|
|
return sprites.tl.x <= coord.x && coord.x <= sprites.br.x && sprites.tl.y <= coord.y && coord.y <= sprites.br.y;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getOsmTileImgSrc(coord, zoom) {
|
||
|
|
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
|
||
|
|
}
|
||
|
|
|
||
|
|
function getGmapTileImgSrc(coord, zoom) {
|
||
|
|
return "http://mt0.googleapis.com/vt?src=apiv3&x=" + coord.x + "&y=" + coord.y + "&z=" + zoom;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getLocalTileImgSrc(coord, zoom) {
|
||
|
|
return "cache/" + zoom + "/" + coord.x + "_" + coord.y + ".png";
|
||
|
|
}
|
||
|
|
|
||
|
|
function getWebStorageTileImgSrc(coord, zoom) {
|
||
|
|
return webStorage.getItem([zoom, coord.x, coord.y].join('_'));
|
||
|
|
}
|