SDK 3D : Switch 3D <-> 2D

Utilisation de la fonction de switch pour passer d'une visualisation 3D à une visualisation 2D

by Géoportail IGNF

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>
<br/>
<div id="BoutonSwitchTo3D" hidden>
    <input type="button" name="switch" onclick="switchTo3D();" value="Switch from 2D to 3D"/><br/>
</div>
        
<div id="BoutonSwitchTo2D">
    <input type="button" name="switch" onclick="switchTo2D();" value="Switch from 3D to 2D"/><br/>
</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 : http://professionnels.ign.fr/ign/contrats
         apiKey: "essentiels,altimetrie",
         //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 : 10,
         center : {
             x : 6.242212,
             y : 44.811339
         },
         tilt: 45,
         layersOptions : {
             "ORTHOIMAGERY.ORTHOPHOTOS" : {},
             "ELEVATION.ELEVATIONGRIDCOVERAGE" : {
                 type : "elevation"
             }
         },
         // additional tools to display on the map
         controlsOptions : {
             "layerSwitcher" : {}
         
         }
    }    
) ;

function switchTo3D() {
    map = map.switch2D3D("3d");
    document.getElementById("BoutonSwitchTo2D").style.display = "inline";
    document.getElementById("BoutonSwitchTo3D").style.display = "none";
}

function switchTo2D() {
    map = map.switch2D3D("2d");
    document.getElementById("BoutonSwitchTo3D").style.display = "inline";
    document.getElementById("BoutonSwitchTo2D").style.display = "none";
}

var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> SDK version " + Gp.sdkVersion + " (" + Gp.sdkDate + ")</p>";