Commit e330a242 authored by Clément Igonet's avatar Clément Igonet

viewer-earth-api

parent a653f230
......@@ -36,9 +36,9 @@
}
#osmworld {
height: 80%;
margin-left: 10%;
margin-right: 10%;
height: 90%;
margin-left: 5%;
margin-right: 5%;
}
</style>
<script src="bower_components/three.js/three.min.js"></script>
......@@ -48,34 +48,39 @@
<script src="js/loaders/GeojsonLoader.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>
<title>OpenEartView example</title>
</head>
<body>
<h2>Open Earth View demo</h2>
<!-- <h2>Open Earth View demo</h2> -->
<div id="osmworld"></div>
<script type="text/javascript">
var world = new OpenEarthView.World("osmworld");
world.updateSceneLazy();
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"
]));
// world.addBuildings(new OpenEarthView.Buildings(
// "OpenEarthView", [
// 'http://localhost:8081/3dtile?format=geojson&xtile=${x}&ytile=${y}&zoom=${z}'
// ]));
// world.updateSceneLazy();
// world.addLayer(new OpenEarthView.Layer.OSM(
// "OpenCycleMap", [
// "http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
// "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"
// ]));
world.addLayer(new OpenEarthView.Layer.Building(
"OpenEarthView", [
'http://localhost:8081/3dtile?format=geojson&xtile=${x}&ytile=${y}&zoom=${z}'
]));
world.addLayer(new OpenEarthView.Layer.OSM(
"OpenCycleMap", [
"http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"
]));
// UNESCO
world.setCenter(2.3057599523656336, 48.849568465379264);
// world.setCenter(2.3057599523656336, 48.849568465379264);
// LOUVRE
world.setCenter(2.3364709900972684, 48.86045538042749);
</script>
</body>
......
// 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"
// ]));
OpenEarthView.Layer.Building = function(name, urls) {
this.name = (name !== undefined) ? name : 'OpenEarthView';
if (OpenEarthViewLayers.hasOwnProperty(name)) {
console.err('Cannot register this already existing layer !');
return;
}
OpenEarthViewLayers[name] = (urls !== undefined) ? urls : [
'http://localhost:8081/3dtile?format=geojson&xtile=${x}&ytile=${y}&zoom=${z}'
];
};
OpenEarthView.Layer.Building.prototype = {
constructor: OpenEarthView.Layer.Building,
type: 'building',
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)];
// console.log('urlRandom:', urlRandom);
// var url = urlRandom.replace(
// /(.*)\$\{z\}(.*)\$\{x\}(.*)\$\{y\}(.*)/,
// function replacer(match, p1, p2, p3, p4, offset, string) {
// // console.log("Match!");
// return p1 + zoom + p2 + xtile + p3 + ytile + p4;
// });
var url = urlRandom.replace('${z}', zoom);
var url = url.replace('${x}', xtile);
return url.replace('${y}', ytile);
// return url;
}
}
var OpenEarthViewLayers = {};
OpenEarthView.Layer = {};
......@@ -5,11 +5,11 @@
// "http://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
// ]));
var OpenEarthViewLayers = {};
OpenEarthView.Layer = {};
OpenEarthView.Layer.OSM = function(name, urls) {
this.name = (name !== undefined) ? name : 'OpenStreetMap';
if (OpenEarthView.Layer.hasOwnProperty(name)) {
if (OpenEarthViewLayers.hasOwnProperty(name)) {
console.err('Cannot register this already existing layer !');
return;
}
......@@ -22,6 +22,8 @@ OpenEarthView.Layer.OSM = function(name, urls) {
OpenEarthView.Layer.OSM.prototype = {
constructor: OpenEarthView.Layer.OSM,
type: 'tile',
opacity: 1,
getName: function() {
return this.name
},
......@@ -31,12 +33,14 @@ OpenEarthView.Layer.OSM.prototype = {
var urlRandom = urls[
Math.floor(Math.random() * urls.length)];
// console.log('urlRandom:', urlRandom);
var url = urlRandom.replace(
/(.*)\$\{z\}(.*)\$\{x\}(.*)\$\{y\}(.*)/,
function replacer(match, p1, p2, p3, p4, offset, string) {
// console.log("Match!");
return p1 + zoom + p2 + xtile + p3 + ytile + p4;
});
return url;
// var url = urlRandom.replace(
// /(.*)\$\{z\}(.*)\$\{x\}(.*)\$\{y\}(.*)/,
// function replacer(match, p1, p2, p3, p4, offset, string) {
// // console.log("Match!");
// return p1 + zoom + p2 + xtile + p3 + ytile + p4;
// });
var url = urlRandom.replace('${z}', zoom);
var url = url.replace('${x}', xtile);
return url.replace('${y}', ytile);
}
}
......@@ -120,6 +120,7 @@ THREE.GeojsonLoader.prototype = {
var latOri = feature.latOri;
var roofHeight = feature.roofHeight;
var minHeight = feature.minHeight;
var lod = feature.lod;
var roofMesh = new THREE.Mesh();
switch (prop['roof:shape']) {
case 'pyramidal':
......@@ -157,18 +158,24 @@ THREE.GeojsonLoader.prototype = {
// ((crdIdx + 1) % (roofGeometry.vertices.length - 2)), ',',
// crdIdx, ',',
// (roofGeometry.vertices.length - 1), ')');
roofGeometry.faces.push(
new THREE.Face3(
(crdIdx + 1) % (roofGeometry.vertices.length - 2),
crdIdx,
roofGeometry.vertices.length - 1));
var face = new THREE.Face3(
(crdIdx + 1) % (roofGeometry.vertices.length - 2),
crdIdx,
roofGeometry.vertices.length - 1);
// face.color = new THREE.Color(0xffaa00);;
roofGeometry.faces.push(face);
roofGeometry.computeFaceNormals();
// roofGeometry.computeVertexNormals();
}
var roofMaterial = new THREE.MeshPhongMaterial({
color: 0xFFFF00,
color: 0xffffff,
transparent: false,
opacity: 0.9
opacity: 0.4
});
if (lod == 5) {
roofMaterial.transparent = true;
}
roofMesh.geometry = roofGeometry;
roofMesh.material = roofMaterial;
......@@ -264,6 +271,7 @@ THREE.GeojsonLoader.prototype = {
feature.latOri = latOri;
feature.roofHeight = roofHeight;
feature.minHeight = minHeight;
feature.lod = lod;
tile.add(scope.roofMesh(feature));
break;
}
......@@ -283,7 +291,7 @@ THREE.GeojsonLoader.prototype = {
var shape = new THREE.Shape(shapePts);
var extrudeSettings = {
amount: height,
bevelEnabled: true,
bevelEnabled: false,
bevelSegments: 1,
steps: 1,
bevelSize: 2,
......
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