diff --git a/examples/2DVisualization.html b/examples/2DVisualization.html index c29608a9c..5983d117d 100644 --- a/examples/2DVisualization.html +++ b/examples/2DVisualization.html @@ -39,24 +39,70 @@ ); // ADD BASE MAP - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); // ADD ELEVATION LAYER - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) ); // ADD LAYERS - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); const button = document.createElement('button'); button.innerHTML = 'Change visualization mode to 3D'; diff --git a/examples/3DTilesPointCloud.html b/examples/3DTilesPointCloud.html index 71984e127..3a05de921 100644 --- a/examples/3DTilesPointCloud.html +++ b/examples/3DTilesPointCloud.html @@ -16,7 +16,7 @@ './assets/config/crs.json', './assets/config/frame3D_planars.json', './assets/config/layer/3DTiles_point_cloud.json', - './assets/config/layer/base_maps.json' + './assets/config/layer/base_maps.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -38,17 +38,47 @@ ); // ADD BASE MAP - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); - // /// ADD LAYER - udvizBrowser.add3DTilesLayers( - configs['3DTiles_point_cloud'], + const pointCloudLayer = new udvizBrowser.itowns.C3DTilesLayer( + configs['3DTiles_point_cloud'][0]['id'], + { + name: configs['3DTiles_point_cloud'][0]['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: configs['3DTiles_point_cloud'][0]['url'], + }), + }, frame3DPlanar.itownsView ); + + // hack (not declare in C3DTilesLayer) to override point cloud material + pointCloudLayer.material = new udvizBrowser.THREE.PointsMaterial({ + size: configs['3DTiles_point_cloud'][0]['pc_size'], + vertexColors: true, + }); + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + pointCloudLayer + ); }); SCRIPT_TAG_RELOAD diff --git a/examples/3DTilesWidget.html b/examples/3DTilesWidget.html index 15dc54c48..611f77a62 100644 --- a/examples/3DTilesWidget.html +++ b/examples/3DTilesWidget.html @@ -16,7 +16,7 @@ './assets/config/extents.json', './assets/config/crs.json', './assets/config/frame3D_planars.json', - './assets/config/layer/3DTiles.json' + './assets/config/layer/3DTiles.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -43,8 +43,8 @@ return feature.userData.selectedColor ? feature.userData.selectedColor : 'white'; - } - } + }, + }, }); // create 3DTilesLayers @@ -55,8 +55,8 @@ style: style, name: layerConfig['id'], source: new udvizBrowser.itowns.C3DTilesSource({ - url: layerConfig['url'] - }) + url: layerConfig['url'], + }), }, frame3DPlanar.itownsView ); @@ -74,7 +74,7 @@ layerContainerClassName: 'widgets-3dtiles-layer-container', c3DTFeatureInfoContainerClassName: 'widgets-3dtiles-feature-container', - urlContainerClassName: 'widgets-3dtiles-url-container' + urlContainerClassName: 'widgets-3dtiles-url-container', } ); widget.domElement.setAttribute('id', 'widgets-3dtiles'); @@ -82,7 +82,7 @@ // add on click behavior const contextSelection = { feature: null, - layer: null + layer: null, }; frame3DPlanar.domElement.onclick = (event) => { if (contextSelection.feature) { diff --git a/examples/3DTilesWireframe.html b/examples/3DTilesWireframe.html index 8c3520574..0aa2fdf96 100644 --- a/examples/3DTilesWireframe.html +++ b/examples/3DTilesWireframe.html @@ -17,7 +17,7 @@ './assets/config/frame3D_planars.json', './assets/config/layer/3DTiles.json', './assets/config/layer/base_maps.json', - './assets/config/layer/elevation.json' + './assets/config/layer/elevation.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -39,24 +39,70 @@ ); // ADD BASE MAP - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); // ADD ELEVATION LAYER - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) ); // ADD LAYERS - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); frame3DPlanar.itownsView .getLayers() diff --git a/examples/3DTiles_loading.html b/examples/3DTiles_loading.html index 7142aedd0..d40c9bd68 100644 --- a/examples/3DTiles_loading.html +++ b/examples/3DTiles_loading.html @@ -64,17 +64,52 @@ ); // ADD BASE MAP - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {} + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'] + }), + transparent: true + } + ) ); // ADD ELEVATION LAYER - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'] + }) + } + ) ); // c3DTiles loading element diff --git a/examples/AddLayersFromConfig.html b/examples/AddLayersFromConfig.html index 47ddc8121..1a61e27f1 100644 --- a/examples/AddLayersFromConfig.html +++ b/examples/AddLayersFromConfig.html @@ -18,7 +18,7 @@ './assets/config/layer/base_maps.json', './assets/config/layer/geoJSONs.json', './assets/config/layer/elevation.json', - './assets/config/layer/3DTiles.json' + './assets/config/layer/3DTiles.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -41,27 +41,82 @@ // /// ADD LAYERS - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); - udvizBrowser.addGeoJsonLayers( - configs['geoJSONs'], - frame3DPlanar.itownsView, - extent - ); + configs['geoJSONs'].forEach((layerConfig) => { + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(layerConfig.id, { + name: layerConfig.id, + transparent: true, + source: new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: extent.crs, + format: 'application/json', + }), + style: new udvizBrowser.itowns.Style(layerConfig.style), + }) + ); + }); - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) ); }); diff --git a/examples/Authentification.html b/examples/Authentification.html index ecf926338..d811db5b9 100644 --- a/examples/Authentification.html +++ b/examples/Authentification.html @@ -12,7 +12,7 @@ diff --git a/examples/AvatarGameShader.html b/examples/AvatarGameShader.html index 23986d9a7..c9a8f6d5c 100644 --- a/examples/AvatarGameShader.html +++ b/examples/AvatarGameShader.html @@ -22,7 +22,7 @@ './assets/config/layer/3DTiles.json', './assets/config/layer/base_maps.json', './assets/config/layer/elevation.json', - './assets/config/layer/geoJSONs.json' + './assets/config/layer/geoJSONs.json', ]) .then((configs) => { const assetManager = new udvizBrowser.AssetManager(); @@ -72,7 +72,7 @@ 'Lyon-5', 'Lyon-6', 'Lyon-7', - 'Lyon-8' + 'Lyon-8', ]); this.raycaster.ray.origin = origin; @@ -124,7 +124,7 @@ // Intersection cube const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ - color: 0x00ff00 + color: 0x00ff00, }); this.intersectionCube = new THREE.Mesh(geometry, material); scene.add(this.intersectionCube); @@ -213,24 +213,24 @@ variables: { update_z_crs: configs['crs'][0].name, camera_distance: 5, - camera_angle: 0 + camera_angle: 0, }, idScripts: [ AvatarExternalGameScript.ID_SCRIPT, udvizBrowser.Game.External.ScriptTemplate.CameraManager - .ID_SCRIPT - ] - } + .ID_SCRIPT, + ], + }, }, children: [ { name: 'avatar', gameContextUpdate: false, // this object is not using the gamecontext (maybe create a template dedicate) components: { - Render: { idRenderData: 'avatar' } - } - } - ] + Render: { idRenderData: 'avatar' }, + }, + }, + ], }); const frame3DPlanar = new udvizBrowser.Frame3DPlanar( @@ -246,13 +246,13 @@ { externalGameScriptClass: [ AvatarExternalGameScript, - udvizBrowser.Game.External.ScriptTemplate.CameraManager + udvizBrowser.Game.External.ScriptTemplate.CameraManager, ], gameOrigin: { x: extent.center().x, y: extent.center().y, - z: 300 - } + z: 300, + }, } ); @@ -297,14 +297,14 @@ depth = clamp(depth, 0., 1.); gl_FragColor = vec4(packNormalToRGB( normal ), depth); } - ` + `, }); const MySobelOperatorShader = { uniforms: { tDiffuse: { value: null }, tDepth: { value: null }, - resolution: new THREE.Uniform(new THREE.Vector2()) + resolution: new THREE.Uniform(new THREE.Vector2()), }, vertexShader: /* glsl */ ` @@ -355,14 +355,14 @@ // magnitute of the total gradient gl_FragColor = sqrt( ( valueGx * valueGx ) + ( valueGy * valueGy ) ); } - ` + `, }; const MaskShader = { uniforms: { tDiffuse: { value: null }, tMask: { value: null }, - resolution: new THREE.Uniform(new THREE.Vector2()) + resolution: new THREE.Uniform(new THREE.Vector2()), }, vertexShader: /* glsl */ ` @@ -392,7 +392,7 @@ #include #include } - ` + `, }; // renderTarget for special effects @@ -400,7 +400,7 @@ depthBuffer: true, stencilBuffer: false, format: THREE.RGBAFormat, - type: THREE.FloatType + type: THREE.FloatType, }); // create custom render pass @@ -471,28 +471,85 @@ }); // /// ADD LAYERS - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); + { + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) + ); - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent - ); + configs['geoJSONs'].forEach((layerConfig) => { + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(layerConfig.id, { + name: layerConfig.id, + transparent: true, + source: new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: extent.crs, + format: 'application/json', + }), + style: new udvizBrowser.itowns.Style(layerConfig.style), + }) + ); + }); - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); - udvizBrowser.addGeoJsonLayers( - configs['geoJSONs'], - frame3DPlanar.itownsView, - extent - ); + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) + ); + } }); }); diff --git a/examples/BaseMapWidget.html b/examples/BaseMapWidget.html index 33a6d6e23..f9d6ed6fd 100644 --- a/examples/BaseMapWidget.html +++ b/examples/BaseMapWidget.html @@ -15,7 +15,7 @@ './assets/config/extents.json', './assets/config/crs.json', './assets/config/frame3D_planars.json', - './assets/config/layer/base_maps.json' + './assets/config/layer/base_maps.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -42,13 +42,13 @@ [ { layer: configs['base_maps'][0], - pathIcon: './assets/img/ign_ortho.png' + pathIcon: './assets/img/ign_ortho.png', }, { layer: configs['base_maps'][1], pathIcon: - 'https://download.data.grandlyon.com/catalogue/srv/fre//resources.get?uuid=7e0bab06-ff3b-453e-9b72-e16b8f08d926&fname=ortho2018_s.png' - } + 'https://download.data.grandlyon.com/catalogue/srv/fre//resources.get?uuid=7e0bab06-ff3b-453e-9b72-e16b8f08d926&fname=ortho2018_s.png', + }, ], extent ); diff --git a/examples/C3DTilesEditor.html b/examples/C3DTilesEditor.html index 47a0ad0c7..dd23a5e1b 100644 --- a/examples/C3DTilesEditor.html +++ b/examples/C3DTilesEditor.html @@ -19,7 +19,7 @@ './assets/config/layer/base_maps.json', './assets/config/layer/geoJSONs.json', './assets/config/layer/elevation.json', - './assets/config/layer/3DTiles.json' + './assets/config/layer/3DTiles.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -44,7 +44,7 @@ elevation: configs['elevation'], baseMap: configs['base_maps'][0], labels: configs['labels'], - geoJSON: configs['geoJSONs'] + geoJSON: configs['geoJSONs'], }); }); diff --git a/examples/C3DTilesLayerStyle.html b/examples/C3DTilesLayerStyle.html index 9b2962bfd..467b4ab94 100644 --- a/examples/C3DTilesLayerStyle.html +++ b/examples/C3DTilesLayerStyle.html @@ -15,7 +15,7 @@ './assets/config/extents.json', './assets/config/crs.json', './assets/config/frame3D_planars.json', - './assets/config/layer/3DTiles.json' + './assets/config/layer/3DTiles.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -36,10 +36,21 @@ configs['frame3D_planars'][2] ); - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); const myStyle = new udvizBrowser.itowns.Style({ fill: { @@ -57,8 +68,8 @@ opacity: function (feature) { if (feature.batchId % 2 == 0) return 0.5; return 1; - } - } + }, + }, }); // apply style to layers @@ -72,7 +83,7 @@ // userData styling example using a pick selection const contextSelection = { feature: null, - layer: null + layer: null, }; frame3DPlanar.domElement.onclick = (event) => { if (contextSelection.feature) { diff --git a/examples/CameraPositionerWidget.html b/examples/CameraPositionerWidget.html index 6760a0cec..9a91e4e1a 100644 --- a/examples/CameraPositionerWidget.html +++ b/examples/CameraPositionerWidget.html @@ -15,7 +15,7 @@ './assets/config/extents.json', './assets/config/crs.json', './assets/config/frame3D_planars.json', - './assets/config/layer/base_maps.json' + './assets/config/layer/base_maps.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -36,10 +36,25 @@ configs['frame3D_planars'][2] ); - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); // //// CAMERA POSITIONER diff --git a/examples/DocumentWidget.html b/examples/DocumentWidget.html index 40cff3150..ad9b814e6 100644 --- a/examples/DocumentWidget.html +++ b/examples/DocumentWidget.html @@ -18,7 +18,7 @@ './assets/config/server/spatial_multimedia_db_server.json', './assets/config/layer/3DTiles.json', './assets/config/layer/base_maps.json', - './assets/config/layer/elevation.json' + './assets/config/layer/elevation.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -40,21 +40,67 @@ ); // /// ADD LAYERS - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) ); // quick fix but css needs to be remove from documents view TODO ISSUE diff --git a/examples/DragAndDropAvatar.html b/examples/DragAndDropAvatar.html index 9247e3e46..0e9a02292 100644 --- a/examples/DragAndDropAvatar.html +++ b/examples/DragAndDropAvatar.html @@ -20,7 +20,7 @@ './assets/config/layer/3DTiles.json', './assets/config/layer/base_maps.json', './assets/config/layer/elevation.json', - './assets/config/layer/geoJSONs.json' + './assets/config/layer/geoJSONs.json', ]) .then((configs) => { const assetManager = new udvizBrowser.AssetManager(); @@ -46,12 +46,12 @@ udvizBrowser.Shared.Game.ScriptTemplate.DragAndDropAvatar .ID_SCRIPT, udvizBrowser.Shared.Game.ScriptTemplate.NativeCommandManager - .ID_SCRIPT + .ID_SCRIPT, ], variables: { idRenderDataAvatar: 'avatar', // render data your avatar should use - defaultSpeedRotate: 0.0005 - } + defaultSpeedRotate: 0.0005, + }, }, ExternalScript: { variables: {}, @@ -59,10 +59,10 @@ udvizBrowser.Game.External.ScriptTemplate.DragAndDropAvatar .ID_SCRIPT, udvizBrowser.Game.External.ScriptTemplate.CameraManager - .ID_SCRIPT - ] - } - } + .ID_SCRIPT, + ], + }, + }, }); const frame3DPlanar = new udvizBrowser.Frame3DPlanar( @@ -78,45 +78,102 @@ { externalGameScriptClass: [ udvizBrowser.Game.External.ScriptTemplate.DragAndDropAvatar, - udvizBrowser.Game.External.ScriptTemplate.CameraManager + udvizBrowser.Game.External.ScriptTemplate.CameraManager, ], gameScriptClass: [ udvizBrowser.Shared.Game.ScriptTemplate.NativeCommandManager, - udvizBrowser.Shared.Game.ScriptTemplate.DragAndDropAvatar + udvizBrowser.Shared.Game.ScriptTemplate.DragAndDropAvatar, ], gameOrigin: { x: extent.center().x, y: extent.center().y, - z: 300 - } + z: 300, + }, } ); game.start(); // /// ADD LAYERS - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); + { + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) + ); - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent - ); + configs['geoJSONs'].forEach((layerConfig) => { + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(layerConfig.id, { + name: layerConfig.id, + transparent: true, + source: new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: extent.crs, + format: 'application/json', + }), + style: new udvizBrowser.itowns.Style(layerConfig.style), + }) + ); + }); - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); - udvizBrowser.addGeoJsonLayers( - configs['geoJSONs'], - frame3DPlanar.itownsView, - extent - ); + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) + ); + } }); }); diff --git a/examples/GeocodingWidget.html b/examples/GeocodingWidget.html index 03ecd4cc0..4fe45aa2a 100644 --- a/examples/GeocodingWidget.html +++ b/examples/GeocodingWidget.html @@ -16,7 +16,7 @@ './assets/config/crs.json', './assets/config/frame3D_planars.json', './assets/config/server/geocoding_server.json', - './assets/config/layer/base_maps.json' + './assets/config/layer/base_maps.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -39,10 +39,25 @@ // /// ADD LAYERS - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); // //// REQUEST SERVICE diff --git a/examples/GuidedTour.html b/examples/GuidedTour.html index a3b92b1f5..257e96558 100644 --- a/examples/GuidedTour.html +++ b/examples/GuidedTour.html @@ -18,7 +18,7 @@ './assets/config/server/spatial_multimedia_db_server.json', './assets/config/layer/3DTiles.json', './assets/config/layer/base_maps.json', - './assets/config/layer/elevation.json' + './assets/config/layer/elevation.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -40,21 +40,67 @@ ); // /// ADD LAYERS - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) ); // REQUEST SERVICE diff --git a/examples/LayerChoiceWidget.html b/examples/LayerChoiceWidget.html index 863d9fcb2..12b25e3c8 100644 --- a/examples/LayerChoiceWidget.html +++ b/examples/LayerChoiceWidget.html @@ -18,7 +18,7 @@ './assets/config/layer/3DTiles.json', './assets/config/layer/base_maps.json', './assets/config/layer/elevation.json', - './assets/config/layer/geoJSONs.json' + './assets/config/layer/geoJSONs.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -40,28 +40,83 @@ ); // /// ADD LAYERS - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) ); - udvizBrowser.addGeoJsonLayers( - configs['geoJSONs'], - frame3DPlanar.itownsView, - extent - ); + configs['geoJSONs'].forEach((layerConfig) => { + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(layerConfig.id, { + name: layerConfig.id, + transparent: true, + source: new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: extent.crs, + format: 'application/json', + }), + style: new udvizBrowser.itowns.Style(layerConfig.style), + }) + ); + }); // //// LAYER CHOICE MODULE const layerChoice = new udvizBrowser.Widget.LayerChoice( diff --git a/examples/MultiPlanarProcess.html b/examples/MultiPlanarProcess.html index 9246e8aeb..9d688d2fa 100644 --- a/examples/MultiPlanarProcess.html +++ b/examples/MultiPlanarProcess.html @@ -20,7 +20,7 @@ './assets/config/layer/3DTiles.json', './assets/config/layer/base_maps.json', './assets/config/layer/elevation.json', - './assets/config/layer/geoJSONs.json' + './assets/config/layer/geoJSONs.json', ]) .then((configs) => { const assetManager = new udvizBrowser.AssetManager(); @@ -50,40 +50,98 @@ frame3DPlanarOptions: configs['frame3D_planars'][2], externalGameScriptClass: [ udvizBrowser.Game.External.ScriptTemplate.CameraManager, - udvizBrowser.Game.External.ScriptTemplate.Note + udvizBrowser.Game.External.ScriptTemplate.Note, ], sceneConfig: configs['scene'], gameOrigin: { x: extent.center().x, y: extent.center().y, - z: 300 - } + z: 300, + }, } ); multiGame.start(); + // /// ADD LAYERS - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - multiGame.frame3DPlanar.itownsView - ); + { + multiGame.frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) + ); - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - multiGame.frame3DPlanar.itownsView, - extent - ); + configs['geoJSONs'].forEach((layerConfig) => { + multiGame.frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(layerConfig.id, { + name: layerConfig.id, + transparent: true, + source: new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: extent.crs, + format: 'application/json', + }), + style: new udvizBrowser.itowns.Style(layerConfig.style), + }) + ); + }); - udvizBrowser.addElevationLayer( - configs['elevation'], - multiGame.frame3DPlanar.itownsView, - extent - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + multiGame.frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + multiGame.frame3DPlanar.itownsView + ) + ); + }); - udvizBrowser.addGeoJsonLayers( - configs['geoJSONs'], - multiGame.frame3DPlanar.itownsView, - extent - ); + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + multiGame.frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) + ); + } }); }); }); diff --git a/examples/SPARQLWidget.html b/examples/SPARQLWidget.html index 14a36cd7f..5fb2ae7d7 100644 --- a/examples/SPARQLWidget.html +++ b/examples/SPARQLWidget.html @@ -18,7 +18,7 @@ './assets/config/layer/doua_temporal.json', './assets/config/widget/temporal.json', './assets/config/widget/sparql_widget.json', - './assets/config/server/sparql_server.json' + './assets/config/server/sparql_server.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( diff --git a/examples/SlideShowWidget.html b/examples/SlideShowWidget.html index 45981cb9d..fa0af3be6 100644 --- a/examples/SlideShowWidget.html +++ b/examples/SlideShowWidget.html @@ -15,7 +15,7 @@ './assets/config/extents.json', './assets/config/crs.json', './assets/config/frame3D_planars.json', - './assets/config/widget/slide_show.json' + './assets/config/widget/slide_show.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -32,7 +32,7 @@ ); const frame3DPlanar = new udvizBrowser.Frame3DPlanar(extent, { - hasItownsControls: true + hasItownsControls: true, }); const fitExtent = () => { diff --git a/examples/TemporalWidget.html b/examples/TemporalWidget.html index 542a2e8f7..da477e52d 100644 --- a/examples/TemporalWidget.html +++ b/examples/TemporalWidget.html @@ -18,7 +18,7 @@ './assets/config/widget/temporal.json', './assets/config/layer/3DTiles_temporal.json', './assets/config/layer/base_maps.json', - './assets/config/layer/elevation.json' + './assets/config/layer/elevation.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -39,16 +39,51 @@ configs['frame3D_planars'][2] ); - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) ); udvizBrowser.Widget.Temporal.add3DTilesTemporalFromConfig( diff --git a/examples/WorldMap.html b/examples/WorldMap.html index 1259e9eb8..f56a3029c 100644 --- a/examples/WorldMap.html +++ b/examples/WorldMap.html @@ -14,7 +14,7 @@ .loadMultipleJSON([ './assets/config/extents.json', './assets/config/frame3D_planars.json', - './assets/config/layer/base_maps.json' + './assets/config/layer/base_maps.json', ]) .then((configs) => { const extent = new udvizBrowser.itowns.Extent( @@ -31,10 +31,25 @@ ); // /// ADD LAYER - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); }); diff --git a/examples/ZeppelinGame.html b/examples/ZeppelinGame.html index e29ff7180..00bdcc0b2 100644 --- a/examples/ZeppelinGame.html +++ b/examples/ZeppelinGame.html @@ -21,7 +21,7 @@ static: false, // => this Game.Object3D is going to move components: { GameScript: { - idScripts: [ZeppelinGameScript.ID_SCRIPT] + idScripts: [ZeppelinGameScript.ID_SCRIPT], }, Render: { idRenderData: 'zeppelin' }, Collider: { @@ -29,11 +29,11 @@ { type: 'Circle', center: { x: 0, y: 0 }, - radius: 10 - } - ] - } - } + radius: 10, + }, + ], + }, + }, }); promises.push(this.context.addObject3D(this.zeppelinGO)); @@ -71,18 +71,18 @@ components: { Render: { idRenderData: 'sphere', - color: [Math.random(), Math.random(), Math.random(), 1] + color: [Math.random(), Math.random(), Math.random(), 1], }, Collider: { shapes: [ { type: 'Circle', center: { x: 0, y: 0 }, - radius: size / 2 - } - ] - } - } + radius: size / 2, + }, + ], + }, + }, }); result.position.set(x, y, size); @@ -181,7 +181,7 @@ './assets/config/layer/3DTiles.json', './assets/config/layer/base_maps.json', './assets/config/layer/elevation.json', - './assets/config/layer/geoJSONs.json' + './assets/config/layer/geoJSONs.json', ]) .then((configs) => { const assetManager = new udvizBrowser.AssetManager(); @@ -204,31 +204,31 @@ static: true, components: { Audio: { - sounds: ['ballon_pop'] + sounds: ['ballon_pop'], }, GameScript: { idScripts: [ GameContextManager.ID_SCRIPT, udvizBrowser.Shared.Game.ScriptTemplate.NativeCommandManager - .ID_SCRIPT + .ID_SCRIPT, ], variables: { - defaultSpeedRotate: 0.0005 - } + defaultSpeedRotate: 0.0005, + }, }, ExternalScript: { variables: { sphereCount: 0, camera_distance: 60, - camera_angle: 0.2 + camera_angle: 0.2, }, idScripts: [ ExternalGameContextManager.ID_SCRIPT, udvizBrowser.Game.External.ScriptTemplate.CameraManager - .ID_SCRIPT - ] - } - } + .ID_SCRIPT, + ], + }, + }, }); const frame3DPlanar = new udvizBrowser.Frame3DPlanar( @@ -245,45 +245,102 @@ gameScriptClass: [ udvizBrowser.Shared.Game.ScriptTemplate.NativeCommandManager, GameContextManager, - ZeppelinGameScript + ZeppelinGameScript, ], externalGameScriptClass: [ udvizBrowser.Game.External.ScriptTemplate.CameraManager, - ExternalGameContextManager + ExternalGameContextManager, ], gameOrigin: { x: extent.center().x, y: extent.center().y, - z: 300 - } + z: 300, + }, } ); game.start(); // /// ADD LAYERS - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); - - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent - ); - - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent - ); - - udvizBrowser.addGeoJsonLayers( - configs['geoJSONs'], - frame3DPlanar.itownsView, - extent - ); + { + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) + ); + + configs['geoJSONs'].forEach((layerConfig) => { + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(layerConfig.id, { + name: layerConfig.id, + transparent: true, + source: new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: extent.crs, + format: 'application/json', + }), + style: new udvizBrowser.itowns.Style(layerConfig.style), + }) + ); + }); + + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); + + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) + ); + } }); }); diff --git a/examples/assets/config/layer/3DTiles.json b/examples/assets/config/layer/3DTiles.json index b81a7bf5b..e05ffc630 100644 --- a/examples/assets/config/layer/3DTiles.json +++ b/examples/assets/config/layer/3DTiles.json @@ -1,42 +1,34 @@ [ { "id": "Lyon-1", - "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-1_2015/tileset.json", - "color": "0xFFFFFF" + "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-1_2015/tileset.json" }, { "id": "Lyon-2", - "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-2_2015/tileset.json", - "color": "0xFFFFFF" + "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-2_2015/tileset.json" }, { "id": "Lyon-3", - "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-3_2015/tileset.json", - "color": "0xFFFFFF" + "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-3_2015/tileset.json" }, { "id": "Lyon-4", - "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-4_2015/tileset.json", - "color": "0xFFFFFF" + "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-4_2015/tileset.json" }, { "id": "Lyon-5", - "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-5_2015/tileset.json", - "color": "0xFFFFFF" + "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-5_2015/tileset.json" }, { "id": "Lyon-6", - "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-6_2015/tileset.json", - "color": "0xFFFFFF" + "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-6_2015/tileset.json" }, { "id": "Lyon-7", - "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-7_2015/tileset.json", - "color": "0xFFFFFF" + "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-7_2015/tileset.json" }, { "id": "Lyon-8", - "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-8_2015/tileset.json", - "color": "0xFFFFFF" + "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-8_2015/tileset.json" } ] diff --git a/examples/assets/config/layer/3DTiles_temporal.json b/examples/assets/config/layer/3DTiles_temporal.json index 8fe2460c3..62509849b 100644 --- a/examples/assets/config/layer/3DTiles_temporal.json +++ b/examples/assets/config/layer/3DTiles_temporal.json @@ -2,7 +2,6 @@ { "id": "Lyon-1-temporal", "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/Temporal/Lyon1er_Temporal-2009-2012-2015_TileSet/tileset.json", - "extensions": ["3DTILES_temporal"], - "color": "0xFFFFFF" + "extensions": ["3DTILES_temporal"] } ] diff --git a/examples/assets/config/layer/doua_temporal.json b/examples/assets/config/layer/doua_temporal.json index 315a260d4..1bf5c2380 100644 --- a/examples/assets/config/layer/doua_temporal.json +++ b/examples/assets/config/layer/doua_temporal.json @@ -2,7 +2,6 @@ { "id": "La Doua temporel", "url": "https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/Temporal/la-doua_2009-2018-temporal_tileset/tileset.json", - "color": "0xFFFFFF", "extensions": ["3DTILES_temporal"] } ] diff --git a/examples/assets/css/loadingScreen.css b/examples/assets/css/loadingScreen.css index 8d011e7b5..6c1597aec 100644 --- a/examples/assets/css/loadingScreen.css +++ b/examples/assets/css/loadingScreen.css @@ -15,7 +15,7 @@ .loading_screen_character { color: gray; - height: var(--size-character); + height: var(--size-character); font-size: var(--size-character); animation-name: characterAnimation; animation-direction: alternate-reverse; diff --git a/examples/assets/css/widget_3dtiles.css b/examples/assets/css/widget_3dtiles.css index 5827dfd5e..b23e0a887 100644 --- a/examples/assets/css/widget_3dtiles.css +++ b/examples/assets/css/widget_3dtiles.css @@ -29,4 +29,4 @@ .widgets-3dtiles-feature-container { border: 1px solid; padding: 5px; -} \ No newline at end of file +} diff --git a/examples/assets/js/C3DTilesEditor.js b/examples/assets/js/C3DTilesEditor.js index 009f9c3ec..e6b2e062d 100644 --- a/examples/assets/js/C3DTilesEditor.js +++ b/examples/assets/js/C3DTilesEditor.js @@ -109,38 +109,138 @@ const C3DTilesEditor = class { */ addLayers(configs) { if (configs.$3DTiles) { - udvizBrowser.add3DTilesLayers( - configs.$3DTiles, - this.frame3DPlanar.itownsView - ); + configs.$3DTiles.forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + this.frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + style: this.c3DTilesStyle, + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + this.frame3DPlanar.itownsView + ) + ); + }); } if (configs.elevation) { - udvizBrowser.addElevationLayer( - configs.elevation, - this.frame3DPlanar.itownsView, - this.extent + const isTextureFormat = + configs.elevation['format'] == 'image/jpeg' || + configs.elevation['format'] == 'image/png'; + this.frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs.elevation['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs.elevation['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs.elevation['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: this.extent, + url: configs.elevation['url'], + name: configs.elevation['name'], + crs: this.extent.crs, + heightMapWidth: 256, + format: configs.elevation['format'], + }), + } + ) ); } if (configs.baseMap) { - udvizBrowser.addBaseMapLayer( - configs.baseMap, - this.frame3DPlanar.itownsView, - this.extent + this.frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(configs.baseMap['layer_name'], { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: this.extent, + name: configs.baseMap['name'], + url: configs.baseMap['url'], + version: configs.baseMap['version'], + crs: this.extent.crs, + format: configs.baseMap['format'], + }), + transparent: true, + }) ); } if (configs.labels) { - udvizBrowser.addLabelLayers( - configs.labels, - this.frame3DPlanar.itownsView, - this.extent - ); + configs.labels.forEach((layerConfig) => { + if ( + !layerConfig['id'] || + !layerConfig['url'] || + !layerConfig['sourceType'] + ) { + console.warn( + 'Your "LabelLayer" field does not have either "url", "id" or "sourceType" properties. ' + ); + return; + } + + let source = null; + + // Declare the data source for the LabelLayer + if (layerConfig['sourceType'] == 'file') { + source = new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: this.extent.crs, + format: 'application/json', + }); + } else if (layerConfig['sourceType'] == 'wfs') { + source = new udvizBrowser.itowns.WFSSource({ + url: layerConfig.url, + version: '2.0.0', + typeName: layerConfig.name, + crs: this.extent.crs, + format: 'application/json', + }); + } else { + console.warn( + 'Unsupported LabelLayer sourceType ' + layerConfig['sourceType'] + ); + return; + } + + const layerStyle = new udvizBrowser.itowns.Style(layerConfig.style); + + const zoom = { min: 0 }; + if (layerConfig.zoom) { + if (layerConfig.zoom.min) zoom.min = layerConfig.zoom.min; + if (layerConfig.zoom.max) zoom.max = layerConfig.zoom.max; + } + + const labelLayer = new udvizBrowser.itowns.LabelLayer(layerConfig.id, { + transparent: true, + source: source, + style: layerStyle, + zoom: zoom, + }); + this.frame3DPlanar.itownsView.addLayer(labelLayer); + }); } if (configs.geoJSON) { - udvizBrowser.addGeoJsonLayers( - configs.geoJSON, - this.frame3DPlanar.itownsView, - this.extent - ); + configs.geoJSON.forEach((layerConfig) => { + this.frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(layerConfig.id, { + name: layerConfig.id, + transparent: true, + source: new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: this.extent.crs, + format: 'application/json', + }), + style: new udvizBrowser.itowns.Style(layerConfig.style), + }) + ); + }); } } }; diff --git a/examples/assets/js/ShowRoom.js b/examples/assets/js/ShowRoom.js index 0bbcd4cfd..2723899c2 100644 --- a/examples/assets/js/ShowRoom.js +++ b/examples/assets/js/ShowRoom.js @@ -137,50 +137,137 @@ const ShowRoom = class { addLayers(configs) { if (configs.$3DTiles) { configs.$3DTiles.forEach((layerConfig) => { - const c3DTilesLayer = new udvizBrowser.itowns.C3DTilesLayer( - layerConfig['id'], - { - style: this.c3DTilesStyle, - name: layerConfig['id'], - source: new udvizBrowser.itowns.C3DTilesSource({ - url: layerConfig['url'], - }), - }, - this.frame3DPlanar.itownsView - ); udvizBrowser.itowns.View.prototype.addLayer.call( this.frame3DPlanar.itownsView, - c3DTilesLayer + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + style: this.c3DTilesStyle, + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + this.frame3DPlanar.itownsView + ) ); }); } if (configs.elevation) { - udvizBrowser.addElevationLayer( - configs.elevation, - this.frame3DPlanar.itownsView, - this.extent + const isTextureFormat = + configs.elevation['format'] == 'image/jpeg' || + configs.elevation['format'] == 'image/png'; + this.frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs.elevation['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs.elevation['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs.elevation['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: this.extent, + url: configs.elevation['url'], + name: configs.elevation['name'], + crs: this.extent.crs, + heightMapWidth: 256, + format: configs.elevation['format'], + }), + } + ) ); } if (configs.baseMap) { - udvizBrowser.addBaseMapLayer( - configs.baseMap, - this.frame3DPlanar.itownsView, - this.extent + this.frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(configs.baseMap['layer_name'], { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: this.extent, + name: configs.baseMap['name'], + url: configs.baseMap['url'], + version: configs.baseMap['version'], + crs: this.extent.crs, + format: configs.baseMap['format'], + }), + transparent: true, + }) ); } if (configs.labels) { - udvizBrowser.addLabelLayers( - configs.labels, - this.frame3DPlanar.itownsView, - this.extent - ); + configs.labels.forEach((layerConfig) => { + if ( + !layerConfig['id'] || + !layerConfig['url'] || + !layerConfig['sourceType'] + ) { + console.warn( + 'Your "LabelLayer" field does not have either "url", "id" or "sourceType" properties. ' + ); + return; + } + + let source = null; + + // Declare the data source for the LabelLayer + if (layerConfig['sourceType'] == 'file') { + source = new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: this.extent.crs, + format: 'application/json', + }); + } else if (layerConfig['sourceType'] == 'wfs') { + source = new udvizBrowser.itowns.WFSSource({ + url: layerConfig.url, + version: '2.0.0', + typeName: layerConfig.name, + crs: this.extent.crs, + format: 'application/json', + }); + } else { + console.warn( + 'Unsupported LabelLayer sourceType ' + layerConfig['sourceType'] + ); + return; + } + + const layerStyle = new udvizBrowser.itowns.Style(layerConfig.style); + + const zoom = { min: 0 }; + if (layerConfig.zoom) { + if (layerConfig.zoom.min) zoom.min = layerConfig.zoom.min; + if (layerConfig.zoom.max) zoom.max = layerConfig.zoom.max; + } + + const labelLayer = new udvizBrowser.itowns.LabelLayer(layerConfig.id, { + transparent: true, + source: source, + style: layerStyle, + zoom: zoom, + }); + this.frame3DPlanar.itownsView.addLayer(labelLayer); + }); } if (configs.geoJSON) { - udvizBrowser.addGeoJsonLayers( - configs.geoJSON, - this.frame3DPlanar.itownsView, - this.extent - ); + configs.geoJSON.forEach((layerConfig) => { + this.frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(layerConfig.id, { + name: layerConfig.id, + transparent: true, + source: new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: this.extent.crs, + format: 'application/json', + }), + style: new udvizBrowser.itowns.Style(layerConfig.style), + }) + ); + }); } } diff --git a/examples/assets/md/about.md b/examples/assets/md/about.md index 88f53cca7..c88ed0735 100644 --- a/examples/assets/md/about.md +++ b/examples/assets/md/about.md @@ -1,19 +1,18 @@ # About This UD-Viz-Shared demo is part of the [Urban Data Viewer](https://github.com/VCityTeam/UD-Viz) (UD-Viz) project of [the VCity project](https://projet.liris.cnrs.fr/vcity/) from [LIRIS lab](https://liris.cnrs.fr/en) (with additional support from [LabEx IMU](http://imu.universite-lyon.fr/)). UD-Viz-Shared demo is powered with: - * [iTowns](http://www.itowns-project.org/) - * [Lyon Métropole Open Data](https://data.grandlyon.com) +- [iTowns](http://www.itowns-project.org/) +- [Lyon Métropole Open Data](https://data.grandlyon.com) Legal and operational disclaimer: This demonstration and its underlying software are provided “as is”. The authors and contributors disclaim all warranties with regard to the software including all implied warranties of merchantability and fitness for a particular purpose (refer to the spirit of any [BSD license](https://en.wikipedia.org/wiki/BSD_licenses#2-clause_license_(%22Simplified_BSD_License%22_or_%22FreeBSD_License%22)) dislaimer). - Nevertheless, if you notice any issue, help us by [openning an issue on github](https://github.com/MEPP-team/UD-Viz/issues). Concerning user contributed data: - * the free usage with no warranty spirit also applies to any user contributed data : in particular there are no backups of any user contributed/uploaded data. - * if you are a copyright owner and believe that content available in this demo infringes one or more of your copyrights, please [open an issue on github](https://github.com/VCityTeam/UD-Viz/issues) so that we can (best effort) remove it from this site. +- the free usage with no warranty spirit also applies to any user contributed data : in particular there are no backups of any user contributed/uploaded data. +- if you are a copyright owner and believe that content available in this demo infringes one or more of your copyrights, please [open an issue on github](https://github.com/VCityTeam/UD-Viz/issues) so that we can (best effort) remove it from this site. -Icons made by [Freepik](https://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com/) is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/) \ No newline at end of file +Icons made by [Freepik](https://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com/) is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/) diff --git a/examples/assets/md/help.md b/examples/assets/md/help.md index e9e751a6c..dd33a455b 100644 --- a/examples/assets/md/help.md +++ b/examples/assets/md/help.md @@ -205,10 +205,10 @@ Under construction... ## Camera key bindings: - * Left-Click: camera translation (drag) - * Right-Click: camera translation (pan) - * Ctrl + Left-Click: camera rotation (orbit) - * Spacebar / Wheel-Click: smart zoom - * Mouse Wheel: zoom in/out - * T: orient camera to a top view - * Y: move camera to start position \ No newline at end of file +- Left-Click: camera translation (drag) +- Right-Click: camera translation (pan) +- Ctrl + Left-Click: camera rotation (orbit) +- Spacebar / Wheel-Click: smart zoom +- Mouse Wheel: zoom in/out +- T: orient camera to a top view +- Y: move camera to start position diff --git a/examples/dom_element_3D.html b/examples/dom_element_3D.html index a5fcdc1f9..924b433aa 100644 --- a/examples/dom_element_3D.html +++ b/examples/dom_element_3D.html @@ -18,7 +18,7 @@ './assets/config/layer/3DTiles.json', './assets/config/layer/base_maps.json', './assets/config/layer/elevation.json', - './assets/config/layer/geoJSONs.json' + './assets/config/layer/geoJSONs.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -40,28 +40,83 @@ ); // add layers - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); - udvizBrowser.addElevationLayer( - configs['elevation'], - frame3DPlanar.itownsView, - extent + const isTextureFormat = + configs['elevation']['format'] == 'image/jpeg' || + configs['elevation']['format'] == 'image/png'; + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ElevationLayer( + configs['elevation']['layer_name'], + { + useColorTextureElevation: isTextureFormat, + colorTextureElevationMinZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMinZ'] + : null, + colorTextureElevationMaxZ: isTextureFormat + ? configs['elevation']['colorTextureElevationMaxZ'] + : null, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + url: configs['elevation']['url'], + name: configs['elevation']['name'], + crs: extent.crs, + heightMapWidth: 256, + format: configs['elevation']['format'], + }), + } + ) ); - udvizBrowser.add3DTilesLayers( - configs['3DTiles'], - frame3DPlanar.itownsView - ); + configs['3DTiles'].forEach((layerConfig) => { + udvizBrowser.itowns.View.prototype.addLayer.call( + frame3DPlanar.itownsView, + new udvizBrowser.itowns.C3DTilesLayer( + layerConfig['id'], + { + name: layerConfig['id'], + source: new udvizBrowser.itowns.C3DTilesSource({ + url: layerConfig['url'], + }), + }, + frame3DPlanar.itownsView + ) + ); + }); - udvizBrowser.addGeoJsonLayers( - configs['geoJSONs'], - frame3DPlanar.itownsView, - extent - ); + configs['geoJSONs'].forEach((layerConfig) => { + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer(layerConfig.id, { + name: layerConfig.id, + transparent: true, + source: new udvizBrowser.itowns.FileSource({ + url: layerConfig.url, + crs: extent.crs, + format: 'application/json', + }), + style: new udvizBrowser.itowns.Style(layerConfig.style), + }) + ); + }); const center = extent.center(); diff --git a/examples/show_room.html b/examples/show_room.html index 2f87f5897..0d458f444 100644 --- a/examples/show_room.html +++ b/examples/show_room.html @@ -31,7 +31,7 @@ './assets/config/layer/base_maps.json', './assets/config/layer/elevation.json', './assets/config/layer/geoJSONs.json', - './assets/config/layer/labels.json' + './assets/config/layer/labels.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -55,7 +55,7 @@ loadingScreen(app.frame3DPlanar.itownsView, [ 'UD-VIZ', - 'UDVIZ_VERSION' + 'UDVIZ_VERSION', ]); app.addLayers({ @@ -63,14 +63,14 @@ elevation: configs['elevation'], baseMap: configs['base_maps'][0], labels: configs['labels'], - geoJSON: configs['geoJSONs'] + geoJSON: configs['geoJSONs'], }); app.addLogos([ './assets/img/logo/logo-grand-lyon.png', './assets/img/logo/logo-imu.png', './assets/img/logo/logo-liris.png', - './assets/img/logo/logo-univ-lyon.png' + './assets/img/logo/logo-univ-lyon.png', ]); app.addWidgetAuthentication( diff --git a/examples/widget_planar_controls.html b/examples/widget_planar_controls.html index 1867011f3..d9bb5ad09 100644 --- a/examples/widget_planar_controls.html +++ b/examples/widget_planar_controls.html @@ -16,7 +16,7 @@ './assets/config/extents.json', './assets/config/crs.json', './assets/config/frame3D_planars.json', - './assets/config/layer/base_maps.json' + './assets/config/layer/base_maps.json', ]) .then((configs) => { udvizBrowser.proj4.default.defs( @@ -39,10 +39,25 @@ // /// ADD LAYERS - udvizBrowser.addBaseMapLayer( - configs['base_maps'][0], - frame3DPlanar.itownsView, - extent + frame3DPlanar.itownsView.addLayer( + new udvizBrowser.itowns.ColorLayer( + configs['base_maps'][0]['layer_name'], + { + updateStrategy: { + type: udvizBrowser.itowns.STRATEGY_DICHOTOMY, + options: {}, + }, + source: new udvizBrowser.itowns.WMSSource({ + extent: extent, + name: configs['base_maps'][0]['name'], + url: configs['base_maps'][0]['url'], + version: configs['base_maps'][0]['version'], + crs: extent.crs, + format: configs['base_maps'][0]['format'], + }), + transparent: true, + } + ) ); const widget = new udvizBrowser.Widget.PlanarControls( diff --git a/packages/browser/src/GUI/css/window.css b/packages/browser/src/GUI/css/window.css index ed3b8cd70..a21ff8754 100644 --- a/packages/browser/src/GUI/css/window.css +++ b/packages/browser/src/GUI/css/window.css @@ -1,165 +1,165 @@ -.window { - position: absolute; - top: 0px; - left: 0px; - min-width: 200px; - width: 350px; - padding: 0; - resize: both; - overflow: hidden; - display: grid; - grid-template-rows: 30px auto; - box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75); - background-color: #f95a5a; /* test */ - z-index: 1; -} - -.window-header { - background-color: rgb(0, 0, 0, 0.9); - color: #eeeeee; - margin: 0; - cursor: default; - display: flex; - align-items: center; -} - -.window-header .window-title { - margin: 0; - margin-left: 5px; - margin-top: -2px; - font-size: 1.5vh; -} - -.window-close-button, -.window-toggle-content-visibility-button { - margin: 0px; - height: auto; - background-color: transparent; - color: white; - border: none; - font-size: 20px; - font-weight: bold; - transition: background-color 0.2s ease; - align-self: center; - width: 25px !important; -} - -/*margin-left : auto*/ -.window-toggle-content-visibility-button { - margin: 0 0 0 auto !important; -} - -.window-close-button:hover, -.window-toggle-content-visibility-button:hover { - background-color: #f95a5a; - cursor: pointer; -} - -.window-content { - background-color: rgba(30, 30, 30, 0.9); - border: 5px solid rgba(30, 30, 30, 0.1); - overflow-y: auto; - margin: 0; -} - -.window-inner-content { - color: #f2f2f2; -} - -/* Useful styles that can be used in windows */ - -/* A box arround a section */ -.window-inner-content .box-section { - background: rgba(255, 255, 255, 0.168); - width: auto; - height: auto; - margin: 0 0 30px; - padding: 11px 10px 35px; - /* opacity: 0.2; */ - border-radius: 7px; -} - -.window-inner-content .section-title { - margin: 5px 0 5px 10px; - padding: 0; - font-size: 20px; - font-weight: bold; - display: block; -} - -.window-inner-content .subsection-title { - margin: 7px 0 7px 5px; - padding: 0; - font-size: 16px; - font-weight: bold; - display: block; -} - -/* Clickable text */ -.window-inner-content .clickable-text { - cursor: pointer; -} - -.window-inner-content .clickable-text:hover { - text-decoration: underline; -} - -/* Some styles for a working "spoiler" div - * The expected structure should be the following : - * - * - *
+ * + *
[--outputFile] -o [--ignore] -i -d --noImport` | \ No newline at end of file +| `autoMermaid` | Permits to create a mermaid diagram in a markdown file from a folder in entry. `npx @ud-viz/node autoMermaid [--entryFolder] -e [--outputFile] -o [--ignore] -i -d --noImport` | diff --git a/packages/shared/Readme.md b/packages/shared/Readme.md index b7f7fd02b..89c3eb68d 100644 --- a/packages/shared/Readme.md +++ b/packages/shared/Readme.md @@ -1,65 +1,65 @@ -# @ud-viz/shared - -[![NPM package version](https://badgen.net/npm/v/@ud-viz/shared)](https://npmjs.com/package/@ud-viz/shared) - -[@ud-viz/shared](https://npmjs.com/package/@ud-viz/shared) is a npm package based on [Three.js](https://threejs.org/) including data processing and model plus a game engine. - -- [@ud-viz/shared](#ud-vizshared) - - [Directory Hierarchy](#directory-hierarchy) - - [Getting started](#getting-started) - - [Developers](#developers) - - [Npm scripts](#npm-scripts) - - [Debugging](#debugging) - -### Directory Hierarchy - -``` -UD-Viz/packages/shared -├── bin # Global NodeJS development -├── src # JS files composing the package -| ├── Game # Shared game engine -| | ├── Component # Components of `Game.Object3D` -| | ├── ScriptTemplate # JS script templates of Shared game engine -| | ├── State # Game state -| | ├── Context.js # Handle scripts, collisions and model of a game -| | ├── Object3D.js # Game node of a 3D scene -| ├── Command.js # Basic object communication -| ├── Data.js # Module for data processing (split string, converts to uri...) -| ├── EventSender.js # Manage custom events -| ├── index.js # API description (webpack entry point) -| ├── ProcessInterval.js # Manage loop process requesters -| ├── Type.js # Check if a string is a valid number -├── webpackConfig # Configs of bundles' creation -├── package.json # Global npm project description -├── Readme.md # It's a me, Mario! -``` - -## Getting started - -See [here](https://github.com/VCityTeam/UD-Viz/blob/master/Readme.md#getting-started). - -## Developers - -For pre-requisites see [here](https://github.com/VCityTeam/UD-Viz/blob/master/docs/static/Developers.md#pre-requisites). - -### Npm scripts - -| Script | Description | -| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `npm run build` | Create a [webpack](https://webpack.js.org/) bundle in [production](./webpackConfig/webpack.config.prod.js) mode. See [webpack.config.js](./webpackConfig/webpack.config.js) | -| `npm run build-debug` | Create a [webpack](https://webpack.js.org/) bundle in [developpement](./webpackConfig/webpack.config.dev.js) mode. See [webpack.config.js](./webpackConfig/webpack.config.js) | -| `npm run test` | Run shared testing scripts. Uses [this test script](./bin/test.js) | -| `npm run debug` | Launch a watcher for debugging. See [here](#debugging) for more information | - -### Debugging - -For debugging run: - -```bash -npm run debug -``` - -This runs a watched routine [debug.js](./bin/debug.js) with [nodemon](https://www.npmjs.com/package/nodemon) which: - -- Runs a `npm run build-debug` -- May run `npm run test` (true by default). +# @ud-viz/shared + +[![NPM package version](https://badgen.net/npm/v/@ud-viz/shared)](https://npmjs.com/package/@ud-viz/shared) + +[@ud-viz/shared](https://npmjs.com/package/@ud-viz/shared) is a npm package based on [Three.js](https://threejs.org/) including data processing and model plus a game engine. + +- [@ud-viz/shared](#ud-vizshared) + - [Directory Hierarchy](#directory-hierarchy) + - [Getting started](#getting-started) + - [Developers](#developers) + - [Npm scripts](#npm-scripts) + - [Debugging](#debugging) + +### Directory Hierarchy + +``` +UD-Viz/packages/shared +├── bin # Global NodeJS development +├── src # JS files composing the package +| ├── Game # Shared game engine +| | ├── Component # Components of `Game.Object3D` +| | ├── ScriptTemplate # JS script templates of Shared game engine +| | ├── State # Game state +| | ├── Context.js # Handle scripts, collisions and model of a game +| | ├── Object3D.js # Game node of a 3D scene +| ├── Command.js # Basic object communication +| ├── Data.js # Module for data processing (split string, converts to uri...) +| ├── EventSender.js # Manage custom events +| ├── index.js # API description (webpack entry point) +| ├── ProcessInterval.js # Manage loop process requesters +| ├── Type.js # Check if a string is a valid number +├── webpackConfig # Configs of bundles' creation +├── package.json # Global npm project description +├── Readme.md # It's a me, Mario! +``` + +## Getting started + +See [here](https://github.com/VCityTeam/UD-Viz/blob/master/Readme.md#getting-started). + +## Developers + +For pre-requisites see [here](https://github.com/VCityTeam/UD-Viz/blob/master/docs/static/Developers.md#pre-requisites). + +### Npm scripts + +| Script | Description | +| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `npm run build` | Create a [webpack](https://webpack.js.org/) bundle in [production](./webpackConfig/webpack.config.prod.js) mode. See [webpack.config.js](./webpackConfig/webpack.config.js) | +| `npm run build-debug` | Create a [webpack](https://webpack.js.org/) bundle in [developpement](./webpackConfig/webpack.config.dev.js) mode. See [webpack.config.js](./webpackConfig/webpack.config.js) | +| `npm run test` | Run shared testing scripts. Uses [this test script](./bin/test.js) | +| `npm run debug` | Launch a watcher for debugging. See [here](#debugging) for more information | + +### Debugging + +For debugging run: + +```bash +npm run debug +``` + +This runs a watched routine [debug.js](./bin/debug.js) with [nodemon](https://www.npmjs.com/package/nodemon) which: + +- Runs a `npm run build-debug` +- May run `npm run test` (true by default).