SuperMap iClient3D for WebGL教程 绘制椭圆环状面

作者：Nec_Eu

环状面（或椭圆环状面），可在“圆环套圆环”的显示效果中用于显示次级范围或更低级别范围，在军事、规划等领域均有不同程度的应用。然而，在Cesium的开放接口——Entity中，并没有环状面的直接接口，这为环状面的制作造成了困难。那么我们应该怎么制作环状面呢？这里，up提供一个最简单的实现思路——以点构面，然后通过面对象（即Entity.polygon）来实现。下面就让我们来看一下具体步骤吧。

第一步，获取外圈椭圆边界线的Geometry

    var ellipseOutlineInner = new Cesium.EllipseOutlineGeometry({
      center : Cesium.Cartesian3.fromDegrees(116, 39),
      semiMajorAxis : 200000.0,
      semiMinorAxis : 150000.0,
      rotation : Cesium.Math.toRadians(0.0)
    });
    var geometryInner = Cesium.EllipseOutlineGeometry.createGeometry(ellipseOutlineInner);

第二步，获取该Geometry上的节点

    var valuesInner = geometryInner.attributes.position.values;
    var positionsInner = [];
    for(var i = 0; i < valuesInner.length; i = i + 3){
        var position = new Cesium.Cartesian3(valuesInner[i],valuesInner[i+1],valuesInner[i+2]);
        positionsInner.push(position);
    }

第三步，用同样的方法获取内圈椭圆边界线的节点

    var ellipseOutlineOuter = new Cesium.EllipseOutlineGeometry({
      center : Cesium.Cartesian3.fromDegrees(116, 39),
      semiMajorAxis : 400000.0,
      semiMinorAxis : 300000.0,
      rotation : Cesium.Math.toRadians(0.0)
    });
    var geometryOuter = Cesium.EllipseOutlineGeometry.createGeometry(ellipseOutlineOuter);
    
    var valuesOuter = geometryOuter.attributes.position.values;
    var positionsOuter = [];
    for(var i = 0; i < valuesOuter.length; i = i + 3){
        var position = new Cesium.Cartesian3(valuesOuter[i],valuesOuter[i+1],valuesOuter[i+2]);
        positionsOuter.push(position);
    }

第四步，通过Entity.Polygon添加环状面并定位

    var ring = viewer.entities.add({
        name : 'ring',
        polygon : {
            hierarchy:new Cesium.PolygonHierarchy(positionsOuter,[new Cesium.PolygonHierarchy(positionsInner)])
        }
    });

    viewer.zoomTo(viewer.entities);

结果如图所示：