SuperMap iClient3D for WebGL教程-BoxGraphics

最新推荐文章于 2025-06-13 16:00:41 发布

supermapsupport

最新推荐文章于 2025-06-13 16:00:41 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：三维GIS

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.youkuaiyun.com/supermapsupport/article/details/90746871

三维GIS 专栏收录该内容

426 篇文章

订阅专栏

本教程介绍Cesium中BoxGraphics的使用方法，包括高度模式、尺寸设置、显示控制等属性，以及如何通过entity的position控制位置。还介绍了如何使用纹理、网格和渐变色材质填充Box。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：桔子
本文同步更新于简书文章https://www.jianshu.com/p/132f8b62cab2
BoxGraphics是WebGL中常用的几何对象，本节教程将介绍如何使用这个对象。

heightReference：高度模式
dimensions：维度设置，也就是长宽高，单位为米
show：显示控制
fill：填充设置
material：材质设置
outline：外边框线显示设置
outlineColor：外边框线颜色
outlineWidth：外边框线线框
shadows：太阳阴影模式
distanceDisplayCondition：可见距离控制
下面我们来看如何加载：

var redBox = viewer.entities.add({
    name : 'Red box with black outline',
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});

BoxGraphics例子.png

BoxGraphics位置的方式是通过enitity的position进行控制，position在BoxGraphics的底面中心点位置。
Box除了使用纯色填充外，也可以使用纹理材质、格网材质和渐变色材质进行填充。

var blueBox = viewer.entities.add({
    name : 'Blue box',
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : new Cesium.ImageMaterialProperty({
			image:'Box.jpg'
		})
    }
});

var blueBox = viewer.entities.add({
    name : 'Blue box',
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
		material:new Cesium.GridMaterialProperty({
			lineCount:new Cesium.Cartesian2(4, 4)
		})
    }
});

var blueBox = viewer.entities.add({
    name : 'Blue box',
    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
		material:new Cesium.StripeMaterialProperty({
			evenColor:Cesium.Color.WHITE.withAlpha(0.2),
			repeat:2,
			oddColor:Cesium.Color.BLUE
		})
    }
});

Box渐变.png