Skip to content

Commit

Permalink
examples(core): add Source examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@gchoqueux
gchoqueux committed Aug 22, 2018
1 parent 492530f commit 4a5a6f8
Show file tree
Hide file tree
Showing 5 changed files with 234 additions and 0 deletions.
122 changes: 122 additions & 0 deletions examples/globe_geojson_to3D.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<html>
<head>
<title>Itowns - Globe + geoson to 3d</title>

<style type="text/css">
.tooltip {
display: none;
background-image: linear-gradient(rgba(80, 80, 80,0.95), rgba(60, 60, 60,0.95));
box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.5);
margin-top: 20px;
margin-left: 20px;
padding: 10px;
position: absolute;
z-index: 1000;
color: #CECECE;
font-family: 'Open Sans',
sans-serif;
font-size: 14px;
line-height: 18px;
text-align: left;
}
.coord {
font-size: 12px;
padding-left:20px;
color: #93B7C0;
text-shadow: 0px 1px 0px rgba(200,200,200,.3), 0px -1px 0px rgba(30,30,30,.7);
}
</style>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/loading_screen.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/GUI/dat.gui/dat.gui.min.js"></script>
</head>
<body>
<div id="viewerDiv" class="viewer">
<span id="tooltipDiv" class="tooltip"></span>
</div>
<script src="js/GUI/GuiTools.js"></script>
<script src="../dist/itowns.js"></script>
<script src="../dist/debug.js"></script>
<script src="js/FeatureToolTip.js"></script>
<script type="text/javascript">
/* global itowns,document,GuiTools, window */
var ariege;
var menuGlobe;

// Define initial camera position
var positionOnGlobe = { longitude: 1.5, latitude: 43, altitude: 300000 };
var promises = [];

// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
var viewerDiv = document.getElementById('viewerDiv');

// Instanciate iTowns GlobeView*
var globeView = new itowns.GlobeView(viewerDiv, positionOnGlobe);

function addLayerCb(layer) {
return globeView.addLayer(layer);
}

// Add one imagery layer to the scene
// This layer is defined in a json file but it could be defined as a plain js
// object. See Layer* for more info.
promises.push(itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(addLayerCb));

// Add two elevation layers.
// These will deform iTowns globe geometry to represent terrain elevation.
promises.push(itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addLayerCb));
promises.push(itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addLayerCb));

function extrudeBuildings() {
// debugger;
return 5000;
}

function colorBuildings() {
return new itowns.THREE.Color(0xffcc00);
}

ariege = new itowns.GeometryLayer('ariege', new itowns.THREE.Group());
ariege.update = itowns.FeatureProcessing.update;
ariege.convert = itowns.Feature2Mesh.convert({
color: colorBuildings,
extrude: extrudeBuildings });

ariege.source = {
url: 'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/09-ariege/departement-09-ariege.geojson',
protocol: 'file',
projection: 'EPSG:4326',
format: 'application/json',
zoom: { min: 7, max: 7 },
};

globeView.addLayer(ariege).then(function menue(layer) {
var gui = debug.GeometryDebug.createGeometryDebugUI(menuGlobe.gui, globeView, layer);
debug.GeometryDebug.addWireFrameCheckbox(gui, globeView, layer);
// window.addEventListener('mousemove', picking, false);
});

menuGlobe = new GuiTools('menuDiv', globeView);

// Listen for globe full initialisation event
globeView.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
// eslint-disable-next-line no-console
console.info('Globe initialized');
Promise.all(promises).then(function () {
menuGlobe.addImageryLayersGUI(globeView.getLayers(function (l) { return l.type === 'color'; }));
menuGlobe.addElevationLayersGUI(globeView.getLayers(function (l) { return l.type === 'elevation'; }));
itowns.ColorLayersOrdering.moveLayerToIndex(globeView, 'Ortho', 0);

new ToolTip(globeView, document.getElementById('viewerDiv'), document.getElementById('tooltipDiv'));
}).catch(console.error);


});
</script>
</body>
</html>


101 changes: 101 additions & 0 deletions examples/globe_wfs_color.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<html>
<head>
<title>Itowns - Globe WFS color</title>

