Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widget: Layer choice #2043

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Widget: Layer choice #2043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
415dd77
feat(widgets): Widget to display layers
mathieuLivebardon Sep 15, 2022
120066f
revert(gitignore): useless changes
mathieuLivebardon Mar 17, 2023
bf646a0
fix(widgets): layer_choice extent, tileset
mathieuLivebardon Mar 20, 2023
19ca046
style(layerchoice): chg background/text color
mathieuLivebardon Mar 20, 2023
50553dd
style(layerchoice):css showhide htmllist of layers
mathieuLivebardon Mar 20, 2023
6cf7d10
documentation(layerchoice):showHideListLayers
mathieuLivebardon Mar 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions examples/css/widgets.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,28 @@
color: #222222;
}

/* ---------- LAYER CHOICE WIDGET SETTINGS : ------------------------------------------------------------------------ */

#widgets-layer-choice {
position: absolute;
z-index: 10;
padding: 0 10px;
box-sizing: border-box;

align-items: center;

border: 1px solid #222222;
border-radius: 7px;

background-color: #313336bb;
color: #ffffff;

}

#widgets-layer-choice h3 {
color: #ffffff;
cursor: pointer;
}

/* ---------- SCALE WIDGET SETTINGS : ------------------------------------------------------------------------------- */

Expand Down
255 changes: 255 additions & 0 deletions examples/widgets_layer_choice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
<html>
<head>
<title>Itowns - Layer Choice widget</title>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" type="text/css" href="css/example.css" />
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css" />

