itowns 2.44.3-next.7 → 2.44.3-next.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/itowns.js +1 -1
  2. package/dist/itowns.js.map +1 -1
  3. package/dist/itowns_widgets.js +1 -1
  4. package/dist/itowns_widgets.js.map +1 -1
  5. package/examples/3dtiles_loader.html +104 -43
  6. package/examples/config.json +2 -10
  7. package/lib/Layer/C3DTilesLayer.js +15 -14
  8. package/lib/Layer/OGC3DTilesLayer.js +31 -6
  9. package/lib/Renderer/PointsMaterial.js +1 -1
  10. package/lib/Utils/gui/C3DTilesStyle.js +2 -3
  11. package/package.json +1 -1
  12. package/examples/3dtiles_25d.html +0 -120
  13. package/examples/3dtiles_basic.html +0 -94
  14. package/examples/3dtiles_batch_table.html +0 -86
  15. package/examples/3dtiles_ion.html +0 -126
  16. package/examples/3dtiles_pointcloud.html +0 -95
package/examples/3dtiles_batch_table.html DELETED
@@ -1,86 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Itowns - 3d-tiles hierarchy example</title>
5
-
6
- <meta charset="UTF-8">
7
- <link rel="stylesheet" type="text/css" href="css/example.css">
8
- <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
9
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
- <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
11
- </head>
12
- <body>
13
- <div id="viewerDiv"></div>
14
- <div id="description">
15
- <p><b>Feature Information:</b></p>
16
- <div id="featureInfo"></div>
17
- </div>
18
- <script src="js/GUI/GuiTools.js"></script>
19
- <script src="../dist/itowns.js"></script>
20
- <script src="js/GUI/LoadingScreen.js"></script>
21
- <script src="../dist/debug.js"></script>
22
- <script src="js/3dTilesHelper.js"></script>
23
- <script type="text/javascript">
24
- // Note: The following positions and camera parameters have been
25
- // obtained manually using view.controls.getCameraCoordinate() ;
26
- // view.controls.getCameraTargetPosition() ;
27
- // view.controls.getCameraOrientation()
28
- var placement = {
29
- coord: new itowns.Coordinates('EPSG:4326', -75.61349, 40.044259),
30
- range: 200,
31
- tilt: 10,
32
- heading: 145,
33
- };
34
-
35
- var viewerDiv = document.getElementById('viewerDiv');
36
-
37
- var view = new itowns.GlobeView(viewerDiv, placement);
38
-
39
- setupLoadingScreen(viewerDiv, view);
40
-
41
- var menuGlobe = new GuiTools('menuDiv', view, 300);
42
-
43
- // Add Open Street Map orthographic layer
44
- itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json')
45
- .then(function _(config) {
46
- config.source = new itowns.TMSSource(config.source);
47
- var layer = new itowns.ColorLayer('Ortho', config);
48
- view.addLayer(layer)
49
- .then(menuGlobe.addLayerGUI.bind(menuGlobe));
50
- });
51
-
52
- // Create a new 3D tiles layer with batch table hierarchy extension
53
- const extensions = new itowns.C3DTExtensions();
54
- extensions.registerExtension("3DTILES_batch_table_hierarchy",
55
- { [itowns.C3DTilesTypes.batchtable]:
56
- itowns.C3DTBatchTableHierarchyExtension });
57
-
58
- // Create the 3D Tiles layer
59
- var $3dTilesLayerBTHierarchy = new itowns.C3DTilesLayer(
60
- '3d-tiles-bt-hierarchy', {
61
- name: 'BTHierarchy',
62
- source: new itowns.C3DTilesSource({
63
- url: 'https://raw.githubusercontent.com/AnalyticalGraphicsInc/cesium/master/Apps/SampleData/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json',
64
- }),
65
- registeredExtensions: extensions,
66
- },
67
- view);
68
-
69
- // add an event for picking the 3D Tiles layer and displaying
70
- // information about the picked feature in an html div
71
- var pickingArgs = {};
72
- pickingArgs.htmlDiv = document.getElementById('featureInfo');
73
- pickingArgs.view = view;
74
- pickingArgs.layer = $3dTilesLayerBTHierarchy;
75
- itowns.View.prototype.addLayer.call(view, $3dTilesLayerBTHierarchy).then(function _() {
76
- window.addEventListener('mousemove',
77
- (event) => fillHTMLWithPickingInfo(event, pickingArgs),false);
78
- });
79
-
80
- // Add a debug UI
81
- var d = new debug.Debug(view, menuGlobe.gui);
82
- debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
83
- debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerBTHierarchy);
84
- </script>
85
- </body>
86
- </html>
package/examples/3dtiles_ion.html DELETED
@@ -1,126 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Itowns - 3d-tiles from Cesium ion example</title>
5
-
6
- <meta charset="UTF-8">
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
-
9
- <link rel="stylesheet" type="text/css" href="css/example.css">
10
- <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
11
-
12
- <style type="text/css">
13
- #description {
14
- z-index: 2;
15
- left: 10px;
16
- width: 30%;
17
- }
18
- </style>
19
-
20
-
21
- <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
22
- </head>
23
- <body>
24
- <div id="description">
25
- <p><b>This example displays a dataset representing extruded OSM buildings from Cesium ion
26
- with Cesium default access token. Zoom to any place in the world to see the buildings. <br>
27
- Buildings may appear to "fly" above the ground in some places, this is due to the combination
28
- of precision errors of this dataset and of the 3D terrain we use in this example. </b>
29
- </p>
30
- </div>
31
- <div id="attribution"></div>
32
- <div id="viewerDiv"></div>
33
-
34
- <!-- Import iTowns source code -->
35
- <script src="../dist/itowns.js"></script>
36
- <!-- Import iTowns LoadingScreen plugin -->
37
- <script src="js/GUI/LoadingScreen.js"></script>
38
-
39
- <script type="text/javascript">
40
-
41
- // ---------- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION : ----------
42
-
43
- // Define camera initial position
44
- const placement = {
45
- coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
46
- range: 25000000,
47
- }
48
- // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
49
- var viewerDiv = document.getElementById('viewerDiv');
50
-
51
- // Create a GlobeView
52
- var viewOptions = {
53
- diffuse: new itowns.THREE.Color(0xa0d5fc)
54
- };
55
- var view = new itowns.GlobeView(viewerDiv, placement, viewOptions);
56
-
57
- // Setup loading screen
58
- setupLoadingScreen(viewerDiv, view);
59
-
60
- // ---------- ADD A BASEMAP: ----------
61
-
62
- // Add one imagery layer to the scene. This layer's properties are defined in a json file, but it could be
63
- // defined as a plain js object. See `Layer` documentation for more info.
64
- itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json').then(function _(config) {
65
- config.source = new itowns.TMSSource(config.source);
66
- var layer = new itowns.ColorLayer('Ortho', config);
67
- view.addLayer(layer);
68
- });
69
-
70
- // ---------- ADD DIGITAL ELEVATION MODELS : ----------
71
-
72
- // Add two elevation layers, each with a different level of detail. Here again, each layer's properties are
73
- // defined in a json file.
74
- function addElevationLayerFromConfig(config) {
75
- config.source = new itowns.WMTSSource(config.source);
76
- view.addLayer(
77
- new itowns.ElevationLayer(config.id, config),
78
- );
79
- }
80
- itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
81
- itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
82
-
83
- // ---------- ADD 3D TILES MODEL FROM CESIUM ION SERVER : ----------
84
-
85
- // Enable draco compression (used by this tileset)
86
- itowns.enableDracoLoader('./libs/draco/');
87
-
88
- // Create a new 3D Tiles batch table hierarchy extension manager and add it to the tileset since this tileset
89
- // uses this extension
90
- const extensions = new itowns.C3DTExtensions();
91
- extensions.registerExtension("3DTILES_batch_table_hierarchy",
92
- { [itowns.C3DTilesTypes.batchtable]:
93
- itowns.C3DTBatchTableHierarchyExtension });
94
-
95
- // Create a 3D Tiles layer from Cesium ion server with Cesium default access token and assetId of the
96
- // OSM buildings dataset.
97
- var threeDTilesIonSource = new itowns.C3DTilesIonSource({
98
- accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzOTkxZjY3NS0yNDU4LTQ3MTAtOGQ2NC1lOGI4YmY5ODhhYjQiLCJpZCI6Mzg4OTQsImlhdCI6MTYwNjkyMDkwOH0.aVrPA4xnpbSUlqfJ9RkSWmZtms_hnSRz7m596h1R7ew',
99
- assetId: 96188
100
- });
101
- threeDTilesIonSource.whenReady.then(displayAttributions); // Add attributions returned by cesium ion server
102
- var threeDTilesIonLayer = new itowns.C3DTilesLayer('3d-tiles-cesium-ion', {
103
- name: '3D Tiles from Cesium Ion',
104
- source: threeDTilesIonSource,
105
- registeredExtensions: extensions,
106
- }, view);
107
-
108
- itowns.View.prototype.addLayer.call(view, threeDTilesIonLayer);
109
-
110
- // Automatically convert cesium html attributions into html node elements and append them to the
111
- // attributions div
112
- function displayAttributions() {
113
- var attribDiv = document.getElementById('attribution');
114
- for (attrib of threeDTilesIonSource.attribution) {
115
- var attribElt = document.createElement('template');
116
- attribElt.innerHTML = attrib.html;
117
- attribDiv.appendChild(attribElt.content.firstChild);
118
- }
119
- }
120
-
121
- // ---------- ADD LIGHTS: ----------
122
- var ambLight = new itowns.THREE.AmbientLight(0xffffff, 1);
123
- view.scene.add( ambLight );
124
- </script>
125
- </body>
126
- </html>
package/examples/3dtiles_pointcloud.html DELETED
@@ -1,95 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Itowns - Pointcloud classification</title>
5
-
6
- <meta charset="UTF-8">
7
- <link rel="stylesheet" type="text/css" href="css/example.css">
8
- <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
9
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
- <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
11
- </head>
12
- <body>
13
- <div id="description">
14
- Pointcloud classification
15
- <ul>
16
- <li>Display your pointcloud</li>
17
- <li>Use classification to assign colour to each points</li>
18
- <li>Switch between mode on the left panel</li>
19
- </ul>
20
- </div>
21
- <div id="viewerDiv"></div>
22
- <script src="js/GUI/GuiTools.js"></script>
23
- <script src="../dist/itowns.js"></script>
24
- <script src="js/GUI/LoadingScreen.js"></script>
25
- <script src="../dist/debug.js"></script>
26
- <script src="js/3dTilesHelper.js"></script>
27
- <script type="text/javascript">
28
- /* global itowns,document,GuiTools*/
29
-
30
-
31
- var placement = {
32
- coord: new itowns.Coordinates('EPSG:4326', 3.695885, 43.397379, 0),
33
-
34
- range: 3000,
35
- tilt: 55,
36
- heading: 180
37
- }
38
- // iTowns namespace defined here
39
- var viewerDiv = document.getElementById('viewerDiv');
40
-
41
- var view = new itowns.GlobeView(viewerDiv, placement);
42
- view.camera3D.near = 5;
43
- setupLoadingScreen(viewerDiv, view);
44
-
45
- var menuGlobe = new GuiTools('menuDiv', view, 300);
46
-
47
- itowns.Fetcher.json('./layers/JSONLayers/OPENSM.json').then(function _(config) {
48
- config.source = new itowns.TMSSource(config.source);
49
- var layer = new itowns.ColorLayer('Ortho', config);
50
- view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
51
- });
52
- function updatePointCloudSize({tileContent}) {
53
- tileContent.traverse(function (obj) {
54
- if (obj.isPoints) {
55
- obj.material.size = 2.0;
56
- }
57
- });
58
- }
59
- // Create a new Layer 3d-tiles For Pointcloud
60
- // -------------------------------------------
61
- var $3dTilesSource = new itowns.C3DTilesSource({
62
- url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/pointclouds/pnts-sete-2021-0756_6256/tileset.json',
63
- });
64
- var $3dTilesLayerSetePC = new itowns.C3DTilesLayer('3d-tiles-sete', {
65
- name: 'SetePC',
66
- sseThreshold: 5,
67
- pntsMode: itowns.PNTS_MODE.CLASSIFICATION,
68
- pntsShape : itowns.PNTS_SHAPE.CIRCLE,
69
- source: $3dTilesSource,
70
- }, view);
71
-
72
- $3dTilesLayerSetePC.addEventListener(
73
- itowns.C3DTILES_LAYER_EVENTS.ON_TILE_CONTENT_LOADED,
74
- updatePointCloudSize,
75
- );
76
-
77
- itowns.View.prototype.addLayer.call(view, $3dTilesLayerSetePC);
78
- function switchMode(){
79
- let pntsLayer = view.getLayerById("3d-tiles-sete");
80
- if(pntsLayer){
81
- pntsLayer.pntsMode = pntsLayer.pntsMode === itowns.PNTS_MODE.COLOR ? itowns.PNTS_MODE.CLASSIFICATION : itowns.PNTS_MODE.COLOR;
82
- view.notifyChange(view.camera3D);
83
- }
84
- }
85
-
86
- // Add the UI Debug
87
- var d = new debug.Debug(view, menuGlobe.gui);
88
- $3dTilesLayerSetePC.whenReady
89
- .then(() => {
90
- debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
91
- debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerSetePC);
92
- });
93
- </script>
94
- </body>
95
- </html>