cesium入门示例-3dTiles加载

数据转换工具采用cesiumlab1.5.17版本，转换后的3dTiles加载显示比较简单，通过Cesium.Cesium3DTileset接口指定url即可，3dTiles文件可与js前端代码放置一起，也可是远程服务器上的地址。如下：

 //故宫
 var palaceTileset = new Cesium.Cesium3DTileset({
     url: './TestData/output/DAEPalace/tileset.json'
     //或者url: 'http://ip:port/www/DAEPalace/tileset.json'
 })
 viewer.scene.primitives.add(palaceTileset);  

通过上述代码加载的三维模型位置和高度可能不符合预期，需要进行调整，调整代码如下：

 var height = -30;　　//根据地形设置调整高度
 palaceTileset.readyPromise.then(function(argument) {
     //贴地显示
     var cartographic = Cesium.Cartographic.fromCartesian(dayantaTileset.boundingSphere.center);
     var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
     var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + height);
     var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
     palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
 })

或者通过指定经纬高调整模型位置：

 var longitude = 116.3908443995411;
 var latitude = 39.91600579431837;
 height = 60.38590702090875;
 var heading = 2;
 palaceTileset.readyPromise.then(function(argument) {
     //经纬度、高转笛卡尔坐标
     var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
     var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);
     var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading)));
     Cesium.Matrix4.multiply(mat, rotationX, mat);
     palaceTileset._root.transform = mat;
 })

显示效果如下：

1、三维模型显示

由DAE格式模型转换而来，DAE文件与纹理图片在同一级文件夹下，可成功转换出待纹理的3dTiles，否则找不到纹理图片就只有白模；

2、倾斜摄影场景显示

由osgb数据转换而来，cesiumlab中转换时要选择data目录，如下图：

加载显示结果如下：

3、矢量建筑物显示

由shapefile格式的建筑物多边形数据转换而来，包含建筑物高度信息，矢量物批量显示，不用调整建筑物位置，显示效果如下：

建筑物按高度用颜色区分，设置了tileset的样式如下：

 //注意这个颜色的设置
 tileset.style = new Cesium.Cesium3DTileStyle({
     color: {
         conditions: [
             ['${height} >= 200', 'color("red", 1)'],
             ['${height} >= 100', 'rgba(150, 150, 150, 1)'],
             ['true', 'color("blue")']
         ]
     }
 });

其中height为shapefile中存储建筑物高度的属性字段名称，建筑物选择显示属性信息通过侦听鼠标MOVE和LEFT_CLICK事件，查询要素获得，实现代码如下：

         // HTML overlay for showing feature name on mouseover
         var nameOverlay = document.createElement('div');
         viewer.container.appendChild(nameOverlay);
         nameOverlay.className = 'backdrop';
         nameOverlay.style.display = 'none';
         nameOverlay.style.position = 'absolute';
         nameOverlay.style.bottom = '0';
         nameOverlay.style.left = '0';
         nameOverlay.style['pointer-events'] = 'none';
         nameOverlay.style.padding = '4px';
         nameOverlay.style.backgroundColor = 'yellowgreen';

         // Information about the currently selected feature
         var selected = {
             feature: undefined,
             originalColor: new Cesium.Color()
         };

         // An entity object which will hold info about the currently selected feature for infobox display
         var selectedEntity = new Cesium.Entity();

         // Get default left click handler for when a feature is not picked on left click
         var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

         // Change the feature color.
         // Information about the currently highlighted feature
         var highlighted = {
             feature: undefined,
             originalColor: new Cesium.Color()
         };

         // Color a feature yellow on hover.
         viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
             // If a feature was previously highlighted, undo the highlight
             if(Cesium.defined(highlighted.feature)) {
                 highlighted.feature.color = highlighted.originalColor;
                 highlighted.feature = undefined;
             }
             // Pick a new feature
             var pickedFeature = viewer.scene.pick(movement.endPosition);
             if(!Cesium.defined(pickedFeature) || !Cesium.defined(pickedFeature.getProperty)) {
                 nameOverlay.style.display = 'none';
                 return;
             }
             // A feature was picked, so show it's overlay content
             nameOverlay.style.display = 'block';
             nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
             nameOverlay.style.left = movement.endPosition.x + 'px';
             var name = pickedFeature.getProperty('name');
             if(!Cesium.defined(name)) {
                 name = pickedFeature.getProperty('id');
             }
             nameOverlay.textContent = name;
             // Highlight the feature if it's not already selected.
             if(pickedFeature !== selected.feature) {
                 highlighted.feature = pickedFeature;
                 Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
                 pickedFeature.color = Cesium.Color.YELLOW.withAlpha(0.5);
             }
         }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

         // Color a feature on selection and show metadata in the InfoBox.
         viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
             // If a feature was previously selected, undo the highlight
             if(Cesium.defined(selected.feature)) {
                 selected.feature.color = selected.originalColor;
                 selected.feature = undefined;
             }
             // Pick a new feature
             var pickedFeature = viewer.scene.pick(movement.position);
             if(!Cesium.defined(pickedFeature) || !Cesium.defined(pickedFeature.getProperty)) {
                 clickHandler(movement);
                 return;
             }
             // Select the feature if it's not already selected
             if(selected.feature === pickedFeature) {
                 return;
             }
             selected.feature = pickedFeature;
             console.log(pickedFeature.content.tile.boundingSphere.center);
             console.log(pickedFeature.tileset.boundingSphere.center);
             // Save the selected feature's original color
             if(pickedFeature === highlighted.feature) {
                 Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
                 highlighted.feature = undefined;
             } else {
                 Cesium.Color.clone(pickedFeature.color, selected.originalColor);
             }
             // Highlight newly selected feature
             pickedFeature.color = Cesium.Color.LIME.withAlpha(0.5);
             // Set feature infobox description
             var featureName = pickedFeature.getProperty('name');
             selectedEntity.name = featureName;
             selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';

             selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>';
             var propertyNames = pickedFeature.getPropertyNames();
             var length = propertyNames.length;
             for(var i = 0; i < length; ++i) {
                 var propertyName = propertyNames[i];
                 selectedEntity.description += '<tr><th>' + propertyName + '</th><td>' + pickedFeature.getProperty(propertyName) + '</td></tr>';
             }
             selectedEntity.description += '</tbody></table>';
             viewer.selectedEntity = selectedEntity;

         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);