-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (96 loc) · 4.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<html>
<head>
<meta charset=utf-8>
<title>Open Earth View - viewer-earth</title>
<link rel="stylesheet" href="css/openearthview.css" type="text/css">
<style>
body {
margin: 0;
}
/*#osmworld {
height: 90%;
margin-left: 5%;
margin-right: 5%;
}*/
#osmworld {
height: 100%;
margin-left: 0%;
margin-right: 0%;
}
</style>
<script src="node_modules/three/build/three.js"></script>
<script src="./lib/OpenEarthView.js" type="text/javascript"></script>
<script src="./js/layers/OverpassBuildingLayer.js" type="text/javascript"></script>
</head>
<body>
<div id="osmworld"></div>
<script type="text/javascript">
var world = new OpenEarthView.World("osmworld");
world.addLayer(
new OpenEarthView.Layer.OSM(
'GoogleMap', [
"http://mt0.google.com/vt/lyrs=y&x=${x}&y=${y}&z=${z}",
"http://mt1.google.com/vt/lyrs=y&x=${x}&y=${y}&z=${z}",
"http://mt2.google.com/vt/lyrs=y&x=${x}&y=${y}&z=${z}",
"http://mt3.google.com/vt/lyrs=y&x=${x}&y=${y}&z=${z}"
], {
mapTextureRequest: 10
}));
// world.addLayer(
// new OpenEarthView.Layer.OSM(
// 'GoogleMap', [
// "http://localhost:8092/http/mt0.google.com/vt/lyrs=y&x=${x}&y=${y}&z=${z}",
// "http://localhost:8092/http/mt1.google.com/vt/lyrs=y&x=${x}&y=${y}&z=${z}",
// "http://localhost:8092/http/mt2.google.com/vt/lyrs=y&x=${x}&y=${y}&z=${z}",
// "http://localhost:8092/http/mt3.google.com/vt/lyrs=y&x=${x}&y=${y}&z=${z}"
// ], {
// mapTextureRequest: 10
// }));
// // Set ground layer
// world.addLayer(
// new OpenEarthView.Layer.OSM(
// "OpenStreetMap", [
// "http://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
// "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
// "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
// ]));
// Set ground layer
// world.addLayer(
// new OpenEarthView.Layer.OSM(
// "OpenStreetMap", [
// "http://localhost:8092/osm/http/a.tile.openstreetmap.org/${z}/${x}/${y}.png",
// "http://localhost:8092/osm/http/b.tile.openstreetmap.org/${z}/${x}/${y}.png",
// "http://localhost:8092/osm/http/c.tile.openstreetmap.org/${z}/${x}/${y}.png"
// ]));
// Set 3D building layer
// world.addLayer(
// new OpenEarthView.Layer.OverpassBuilding(
// 'Overpass', [
// 'http://overpass-api.de/api/interpreter'
// ], {
// minZoom: 18
// }),
// THREE.OverpassJsonLoader.getSingleton());
// 'http://localhost:8092/http/overpass-api.de/api/interpreter'
let bbox = '${tile2lat(y+1)},${tile2long(x)},${tile2lat(y)},${tile2long(x+1)}'
// let url1 = 'http://overpass-api.de/api/interpreter' +
let url1 = 'http://localhost/api/interpreter' +
'?data=[out:json];(' +
'(relation["type"="building"](' + bbox + ');>;);' +
'(way["building"](' + bbox + ');>;););' +
'out center;';
world.addLayer(
new OpenEarthView.Layer.OverpassBuilding(
'Overpass', [url1], {
minZoom: 18,
localData: 'file:///home/cigone/perso/OpenEarthView/oevLibrary_dev/buildingData/${z}/${x}/${y}.json'
}),
THREE.OverpassJsonLoader.getSingleton());
// world.setPosition(-73.982704, 40.7489443, 500, 1, 0);
// ESB
// world.setPosition(-73.98585791124242, 40.74849635728433, 500, 1, 0);
// Paris
world.setPosition(2.349014, 48.864716, 500, 1, 0);
</script>
</body>
</html>