itowns 2.35.0 → 2.37.0

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 (110) hide show
  1. package/CONTRIBUTING.md +30 -17
  2. package/CONTRIBUTORS.md +1 -0
  3. package/changelog.md +146 -0
  4. package/dist/debug.js +1 -1
  5. package/dist/debug.js.LICENSE.txt +1 -1
  6. package/dist/debug.js.map +1 -1
  7. package/dist/itowns.js +1 -1
  8. package/dist/itowns.js.map +1 -1
  9. package/dist/itowns_widgets.js +2 -0
  10. package/dist/itowns_widgets.js.map +1 -0
  11. package/examples/3dtiles_basic.html +2 -2
  12. package/examples/config.json +25 -6
  13. package/examples/css/widgets.css +248 -0
  14. package/examples/geoid_geoidLayer.html +102 -0
  15. package/examples/images/compass.svg +60 -0
  16. package/examples/images/widget-logo.svg +66 -0
  17. package/examples/itowns-potree.html +252 -0
  18. package/examples/js/GUI/GuiTools.js +17 -0
  19. package/examples/js/Scale.js +1 -0
  20. package/examples/js/plugins/CSVnVRTParser.js +0 -1
  21. package/examples/layers/JSONLayers/Administrative.json +1 -1
  22. package/examples/layers/JSONLayers/Cada.json +1 -1
  23. package/examples/layers/JSONLayers/EtatMajor.json +1 -1
  24. package/examples/layers/JSONLayers/IGN_MNT.json +1 -1
  25. package/examples/layers/JSONLayers/IGN_MNT_HIGHRES.json +1 -1
  26. package/examples/layers/JSONLayers/WORLD_DTM.json +1 -1
  27. package/examples/misc_custom_label.html +0 -2
  28. package/examples/plugins_vrt.html +0 -1
  29. package/examples/source_file_from_fetched_data.html +90 -0
  30. package/examples/source_file_from_format.html +85 -0
  31. package/examples/source_file_from_methods.html +87 -0
  32. package/examples/source_file_from_parsed_data.html +104 -0
  33. package/examples/source_file_geojson_raster.html +21 -48
  34. package/examples/source_file_gpx_raster.html +28 -36
  35. package/examples/source_file_kml_raster.html +1 -4
  36. package/examples/source_file_shapefile.html +39 -35
  37. package/examples/source_stream_wfs_25d.html +29 -29
  38. package/examples/source_stream_wfs_3d.html +21 -12
  39. package/examples/source_stream_wfs_raster.html +20 -20
  40. package/examples/view_25d_map.html +28 -0
  41. package/examples/view_immersive.html +13 -14
  42. package/examples/view_multi_25d.html +1 -1
  43. package/examples/widgets_minimap.html +122 -0
  44. package/examples/widgets_navigation.html +119 -0
  45. package/lib/Controls/FirstPersonControls.js +10 -1
  46. package/lib/Controls/GlobeControls.js +26 -11
  47. package/lib/Controls/PlanarControls.js +1 -1
  48. package/lib/Converter/Feature2Mesh.js +1 -0
  49. package/lib/Converter/Feature2Texture.js +2 -2
  50. package/lib/Converter/convertToTile.js +6 -2
  51. package/lib/Core/3DTiles/C3DTBoundingVolume.js +4 -1
  52. package/lib/Core/Deprecated/Undeprecator.js +1 -1
  53. package/lib/Core/Feature.js +42 -42
  54. package/lib/Core/Geographic/Coordinates.js +56 -0
  55. package/lib/Core/Geographic/Crs.js +15 -0
  56. package/lib/Core/Geographic/Extent.js +100 -12
  57. package/lib/Core/Geographic/GeoidGrid.js +143 -0
  58. package/lib/Core/MainLoop.js +1 -1
  59. package/lib/Core/Math/Ellipsoid.js +27 -9
  60. package/lib/Core/Prefab/Globe/BuilderEllipsoidTile.js +1 -1
  61. package/lib/Core/Prefab/Globe/SkyShader.js +3 -1
  62. package/lib/Core/Prefab/Planar/PlanarLayer.js +3 -1
  63. package/lib/Core/Prefab/PlanarView.js +1 -1
  64. package/lib/Core/Style.js +2 -1
  65. package/lib/Core/TileGeometry.js +3 -1
  66. package/lib/Core/TileMesh.js +11 -16
  67. package/lib/Core/View.js +43 -5
  68. package/lib/Layer/ElevationLayer.js +15 -18
  69. package/lib/Layer/FeatureGeometryLayer.js +3 -1
  70. package/lib/Layer/GeoidLayer.js +131 -0
  71. package/lib/Layer/InfoLayer.js +1 -1
  72. package/lib/Layer/LabelLayer.js +7 -1
  73. package/lib/Layer/Layer.js +1 -1
  74. package/lib/Layer/LayerUpdateStrategy.js +1 -1
  75. package/lib/Layer/PotreeLayer.js +3 -1
  76. package/lib/Layer/TiledGeometryLayer.js +3 -1
  77. package/lib/Main.js +214 -174
  78. package/lib/MainBundle.js +1 -1
  79. package/lib/Parser/B3dmParser.js +2 -1
  80. package/lib/Parser/GDFParser.js +118 -0
  81. package/lib/Parser/GTXParser.js +92 -0
  82. package/lib/Parser/ISGParser.js +121 -0
  83. package/lib/Parser/LASParser.js +3 -1
  84. package/lib/Parser/ShapefileParser.js +0 -1
  85. package/lib/Parser/VectorTileParser.js +1 -1
  86. package/lib/Parser/XbilParser.js +1 -1
  87. package/lib/Process/3dTilesProcessing.js +10 -10
  88. package/lib/Process/FeatureProcessing.js +3 -1
  89. package/lib/Process/LayeredMaterialNodeProcessing.js +7 -4
  90. package/lib/Process/ObjectRemovalHelper.js +5 -2
  91. package/lib/Provider/URLBuilder.js +1 -1
  92. package/lib/Renderer/Label2DRenderer.js +14 -11
  93. package/lib/Renderer/LayeredMaterial.js +4 -3
  94. package/lib/Renderer/OBB.js +20 -27
  95. package/lib/Renderer/PointsMaterial.js +5 -6
  96. package/lib/Renderer/RasterTile.js +23 -5
  97. package/lib/Renderer/Shader/ShaderChunk.js +3 -3
  98. package/lib/Renderer/Shader/ShaderUtils.js +4 -2
  99. package/lib/Source/C3DTilesSource.js +3 -1
  100. package/lib/Source/EntwinePointTileSource.js +3 -1
  101. package/lib/Source/FileSource.js +2 -7
  102. package/lib/Source/PotreeSource.js +3 -1
  103. package/lib/Source/Source.js +15 -10
  104. package/lib/Source/VectorTilesSource.js +19 -0
  105. package/lib/Source/WMTSSource.js +3 -1
  106. package/lib/ThreeExtended/loaders/GLTFLoader.js +239 -98
  107. package/lib/Utils/CameraUtils.js +12 -2
  108. package/lib/Utils/DEMUtils.js +3 -3
  109. package/lib/Utils/FeaturesUtils.js +8 -4
  110. package/package.json +25 -25
