From 7680ccf0deea7846747a9b30cdfde94334fb8098 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Duhen?= Date: Wed, 6 Mar 2024 10:17:47 +0100 Subject: [PATCH] doc(tutorials): minor typo and syntax fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit doc(tutorials): remove unneeded code indentation doc(tutorials): fix minor typo doc(tutorials): add missing semicolon Signed-off-by: Raphaël Duhen --- docs/tutorials/3DTiles-mesh-b3dm.md | 118 +++++++------- docs/tutorials/3DTiles-point-cloud-pnts.md | 172 ++++++++++----------- docs/tutorials/Vector-data-on-ground.md | 6 +- 3 files changed, 149 insertions(+), 147 deletions(-) diff --git a/docs/tutorials/3DTiles-mesh-b3dm.md b/docs/tutorials/3DTiles-mesh-b3dm.md index 466fa47b5f..6cc38cf726 100644 --- a/docs/tutorials/3DTiles-mesh-b3dm.md +++ b/docs/tutorials/3DTiles-mesh-b3dm.md @@ -40,65 +40,65 @@ The 3D Tiles dataset we are using is in the `EPSG:3946` CRS, so we will use a `{ We won't go into the details of creating the view, adding the ortho images and the DEM. For more information on this part, see the [Raster visualization in Lambert Conformical conic projection]{@tutorial Raster-data-Lambert93} in which we do the same but in the `EPSG:2154` projection. You can use the following code that prepared the field with such data: ```js - // Define crs 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'); - - // Define geographic extent: CRS, min/max X, min/max Y - var extent = new itowns.Extent( 'EPSG:3946', - 1837816.94334, 1847692.32501, - 5170036.4587, 5178412.82698); - - // `viewerDiv` will contain iTowns' rendering area (``) - var viewerDiv = document.getElementById('viewerDiv'); - - // Instanciate PlanarView* - var cameraCoord = new itowns.Coordinates('EPSG:3946', 1841980, - 5175682, 3000) - var view = new itowns.PlanarView(viewerDiv, extent, { placement: { - coord: cameraCoord, heading: 30, range: 4000, tilt: 30 } }); - - // Add a WMS imagery source - var wmsImagerySource = new itowns.WMSSource({ - extent: extent, - name: 'Ortho2009_vue_ensemble_16cm_CC46', - url: 'https://download.data.grandlyon.com/wms/grandlyon', - version: '1.3.0', - crs: 'EPSG:3946', - format: 'image/jpeg', - }); - - // Add a WMS imagery layer - var wmsImageryLayer = new itowns.ColorLayer('wms_imagery', { - updateStrategy: { - type: itowns.STRATEGY_DICHOTOMY, - options: {}, - }, - source: wmsImagerySource, - }); - - view.addLayer(wmsImageryLayer); - - // Add a WMS elevation source - var wmsElevationSource = new itowns.WMSSource({ - extent: extent, - url: 'https://download.data.grandlyon.com/wms/grandlyon', - name: 'MNT2012_Altitude_10m_CC46', - crs: 'EPSG:3946', - width: 256, - format: 'image/jpeg', - }); - - // Add a WMS elevation layer - var wmsElevationLayer = new itowns.ElevationLayer('wms_elevation', { - useColorTextureElevation: true, - colorTextureElevationMinZ: 144, - colorTextureElevationMaxZ: 622, - source: wmsElevationSource, - }); - - view.addLayer(wmsElevationLayer); +// Define crs 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'); + +// Define geographic extent: CRS, min/max X, min/max Y +var extent = new itowns.Extent( 'EPSG:3946', + 1837816.94334, 1847692.32501, + 5170036.4587, 5178412.82698); + +// `viewerDiv` will contain iTowns' rendering area (``) +var viewerDiv = document.getElementById('viewerDiv'); + +// Instanciate PlanarView* +var cameraCoord = new itowns.Coordinates('EPSG:3946', 1841980, + 5175682, 3000) +var view = new itowns.PlanarView(viewerDiv, extent, { placement: { + coord: cameraCoord, heading: 30, range: 4000, tilt: 30 } }); + +// Add a WMS imagery source +var wmsImagerySource = new itowns.WMSSource({ + extent: extent, + name: 'Ortho2009_vue_ensemble_16cm_CC46', + url: 'https://download.data.grandlyon.com/wms/grandlyon', + version: '1.3.0', + crs: 'EPSG:3946', + format: 'image/jpeg', +}); + +// Add a WMS imagery layer +var wmsImageryLayer = new itowns.ColorLayer('wms_imagery', { + updateStrategy: { + type: itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: wmsImagerySource, +}); + +view.addLayer(wmsImageryLayer); + +// Add a WMS elevation source +var wmsElevationSource = new itowns.WMSSource({ + extent: extent, + url: 'https://download.data.grandlyon.com/wms/grandlyon', + name: 'MNT2012_Altitude_10m_CC46', + crs: 'EPSG:3946', + width: 256, + format: 'image/jpeg', +}); + +// Add a WMS elevation layer +var wmsElevationLayer = new itowns.ElevationLayer('wms_elevation', { + useColorTextureElevation: true, + colorTextureElevationMinZ: 144, + colorTextureElevationMaxZ: 622, + source: wmsElevationSource, +}); + +view.addLayer(wmsElevationLayer); ``` ## Adding the 3D Tiles Layer diff --git a/docs/tutorials/3DTiles-point-cloud-pnts.md b/docs/tutorials/3DTiles-point-cloud-pnts.md index a1d38d73f3..e023c13605 100644 --- a/docs/tutorials/3DTiles-point-cloud-pnts.md +++ b/docs/tutorials/3DTiles-point-cloud-pnts.md @@ -39,73 +39,73 @@ The 3D Tiles dataset we are using is in the `EPSG:4978` CRS, so we will use a `{ We won't go into the details of creating the view, adding the ortho images and the DEM. For more information on this part, see the [WGS84 tutorial]{@tutorial Raster-data-WGS84} in which we explain how to add similar layers. The only differences are the data sources used. Here, we use ortho images from a XYZ stream of Open Street Map tiles which will allow to better distinguish the point cloud. We also use a more precise DEM (but that only covers France). ```js - var viewerDiv = document.getElementById('viewerDiv'); - var placement = { - coord: new itowns.Coordinates('EPSG:4326', 3.3792, 44.3335, 844), - tilt: 22, - heading: -180, - range: 2840 - }; - - var view = new itowns.GlobeView(viewerDiv, placement); - - var orthoSource = new itowns.TMSSource({ - crs: "EPSG:3857", - isInverted: true, - format: "image/png", - url: "http://osm.oslandia.io/styles/klokantech-basic/${z}/${x}/${y}.png", - attribution: { - name:"OpenStreetMap", - url: "http://www.openstreetmap.org/" +var viewerDiv = document.getElementById('viewerDiv'); +var placement = { + coord: new itowns.Coordinates('EPSG:4326', 3.3792, 44.3335, 844), + tilt: 22, + heading: -180, + range: 2840 +}; + +var view = new itowns.GlobeView(viewerDiv, placement); + +var orthoSource = new itowns.TMSSource({ + crs: "EPSG:3857", + isInverted: true, + format: "image/png", + url: "http://osm.oslandia.io/styles/klokantech-basic/${z}/${x}/${y}.png", + attribution: { + name:"OpenStreetMap", + url: "http://www.openstreetmap.org/" + }, + tileMatrixSet: "PM" +}); + +var orthoLayer = new itowns.ColorLayer('Ortho', { + source: orthoSource, +}); + +view.addLayer(orthoLayer); + +var elevationSource = new itowns.WMTSSource({ + url: 'http://wxs.ign.fr/altimetrie/geoportail/wmts', + crs: 'EPSG:4326', + name: 'ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES', + tileMatrixSet: 'WGS84G', + format: 'image/x-bil;bits=32', + tileMatrixSetLimits: { + 11: { + minTileRow: 442, + maxTileRow: 1267, + minTileCol: 1344, + maxTileCol: 2683 }, - tileMatrixSet: "PM" - }); - - var orthoLayer = new itowns.ColorLayer('Ortho', { - source: orthoSource, - }); - - view.addLayer(orthoLayer); - - var elevationSource = new itowns.WMTSSource({ - url: 'http://wxs.ign.fr/altimetrie/geoportail/wmts', - crs: 'EPSG:4326', - name: 'ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES', - tileMatrixSet: 'WGS84G', - format: 'image/x-bil;bits=32', - tileMatrixSetLimits: { - 11: { - minTileRow: 442, - maxTileRow: 1267, - minTileCol: 1344, - maxTileCol: 2683 - }, - 12: { - minTileRow: 885, - maxTileRow: 2343, - minTileCol: 3978, - maxTileCol: 5126 - }, - 13: { - minTileRow: 1770, - maxTileRow: 4687, - minTileCol: 7957, - maxTileCol: 10253 - }, - 14: { - minTileRow: 3540, - maxTileRow: 9375, - minTileCol: 15914, - maxTileCol: 20507 - } + 12: { + minTileRow: 885, + maxTileRow: 2343, + minTileCol: 3978, + maxTileCol: 5126 + }, + 13: { + minTileRow: 1770, + maxTileRow: 4687, + minTileCol: 7957, + maxTileCol: 10253 + }, + 14: { + minTileRow: 3540, + maxTileRow: 9375, + minTileCol: 15914, + maxTileCol: 20507 } - }); + } +}); - var elevationLayer = new itowns.ElevationLayer('MNT_WORLD', { - source: elevationSource, - }); +var elevationLayer = new itowns.ElevationLayer('MNT_WORLD', { + source: elevationSource, +}); - view.addLayer(elevationLayer); +view.addLayer(elevationLayer); ``` At this point you should be zoomed on the Tarn gorges (where our 3D dataset will be displayed) and see @@ -118,21 +118,21 @@ a basemap and a 3D terrain: As usual, we first configure a source. Here, we will use a `{@link C3DTilesSource}` for which it is as simple as giving the url of the dataset to display. ```js - const pointCloudSource = new itowns.C3DTilesSource({ - url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/' + - 'master/3DTiles/lidar-hd-gorges-saint-chely-tarn/tileset.json', - }); +const pointCloudSource = new itowns.C3DTilesSource({ + url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/' + + 'master/3DTiles/lidar-hd-gorges-saint-chely-tarn/tileset.json', +}); ``` Then, we create the `{@link C3DTilesLayer}` by giving it and `id`, the `source` and the `view`. And finally we add it to the `{@link GlobeView}` by using the generic method of `{@link View}` to not -use the `GlobeView` subdivision (see [the 3D Tiles textured buildings tutorial](@tutorial 3DTiles-mesh-b3dm) for more information). +use the `GlobeView` subdivision (see [the 3D Tiles textured buildings tutorial]{@tutorial 3DTiles-mesh-b3dm} for more information). ```js - const pointCloudLayer = new itowns.C3DTilesLayer('gorges', { - source: pointCloudSource, - }, view); - itowns.View.prototype.addLayer.call(view, pointCloudLayer); +const pointCloudLayer = new itowns.C3DTilesLayer('gorges', { + source: pointCloudSource, +}, view); +itowns.View.prototype.addLayer.call(view, pointCloudLayer); ``` At this point, you should see the point cloud displayed: @@ -152,13 +152,13 @@ the `onTileContentLoaded` callback of `{@link C3DTilesLayer}` that is called for First, we create a function to update the size of the point: ```js - function updatePointCloudSize(tileContent) { - tileContent.traverse(function (obj) { - if (obj.isPoints) { - obj.material.size = 3.0; - } - }); - } +function updatePointCloudSize(tileContent) { + tileContent.traverse(function (obj) { + if (obj.isPoints) { + obj.material.size = 3.0; + } + }); +} ``` In this function, we traverse the `tileContent` hierarchy until we find the threejs `Points` object with `obj.isPoints`. Then, we change the size of the threejs `PointMaterial` material. You can refer @@ -167,23 +167,23 @@ to threejs documentation for more information on `Object3D`, `Group`, `Points` a Then, we just need to pass this callback to the `{@link C3DTilesLayer}` constructor: ```js - onTileContentLoaded: updatePointCloudSize +onTileContentLoaded: updatePointCloudSize ``` The constructor of the `{@link C3DTilesLayer}` therefore becomes: ```js - const pointCloudLayer = new itowns.C3DTilesLayer('gorges', { - source: pointCloudSource, - onTileContentLoaded: updatePointCloudSize - }, view); +const pointCloudLayer = new itowns.C3DTilesLayer('gorges', { + source: pointCloudSource, + onTileContentLoaded: updatePointCloudSize +}, view); ``` If you zoom in to the points, you can now see that they are bigger: ![3D tiles small points](images/3DTiles-point-cloud-pnts-4.png) -Not that you can use this callback to change the style of any 3D Tiles dataset (even meshes) and to change any style property of the dataset. +Note that you can use this callback to change the style of any 3D Tiles dataset (even meshes) and to change any style property of the dataset. ## Result @@ -295,4 +295,4 @@ The full code to achieve this result is: -``` \ No newline at end of file +``` diff --git a/docs/tutorials/Vector-data-on-ground.md b/docs/tutorials/Vector-data-on-ground.md index 989ebd773b..456082fbbf 100644 --- a/docs/tutorials/Vector-data-on-ground.md +++ b/docs/tutorials/Vector-data-on-ground.md @@ -49,7 +49,8 @@ We need to change the starting position to something more appropriate. name: 'ORTHOIMAGERY.ORTHOPHOTOS', tileMatrixSet: 'PM', format: 'image/jpeg', - }) + }); + // Create the ortho-images ColorLayer and add it to the view var orthoLayer = new itowns.ColorLayer('Ortho', { source: orthoSource, @@ -234,7 +235,8 @@ By reaching here, you are now able to display simple vector data projected on th name: 'ORTHOIMAGERY.ORTHOPHOTOS', tileMatrixSet: 'PM', format: 'image/jpeg', - }) + }); + // Create the ortho-images ColorLayer and add it to the view var orthoLayer = new itowns.ColorLayer('Ortho', { source: orthoSource,