59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
var regex = /^(\d+)\/(-?\d{1,2}(?:\.\d+)?)\/(-?\d{1,3}(?:\.\d+)?)$/;
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
instr: '',
|
|
zoom: 0,
|
|
xpos: 0,
|
|
ypos: 0,
|
|
tiles: [
|
|
['https://tile.openstreetmap.org/2/1/0.png',
|
|
'https://tile.openstreetmap.org/2/2/0.png',
|
|
'https://tile.openstreetmap.org/2/3/0.png'
|
|
],
|
|
['https://tile.openstreetmap.org/2/1/1.png',
|
|
'https://tile.openstreetmap.org/2/2/1.png',
|
|
'https://tile.openstreetmap.org/2/3/1.png'
|
|
],
|
|
['https://tile.openstreetmap.org/2/1/2.png',
|
|
'https://tile.openstreetmap.org/2/2/2.png',
|
|
'https://tile.openstreetmap.org/2/3/2.png'
|
|
]
|
|
],
|
|
tilestatus: 'https://tile.openstreetmap.org/0/0/0.png/status',
|
|
tiledirty: 'https://tile.openstreetmap.org/0/0/0.png/dirty'
|
|
},
|
|
methods: {
|
|
calc: function() {
|
|
if (regex.test(this.instr)) {
|
|
var groups = this.instr.match(regex);
|
|
zoom = parseInt(groups[1]);
|
|
lat = parseFloat(groups[2]);
|
|
lon = parseFloat(groups[3]);
|
|
this.zoom = Math.pow(2, zoom);
|
|
this.xpos = Math.floor(this.zoom * ((lon + 180) / 360));
|
|
this.ypos = Math.floor(this.zoom * (1 - (Math.log(Math.tan(lat *
|
|
Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) /
|
|
Math.PI)) / 2);
|
|
var arr = new Array(new Array(3), new Array(3), new Array(3));
|
|
var i = 0,
|
|
j = 0;
|
|
var xpos = this.xpos;
|
|
var ypos = this.ypos;
|
|
var z2 = this.zoom
|
|
for (var x = 0; x <= 2; x++) {
|
|
for (var y = 0; y <= 2; y++) {
|
|
var str = 'https://tile.openstreetmap.org/' + zoom + '/' + ((
|
|
z2 + xpos + x - 1) % z2) + '/' + ((z2 + ypos + y - 1) %
|
|
z2) + '.png';
|
|
arr[y][x] = str;
|
|
}
|
|
}
|
|
this.tiles = arr;
|
|
this.tilestatus = arr[1][1] + '/status';
|
|
this.tiledirty = arr[1][1] + '/dirty';
|
|
}
|
|
}
|
|
}
|
|
})
|