feature(view): initialize position with CameraTransformOptions.

BREAKING CHANGE: Constructor signature changes.
iTowns · Dec 16, 2019 · 0643300 · 0643300
1 parent 1e6c4d8
commit 0643300
Show file tree

Hide file tree

Showing 34 changed files with 196 additions and 136 deletions.
diff --git a/examples/3dtiles_basic.html b/examples/3dtiles_basic.html
@@ -22,11 +22,16 @@
         <script src="js/3dTilesHelper.js"></script>
         <script type="text/javascript">
             /* global itowns,document,GuiTools*/
-            var positionOnGlobe = { longitude: -75.61, latitude: 40.04, altitude: 50000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', -75.6114, 40.03428, 0),
+                range: 4000,
+                tilt: 22,
+                heading: 180
+            }
             // iTowns namespace defined here
             var viewerDiv = document.getElementById('viewerDiv');
 
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
             view.camera.camera3D.near = 5;
             setupLoadingScreen(viewerDiv, view);
 

diff --git a/examples/3dtiles_batch_table.html b/examples/3dtiles_batch_table.html
@@ -25,18 +25,17 @@
             // obtained manually using view.controls.getCameraCoordinate() ;
             // view.controls.getCameraTargetPosition() ;
             // view.controls.getCameraOrientation()
-            var positionOnGlobe = {
-                longitude: -75.61349109370566,
-                latitude: 40.04425929988183,
-                altitude: 45.52006505522877
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', -75.61349, 40.044259),
+                range: 200,
+                tilt: 10,
+                heading: -145
             };
 
-            var viewerDiv = document.getElementById('viewerDiv');
 
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var viewerDiv = document.getElementById('viewerDiv');
 
-            view.controls.lookAtCoordinate({range: 200, tilt: 10, heading:
-                    -145}, false);
+            var view = new itowns.GlobeView(viewerDiv, placement);
 
             setupLoadingScreen(viewerDiv, view);
 

diff --git a/examples/effects_postprocessing.html b/examples/effects_postprocessing.html
@@ -50,11 +50,15 @@
         </script>
 
         <script type="text/javascript">
-            var positionOnGlobe = { longitude: 2.351323, latitude: 48.856712, altitude: 25000000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
+                range: 25000000,
+            }
+
 
             // iTowns namespace defined here
             var viewerDiv = document.getElementById('viewerDiv');
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
 
             // Simple postprocessing setup
             //

diff --git a/examples/effects_split.html b/examples/effects_split.html
@@ -33,13 +33,16 @@
             // # Simple Globe viewer
 
             // Define initial camera position
-            var positionOnGlobe = { longitude: 3.36, latitude: 51.22, altitude: 480000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 3.36, 51.22),
+                range: 480000,
+            }
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
 
             var promises = [];
 

diff --git a/examples/effects_stereo.html b/examples/effects_stereo.html
@@ -40,15 +40,18 @@
         <script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/effects/StereoEffect.js"></script>
         <script type="text/javascript">
             // Define initial camera position
-            var positionOnGlobe = { longitude: 2.351323, latitude: 48.856712, altitude: 25000000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
+                range: 25000000,
+            }
             var promises = [];
             var effect;
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
 
             // Eye separation value
             var eyeSep = 0.064;

diff --git a/examples/misc_camera_animation.html b/examples/misc_camera_animation.html
@@ -29,16 +29,18 @@
         <script type="text/javascript">
             // # Simple Globe viewer
             /* global itowns, Promise */
-
             // Define initial camera position
-            var positionOnGlobe = { longitude: 2.351323, latitude: 48.856712, altitude: 25000000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
+                range: 25000000,
+            }
             var promises = [];
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
             var time = 50000;
             var pathTravel = [];
             const atmosphere = view.getLayerById('atmosphere');

diff --git a/examples/misc_clamp_ground.html b/examples/misc_clamp_ground.html
@@ -19,17 +19,18 @@
             // Coordinate can be found on https://www.geoportail.gouv.fr/carte
             // setting is "coordonnée geographiques en degres decimaux"
 
