Le mirroring des dépôts vers Github est maintenant natif dans Gitlab (et donc Framagit). Merci de passer à la fonction native pour que nous puissions couper notre solution maison. Détails sur https://docs.gitlab.com/ee/workflow/repository_mirroring.html#pushing-to-a-remote-repository (pensez à supprimer le webhook de notre solution maison).

Commit 573ea879 by pizaninja@acerCygwin

Improve navigation and add building selection.

parent bf5b07c9
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
<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%;
}
</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
// }));
// Set ground layer
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"
]));
// Set 3D building layer
world.addLayer(
new OpenEarthView.Layer.OverpassBuilding(
'Overpass', [
'http://overpass-api.de/api/interpreter'
], {
minZoom: 18
}),
THREE.OverpassJsonLoader.getSingleton());
world.setPosition(-73.982704, 40.7489443, 0, 0);
</script>
</body>
</html>
<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(
// 'bluemarble', [
// "http://s3.amazonaws.com/com.modestmaps.bluemarble/${z}-r${y}-c${x}.jpg"
// ], {
// 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' +
'?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.addLayer(
new OpenEarthView.Layer.OverpassBuilding(
'Overpass', [url1], {
minZoom: 18,
localData: 'file:///c:/cygwin64/home/pizaninja/Projects/OpenEarthView/oevLibrary_dev/buildingData/${z}/${x}/${y}.json',
maxRequest: 3
}),
THREE.OverpassJsonLoader.getSingleton());
// world.setPosition(-73.982704, 40.7489443, 500, 1, 0);
world.setPosition(-73.98585791124242, 40.74849635728433, 500, 1, 0);
</script>
</body>
</html>
......@@ -13,6 +13,7 @@ THREE.EarthControls = require('./controls/EarthControls.js');
export default {
World: require('./world.js'),
toolbox: require('./toolbox.js'),
RequestManager: require('./request/RequestManager.js'),
Layer: {
// OverpassBuilding: require('./layers/OverpassBuildingLayer.js'),
OSM: require('./layers/OsmLayer.js')
......
......@@ -63,8 +63,9 @@ class TileLoader {
// console.log('(2) scope.textureRequestsCount: ', scope.textureRequestsCount);
let scope = this;
(function(url, id) {
// console.log("Asking for loading: ", url);
// console.log('Asking for loading: ', url);
// zoom =
textureAliveRequests[id].request = scope.textureLoader.load(url,
function(texture) {
textures[id] = texture;
......
// Help from https://github.com/tcorral/Design-Patterns-in-Javascript/blob/es6/State/1/scripts/main.js
var Ready4LocalLoadState = require('./state/Ready4LocalLoadState.js');
var LocalLoadingState = require('./state/LocalLoadingState.js');
var Ready4RemoteLoadState = require('./state/Ready4RemoteLoadState.js');
var RemoteLoadingState = require('./state/RemoteLoadingState.js');
var LoadedState = require('./state/LoadedState.js');
var LoadFailedState = require('./state/LoadFailedState.js');
class Request {
constructor(myTile, localUrl, localLoader, remoteUrl, remoteLoader, parse, onLoad, onProgress, onFailure) {
// console.log('tile:', myTile);
// console.log('mkdir -p buildingData/' + myTile.z + '/' + myTile.x + '; wget' + ' \'' + remoteUrl + '\' ' + '-O buildingData/' + myTile.z + '/' + myTile.x + '/' + myTile.y + '.json');
this.tileCoord = myTile;
this.localUrl = localUrl;
this.localLoader = localLoader;
this.remoteUrl = remoteUrl;
// console.log('Request.remoteUrl:', remoteUrl);
this.remoteLoader = remoteLoader;
this.parse = parse;
this.onFinish = onLoad;
this.onProgress = onProgress;
this.onFailure = onFailure;
this.state = new Ready4LocalLoadState(this);
}
setState(state) {
// console.log('state:', state.constructor.name);
this.state = state;
}
load() {
this.state.load();
}
progress(event) {
this.state.progress(event);
}
success(response) {
this.state.success(response);
}
fail(event) {
this.state.fail(event);
}
getReady4LocalLoadState() {
return new Ready4LocalLoadState(this);
}
getReady4RemoteLoadState() {
return new Ready4RemoteLoadState(this);
}
getLocalLoadingState() {
return new LocalLoadingState(this);
}
getRemoteLoadingState() {
return new RemoteLoadingState(this);
}
getLoadedState() {
return new LoadedState(this);
}
getLoadedFailedState() {
return new LoadFailedState(this);
}
}
export default Request;
overpassJsonRequest
onProgress
onLoad
onError
init
progress
load
error
```
-----------------------------------
| |
_______ ___V_____ |
| | Ready.load() | | LoadOverPass.progress() |
| Ready |-----|-------->| Loading |---|-------------------------
|_______| |_________| |
| _________
| LoadOverPass.success() | |
'-----|----------------->| Loaded |
| |_________|
| ____________
| LoadOverPass.fail() | |
'-----|----------------->| LoadFailed |
|____________|
```
With remote cache:
```
_______
| |
| Ready |
|_______|
|
- Ready.load()
|
_____V___________
| |
| LoadRemoteCache |
|_________________|
|
|
----------------------------
| |
- LoadRemoteCache.success() - LoadRemoteCache.failure()
| |
| _____V________
| | |
| | LoadOverPass |
| |______________|
| |
| |---------------------------
| | |
| - LoadOverPass.success() - LoadOverPass.failure()
| | |
| _____V________ ______V_____
| | | | |
--------------------->| LoadedData | | Failure |
|______________| |____________|
|
|
- isRemoteCacheEmpty()
|
__________V______
| |
| UploadToCache |
|_________________|
|
- UploadToCache.success()
__|__
| |
| End |
|_____|
```
With local cache:
```
_________________
| |
| Ready4LocalLoad |
|_________________|
|
|-----------------------------
| |
- Ready.load() - Ready.load()
| & localUrl !== undefined | & localUrl === undefined
| |
| |
_____V________ |
| | |
| LocalLoading | |
|______________| |
| |
| |
-------------------------| |
| | |
- LocalLoading.success() - LocalLoading.fail() |
| | |
| | |
| ________V_________ |
| | | |
| | Ready4RemoteLoad | |
| |__________________| |
| | |
| - Ready4RemoteLoad.load() |
| | |
| | |
| | |
| | |
| | |
| | --------------------------
| | |
| ___V__V________
| | |
| | RemoteLoading |
| |_______________|
| |
| |
| |------------------------------
| | |
| - RemoteLoading.success() - RemoteLoading.fail()
| | |
| _____V___ ______V_______
| | | | |
------------------>| Loaded | | LoadFailed |
|_________| |______________|
```
Full machine state:
```
_______
| |
| Ready |
|_______|
|
- load()
|
_____V_____
| |
| LocalLoad |
|___________|
|
|
----------------------|
| |
- LoadCache.finish() - LocalLoad.fail()
| |
|
_____V____________
| |
| LoadCache(z,x,y) |
|__________________|
|
|
----------------------|
| |
- LoadCache.finish() - LoadCache.fail()
| |
| _____V________________
| | |
| | LoadOverPass(z,x,y) |
| |______________________|
| |
| |------------------------------
| | |
| - LoadOverPass.finish() - LoadOverPass.fail()
| | |
| _____V________________ ______V_____
| | | | |
--------------->| ProcessData(z,x,y) | | Failure |
|______________________| |____________|
|
|
- notAlreadyCached ?
|
____V____________________________
| |
| UploadDataToCache(z,x,y,data) |
|_________________________________|
|
- upLoaded
__|__
| |
| End |
|_____|
```
/*
Calls:
let requestManager = new RequestManager(loader, maxRequest);
requestManager.createRequest(z,x,y,lod);
requestManager.loadNext();
*/
var Request = require('./Request.js');
// var THREE = require('THREE');
class RequestManager {
constructor(localLoader, remoteLoader, maxRequest) {
this.localLoader = localLoader;
this.remoteLoader = remoteLoader;
this.jsonResponse = {};
this.requests = {};
this.aliveRequests = {};
this.aliveRequestsCount = 0;
this.requestsCount = 0;
this.maxRequest = (maxRequest !== undefined) ? maxRequest : RequestManager.DEFAULT_MAX_REQUEST;
}
newRequest(tileId, localUrl, url, onLoad, parse) {
let scope = this;
let myUrl = new URL(url);
let tilePath = myUrl.pathname + myUrl.search;
if (this.jsonResponse.hasOwnProperty(tilePath)) {
onLoad(parse(
scope.jsonResponse[tilePath],
tileId));
} else if (!this.requests.hasOwnProperty(tilePath)) {
this.requests[tilePath] =
new Request(tileId, localUrl, this.localLoader, url, this.remoteLoader, parse,
(payload) => {
let myUrl = new URL(url);
let tilePath = myUrl.pathname + myUrl.search;
// console.log('myTile:', myTile);
// console.log('tilePath:', tilePath);
if (scope.aliveRequests.hasOwnProperty(tilePath)) {
delete scope.aliveRequests[tilePath];
scope.aliveRequestsCount--;
// console.log('aliveRequestsCount:', scope.aliveRequestsCount);
// console.log('payload:', payload);
scope.jsonResponse[tilePath] = (payload === '') ? {} : JSON.parse(payload);
onLoad(parse(scope.jsonResponse[tilePath], tileId));
}
scope.loadNext();
},
() => {},
() => {
let myUrl = new URL(url);
let tilePath = myUrl.pathname + myUrl.search;
if (scope.aliveRequests.hasOwnProperty(tilePath)) {
delete scope.aliveRequests[tilePath];
scope.aliveRequestsCount--;
// console.log('aliveRequestsCount:', scope.aliveRequestsCount);
}
scope.loadNext();
});
this.requestsCount++;
// console.log('requestsCount:', this.requestsCount);
scope.loadNext();
}
}
loadNext() {
while (this.aliveRequestsCount < this.maxRequest && this.requestsCount > 0) {
let tilePaths = Object.keys(this.requests);
// console.log('tilePaths.length:', tilePaths.length);
let tilePath = tilePaths[tilePaths.length - 1];
// console.log('tilePath:', tilePath);
if (this.aliveRequests.hasOwnProperty(tilePath)) {
// Remove request from queue
delete this.requests[tilePath];
this.requestsCount--;
// console.log('requestsCount:', this.requestsCount);
continue;
}
this.aliveRequestsCount++;
// console.log('aliveRequestsCount:', this.aliveRequestsCount);
this.aliveRequests[tilePath] = this.requests[tilePath];
// Remove request from queue
let req = this.aliveRequests[tilePath];
delete this.requests[tilePath];
this.requestsCount--;
// console.log('requestsCount:', this.requestsCount);
req.load();
}
}
}
RequestManager.DEFAULT_MAX_REQUEST = 10;
// RequestManager.LOADING_MANAGER = THREE.DefaultLoadingManager;
export default RequestManager;
import State from './State';
class LoadFailedState extends State {
constructor(request) {
super();
this._request = request;
}
load() {
throw new Error("You can't reload a failed load!");
}
progress(event) {
throw new Error("You can't make progress a failed load!");
}
fail(event) {
throw new Error("A failed load can't fail itself!");
}
success(response) {
// console.log('payload:', response);
throw new Error('A failed load cannot success!');
}
}
export default LoadFailedState;
import State from './State';
class LoadedState extends State {
constructor(request) {
super();
this._request = request;
}
load() {
throw new Error("You can't reload a loaded file!");
}
progress() {
throw new Error("You can't make progress a loaded file!");
}
fail() {
throw new Error("A loaded file can't fail!");
}
success(payload) {
throw new Error("A loaded file can't success itself!");
}
}
export default LoadedState;
import State from './State';
class LoadingState extends State {
constructor(request) {
super();
this._request = request;
}
load() {
throw new Error("You can't load a file that is being loaded already!");
}
progress(event) {
// console.log('Load in progress!');
// console.log('event:', event);
this._request.onProgress();
// this._request.setState(this._request.getLoadingState());
}
fail(event) {
// console.log('Load has failed!');
// console.log('state:', this._request.state);
// console.log('event:', event);
this._request.onFailure();
this._request.setState(this._request.getLoadedFailedState());
}
finish(response) {
// console.log('Load has finished!');
// console.log('payload:', response);
this._request.onFinish(response);
this._request.setState(this._request.getLoadedState());
}
}
export default LoadingState;
import State from './State';
class LocalLoadingState extends State {
constructor(request) {
super();
this._request = request;
}
load() {
throw new Error("You can't load a file that is being loaded already!");
}
progress(event) {
// console.log('Getting local data in progress: ', this._request.localUrl);
this._request.onProgress();
}
fail(event) {
console.log('Fail to get local data at', this._request.localUrl);
let myTile = this._request.tileCoord;
console.log('mkdir -p buildingData/' + myTile.z + '/' + myTile.x + '; wget' + ' \'' + this._request.remoteUrl + '\' ' + '-O buildingData/' + myTile.z + '/' + myTile.x + '/' + myTile.y + '.json');
this._request.setState(this._request.getReady4RemoteLoadState());
this._request.load();
}
success(response) {
console.log('Success in getting local data at', this._request.localUrl);
this._request.onFinish(response);
this._request.setState(this._request.getLoadedState());
}
}
export default LocalLoadingState;
import State from './State';
class Ready4LocalLoadState extends State {
constructor(request) {
super();
this._request = request;
}
load() {
// console.log('Ready4LocalLoad.');
let scope = this;
// console.log('Start Load!');
let url;
let loader;
if (this._request.localUrl !== undefined) {
// console.log('localUrl:', this._request.localUrl);
url = this._request.localUrl;
loader = this._request.localLoader;
this._request.setState(this._request.getLocalLoadingState());
} else {
console.log('localUrl undefined');
url = this._request.url;
loader = this._request.remoteLoader;
this._request.setState(this._request.getRemoteLoadingState());
}
// load: function ( url, onLoad(response), onProgress(event), onError(event) ) {
loader.load(
url,
(response) => {
scope._r