Apps/Sandcastle/gallery/3D Tiles Interactivity.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Interaction examples with 3D Tiles.">
    <meta name="cesium-sandcastle-labels" content="3D Tiles">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
    require.config({
        baseUrl : '../../../Source',
        waitSeconds : 60
    });
    </script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);
    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }
    #toolbar .header {
        font-weight: bold;
        padding-top: 5px;
        padding-bottom: 5px;
    }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
    <div class="header">Right click action:</div>
    <div><input type="radio" value="annotate" data-bind="checked: rightClickAction">Annotate</div>
    <div><input type="radio" value="properties" data-bind="checked: rightClickAction">Print metadata</div>
    <div><input type="radio" value="zoom" data-bind="checked: rightClickAction">Zoom to feature</div>
    <div class="header">Middle click action:</div>
    <div><input type="radio" value="hide" data-bind="checked: middleClickAction">Hide feature</div>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer');

var viewModel = {
    rightClickAction: 'annotate',
    middleClickAction: 'hide'
};

Cesium.knockout.track(viewModel);

var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

var scene = viewer.scene;
var annotations = scene.primitives.add(new Cesium.LabelCollection());

// Set the initial camera view to look at Manhattan
var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
viewer.scene.camera.setView({
    destination: initialPosition,
    orientation: initialOrientation,
    endTransform: Cesium.Matrix4.IDENTITY
});

// Load the NYC buildings tileset.
var tileset = scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s'
}));

tileset.style = new Cesium.Cesium3DTileStyle({
    meta: {
        description: "'Building id ${id} has height ${height}.'"
    }
});

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

handler.setInputAction(function(movement) {
    var feature = viewer.scene.pick(movement.position);
    if (!Cesium.defined(feature)) {
        return;
    }

    var action = viewModel.rightClickAction;
    if (action === 'annotate') {
        annotate(movement, feature);
    } else if (action === 'properties') {
        printProperties(movement, feature);
    } else if (action === 'zoom') {
        zoom(movement, feature);
    }
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

handler.setInputAction(function(movement) {
    var feature = viewer.scene.pick(movement.position);
    if (!Cesium.defined(feature)) {
        return;
    }

    var action = viewModel.middleClickAction;
    if (action === 'hide') {
        feature.show = false;
    }
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);

function annotate(movement, feature) {
    if (scene.pickPositionSupported) {
        var cartesian = scene.pickPosition(movement.position);
        if(Cesium.defined(cartesian)){
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var height = cartographic.height.toFixed(2) + ' m';

            annotations.add({
                position : cartesian,
                text : height,
                showBackground : true,
                font : '14px monospace',
                horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                disableDepthTestDistance : Number.POSITIVE_INFINITY
            });
        }
    }
}

function printProperties(movement, feature) {
    console.log('Properties:');
    var propertyNames = feature.getPropertyNames();
    var length = propertyNames.length;
    for (var i = 0; i < length; ++i) {
        var propertyName = propertyNames[i];
        console.log('  ' + propertyName + ': ' + feature.getProperty(propertyName));
    }

    // Evaluate feature description
    console.log('Description : ' + tileset.style.meta.description.evaluate(scene.frameState, feature));
}

function zoom(movement, feature) {
    var longitude = feature.getProperty('longitude');
    var latitude = feature.getProperty('latitude');
    var height = feature.getProperty('height');

    var positionCartographic = new Cesium.Cartographic(longitude, latitude, height * 0.5);
    var position = scene.globe.ellipsoid.cartographicToCartesian(positionCartographic);

    var camera = scene.camera;
    var heading = camera.heading;
    var pitch = camera.pitch;

    var offset = offsetFromHeadingPitchRange(heading, pitch, height * 2.0);

    var transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
    Cesium.Matrix4.multiplyByPoint(transform, offset, position);

    camera.flyTo({
        destination : position,
        orientation : {
            heading : heading,
            pitch : pitch
        },
        easingFunction : Cesium.EasingFunction.QUADRATIC_OUT
    });
}

function offsetFromHeadingPitchRange(heading, pitch, range) {
    pitch = Cesium.Math.clamp(pitch, -Cesium.Math.PI_OVER_TWO, Cesium.Math.PI_OVER_TWO);
    heading = Cesium.Math.zeroToTwoPi(heading) - Cesium.Math.PI_OVER_TWO;

    var pitchQuat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Y, -pitch);
    var headingQuat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, -heading);
    var rotQuat = Cesium.Quaternion.multiply(headingQuat, pitchQuat, headingQuat);
    var rotMatrix = Cesium.Matrix3.fromQuaternion(rotQuat);

    var offset = Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_X);
    Cesium.Matrix3.multiplyByVector(rotMatrix, offset, offset);
    Cesium.Cartesian3.negate(offset, offset);
    Cesium.Cartesian3.multiplyByScalar(offset, range, offset);
    return offset;
}

//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
    startup(Cesium);
} else if (typeof require === "function") {
    require(["Cesium"], startup);
}
</script>
</body>
</html>