如何使用 CesiumJs 在多边形上显示楼层

Question

我是 CesiumJs 的新手，我想给一栋楼增加 12 层。我使用多边形创建了建筑物。

这是我用来创建多边形的代码

var viewer = new Cesium.Viewer('cesiumContainer');
 var wyoming = viewer.entities.add({
 name : 'My location',
 polygon : {
    hierarchy : Cesium.Cartesian3.fromDegreesArray([cordinates of location]),
  material : Cesium.Color.WHITE.withAlpha(0.5),
  outline : true,
  fill : true,
  outlineColor : Cesium.Color.BLACK,
   }
 });
 wyoming.polygon.extrudedHeight = 50;
 viewer.camera.flyTo({
  destination : Cesium.Cartesian3.fromDegrees(-79.38443,43.64843, 144.00),
  orientation : {
    heading : Cesium.Math.toRadians(121.00),
    pitch : Cesium.Math.toRadians(60.00 - 90.0),
    roll : 0.0
  },
  duration : 4.0, // in seconds
  complete : function() {
  },
  
   point : {
    pixelSize : 5,
 color : Cesium.Color.RED,
 outlineColor : Cesium.Color.WHITE,
 outlineWidth : 2
  },
  label : {
 text : 'My another location',
    font : '14pt monospace',
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth : 2,
    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
    pixelOffset : new Cesium.Cartesian2(0, -9)
  }
});

提前致谢

Answer 1

在这种情况下，您需要比挤压多边形更复杂的东西。

如果您需要一个带有交替颜色地板的简单建筑，您可以从带有条纹 material 的墙实体构建它，并在其顶部放置一个多边形作为 "roof"（使用相同的坐标，将高度属性设置为墙的高度，而不设置 extrudedHeight)。

这将创建具有交替的黑色和白色地板的墙：

function createBuildingWalls(coordinates, floors)
{
  var floorHeight = 4;
  var height = floors * floorHeight;
  var low = Array.apply(null, Array(coordinates.length/2)).map(function() { return 0 });
  var high = Array.apply(null, Array(coordinates.length/2)).map(function() { return height });
  var buildingWalls = new Cesium.Entity({
    name : 'Wall',
    wall : {
        positions : Cesium.Cartesian3.fromDegreesArray(coordinates),
        maximumHeights : high,
        minimumHeights : low,
        material : new Cesium.StripeMaterialProperty({
                        evenColor : Cesium.Color.WHITE,
                        oddColor : Cesium.Color.BLACK,
                        repeat : 20
        })
    }});
    return buildingWalls;
}

这个屋顶（可能运行会遇到非常大的多边形问题，但对于建筑物应该没问题）：

function createBuildingRoof(coordinates, floors)
{
  var floorHeight = 4;
  var buildingHeight = floors * floorHeight;
  var buildingRoof = new Cesium.Entity({
     name : 'My location',
    polygon : {
      hierarchy : Cesium.Cartesian3.fromDegreesArray(coordinates),
      material : Cesium.Color.RED.withAlpha(0.9),
      outline : true,
      height : buildingHeight,
      fill : true,
      outlineColor : Cesium.Color.BLACK,
    }
  });

  return  buildingRoof;
}

您也可以使用纹理（图像）作为 material 并将其应用到墙上，但它更复杂。您需要设置 ImageMaterial 属性并根据您的纹理类型适当地设置 repeat 属性（即重复单层垂直，或单层 12 层水平条纹或其他组合） http://cesiumjs.org/Cesium/Build/Documentation/ImageMaterialProperty.html

其他解决方案是使用建筑物的 3D 模型： http://cesiumjs.org/2014/03/03/Cesium-3D-Models-Tutorial/

如何使用 CesiumJs 在多边形上显示楼层

How to show floors to on a polygon using CesiumJs

cesium