Commit 17be6f0a authored by Clément Igonet's avatar Clément Igonet

Add overpass loader.

parent bf60a0a2
integration.openearthview.net {
tls contact@openearthview.net
root /var/www/viewer-earth-api-integration
gzip
}
......@@ -45,13 +45,21 @@
<script src="node_modules/three/build/three.js"></script>
<script src="js/turf/v2.0.2/turf.min.js"></script>
<script src="js/openearthview.js" type="text/javascript"></script>
<script src="js/loaders/TileLoader.js" type="text/javascript"></script>
<script src="js/loaders/GeojsonLoader.js"></script>
<script src="js/toolbox.js" type="text/javascript"></script>
<!-- <script src="js/loaders/TerrainLoader.js" type="text/javascript"></script> -->
<script src="js/loaders/TileLoader.js" type="text/javascript"></script>
<script src="js/loaders/TerrainLoader.js" type="text/javascript"></script>
<!-- <script src="js/loaders/GeojsonLoader.js"></script> -->
<script src="js/loaders/OverpassJsonLoader.js"></script>
<!-- <script src="js/loaders/mapzenGeojsonLoader.js"></script> -->
<!-- <script src="js/toolbox.js" type="text/javascript"></script> -->
<script src="js/controls/EarthControls.js"></script>
<script src="js/layers/Layer.js"></script>
<script src="js/layers/OsmLayer.js"></script>
<script src="js/layers/BuildingLayer.js"></script>
<script src="js/layers/OverpassBuildingLayer.js"></script>
<script src="js/terrains/Terrain.js"></script>
<script src="js/terrains/FlatTerrain.js"></script>
<title>OpenEartView example</title>
</head>
......@@ -67,22 +75,93 @@
// "http://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
// "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
// ]));
world.addLayer(new OpenEarthView.Layer.Building(
"OpenEarthView", [
'http://localhost:8081/3dtile?format=geojson&xtile=${x}&ytile=${y}&zoom=${z}&factor=${f}'
]));
// world.addLayer(new OpenEarthView.Layer.Building(
// "OpenEarthView", [
// 'http://localhost:8081/3dtile?format=geojson&xtile=${x}&ytile=${y}&zoom=${z}&factor=${f}'
// ]));
world.addLayer(new OpenEarthView.Layer.OverpassBuilding(
"Overpass", [
'http://overpass-api.de/api/interpreter'
], {
minZoom: 18
}));
// curl -G -d 'data=[bbox];(relation["building"])->.relbuilding;'\
// '.relbuilding%20is_in({{center}})->.relcentered;'\
// '(.relcentered;>;)->.bigbuildings' \
// '(way["building"])->.waybuilding;'\
// '.waybuilding%20is_in({{center}})->.waycentered;'\
// '(.bigbuildings;.waycentered;);out;' \
// "http://overpass-api.de/api/interpreter?bbox=55.7523958,37.6216078,55.7528487,37.6237535"
// [out:json];
// (relation["building"]({{bbox}}))->.relbuilding;
// .relbuilding is_in({{center}})->.relcentered;
// (.relcentered;>;)->.bigbuildings;
// (way["building"]({{bbox}}))->.waybuilding;
// .waybuilding is_in({{center}})->.waycentered;
// (.bigbuildings;.waycentered;);
// out;
// http://localhost:8083/proxycache-geojson?tile=${z},${x},${y}
// world.addLayer(new OpenEarthView.Layer.Building(
// "OpenEarthView", [
// 'http://localhost:8083/proxycache-geojson?tile=${z},${x},${y}'
// ], {
// minZoom: 17
// }));
// world.addLayer(new OpenEarthView.Layer.Building(
// "OpenEarthView", [
// 'http://vector.mapzen.com/osm/buildings/${z}/${x}/${y}.json'
// ], {
// minZoom: 17
// }));
// world.addLayer(new OpenEarthView.Layer.OSM(
// "OpenCycleMap", [
// "http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
// ]));
world.addLayer(new OpenEarthView.Layer.OSM(
"OpenCycleMap", [
"http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
]));
"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(
// "OpenStreetMap", [
// "https://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
// "https://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
// "https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
// ]));
// world.addLayer(new OpenEarthView.Layer.Elevation(
// "OpenEarthView", [
// 'http://localhost:8084/oevElevation?tile=${z},${x},${y},${lod}'
// ]));
// world.addTerrain(new OpenEarthView.Terrain.FlatTerrain("FlatTerrain"));
// UNESCO
// world.setCenter(2.3057599523656336, 48.849568465379264);
// LOUVRE
// world.setCenter(2.3364709900972684, 48.86045538042749);
world.setCenter(2.3364709900972684, 48.86045538042749);
// MANHATTAN
world.setCenter(286.02073690310226, 40.747508647167834);
// world.setCenter(286.02073690310226, 40.747508647167834);
</script>
</body>
......
......@@ -5,8 +5,12 @@
// "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
// ]));
OpenEarthView.Layer.Building = function(name, urls) {
OpenEarthView.Layer.Building = function(name, urls, options) {
this.name = (name !== undefined) ? name : 'OpenEarthView';
if (options !== undefined) {
this.minZoom = (options.minZoom !== undefined)?options.minZoom:18;
console.log('minZoom: ' + this.minZoom);
}
if (OpenEarthViewLayers.hasOwnProperty(name)) {
console.err('Cannot register this already existing layer !');
return;
......@@ -22,7 +26,7 @@ OpenEarthView.Layer.Building.prototype = {
getName: function() {
return this.name
},
getUrl: function(zoom, xtile, ytile, factor) {
getUrl: function(zoom, xtile, ytile) {
var scope = this;
var urls = OpenEarthViewLayers[scope.name];
var urlRandom = urls[
......@@ -34,8 +38,8 @@ OpenEarthView.Layer.Building.prototype = {
// // console.log("Match!");
// return p1 + zoom + p2 + xtile + p3 + ytile + p4;
// });
var url = urlRandom.replace('${f}', factor);
var url = url.replace('${z}', zoom);
// var url = urlRandom.replace('${f}', factor);
var url = urlRandom.replace('${z}', zoom);
var url = url.replace('${x}', xtile);
return url.replace('${y}', ytile);
// return url;
......
// 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"
// ]));
var toolbox = OpenEarthView.toolbox;
OpenEarthView.Layer.OverpassBuilding = function(name, urls, options) {
this.name = (name !== undefined) ? name : 'Overpass';
this.minZoom = 17;
if (options !== undefined) {
this.minZoom = (options.minZoom !== undefined) ? options.minZoom : 18;
// console.log('minZoom: ' + this.minZoom);
}
if (OpenEarthViewLayers.hasOwnProperty(name)) {
console.err('Cannot register this already existing layer !');
return;
}
OpenEarthViewLayers[name] = (urls !== undefined) ? urls : [
'http://overpass-api.de/api/interpreter'
];
};
OpenEarthView.Layer.OverpassBuilding.prototype = {
constructor: OpenEarthView.Layer.Building,
type: 'overpassBuilding',
getName: function() {
return this.name
},
getUrl: function(zoom, xtile, ytile) {
var scope = this;
var urls = OpenEarthViewLayers[scope.name];
var urlRandom = urls[
Math.floor(Math.random() * urls.length)];
// Process GPS bounds
minLon = toolbox.tile2long(xtile, zoom);
maxLon = toolbox.tile2long(xtile + 1, zoom);
minLat = toolbox.tile2lat(ytile + 1, zoom);
maxLat = toolbox.tile2lat(ytile, zoom);
var url = urlRandom;
url = url + '?data=[out:json];' +
'((relation["building"](' + minLat + ',' + minLon + ',' + maxLat + ',' + maxLon + ');>;);' +
'(way["building"](' + minLat + ',' + minLon + ',' + maxLat + ',' + maxLon + ');>;););' +
'out center;'
return url;
}
}
This diff is collapsed.
......@@ -28,6 +28,7 @@ var MAX_TEXTURE_REQUEST = 10;
OpenEarthView.TileLoader = function() {
this.textureLoader = new THREE.TextureLoader();
this.textureLoader.crossOrigin = '';
// this.textureLoader
};
OpenEarthView.TileLoader.prototype = {
......@@ -45,6 +46,8 @@ OpenEarthView.TileLoader.prototype = {
var textures = scope.textures;
var textureRequests = scope.textureRequests;
var textureAliveRequests = scope.textureAliveRequests;
// console.log('scope.textureAliveRequestsCount: ', scope.textureAliveRequestsCount);
// console.log('scope.textureRequestsCount: ', scope.textureRequestsCount);
while (scope.textureAliveRequestsCount < MAX_TEXTURE_REQUEST && scope.textureRequestsCount > 0) {
var ids = Object.keys(textureRequests);
var id = ids[ids.length - 1];
......@@ -53,7 +56,11 @@ OpenEarthView.TileLoader.prototype = {
var url = textureAliveRequests[id].url;
delete textureRequests[id];
scope.textureRequestsCount--;
// console.log('(2) scope.textureAliveRequestsCount: ', scope.textureAliveRequestsCount);
// console.log('(2) scope.textureRequestsCount: ', scope.textureRequestsCount);
(function(url, id) {
// console.log("Asking for loading: ", url);
// zoom =
textureAliveRequests[id].request = scope.textureLoader.load(url,
function(texture) {
textures[id] = texture;
......@@ -61,6 +68,8 @@ OpenEarthView.TileLoader.prototype = {
textureAliveRequests[id].onLoaded(texture);
delete textureAliveRequests[id];
scope.textureAliveRequestsCount--;
// console.log('(0) scope.textureAliveRequestsCount: ', scope.textureAliveRequestsCount);
// console.log('(0) scope.textureRequestsCount: ', scope.textureRequestsCount);
}
scope.loadNextTile();
},
......@@ -70,6 +79,8 @@ OpenEarthView.TileLoader.prototype = {
// textureAliveRequests[id].onLoaded(texture);
delete textureAliveRequests[id];
scope.textureAliveRequestsCount--;
// console.log('scope.textureAliveRequestsCount: ', scope.textureAliveRequestsCount);
// console.log('scope.textureRequestsCount: ', scope.textureRequestsCount);
}
scope.loadNextTile();
}
......@@ -82,18 +93,73 @@ OpenEarthView.TileLoader.prototype = {
// var TILE_PROVIDER01_RANDOM = ['a', 'b', 'c'];
// var TILE_PROVIDER01_FILE_EXT = 'png';
tileFactory: function(url, zoom, xtile, ytile, onLoaded, layerName) {
tilePreload: function(zoom, xtile, ytile, onLoaded) {
var scope = this;
var textures = scope.textures;
var textureRequests = scope.textureRequests;
var textureAliveRequests = scope.textureAliveRequests;
var id = zoom + '/' + xtile + '/' + ytile;
for (var diff = 0; diff < zoom; diff++) {
var power = Math.pow(2, diff);
var idZoomOther = (+zoom - diff) + '/' + Math.floor(xtile / power) + '/' + Math.floor(ytile / power);
// console.log('Looking for texture: ', idZoomOther);
if (textures.hasOwnProperty(idZoomOther)) {
// onLoaded(textures[idZoomOther]);
// origin : bottom left
var tex = textures[idZoomOther].clone();
tex.repeat.x = 1 / power;
tex.repeat.y = 1 / power;
var xOffset = xtile - Math.floor(xtile / power) * power
// console.log('xOffset: ', xOffset);
var yOffset = (power - 1) - (ytile - Math.floor(ytile / power) * power);
// console.log('yOffset: ', yOffset);
tex.offset.x = xOffset * tex.repeat.x;
tex.offset.y = yOffset * tex.repeat.y;
tex.needsUpdate = true;
onLoaded(tex);
return;
}
}
// for (var diff = Math.min(zoom - 19, -8); diff < Math.min(zoom - 1, -1); diff++) {
// var power = Math.pow(2, diff);
// var idZoomOther = (+zoom - diff) + '/' + Math.floor(xtile / power) + '/' + Math.floor(ytile / power);
// // console.log('Looking for texture: ', idZoomOther);
// if (textures.hasOwnProperty(idZoomOther)) {
// // onLoaded(textures[idZoomOther]);
// // origin : bottom left
// var tex = textures[idZoomOther].clone();
// tex.repeat.x = 1 / power;
// tex.repeat.y = 1 / power;
// var xOffset = xtile - Math.floor(xtile / power) * power
// console.log('xOffset: ', xOffset);
// var yOffset = (power - 1) - (ytile - Math.floor(ytile / power) * power);
// console.log('yOffset: ', yOffset);
// tex.offset.x = xOffset * tex.repeat.x;
// tex.offset.y = yOffset * tex.repeat.y;
// tex.needsUpdate = true;
// onLoaded(tex);
// return;
// }
// }
},
tileFactory: function(url, zoom, xtile, ytile, onLoaded) {
var scope = this;
var textures = scope.textures;
var textureRequests = scope.textureRequests;
var textureAliveRequests = scope.textureAliveRequests;
var id = 'tile' + zoom + '_' + xtile + '_' + ytile + '_' + layerName;
// var id = 'tile' + zoom + '_' + xtile + '_' + ytile + '_' + layerName;
// var myUrl = new URL(url);
var id = zoom + '/' + xtile + '/' + ytile;
if (textures.hasOwnProperty(id)) {
onLoaded(textures[id]);
// onLoaded(textures[id]);
} else {
scope.textureRequestsCount = scope.textureRequestsCount + (textureRequests.hasOwnProperty(id) ? 0 : 1);
// console.log('scope.textureAliveRequestsCount: ', scope.textureAliveRequestsCount);
// console.log('scope.textureRequestsCount: ', scope.textureRequestsCount);
textureRequests[id] = {
zoom: zoom,
xtile: xtile,
ytile: ytile,
url: url,
onLoaded: onLoaded
}
......@@ -105,10 +171,14 @@ OpenEarthView.TileLoader.prototype = {
var textures = scope.textures;
var textureRequests = scope.textureRequests;
var textureAliveRequests = scope.textureAliveRequests;
// console.log('currentIds: ', JSON.stringify(currentIds));
for (var id in textureRequests) {
if (!currentIds.hasOwnProperty(id)) {
delete textureRequests[id];
scope.textureRequestsCount--;
// console.log('id: ', id);
// console.log('(1) scope.textureAliveRequestsCount: ', scope.textureAliveRequestsCount);
// console.log('(1) scope.textureRequestsCount: ', scope.textureRequestsCount);
}
}
for (var id in textureAliveRequests) {
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment