wall.png

cesium有自己的墻體wall，但是用它來來表示建筑物室內(nèi)的墻可能沒必要，它是一個(gè)一個(gè)的矩形面，如果建筑物底面的點(diǎn)非常多的話，用他在帶的wall可能不太現(xiàn)實(shí)。
1、生成的對(duì)象可能成倍數(shù)的增加，造成渲染的壓力。

2、渲染出來的效果可能不會(huì)好，需要對(duì)墻體進(jìn)行單獨(dú)設(shè)置達(dá)到協(xié)調(diào)。

我們想想看，在cesium的eneity對(duì)象中的polygon對(duì)象可以設(shè)置高度，而且可以切割面來獲取環(huán)面。

polygonAPI接口

其中的PolygonHierarchy對(duì)象API如下圖

PolygonHierarchyAPI接口

這樣我們可以挖空面中的一部分在給他一個(gè)拉升高度就可以類似于面周圍的墻體，然后再底面繪制該面或者也給他一個(gè)很小的拉升高度表示該面的底面。類似于這樣的效果

拉升面

這里我們可以用到turf來處理我們的面數(shù)據(jù)

$.ajax({
                type: 'get',
                async: false,
                dataType: 'json',
                url: './data/geojson/energycity.json',
                success: function (result) {
                    for (var feature of result.features) {
                        var points =[];
                        for (var coord of feature.geometry.coordinates[0]) {
                            points.push(coord[0], coord[1]);
                        }
                        var height = 5;
                        var color = Cesium.Color.fromCssColorString('#828282');
                        var floor = feature.properties.floor.substring(1);
                        var name = feature.properties.Name
                        if (floor == "1"){
                            height = 5.0;
                        }else if(floor == "2"){
                            height = 7.5;
                        }else if(floor == "3"){
                            height = 10.0;
                        }
                        if(name.indexOf('辦公區(qū)')>=0) {
                            color = Cesium.Color.fromCssColorString('#004bff');
                        }
                        createWall(feature,me,color,height)
                        var company = viewer.entities.add({
                            polygon: {
                                hierarchy: {
                                    positions: Cesium.Cartesian3.fromDegreesArray(points),
                                }, //多邊形
                                height: height, //高
                                extrudedHeight:height+0.5,
                                outline: false,
                                material: color
                            }
                        })
                    }
                }
            })

function createWall(polygon,me,color,height){
        var origin = turf.centroid(polygon).geometry.coordinates;//獲取polygon的質(zhì)心
        var bigPolygon=turf.transformScale(polygon, 1000,{origin:origin});//按照質(zhì)心擴(kuò)大多少倍
        var line = turf.polygonToLine(bigPolygon);//把面轉(zhuǎn)化為線
        var wall=turf.buffer(line,0.2);//創(chuàng)建緩沖區(qū)--變回面
        wall = turf.intersect(wall , bigPolygon)//返回相交外面是大的面，里面是小的面
        if(wall==null)return;
        wall=turf.transformScale(wall, 0.001,{origin:origin});//
        var polygonHierarchy=createPolygonHierarchy(wall.geometry.coordinates);//獲取挖空的面
        var entity=viewer.entities.add({
            polygon : {
                hierarchy : polygonHierarchy,
                height :height ,
                resolution:1,
                extrudedHeight:height+2.5,
                shadows : Cesium.ShadowMode.ENABLED,
                material : color.withAlpha(1)
            }
        });//創(chuàng)建墻體，也是面
    }
    function createPolygonHierarchy(coordinates){
        var holes = [];
        for (var i = 1, len = coordinates.length; i < len; i++) {
            holes.push(new Cesium.PolygonHierarchy(coordinatesArrayToCartesianArray(coordinates[i], crsFunction)));
        }//挖洞
        var positions = coordinates[0];
        var polygonHierarchy = new Cesium.PolygonHierarchy(coordinatesArrayToCartesianArray(positions, crsFunction), holes);
        return polygonHierarchy;
    }
    function crsFunction(coordinates) {
        return Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2]);
    }
    function coordinatesArrayToCartesianArray(coordinates, crsFunction) {
        var positions = new Array(coordinates.length);
        for (var i = 0; i < coordinates.length; i++) {
            positions[i] = crsFunction(coordinates[i]);
        }
        return positions;
    }

是不是很方便，同時(shí)可以根據(jù)不同的屬性設(shè)置不用的高度，比如說如果是走廊就只有基低，或者設(shè)置不用的顏色。當(dāng)然拉升的墻體的每個(gè)面無法單獨(dú)渲染。如果需要的話只能去貼面啦。