Documentation Tutorial: Adding elevation

Adding elevation

Introduction

This tutorial is a short explanation on how to set up the elevation and to show the Fps (Frame per second)

Code in Mizar

The first step is to look to the Getting Started with Earth to create the Earth.

For this step, you need to look at the elevation layer object

Look at the code and change it to test it.

<!doctype html>
<html>

<head>
    <title>Adding elevation</title>
    <link rel=stylesheet href="./resources/style.min.css">
    <link rel=stylesheet href="./resources/jquery-ui.min.css">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../Mizar.min.js"></script>

// mode dev
        //require(['Mizar'], function (Mizar) {

//mode prod
        function start() {
            // Create Mizar
            var mizar = new Mizar({
                canvas: "MizarCanvas",
                planetContext: {
                    coordinateSystem: {geoideName: Mizar.CRS.WGS84},
                    lighting: false,
                    tileErrorTreshold: 3,
                    continuousRendering: true
                }
            });

// create the widget to display the Fps and insert the contain in <div id="fps" .../>
            mizar.createStats({
                element: 'fps',
                verbose: false
            });

// add a WMS layer
            mizar.addLayer({
                type: Mizar.LAYER.WMS,
                name: "Blue Marble",
                baseUrl: "http://demonstrator.telespazio.com/wmspub",
                layers: "BlueMarble"
            });

// add an elevation and increase the height by a 4 factor
            mizar.addLayer({
                type: Mizar.LAYER.WCSElevation,
                name: "earthElevation",
                baseUrl: "http://demonstrator.telespazio.com/wcspub",
                coverage: "GTOPO",
                version: "1.0.0",
                scale: 4
            });

// Set the background and the elevation.
            mizar.setBackgroundLayer("Blue Marble");
            mizar.setBaseElevation("earthElevation");

// Get the navigation object
            var nav = mizar.getActivatedContext().getNavigation();
            // move to (longitude, latitude, distance in meter)
            nav.zoomTo([1.433, 42.900,30000], {
                duration : 1000,
                callback : function() {
                    //zoom
                    nav.zoom(0, 0.01);
                    //rotate the camera
                    nav.rotate(0, 10000)
                }
            });

}//);
    </script>

</head>

Introduction

Code in Mizar

Search results