package/examples/source_file_from_methods.html ADDED
@@ -0,0 +1,87 @@
1
+ <html>
2
+ <head>
3
+ <title>Itowns - Source - fetcher and parser</title>
4
+ <meta charset="UTF-8">
5
+ <link rel="stylesheet" type="text/css" href="css/example.css">
6
+ <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
7
+
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
10
+ </head>
11
+ <body>
12
+ <div id="viewerDiv" class="viewer"></div>
13
+ <script src="js/GUI/GuiTools.js"></script>
14
+ <script src="../dist/itowns.js"></script>
15
+ <script src="../dist/debug.js"></script>
16
+ <script src="js/GUI/LoadingScreen.js"></script>
17
+ <script src="js/plugins/FeatureToolTip.js"></script>
18
+ <script type="text/javascript">
19
+ /* global itowns, setupLoadingScreen, GuiTools, ToolTip */
20
+
21
+
22
+
23
+ // ---------- CREATE A GlobeView : ----------
24
+
25
+ // Define camera initial position
26
+ const placement = {
27
+ coord: new itowns.Coordinates('EPSG:4326', 3.05, 48.95),
28
+ range: 70000,
29
+ };
30
+
31
+ // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
32
+ const viewerDiv = document.getElementById('viewerDiv');
33
+
34
+ // Instantiate iTowns GlobeView
35
+ const view = new itowns.GlobeView(viewerDiv, placement);
36
+
37
+ // Setup loading screen and debug menu
38
+ setupLoadingScreen(viewerDiv, view);
39
+ const debugMenu = new GuiTools('menuDiv', view);
40
+
41
+
42
+
43
+ // ---------- DISPLAY CONTEXTUAL DATA : ----------
44
+
45
+ // Add one imagery layer to the scene
46
+ // This layer is defined in a json file but it could be defined as a plain js
47
+ // object. See Layer* for more info.
48
+ itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
49
+ config.source = new itowns.WMTSSource(config.source);
50
+ var layer = new itowns.ColorLayer('Ortho', config);
51
+ view.addLayer(layer).then(debugMenu.addLayerGUI.bind(debugMenu));
52
+ });
53
+
54
+
55
+
56
+ // ---------- DEFINE DATA SOURCE SPECIFYING FETCHER AND PARSER METHODS : ----------
57
+
58
+ const sourceFromFetcherAndParser = new itowns.FileSource({
59
+ url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/lyon-hydro.geojson',
60
+ crs: 'EPSG:4326',
61
+ // Specify fetcher and parser methods. Should you implement some custom ones, they would need to be called here.
62
+ fetcher: itowns.Fetcher.json,
63
+ parser: itowns.GeoJsonParser.parse,
64
+ })
65
+
66
+ view.addLayer(new itowns.ColorLayer('Hydro', {
67
+ source: sourceFromFetcherAndParser,
68
+ style: new itowns.Style({
69
+ fill: { color: 'cyan', opacity: 0.5 },
70
+ stroke: { color: 'blue',},
71
+ }),
72
+ })).then(debugMenu.addLayerGUI.bind(debugMenu));
73
+
74
+
75
+
76
+ // ---------- REORDER ColorLayers AND MOVE CAMERA : ----------
77
+
78
+ view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
79
+ // Organize the order with which layers are superposing.
80
+ itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
81
+ // Move the camera to visualize all data.
82
+ view.controls.lookAtCoordinate(sourceFromFetcherAndParser.extent, false);
83
+ });
84
+
85
+ </script>
86
+ </body>
87
+ </html>
package/examples/source_file_from_parsed_data.html ADDED
@@ -0,0 +1,104 @@
1
+ <html>
2
+ <head>
3
+ <title>Itowns - FileSource - Handle parsing step</title>
4
+ <meta charset="UTF-8">
5
+ <link rel="stylesheet" type="text/css" href="css/example.css">
6
+ <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
7
+
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
10
+ </head>
11
+ <body>
12
+ <div id="viewerDiv" class="viewer"></div>
13
+ <script src="js/GUI/GuiTools.js"></script>
14
+ <script src="../dist/itowns.js"></script>
15
+ <script src="../dist/debug.js"></script>
16
+ <script src="js/GUI/LoadingScreen.js"></script>
17
+ <script src="js/plugins/FeatureToolTip.js"></script>
18
+ <script type="text/javascript">
19
+ /* global itowns, setupLoadingScreen, GuiTools, ToolTip */
20
+
21
+
22
+
23
+ // ---------- CREATE A GlobeView : ----------
24
+
25
+ // Define camera initial position
26
+ const placement = {
27
+ coord: new itowns.Coordinates('EPSG:4326', 3.05, 48.95),
28
+ range: 70000,
29
+ };
30
+
31
+ // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
32
+ const viewerDiv = document.getElementById('viewerDiv');
33
+
34
+ // Instantiate iTowns GlobeView
35
+ const view = new itowns.GlobeView(viewerDiv, placement);
36
+
37
+ // Setup loading screen and debug menu
38
+ setupLoadingScreen(viewerDiv, view);
39
+ const debugMenu = new GuiTools('menuDiv', view);
40
+
41
+
42
+
43
+ // ---------- DISPLAY CONTEXTUAL DATA : ----------
44
+
45
+ // Add one imagery layer to the scene
46
+ // This layer is defined in a json file but it could be defined as a plain js
47
+ // object. See Layer* for more info.
48
+ itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
49
+ config.source = new itowns.WMTSSource(config.source);
50
+ var layer = new itowns.ColorLayer('Ortho', config);
51
+ view.addLayer(layer).then(debugMenu.addLayerGUI.bind(debugMenu));
52
+ });
53
+
54
+
55
+
56
+ // ---------- DEFINE DATA SOURCE FROM PARSED DATA : ----------
57
+
58
+ // Handle fetching step.
59
+ // Should you implement a custom fetcher, it would need to be called here.
60
+ itowns.Fetcher.json(
61
+ 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/lyon-trains.geojson',
62
+ ).then((fetched) => {
63
+ // Handle parsing step.
64
+ // We parse the fetched data into a FeatureCollection.
65
+ // See http://www.itowns-project.org/itowns/docs/#api/Base/FeatureCollection.
66
+ // Should you implement a custom parser, it would need to be called here.
67
+ return itowns.GeoJsonParser.parse(fetched, {
68
+ // Information on the fetched data.
69
+ // See http://www.itowns-project.org/itowns/docs/#api/Source/ParsingOptions.
70
+ in: {
71
+ crs: 'EPSG:4326',
72
+ },
73
+ // Information on the FeatureCollection that should be created from the fetched data. Here, we pass a
74
+ // FeatureBuildingOptions (http://www.itowns-project.org/itowns/docs/#api/Base/FeatureBuildingOptions).
75
+ out: {
76
+ crs: view.tileLayer.extent.crs,
77
+ },
78
+ });
79
+ }).then((parsed) => {
80
+ // Finally, define a FileSource from the parsed data
81
+ const sourceFromParsedData = new itowns.FileSource({ features: parsed });
82
+
83
+ view.addLayer(new itowns.ColorLayer('Trains', {
84
+ source: sourceFromParsedData,
85
+ style: new itowns.Style({
86
+ stroke: { color: 'black', width: 2 },
87
+ }),
88
+ })).then(debugMenu.addLayerGUI.bind(debugMenu));
89
+ });
90
+
91
+
92
+
93
+ // ---------- REORDER ColorLayers AND MOVE CAMERA : ----------
94
+
95
+ view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
96
+ // Organize the order with which layers are superposing.
97
+ itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
98
+ // Move the camera to visualize all data.
99
+ view.controls.lookAtCoordinate(view.getLayerById('Trains').source.extent, false);
100
+ });
101
+
102
+ </script>
103
+ </body>
104
+ </html>
package/examples/source_file_geojson_raster.html CHANGED
@@ -57,8 +57,8 @@
57
57
  itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