-            // Position near Annecy lake.
-            // var positionOnGlobe = { longitude: 6.2230, latitude: 45.8532, altitude: 5000 };
-
             // Position near Gerbier mountain.
-            var positionOnGlobe = { longitude: 4.22, latitude: 44.844, altitude: 4000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 4.22, 44.844),
+                range: 3000,
+                tilt: 60
+            }
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
 
             var menuGlobe = new GuiTools('menuDiv', view);
             setupLoadingScreen(viewerDiv, view);
@@ -79,14 +80,14 @@
 
                 // make the object usable from outside of the function
                 view.mesh = mesh;
+                view.notifyChange();
             }
 
             // Listen for globe full initialisation event
             view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function globeInitialized() {
                 // eslint-disable-next-line no-console
                 console.info('Globe initialized');
                 addMeshToScene();
-                view.controls.setTilt(60, true);
             });
         </script>
     </body>

diff --git a/examples/misc_collada.html b/examples/misc_collada.html
@@ -24,13 +24,18 @@
             // setting is "coordonnée geographiques en degres decimaux"
 
             // Position near Gerbier mountain.
-            var positionOnGlobe = { longitude: 4.21655, latitude: 44.84415, altitude: 2000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 4.21655, 44.84415),
+                range: 500,
+                heading: 180,
+                tilt: 60,
+            }
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
 
             var menuGlobe = new GuiTools('menuDiv', view);
 
@@ -84,11 +89,6 @@
                 view.scene.add(model);
                 view.notifyChange();
             });
-
-            // Listen for globe full initialisation event
-            view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function init() {
-                view.controls.lookAtCoordinate({ heading: 180, tilt: 60 });
-            });
         </script>
     </body>
 </html>
diff --git a/examples/misc_colorlayer_visibility.html b/examples/misc_colorlayer_visibility.html
@@ -16,12 +16,13 @@
         <script src="js/GUI/LoadingScreen.js"></script>
         <script type="text/javascript">
             /* global itowns,document,GuiTools, setupLoadingScreen */
-
-            var positionOnGlobe = { longitude: 2.351323, latitude: 48.856712, altitude: 25000000 };
-
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
+                range: 25000000,
+            }
             // iTowns namespace defined here
             var viewerDiv = document.getElementById('viewerDiv');
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
             var menuGlobe = new GuiTools('menuDiv', view);
             setupLoadingScreen(viewerDiv, view);
 
