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);