wall.png
cesium有自己的墙体wall，但是用它来来表示建筑物室内的墙可能没必要，它是一个一个的矩形面，如果建筑物底面的点非常多的话，用他在带的wall可能不太现实。
1、生成的对象可能成倍数的增加，造成渲染的压力。
2、渲染出来的效果可能不会好，需要对墙体进行单独设置达到协调。
我们想想看，在cesium的eneity对象中的polygon对象可以设置高度，而且可以切割面来获取环面。
polygonAPI接口
其中的PolygonHierarchy对象API如下图
PolygonHierarchyAPI接口
这样我们可以挖空面中的一部分在给他一个拉升高度就可以类似于面周围的墙体，然后再底面绘制该面或者也给他一个很小的拉升高度表示该面的底面。类似于这样的效果
拉升面
这里我们可以用到turf来处理我们的面数据
$.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('办公区')>=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的质心
var bigPolygon=turf.transformScale(polygon, 1000,{origin:origin});//按照质心扩大多少倍
var line = turf.polygonToLine(bigPolygon);//把面转化为线
var wall=turf.buffer(line,0.2);//创建缓冲区--变回面
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)
}
});//创建墙体，也是面
}
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;
}
是不是很方便，同时可以根据不同的属性设置不用的高度，比如说如果是走廊就只有基低，或者设置不用的颜色。当然拉升的墙体的每个面无法单独渲染。如果需要的话只能去贴面啦。