<!-- Import stylesheet for itowns Widgets plugin. This stylesheet is included in the bundles if you downloaded
them, or it can be found in `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it
can be found here : https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css -->
<link rel="stylesheet" type="text/css" href="css/widgets.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
</head>
<body>
<!-- Create a container for itowns viewer -->
<div id="viewerDiv"></div>

<!-- Import iTowns source code -->
<script src="../dist/itowns.js"></script>
<script src="../dist/debug.js"></script>
<!-- Import iTowns Widgets plugin -->
<script src="../dist/itowns_widgets.js"></script>
<!-- Import iTowns LoadingScreen and GuiTools plugins -->
<script src="js/GUI/LoadingScreen.js"></script>
<script src="js/GUI/GuiTools.js"></script>

<script type="text/javascript">
// `viewerDiv` contains iTowns' rendering area (`<canvas>`)
const viewerDiv = document.getElementById('viewerDiv');
// ---------- CREATE A PlanarView FOR SUPPORTING DATA VISUALIZATION : ----------

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',
);

const viewExtent = new itowns.Extent(
'EPSG:3946',
1837817,
1847693,
5169000,
5181000,
);

// Define the camera initial placement
const placement = {
coord: viewExtent.center(),
tilt: 12,
heading: 40,
range: 6200,
};

// Create a PlanarView
const view = new itowns.PlanarView(viewerDiv, viewExtent, {
placement: placement,
});

// Setup loading screen and debug menu
setupLoadingScreen(viewerDiv, view);
const debugMenu = new GuiTools('menuDiv', view);

// ---------- DISPLAY CONTEXTUAL DATA : ----------

// Add a WMS imagery source
var wmsImagerySource = new itowns.WMSSource({
extent: viewExtent,
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).then(
debugMenu.addLayerGUI.bind(debugMenu),
);

// Add a WMS elevation source
var wmsElevationSource = new itowns.WMSSource({
extent: viewExtent,
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).then(
debugMenu.addLayerGUI.bind(debugMenu),
);



// Create the 3D Tiles layer
var $3DTilesLayerLyon1 = new itowns.C3DTilesLayer(
'3d-tiles-lyon-1',
{
name: 'BTHierarchy',
source: new itowns.C3DTilesSource({
url: 'https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-1_2015/tileset.json',
})
},
view,
);

// Create the 3D Tiles layer
var $3DTilesLayerLyon2 = new itowns.C3DTilesLayer(
'3d-tiles-lyon-2',
{
name: 'BTHierarchy',
source: new itowns.C3DTilesSource({
url: 'https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-2_2015/tileset.json',
})
},
view,
);

// Create the 3D Tiles layer
var $3DTilesLayerLyon3 = new itowns.C3DTilesLayer(
'3d-tiles-lyon-3',
{
name: 'BTHierarchy',
source: new itowns.C3DTilesSource({
url: 'https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-3_2015/tileset.json',
})
},
view,
);

// Create the 3D Tiles layer
var $3DTilesLayerLyon4 = new itowns.C3DTilesLayer(
'3d-tiles-lyon-4',
{
name: 'BTHierarchy',
source: new itowns.C3DTilesSource({
url: 'https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-4_2015/tileset.json',
})
},
view,
);

// Create the 3D Tiles layer
var $3DTilesLayerLyon5 = new itowns.C3DTilesLayer(
'3d-tiles-lyon-5',
{
name: 'BTHierarchy',
source: new itowns.C3DTilesSource({
url: 'https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-5_2015/tileset.json',
})
},
view,
);

// Create the 3D Tiles layer
var $3DTilesLayerLyon6 = new itowns.C3DTilesLayer(
'3d-tiles-lyon-6',
{
name: 'BTHierarchy',
source: new itowns.C3DTilesSource({
url: 'https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-6_2015/tileset.json',
})
},
view,
);

// Create the 3D Tiles layer
var $3DTilesLayerLyon7 = new itowns.C3DTilesLayer(
'3d-tiles-lyon-7',
{
name: 'BTHierarchy',
source: new itowns.C3DTilesSource({
url: 'https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-7_2015/tileset.json',
})
},
view,
);

// Create the 3D Tiles layer
var $3DTilesLayerLyon8 = new itowns.C3DTilesLayer(
'3d-tiles-lyon-8',
{
name: 'BTHierarchy',
source: new itowns.C3DTilesSource({
url: 'https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-8_2015/tileset.json',
})
},
view,
);

// Create the 3D Tiles layer
var $3DTilesLayerLyon9 = new itowns.C3DTilesLayer(
'3d-tiles-lyon-9',
{
name: 'BTHierarchy',
source: new itowns.C3DTilesSource({
url: 'https://dataset-dl.liris.cnrs.fr/three-d-tiles-lyon-metropolis/2015/Lyon-9_2015/tileset.json',
})
},
view,
);


itowns.View.prototype.addLayer.call(view, $3DTilesLayerLyon1);
itowns.View.prototype.addLayer.call(view, $3DTilesLayerLyon2);
itowns.View.prototype.addLayer.call(view, $3DTilesLayerLyon3);
itowns.View.prototype.addLayer.call(view, $3DTilesLayerLyon4);
itowns.View.prototype.addLayer.call(view, $3DTilesLayerLyon5);
itowns.View.prototype.addLayer.call(view, $3DTilesLayerLyon6);
itowns.View.prototype.addLayer.call(view, $3DTilesLayerLyon7);
itowns.View.prototype.addLayer.call(view, $3DTilesLayerLyon8);
itowns.View.prototype.addLayer.call(view, $3DTilesLayerLyon9);

// Add lights in the scene
var dirLight = new itowns.THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(-0.9, 0.3, 1);
dirLight.updateMatrixWorld();
view.scene.add(dirLight);

var ambLight = new itowns.THREE.AmbientLight(0xffffff, 0.2);
view.scene.add(ambLight);

// ---------- ADD LAYER CHOICE WIDGET : ----------

const layerChoice = new itowns_widgets.LayerChoice(view, undefined,{
position: 'bottom-right',
translate: { x: -70 },
});

// ---------- DEBUG TOOLS : ----------

debug.createTileDebugUI(debugMenu.gui, view);
</script>
</body>
</html>
Loading