@@ -53,7 +54,7 @@
             // Use frame requester to update menu before rendering
             view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, function _() {
                 var displayedLayers = view.tileLayer.info.displayed.layers;
-                
+
                 var allLayers = view.getLayers(function a(l) { return l.isColorLayer || l.isElevationLayer; });
 
                 allLayers.forEach(function b(layer) {

diff --git a/examples/misc_compare_25d_3d.html b/examples/misc_compare_25d_3d.html
@@ -54,7 +54,10 @@
             // 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');
             /* global itowns, document, GuiTools, Promise */
-            var positionOnGlobe = { longitude: 4.838, latitude: 45.756, altitude: 1000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 4.838, 45.756),
+                range: 1000,
+            }
             var extent = new itowns.Extent(
                 'EPSG:3946',
                 1837816.94334, 1847692.32501,
@@ -65,11 +68,10 @@
             var planarDiv = document.getElementById('planarDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
-            var planarView = new itowns.PlanarView(planarDiv, extent);
+            var view = new itowns.GlobeView(viewerDiv, placement);
+            var planarView = new itowns.PlanarView(planarDiv, extent, { placement });
 
             var promises = [];
-            // var THREE = itowns.THREE;
             var menuGlobe = new GuiTools('menuDiv', view);
             var overGlobe = true;
 

diff --git a/examples/misc_georeferenced_images.html b/examples/misc_georeferenced_images.html
@@ -33,13 +33,17 @@
         <script type="text/javascript">
             // Define initial camera position.
             // Note that camera initial position will be overwritten by picture position later
-            var dummyPositionOnGlobe = { longitude: 0, latitude: 0, altitude: 10000000 };
+            // var dummyPositionOnGlobe = { longitude: 0, latitude: 0, altitude: 10000000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 0, 0),
+                range: 10000000,
+            }
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, dummyPositionOnGlobe, {
+            var view = new itowns.GlobeView(viewerDiv, placement, {
                 sseSubdivisionThreshold: 6,
                 noControls: true,
             });

diff --git a/examples/plugins_drag_n_drop.html b/examples/plugins_drag_n_drop.html
@@ -22,14 +22,16 @@
         <script src="js/GUI/LoadingScreen.js"></script>
         <script type="text/javascript">
             // Define initial camera position
-            var positionOnGlobe = { longitude: 2.351323, latitude: 48.856712,
-                altitude: 250000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
+                range: 250000,
+            }
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
             setupLoadingScreen(viewerDiv, view);
 
             // Add one imagery layer to the scene

diff --git a/examples/plugins_pyramidal_tiff.html b/examples/plugins_pyramidal_tiff.html
@@ -20,14 +20,16 @@
             // # Simple Globe viewer
 
             // Define initial camera position
-            var positionOnGlobe = { longitude: 1.411667, latitude: 43.6074422,
-                altitude: 25000000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 1.411667, 43.6074422),
+                range: 25000000,
+            }
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
             var menuGlobe = new GuiTools('menuDiv', view);
             setupLoadingScreen(viewerDiv, view);
 

diff --git a/examples/plugins_vrt.html b/examples/plugins_vrt.html
@@ -19,13 +19,16 @@
         <script src="../dist/debug.js"></script>
         <script type="text/javascript">
             // Define initial camera position
-            var positionOnGlobe = { longitude: 2.351323, latitude: 48.856712, altitude: 25000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
+                range: 25000,
+            }
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
             var menuGlobe = new GuiTools('menuDiv', view);
 
             setupLoadingScreen(viewerDiv, view);

diff --git a/examples/pointcloud_3d_map.html b/examples/pointcloud_3d_map.html
@@ -45,16 +45,20 @@
                 var viewerDiv;
                 var debugGui;
                 var view;
-                var positionOnGlobe;
 
                 viewerDiv = document.getElementById('viewerDiv');
                 viewerDiv.style.display = 'block';
 
                 debugGui = new dat.GUI();
 
-                positionOnGlobe = { longitude: 4.631512, latitude: 43.675626, altitude: 250 };
+                var placement = {
+                    coord: new itowns.Coordinates('EPSG:4326',  4.631512, 43.675626),
+                    range: 100,
+                    tilt: 45,
+                    heading: -60
+                }
 
-                view = new itowns.GlobeView(viewerDiv, positionOnGlobe, { handleCollision: false });
+                view = new itowns.GlobeView(viewerDiv, placement, { handleCollision: false });
                 setupLoadingScreen(viewerDiv, view);
 
                 view.controls.minDistance = 50;

diff --git a/examples/source_file_geojson_3d.html b/examples/source_file_geojson_3d.html
@@ -15,13 +15,16 @@
         <script src="../dist/debug.js"></script>
         <script type="text/javascript">
             // Define initial camera position
-            var positionOnGlobe = { longitude: 3.05, latitude: 48.95, altitude: 70000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 3.05, 48.95),
+                range: 70000,
+            }
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
             var menuGlobe = new GuiTools('menuDiv', view);
 
             // Add one imagery layer to the scene

diff --git a/examples/source_file_geojson_raster.html b/examples/source_file_geojson_raster.html
@@ -20,13 +20,16 @@
             /* global itowns, setupLoadingScreen, GuiTools, ToolTip */
 
             // Define initial camera position
-            var positionOnGlobe = { longitude: 3.5, latitude: 44, altitude: 1000000 };
+            var placement = {
+                coord: new itowns.Coordinates('EPSG:4326', 3.5, 44),
+                range: 1000000,
+            }
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             var viewerDiv = document.getElementById('viewerDiv');
 
             // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
+            var view = new itowns.GlobeView(viewerDiv, placement);
             var menuGlobe = new GuiTools('menuDiv', view);
 
             setupLoadingScreen(viewerDiv, view);