SDK 3D : WMS INSPIRE
Utilisation de layersOptions pour les couches INSPIRE WMS
by Géoportail IGNF
January 18, 2022
HTML
<script src="https://ignf.github.io/geoportal-sdk/latest/dist/3d/GpSDK3D.js"></script>
<link rel="stylesheet" href="https://ignf.github.io/geoportal-sdk/latest/dist/3d/GpSDK3D.css">
<div id="map">
<button id="tiltButton">
jsFiddle bug - click on this text to activate tilt (ctrl + left click)
<br>
Do not integrate this button to your own non-jsFiddle pages
</button>
</div>
<div id="info"></div>
CSS
html {
height: 100%;
}
body {
margin: 0;
overflow:hidden;
height:100%;
}
#map {
margin : auto auto;
width: 100%;
height: 300px;
padding: 0;
}
#tiltButton {
background-color: white;
position: absolute;
top: 20px;
left : 50px;
}
#info {
padding: 5px;
width: 100%;
height: 20px;
font-family: "monospace";
font-size: 10px;
}
JavaScript
var map = Gp.Map.load(
"map", // html div
{
// Geoportal access key obtained here : https://geoservices.ign.fr/services-web
apiKey: "ortho,topographie",
// load the map with itowns (in 3D)
viewMode : "3d",
//path to the iTowns library
enginePath3d: "https://ignf.github.io/geoportal-sdk/latest/dist/3d/",
// layers to display
zoom : 12,
projection : "EPSG:4326",
center : {
x : -2.5,
y : 48
},
layersOptions : {
"PCRS" : {},
"BUILDINGS.BUILDINGS" : {
queryable : true
}
},
// additional tools to display on the map
controlsOptions : {
"layerSwitcher" : {},
"getfeatureinfo" : {
// activate GFI on BU.Building layer
layers : {
"BUILDINGS.BUILDINGS" : {}
}
}
}
}
) ;
var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> SDK version " + Gp.sdkVersion + " (" + Gp.sdkDate + ")</p>";