<!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>
三维瓦片批处理表层次结构.html
猜你喜欢
转载自blog.csdn.net/weixin_42193179/article/details/88037908
今日推荐
周排行