mirror of
https://git.ludikovsky.name/git/osmtile.git
synced 2024-09-16 21:05:30 +02:00
Initial commit
This commit is contained in:
commit
8cfcb7e50e
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
.*.swp
|
14
osmtile.css
Normal file
14
osmtile.css
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
#map {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 768px;
|
||||||
|
height: 768px;
|
||||||
|
}
|
||||||
|
#map >img {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
width: 256px;
|
||||||
|
height: 256px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
30
osmtile.html
Normal file
30
osmtile.html
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>OSM tile calc</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
|
||||||
|
<link rel="stylesheet" href="osmtile.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<label>Zoom/Lat/Lon:</label>
|
||||||
|
<input placeholder="zoom/lat/lon" v-model="instr" v-on:input="calc">
|
||||||
|
<ul>
|
||||||
|
<li><a :href='tilestatus' target='osmtileext'>Status</a></li>
|
||||||
|
<li><a :href='tiledirty' target='osmtileext'>Mark dirty</a></li>
|
||||||
|
</ul>
|
||||||
|
<div id="map">
|
||||||
|
<template v-for='tilear in tiles'>
|
||||||
|
<template v-for='tile in tilear'><img :src='tile'></template>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/vue">
|
||||||
|
</script>
|
||||||
|
<script src="osmtile.js">
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
58
osmtile.js
Normal file
58
osmtile.js
Normal file
|
@ -0,0 +1,58 @@
|
||||||
|
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';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
Loading…
Reference in a new issue