Skip to main content

Camera perspective switch

code / Effect​

By setting the status parameters of the camera, the functions of switching the camera perspective and flying navigation are achieved.

show
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>Camera perspective switch</title>
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
   <style>
       body {
           margin: 0;
           padding: 0;
       }

       #map {
           position: absolute;
           top: 0;
           bottom: 0;
           width: 100%;
       }

        .btn-group {
               position: absolute;
               top: 20px;
               left: 20px;
           }
   </style>
   <script src="https://delivery.mapmost.com/cdn/sdk/lite/v9.1.0/mapmost-lite-min.js"></script>
</head>
<body>
<div id="map"></div>
<div class="btn-group">
    <button onClick="changeViewer()">perspective switch</button>
</div>
<script>
      var map = new mapmost.Map({
       container: 'map', 
       style: "<your style url>",
       center: [120.72541613154851, 31.31171803927643],
       zoom: 14,
       userId: '***', // Authorization code,This parameter must be added
   });

    function changeViewer() {
        let options = {
            position: [120.65717659715574, 31.315522851509385, 500],
            pitch: 10,
            bearing: 90,
            duration: 2000,
            complete: function () {
                new mapmost.Marker()
                    .setLngLat([120.65717659715574, 31.315522851509385])
                    .addTo(map);
            }
        }
        map.cameraFlyTo(options);
    }

</script>
</body>
</html>