cesium入门示例-3dTiles加载

时间:2024-03-04 17:58:05

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

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

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

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

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

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

显示效果如下:

1、三维模型显示

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

 

 

2、倾斜摄影场景显示

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

 加载显示结果如下:

 

3、矢量建筑物显示

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

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

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

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

  1         // HTML overlay for showing feature name on mouseover
  2         var nameOverlay = document.createElement(\'div\');
  3         viewer.container.appendChild(nameOverlay);
  4         nameOverlay.className = \'backdrop\';
  5         nameOverlay.style.display = \'none\';
  6         nameOverlay.style.position = \'absolute\';
  7         nameOverlay.style.bottom = \'0\';
  8         nameOverlay.style.left = \'0\';
  9         nameOverlay.style[\'pointer-events\'] = \'none\';
 10         nameOverlay.style.padding = \'4px\';
 11         nameOverlay.style.backgroundColor = \'yellowgreen\';
 12 
 13         // Information about the currently selected feature
 14         var selected = {
 15             feature: undefined,
 16             originalColor: new Cesium.Color()
 17         };
 18 
 19         // An entity object which will hold info about the currently selected feature for infobox display
 20         var selectedEntity = new Cesium.Entity();
 21 
 22         // Get default left click handler for when a feature is not picked on left click
 23         var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
 24 
 25         // Change the feature color.
 26         // Information about the currently highlighted feature
 27         var highlighted = {
 28             feature: undefined,
 29             originalColor: new Cesium.Color()
 30         };
 31 
 32         // Color a feature yellow on hover.
 33         viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
 34             // If a feature was previously highlighted, undo the highlight
 35             if(Cesium.defined(highlighted.feature)) {
 36                 highlighted.feature.color = highlighted.originalColor;
 37                 highlighted.feature = undefined;
 38             }
 39             // Pick a new feature
 40             var pickedFeature = viewer.scene.pick(movement.endPosition);
 41             if(!Cesium.defined(pickedFeature) || !Cesium.defined(pickedFeature.getProperty)) {
 42                 nameOverlay.style.display = \'none\';
 43                 return;
 44             }
 45             // A feature was picked, so show it\'s overlay content
 46             nameOverlay.style.display = \'block\';
 47             nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + \'px\';
 48             nameOverlay.style.left = movement.endPosition.x + \'px\';
 49             var name = pickedFeature.getProperty(\'name\');
 50             if(!Cesium.defined(name)) {
 51                 name = pickedFeature.getProperty(\'id\');
 52             }
 53             nameOverlay.textContent = name;
 54             // Highlight the feature if it\'s not already selected.
 55             if(pickedFeature !== selected.feature) {
 56                 highlighted.feature = pickedFeature;
 57                 Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
 58                 pickedFeature.color = Cesium.Color.YELLOW.withAlpha(0.5);
 59             }
 60         }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 61 
 62         // Color a feature on selection and show metadata in the InfoBox.
 63         viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
 64             // If a feature was previously selected, undo the highlight
 65             if(Cesium.defined(selected.feature)) {
 66                 selected.feature.color = selected.originalColor;
 67                 selected.feature = undefined;
 68             }
 69             // Pick a new feature
 70             var pickedFeature = viewer.scene.pick(movement.position);
 71             if(!Cesium.defined(pickedFeature) || !Cesium.defined(pickedFeature.getProperty)) {
 72                 clickHandler(movement);
 73                 return;
 74             }
 75             // Select the feature if it\'s not already selected
 76             if(selected.feature === pickedFeature) {
 77                 return;
 78             }
 79             selected.feature = pickedFeature;
 80             console.log(pickedFeature.content.tile.boundingSphere.center);
 81             console.log(pickedFeature.tileset.boundingSphere.center);
 82             // Save the selected feature\'s original color
 83             if(pickedFeature === highlighted.feature) {
 84                 Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
 85                 highlighted.feature = undefined;
 86             } else {
 87                 Cesium.Color.clone(pickedFeature.color, selected.originalColor);
 88             }
 89             // Highlight newly selected feature
 90             pickedFeature.color = Cesium.Color.LIME.withAlpha(0.5);
 91             // Set feature infobox description
 92             var featureName = pickedFeature.getProperty(\'name\');
 93             selectedEntity.name = featureName;
 94             selectedEntity.description = \'Loading <div class="cesium-infoBox-loading"></div>\';
 95 
 96             selectedEntity.description = \'<table class="cesium-infoBox-defaultTable"><tbody>\';
 97             var propertyNames = pickedFeature.getPropertyNames();
 98             var length = propertyNames.length;
 99             for(var i = 0; i < length; ++i) {
100                 var propertyName = propertyNames[i];
101                 selectedEntity.description += \'<tr><th>\' + propertyName + \'</th><td>\' + pickedFeature.getProperty(propertyName) + \'</td></tr>\';
102             }
103             selectedEntity.description += \'</tbody></table>\';
104             viewer.selectedEntity = selectedEntity;
105 
106         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);