<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/loading_screen.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/GUI/dat.gui/dat.gui.min.js"></script>
</head>
<body>
<div id="viewerDiv"></div>
<script src="js/GUI/GuiTools.js"></script>
<script src="../dist/itowns.js"></script>
<script src="js/loading_screen.js"></script>
<script src="../dist/debug.js"></script>
<div class="help" style="left: unset; right: 0;">
<p><b>Information Batiment</b></p>
<ul id="info">
</ul>
</div>
<script type="text/javascript">
// # Simple Globe viewer

// Define initial camera position
var positionOnGlobe = { longitude: 4.818, latitude: 45.7354, altitude: 3000 };
var promises = [];
var meshes = [];
var linesBus = [];
var scaler;

// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
var viewerDiv = document.getElementById('viewerDiv');

// Instanciate iTowns GlobeView*
var globeView = new itowns.GlobeView(viewerDiv, positionOnGlobe);
setupLoadingScreen(viewerDiv, globeView);
function addLayerCb(layer) {
return globeView.addLayer(layer);
}

// Define projection that we will use (taken from https://epsg.io/3946, Proj4js section)
itowns.proj4.defs('EPSG:3946',
'+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');

// Add one imagery layer to the scene
// This layer is defined in a json file but it could be defined as a plain js
// object. See Layer* for more info.
promises.push(itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(addLayerCb));

// Add two elevation layers.
// These will deform iTowns globe geometry to represent terrain elevation.
promises.push(itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addLayerCb));
promises.push(itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addLayerCb));

promises.push(globeView.addLayer({
type: 'color',
id: 'wfsBuilding',
transparent: true,
style: {
fill: 'red',
fillOpacity: 0.5,
stroke: 'white',
},
projection: 'EPSG:4326',
source: {
url: 'http://wxs.ign.fr/72hpsel8j8nhb5qgdh07gcyp/geoportail/wfs?',
networkOptions: { crossOrigin: 'anonymous' },
protocol: 'wfs',
version: '2.0.0',
typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
zoom: { max: 20, min: 13 },
projection: 'EPSG:4326',
extent: {
west: 4.568,
east: 5.18,
south: 45.437,
north: 46.03,
},
ipr: 'IGN',
format: 'application/json',
},
}));

var menuGlobe = new GuiTools('menuDiv', globeView);
// Listen for globe full initialisation event
globeView.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
// eslint-disable-next-line no-console
console.info('Globe initialized');
Promise.all(promises).then(function () {
menuGlobe.addImageryLayersGUI(globeView.getLayers(function (l) { return l.type === 'color'; }));
menuGlobe.addElevationLayersGUI(globeView.getLayers(function (l) { return l.type === 'elevation'; }));
itowns.ColorLayersOrdering.moveLayerToIndex(globeView, 'Ortho', 0);
}).catch(console.error);
});
var d = new debug.Debug(globeView, menuGlobe.gui);
debug.createTileDebugUI(menuGlobe.gui, globeView, globeView.wgs84TileLayer, d);
</script>
</body>
</html>
11 changes: 11 additions & 0 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,17 @@ <h3><a href='./syncCameras.html' target='_blank'>synchronisation cameras with Ca
<img src='screenshots/syncCameras.jpg'>
<iframe src="" style="display: none;"></iframe>
</div>
<div class="exampleContainer">
<h3><a href='./globe_wfs_color.html' target='_blank'>wfs source to color layer</a></h3>
<img src='screenshots/globe_wfs_color.jpg'>
<iframe src="" style="display: none;"></iframe>
</div>
<div class="exampleContainer">
<h3><a href='./globe_geojson_to3D.html' target='_blank'>geojson to geometry layer</a></h3>
<img src='screenshots/globe_geojson_to3D.jpg'>
<iframe src="" style="display: none;"></iframe>
</div>

<script src="https://unpkg.com/[email protected]/examples/js/Detector.js"></script>
<script type="text/javascript">
if (!Detector.webgl) {
Expand Down
Binary file added examples/screenshots/globe_geojson_to3D.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/screenshots/globe_wfs_color.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 4a5a6f8

Please sign in to comment.