开源三维GIS之Cesium创建盒几何对象(二)

最新推荐文章于 2025-03-30 21:20:37 发布

yGIS

最新推荐文章于 2025-03-30 21:20:37 发布

阅读量3.4k

点赞数 1

分类专栏： Cesium

本文链接：https://blog.youkuaiyun.com/u010608964/article/details/81813297

版权

Cesium 专栏收录该内容

22 篇文章

订阅专栏

类似于睿城传奇stampGIS的几何对象，Cesium也提供多种几何对象，开发人员可以根据自己的需要创建。今天我们来学习一下Cesium创建BoxGeomtry。Cesium提供多种方法来创建BoxGemotry。

（1）使用使用默认的方法来来创建盒几何对象。需要提供在三维中最小点和最大点。具体如下图所示，假设在0-XYZ坐标系中，确定最大点和最小点。即可。

示例源代码如下：

var box = new Cesium.BoxGeometry({
     vertexFormat : Cesium.VertexFormat.POSITION_ONLY,
     maximum : new Cesium.Cartesian3(250000.0, 250000.0, 250000.0),
     minimum : new Cesium.Cartesian3(-250000.0, -250000.0, -250000.0)
    });

绘制三维效果：

（2）fromAxisAlignedBoundingBox

提供空间中的五点，应该说是不在同一个平面上的五个点，来创建盒几何对象，示意图如下所示。

示例源代码如下：

        var demo = 
          Cesium.AxisAlignedBoundingBox.fromPoints(Cesium.Cartesian3.fromDegreesArray([
           0, 40.0,
           0, 35.0,
           75.0, 0,
           70.0, 0,
           18.0, 40.0
        ]));
        var box = Cesium.BoxGeometry.fromAxisAlignedBoundingBox(demo );

效果和上面类似

（3）fromDimensions

通过尺寸的方式来创建盒几何对象模型。尺寸的起点为原点，因此要求所有的数值比起点的值，要不然会出现平面的情况。和最开始默认的方式相比，就是最小值默认为原点了。

示例源代码如下：

        var box = Cesium.BoxGeometry.fromDimensions({
            vertexFormat : Cesium.VertexFormat.POSITION_ONLY,
            dimensions : new Cesium.Cartesian3(500000.0, 500000.0, 500000.0)
        });

下面来看一下创建盒几何模型对象整个样例源代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="Build/Cesium/Widgets/widgets.css">
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="Build/Cesium/Cesium.js"></script>

	  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Hello World!</title>
	<!-- <script src="Build/Cesium/Cesium.js"></script> -->
	<style>
      @import url(Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
	<div id="cesiumContainer"></div>
	<script type="text/javascript">
		var viewer = new Cesium.Viewer('cesiumContainer');
		var scene = viewer.scene;

        
		var box = new Cesium.BoxGeometry({
          vertexFormat : Cesium.VertexFormat.POSITION_ONLY,
          maximum : new Cesium.Cartesian3(250000.0, 250000.0, 250000.0),
          minimum : new Cesium.Cartesian3(-250000.0, -250000.0, -250000.0)
        });
        
        /*
        var demo= Cesium.AxisAlignedBoundingBox.fromPoints(Cesium.Cartesian3.fromDegreesArray([
           0, 40.0,
           0, 35.0,
           75.0, 0,
           70.0, 0,
           18.0, 40.0
        ]));
        var box = Cesium.BoxGeometry.fromAxisAlignedBoundingBox(demo);
        */

        /*
        var box = Cesium.BoxGeometry.fromDimensions({
            vertexFormat : Cesium.VertexFormat.POSITION_ONLY,
            dimensions : new Cesium.Cartesian3(500000.0, 500000.0, 500000.0)
        });*/
        

              

        var geometry = Cesium.BoxGeometry.createGeometry(box);

        var instancebox = new Cesium.GeometryInstance({
             geometry : geometry,
             modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
               Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 0), new Cesium.Matrix4()),
             attributes : {
              color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
           },
           id : 'demo'
        });

        var primitive = new Cesium.Primitive( {
              geometryInstances : instancebox,
              appearance : new Cesium.PerInstanceColorAppearance( {
                 translucent : false,
                 closed : true
              } )
        } );

        scene.primitives.add(primitive);
	</script>
</body>
</html>

更多内容，微信扫二维码关注公众号