三维瓦片批处理表层次结构.html

最新推荐文章于 2024-05-20 16:31:27 发布
学无止境慢慢来
最新推荐文章于 2024-05-20 16:31:27 发布
阅读量365
点赞数
分类专栏： cesium_demo
cesium_demo 专栏收录该内容
41 篇文章 5 订阅
订阅专栏
<!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>三维瓦片批处理表层次结构</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

        // 门把手、门、屋顶和墙采用批处理表层次结构进行样式化。
        // 由于建筑物和区域没有几何学的支持，所以它们不是直接样式化的。
        // 但是样式可以，考虑建筑和区域属性重写。
        // 层次布局（门把手是门的子元素）：
        //
        //   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

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMGRjM2QxYi04ODM2LTQzMDEtOGJmOS1mNDlkY2Q2NjE4MjciLCJpZCI6MjU5LCJpYXQiOjE1MjU5NjYyMDd9.xW9loNLo68KE3ReAHd-Lp73M8qJKhI9vA0wYL-qJX_I';
        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);
        tileset.tileLoad.addEventListener(function(tile) {
            console.log('A tile was loaded.');
            console.log("tile:", tile);
        });

        // console.log("tileset:", tileset);
        viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.3, 0.0));

        var styles = [];

        function addStyle(name, style) {
            /*此函数用于，将各种样式添加到styles数组。*/
            styles.push({
                name : name,
                style : style
            });
        }

        addStyle('原始样式', {});
        addStyle('根据建筑名涂色', {
            'color' : {
                'conditions' : [
                    ["${building_name} === 'building0'", "color('purple')"],
                    ["${building_name} === 'building1'", "color('red')"],
                    ["${building_name} === 'building2'", "color('orange')"],
                    // 其余的。
                    ['true', "color('blue')"]
                ]
            }
        });
        addStyle('给所有的门涂色', {
            'color' : {
                'conditions' : [
                    // 门(不包括把手。)
                    ["isExactClass('door')", "color('orange')"],
                    // 把手。
                    ['true', "color('white')"]
                ]
            }
        });
        addStyle('给门及其把手涂色', {
            'color' : {
                'conditions' : [
                    // 门（包括把手。）
                    ["isClass('door')", "color('orange')"],
                    ['true', "color('white')"]
                ]
            }
        });
        addStyle('通过类名给特性涂色', {
            // 定义后缀。
            'defines' : {
                'suffix' : "regExp('door(.*)').exec(getExactClassName())"
            },
            'color' : {
                'conditions' : [
                    // 把手
                    ["${suffix} === 'knob'", "color('yellow')"],
                    // 门
                    ["${suffix} === ''", "color('lime')"],
                    // 墙及屋顶。
                    ['${suffix} === null', "color('gray')"],
                    // 其他的。
                    ['true', "color('blue')"]
                ]
            }
        });
        addStyle('按高度涂色', {
            'color' : {
                'conditions' : [
                    // 墙。此处的高度是指单一特性其本身的高度。
                    ['${height} >= 10', "color('purple')"],
                    // 屋顶
                    ['${height} >= 6', "color('red')"],
                    // 门
                    ['${height} >= 5', "color('orange')"],
                    // 把手
                    ['true', "color('blue')"]
                ]
            }
        });

        function setStyle(style) {
            /*此函数用于，返回一个匿名函数；
            * 此匿名函数用于设置当前三维瓦片tileset的样式。*/
            return function() {
                tileset.style = new Cesium.Cesium3DTileStyle(style);
            };
        }

        // styleOptions数组，是在styles数组的基础上，构造的样式选项数组。
        // styleOptions数组的每一个元素，是一个json对象，
        // 有两个属性：样式文本，当选中该样式的可执行函数。
        var styleOptions = [];
        for (var i = 0; i < styles.length; ++i) {
            var style = styles[i];
            styleOptions.push({
                text : style.name,
                onselect : setStyle(style.style)
            });
        }
        // 以下要把样式选项styleOptions，添加到当前页面的div#toolbar元素内。

        Sandcastle.addToolbarMenu(styleOptions);

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

        // 单击特性时, 打印它的类名和属性。
        // 此处的函数可以是有名函数，也可以是匿名函数。
        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 propertyName = propertyNames[i];
                var value = feature.getProperty(propertyName);
                console.log('  ' + propertyName + ': ' + value);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        // 鼠标滚轮单击一个特性时，隐藏该特性。
        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>
学无止境慢慢来
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三维瓦片批处理表层次结构.html

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"&gt; &lt;!--
复制链接

扫一扫
专栏目录