58
58
 
59
59
 
60
- // Display the content of a GeoJSON on terrain with ColorLayer and FileSource.
61
- // The GeoJSON is loaded from url, set in FileSource
60
+ // Display the content of two GeoJSON files on terrain with ColorLayer and FileSource.
61
+ // The GeoJSONs are loaded from url, set in FileSource
62
62
 
63
63
  // Declare the source for the data on Ariege area
64
64
  const ariegeSource = new itowns.FileSource({
@@ -85,40 +85,18 @@
85
85
  view.addLayer(ariegeLayer).then(FeatureToolTip.addLayer);
86
86
 
87
87
 
88
- // Display the content of a GeoJSON on terrain with ColorLayer and FileSource.
89
- // The GeoJSON content is fetched from the file, then parsed and finally passed into FileSource data.
90
- // The process is decomposed so that the fetching and parsing steps are visible.
91
-
92
- // Fetch data from the GeoJSON file.
93
- // Should you implement a custom fetcher, it would need to be called here.
94
- itowns.Fetcher.json(
95
- 'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/66-pyrenees-orientales/departement-66-pyrenees-orientales.geojson'
96
- ).then(function _(geojson) {
97
- // Parses the fetched data into an itowns FeatureCollection.
98
- // See http://www.itowns-project.org/itowns/docs/#api/Base/FeatureCollection.
99
- // Should you implement a custom parser, it would need to be called here.
100
- // The second parameter of the `parse` method we use here defines options for the transformation from
101
- // data to FeatureCollection.
102
- return itowns.GeoJsonParser.parse(geojson, {
103
- // Information on the fetched data.
104
- // See http://www.itowns-project.org/itowns/docs/#api/Source/ParsingOptions.
105
- in: {
106
- crs: 'EPSG:4326',
107
- },
108
- // Information on the FeatureCollection that should be created from the fetched data
109
- // Here, we pass a FeatureBuildingOptions (http://www.itowns-project.org/itowns/docs/#api/Base/FeatureBuildingOptions)
110
- out: {
111
- crs: view.tileLayer.extent.crs,
112
- buildExtent: true,
113
- mergeFeatures: true,
114
- structure: '2d',
115
- },
116
- });
117
- }).then(function _(features) {
118
- // Create a FileSource from the parsed FeatureCollection.
119
- var pyoSource = new itowns.FileSource({ features });
120
-
121
- var pyoStyle = new itowns.Style({
88
+ // Declare the source for the data on Pyrenees Orientales area
89
+ const pyoSource = new itowns.FileSource({
90
+ url: 'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/66-pyrenees-orientales/departement-66-pyrenees-orientales.geojson',
91
+ crs: 'EPSG:4326',
92
+ format: 'application/json',
93
+ });
94
+ // Create a ColorLayer for the Pyrenees Orientales area
95
+ const pyoLayer = new itowns.ColorLayer('pyrenees-orientales', {
96
+ name: 'pyrenees-orientales',
97
+ transparent: true,
98
+ source: pyoSource,
99
+ style: new itowns.Style({
122
100
  fill: {
123
101
  pattern: 'images/cross.png',
124
102
  opacity: 0.8,
@@ -126,21 +104,16 @@
126
104
  stroke: {
127
105
  color:'IndianRed',
128
106
  },
129
- });
107
+ }),
108
+ });
109
+ // Add The Pyrennees Orientales ColorLayer to the view and grant it a tooltip
110
+ view.addLayer(pyoLayer).then(FeatureToolTip.addLayer);
130
111
 
131
- // Create a ColorLayer to display the FeatureCollection.
132
- var pyoLayer = new itowns.ColorLayer('pyrenees-orientales', {
133
- name: 'pyrenees-orientales',
134
- transparent: true,
135
- source: pyoSource,
136
- style: pyoStyle,
137
- });
138
112
 
139
- return view.addLayer(pyoLayer);
140
- }).then(FeatureToolTip.addLayer).then(() => {
141
- // Center the camera on the data extents
113
+ // Center the camera on the data extents
114
+ view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
142
115
  const layersExtent = ariegeSource.extent.clone();
143
- layersExtent.union(view.getLayerById('pyrenees-orientales').source.extent);
116
+ layersExtent.union(pyoSource.extent);
144
117
  view.controls.lookAtCoordinate(layersExtent, false);
145
118
  });
146
119
 
package/examples/source_file_gpx_raster.html CHANGED
@@ -57,45 +57,37 @@
57
57
  itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
58
58
  itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
59
59
 
60
- // Parse and Convert by iTowns
61
- itowns.Fetcher.xml('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx')
62
- .then(function _(gpx) {
63
- var gpxStyle = new itowns.Style({
64
- zoom: {
65
- min: 9,
66
- },
67
- stroke: {
68
- color: 'red',
69
- },
70
- point: {
71
- color: 'white',
72
- line: 'red',
73
- },
74
- text: {
75
- field: '{name}',
76
- transform: 'uppercase',
77
- font: ['Arial', 'sans-serif'],
78
- haloColor: 'white',
79
- haloWidth: 1,
80
- },
81
- });
82
60
 
83
- var gpxSource = new itowns.FileSource({
84
- fetchedData: gpx,
85
- crs: 'EPSG:4326',
86
- parser: itowns.GpxParser.parse,
87
- });
61
+ const gpxSource = new itowns.FileSource({
62
+ url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx',
63
+ crs: 'EPSG:4326',
64
+ format: 'application/gpx',
65
+ });
88
66
 
89
- var gpxLayer = new itowns.ColorLayer('Gpx', {
90
- name: 'Ultra 2009',
91
- transparent: true,
92
- source: gpxSource,
93
- style: gpxStyle,
94
- addLabelLayer: true,
95
- });
67
+ const gpxStyle = new itowns.Style({
68
+ zoom: { min: 9 },
69
+ stroke: { color: 'red' },
70
+ point: {
71
+ color: 'white',
72
+ line: 'red',
73
+ },
74
+ text: {
75
+ field: '{name}',
76
+ transform: 'uppercase',
77
+ font: ['Arial', 'sans-serif'],
78
+ haloColor: 'white',
79
+ haloWidth: 1,
80
+ },
81
+ });
82
+
83
+ const gpxLayer = new itowns.ColorLayer('Gpx', {
84
+ source: gpxSource,
85
+ style: gpxStyle,
86
+ addLabelLayer: true,
87
+ });
88
+
89
+ view.addLayer(gpxLayer);
96
90
 
97
- return view.addLayer(gpxLayer);
98
- });
99
91
 
100
92
  debug.createTileDebugUI(menuGlobe.gui, view);
101
93
  </script>
package/examples/source_file_kml_raster.html CHANGED
@@ -60,8 +60,7 @@
60
60
  var kmlSource = new itowns.FileSource({
61
61
  url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/croquis.kml',
62
62
  crs: 'EPSG:4326',
63
- fetcher: itowns.Fetcher.xml,
64
- parser: itowns.KMLParser.parse,
63
+ format: 'application/kml',
65
64
  });
66
65
 
67
66
  var kmlStyle = new itowns.Style({
@@ -78,8 +77,6 @@
78
77
  });
79
78
 
80
79
  var kmlLayer = new itowns.ColorLayer('Kml', {
81
- name: 'kml',
82
- transparent: true,
83
80
  source: kmlSource,
84
81
  style: kmlStyle,
85
82
  addLabelLayer: true,
package/examples/source_file_shapefile.html CHANGED
@@ -25,7 +25,7 @@
25
25
  // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
26
26
  var viewerDiv = document.getElementById('viewerDiv');
27
27
 
28
- // Instanciate iTowns GlobeView*
28
+ // Instantiate iTowns GlobeView*
29
29
  var view = new itowns.GlobeView(viewerDiv, placement);
30
30
  var menuGlobe = new GuiTools('menuDiv', view);
31
31
 
@@ -41,48 +41,52 @@
41
41
  view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
42
42
  });
43
43
 
44
- // Load all the necessary files for a shapefile, parse them and
45
- // display them.
46
- itowns.Fetcher.multiple('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/shapefile/velib-disponibilite-en-temps-reel', {
47
- arrayBuffer: ['shp', 'dbf', 'shx'],
48
- text: ['prj'],
49
- }).then(function _(res) {
50
- return itowns.ShapefileParser.parse(res, {
44
+
45
+
46
+ // As there is no Shapefile fetcher directly bundled within iTowns, we need to specify a method to fetch data.
47
+ // We use here `multiple` fetcher, which can fetch multiple files within multiple formats.
48
+ itowns.Fetcher.multiple(
49
+ 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/shapefile/velib-disponibilite-en-temps-reel',
50
+ {
51
+ // fetch all files whose name match the `url` parameter value, and whose format is either `shp`,
52
+ // `dbf`, `shx` or `prj`.
53
+ arrayBuffer: ['shp', 'dbf', 'shx'],
54
+ text: ['prj'],
55
+ },
56
+ ).then((fetched) => {
57
+ // Once our Shapefile data is fetched, we can parse it by running itowns built-in Shapefile parser.
58
+ return itowns.ShapefileParser.parse(fetched, {
59
+ // Options indicating how the features should be built from data.
51
60
  out: {
61
+ // Specitfy the crs to convert the input coordinates to.
52
62
  crs: view.tileLayer.extent.crs,
53
- buildExtent: true,
54
- }
55
- });
56
- }).then(function _(features) {
57
- var velibSource = new itowns.FileSource({ features });
58
-
59
- var velibStyle = new itowns.Style({
60
- zoom: { min: 10, max: 20 },
61
- point: {
62
- color: 'white',
63
- line: 'green',
64
- },
65
- text: {
66
- field: '{name}\n(id: {station_id})',
67
- size: 14,
68
- haloColor: 'white',
69
- haloWidth: 1,
70
- font: ['monospace'],
71
63
  },
72
64
  });
65
+ }).then((parsed) => {
66
+ // We can then instantiate a FileSource, passing the parsed data,
67
+ // and create a Layer bound to this source.
68
+ const velibSource = new itowns.FileSource({ features: parsed });
73
69
 
74
- var velibLayer = new itowns.ColorLayer('velib', {
70
+ return view.addLayer(new itowns.ColorLayer('velib', {
75
71
  source: velibSource,
76
- style: velibStyle,
72
+ style: new itowns.Style({
73
+ zoom: { min: 10, max: 20 },
74
+ point: { color: 'white', line: 'green' },
75
+ text: {
76
+ field: '{name}\n(id: {station_id})',
77
+ size: 14,
78
+ haloColor: 'white',
79
+ haloWidth: 1,
80
+ font: ['monospace'],
81
+ }
82
+ }),
77
83
  addLabelLayer: true,
78
- });
79
-
80
- debug.createTileDebugUI(menuGlobe.gui, view);
81
-
82
- return view.addLayer(velibLayer);
83
- }).then(function _(layer) {
84
+ }));
85
+ }).then((layer => {
86
+ // Finally, we generate tooltip for when the mouse hovers the data displayed within our created layer.
84
87
  FeatureToolTip.addLayer(layer, { filterAllProperties: false });
85
- });
88
+ }));
89
+
86
90
  </script>
87
91
  </body>
88
92
  </html>
package/examples/source_stream_wfs_25d.html CHANGED
@@ -163,13 +163,19 @@
163
163
  view.addLayer(lyonTclBusLayer);
164
164
 
165
165
  function colorBuildings(properties) {
166
- if (properties.geojson.id.indexOf('bati_remarquable') === 0) {
167
- return color.set(0x5555ff);
166
+ if (properties.usage_1 === 'Résidentiel') {
167
+ return color.set(0xFDFDFF);
168
+ } else if (properties.usage_1 === 'Annexe') {
169
+ return color.set(0xC6C5B9);
170
+ } else if (properties.usage_1 === 'Commercial et services') {
171
+ return color.set(0x62929E);
172
+ } else if (properties.usage_1 === 'Religieux') {
173
+ return color.set(0x393D3F);
174
+ } else if (properties.usage_1 === 'Sportif') {
175
+ return color.set(0x546A7B);
168
176
  }
169
- if (properties.geojson.id.indexOf('bati_industriel') === 0) {
170
- return color.set(0xff5555);
171
- }
172
- return color.set(0xeeeeee);
177
+
178
+ return color.set(0x555555);
173
179
  }
174
180
 
175
181
  function extrudeBuildings(properties) {
@@ -177,7 +183,7 @@
177
183
  }
178
184
 
179
185
  function altitudeBuildings(properties) {
180
- return properties.z_min - properties.hauteur;
186
+ return properties.altitude_minimale_sol;
181
187
  }
182
188
 
183
189
  meshes = [];
@@ -203,9 +209,9 @@
203
209
  view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, scaler);
204
210
 
205
211
  var wfsBuildingSource = new itowns.WFSSource({
206
- url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
212
+ url: 'https://wxs.ign.fr/topographie/geoportail/wfs?',
207
213
  version: '2.0.0',
208
- typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
214
+ typeName: 'BDTOPO_V3:batiment',
209
215
  crs: 'EPSG:4326',
210
216
  ipr: 'IGN',
211
217
  format: 'application/json',
@@ -242,40 +248,32 @@
242
248
  view.addLayer(wfsBuildingLayer);
243
249
 
244
250
  var wfsCartoSource = new itowns.WFSSource({
245
- url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
251
+ url: 'https://wxs.ign.fr/cartovecto/geoportail/wfs?',
246
252
  version: '2.0.0',
247
- typeName: 'BDCARTO_BDD_WLD_WGS84G:zone_habitat',
248
- crs: 'EPSG:4326',
253
+ typeName: 'BDCARTO_BDD_WLD_WGS84G:zone_habitat_mairie',
254
+ crs: 'EPSG:3946',
249
255
  ipr: 'IGN',
250
256
  format: 'application/json',
251
- extent: {
252
- west: 4.568,
253
- east: 5.18,
254
- south: 45.437,
255
- north: 46.03,
256
- },
257
257
  });
258
258
 
259
259
  var wfsCartoStyle = new itowns.Style({
260
260
  zoom: { min: 0, max: 20 },
261
261
  text: {
262
262
  field: '{toponyme}',
263
+ color: 'white',
263
264
  transform: 'uppercase',
264
- size: 20,
265
- haloColor: 'white',
266
- haloWidth: 1,
265
+ size: 15,
266
+ haloColor: 'rgba(20,20,20, 0.8)',
267
+ haloWidth: 3,
267
268
  },
268
269
  });
269
270
 
270
271
  var wfsCartoLayer = new itowns.LabelLayer('wfsCarto', {
271
- crs: 'EPSG:3946',
272
272
  source: wfsCartoSource,
273
273
  style: wfsCartoStyle,
274
274
  });
275
275
 
276
- // TODO: enable this again when the stream became available
277
- // Search for "zone_habitat" in this page https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?SERVICE=WFS&REQUEST=GetCapabilities
278
- // view.addLayer(wfsCartoLayer);
276
+ view.addLayer(wfsCartoLayer);
279
277
 
280
278
  function picking(event) {
281
279
  var htmlInfo = document.getElementById('info');
@@ -290,10 +288,12 @@
290
288
  properties = intersects[0].object.feature.geometries[batchId].properties;
291
289
  Object.keys(properties).map(function (objectKey) {
292
290
  var value = properties[objectKey];
293
- var key = objectKey.toString();
294
- if (key[0] !== '_' && key !== 'geometry_name') {
295
- info = value.toString();
296
- htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
291
+ if (value) {
292
+ var key = objectKey.toString();
293
+ if (key[0] !== '_' && key !== 'geometry_name') {
294
+ info = value.toString();
295
+ htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
296
+ }
297
297
  }
298
298
  });
299
299
  return properties;
package/examples/source_stream_wfs_3d.html CHANGED
@@ -127,16 +127,23 @@
127
127
  view.addLayer(lyonTclBusLayer);
128
128
 
129
129
  function colorBuildings(properties) {
130
- if (properties.geojson.id.indexOf('bati_remarquable') === 0) {
131
- return color.set(0x5555ff);
132
- } else if (properties.geojson.id.indexOf('bati_industriel') === 0) {
133
- return color.set(0xff5555);
130
+ if (properties.usage_1 === 'Résidentiel') {
131
+ return color.set(0xFDFDFF);
132
+ } else if (properties.usage_1 === 'Annexe') {
133
+ return color.set(0xC6C5B9);
134
+ } else if (properties.usage_1 === 'Commercial et services') {
135
+ return color.set(0x62929E);
136
+ } else if (properties.usage_1 === 'Religieux') {
137
+ return color.set(0x393D3F);
138
+ } else if (properties.usage_1 === 'Sportif') {
139
+ return color.set(0x546A7B);
134
140
  }
135
- return color.set(0xeeeeee);
141
+
142
+ return color.set(0x555555);
136
143
  }
137
144
 
138
145
  function altitudeBuildings(properties) {
139
- return properties.z_min - properties.hauteur;
146
+ return properties.altitude_minimale_sol;
140
147
  }
141
148
 
142
149
  function extrudeBuildings(properties) {
@@ -167,9 +174,9 @@
167
174
  view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, scaler);
168
175
 
169
176
  var wfsBuildingSource = new itowns.WFSSource({
170
- url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wfs?',
177
+ url: 'https://wxs.ign.fr/topographie/geoportail/wfs?',
171
178
  version: '2.0.0',
172
- typeName: 'BDTOPO_BDD_WLD_WGS84G:bati_remarquable,BDTOPO_BDD_WLD_WGS84G:bati_indifferencie,BDTOPO_BDD_WLD_WGS84G:bati_industriel',
179
+ typeName: 'BDTOPO_V3:batiment',
173
180
  crs: 'EPSG:4326',
174
181
  ipr: 'IGN',
175
182
  format: 'application/json',
@@ -228,10 +235,12 @@
228
235
 
229
236
  Object.keys(properties).map(function (objectKey) {
230
237
  var value = properties[objectKey];
231
- var key = objectKey.toString();
232
- if (key[0] !== '_' && key !== 'geometry_name') {
233
- info = value.toString();
234
- htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
238
+ if (value) {
239
+ var key = objectKey.toString();
240
+ if (key[0] !== '_' && key !== 'geometry_name') {
241
+ info = value.toString();
242
+ htmlInfo.innerHTML +='<li><b>' + key + ': </b>' + info + '</li>';
243
+ }
235
244
  }
236
245
  });
237
246
  }