Как показать полы на полигоне с использованием CesiumJs

Question

Я новичок в CesiumJs, и я хочу добавить 12 этажей в здание. Я создал здание с использованием многоугольника.

Вот код, который я использовал для создания многоугольника

var viewer = new Cesium.Viewer('cesiumContainer'); 
 
\t var wyoming = viewer.entities.add({ 
 
\t name : 'My location', 
 
\t polygon : { 
 
    hierarchy : Cesium.Cartesian3.fromDegreesArray([cordinates of location]), 
 
\t \t material : Cesium.Color.WHITE.withAlpha(0.5), 
 
\t \t outline : true, 
 
\t \t fill : true, 
 
\t \t outlineColor : Cesium.Color.BLACK, 
 
\t } 
 
\t }); 
 
\t wyoming.polygon.extrudedHeight = 50; 
 
\t 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, 
 
\t color : Cesium.Color.RED, 
 
\t outlineColor : Cesium.Color.WHITE, 
 
\t outlineWidth : 2 
 
    }, 
 
    label : { 
 
\t 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

В этом случае вам нужно что-то более сложное, чем экструдированный полигон.

Если вам нужно простое здание с полами переменного цвета, вы можете построить его из стенового объекта с полосовым материалом и нанести на него многоугольник как «крышу» (использовать те же координаты, поместить свойство высоты на высоту стену, а не установленную экструдированную высоту).

Это создаст стену с чередующимися черными и белыми полами:

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

Вы также можете использовать текстуру (изображение) в качестве материала и нанести ее на стену, но она сложнее. Вы должны были бы установить ImageMaterial собственности и в соответствии Propably набор повтора свойства в зависимости от типа вашей текстуры (то есть повторять один этаж verticaly, или одиночный 12 пол полоса горизонтально или какой-либо другой комбинации) http://cesiumjs.org/Cesium/Build/Documentation/ImageMaterialProperty.html

Другое решение было бы используйте 3D-модели зданий: http://cesiumjs.org/2014/03/03/Cesium-3D-Models-Tutorial/