cesium-examples/map/3d/static/Cesium/Apps/Sandcastle/gallery/3D Tiles Batch Table Hierar...

<!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="Demonstrates use cases for a batch table hierarchy.">
    <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 button { display: block; }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
    'use strict';
//Sandcastle_Begin

// Doorknobs, doors, roofs, and walls are styled with the batch table hierarchy.
// Since buildings and zones are not backed by geometry they are not styled directly. However
// styles may be written that take building and zone properties into account.
//
// Hierarchy layout (doorknobs are children of doors):
//
//   zone0
//     building0
//       roof0
//       wall0
//       door0 - doorknob0
//       door1 - doorknob1
//       door2 - doorknob2
//       door3 - doorknob3
//     building1
//       roof1
//       wall1
//       door4 - doorknob4
//       door5 - doorknob5
//       door6 - doorknob6
//       door7 - doorknob7
//     building2
//       roof2
//       wall2
//       door8 - doorknob8
//       door9 - doorknob9
//       door10 - doorknob10
//       door11 - doorknob11
//
// Class properties:
//
//   zone:
//     * zone_building
//     * zone_name
//   building:
//     * building_area
//     * building_name
//   wall:
//     * wall_paint
//     * wall_windows
//     * wall_name
//   roof:
//     * roof_paint
//     * roof_name
//   door:
//     * door_mass
//     * door_width
//     * door_name
//   doorknob:
//     * doorknob_size
//     * doorknob_name

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.clock.currentTime = new Cesium.JulianDate(2457522.154792);

var tileset = new Cesium.Cesium3DTileset({
    url: '../../SampleData/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json'
});

viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.3, 0.0));

var styles = [];
function addStyle(name, style) {
    styles.push({
        name : name,
        style : style
    });
}

addStyle('No style', {});

addStyle('Color by building', {
    'color' : {
        'conditions' : [
            ["${building_name} === 'building0'", "color('purple')"],
            ["${building_name} === 'building1'", "color('red')"],
            ["${building_name} === 'building2'", "color('orange')"],
            ['true', "color('blue')"]
        ]
    }
});

addStyle('Color all doors', {
    'color' : {
        'conditions' : [
            ["isExactClass('door')", "color('orange')"],
            ['true', "color('white')"]
        ]
    }
});

addStyle('Color all features derived from door', {
    'color' : {
        'conditions' : [
            ["isClass('door')", "color('orange')"],
            ['true', "color('white')"]
        ]
    }
});

addStyle('Color features by class name', {
    'defines' : {
        'suffix' : "regExp('door(.*)').exec(getExactClassName())"
    },
    'color' : {
        'conditions' : [
            ["${suffix} === 'knob'", "color('yellow')"],
            ["${suffix} === ''", "color('lime')"],
            ['${suffix} === null', "color('gray')"],
            ['true', "color('blue')"]
        ]
    }
});

addStyle('Style by height', {
    'color' : {
        'conditions' : [
            ['${height} >= 10', "color('purple')"],
            ['${height} >= 6', "color('red')"],
            ['${height} >= 5', "color('orange')"],
            ['true', "color('blue')"]
        ]
    }
});

function setStyle(style) {
    return function() {
        tileset.style = new Cesium.Cesium3DTileStyle(style);
    };
}

var styleOptions = [];
for (var i = 0; i < styles.length; ++i) {
    var style = styles[i];
    styleOptions.push({
        text : style.name,
        onselect : setStyle(style.style)
    });
}

Sandcastle.addToolbarMenu(styleOptions);

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

// When a feature is left clicked, print its class name and properties
handler.setInputAction(function(movement) {
    var feature = viewer.scene.pick(movement.position);
    if (!Cesium.defined(feature)) {
        return;
    }
    console.log('Class: ' + feature.getExactClassName());
    console.log('Properties:');
    var propertyNames = feature.getPropertyNames();
    var length = propertyNames.length;
    for (var i = 0; i < length; ++i) {
        var name = propertyNames[i];
        var value = feature.getProperty(name);
        console.log('  ' + name + ': ' + value);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

// When a feature is middle clicked, hide it
handler.setInputAction(function(movement) {
    var feature = viewer.scene.pick(movement.position);
    if (!Cesium.defined(feature)) {
        return;
    }
    feature.show = false;
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== 'undefined') {
    startup(Cesium);
} else if (typeof require === 'function') {
    require(['Cesium'], startup);
}
</script>
</body>
</html>