Cesium 动态改变多边形的拉伸高度

var viewer = new Cesium.Viewer('cesiumContainer');
var dataSource;

viewer.dataSources.removeAll();
//Seed the random number generator for repeatable results.
Cesium.Math.setRandomNumberSeed(0);

dataSource = new Cesium.GeoJsonDataSource();
var promise = dataSource.load('../../SampleData/ne_10m_us_states.topojson');
promise.then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    //Get the array of entities
    var entities = dataSource.entities.values;

    var colorHash = {};
    for (var i = 0; i < entities.length; i++) {
        //For each entity, create a random color based on the state name.
        //Some states have multiple entities, so we store the color in a
        //hash so that we use the same color for the entire state.
        var entity = entities[i];
        var name = entity.name;
        var color = colorHash[name];
        if (!color) {
            color = Cesium.Color.fromRandom({
                alpha : 1.0
            });
            colorHash[name] = color;
        }

        //Set the polygon material to our random color.
        entity.polygon.material = color;
        
        //Remove the outlines.
        //entity.polygon.outline = false;
        //Extrude the polygon based on the state's population.  Each entity
        //stores the properties for the GeoJSON feature it was created from
        //Since the population is a huge number, we divide by 50.
        entity.polygon.extrudedHeight = entity.properties.Population / 50.0;
    }
}).otherwise(function(error){
    //Display any errrors encountered while loading.
    window.alert(error);
});

Sandcastle.addToolbarButton('Toggle volume', function() {
//Get the array of entities
var entities = dataSource.entities.values;
    dataSource.entities.suspendEvents();
    for (var i = 0; i < entities.length; i++) {
        var entity = entities[i];
        //entity.polygon.height = 0;
        if (entity.polygon.extrudedHeight === undefined) {
            entity.polygon.extrudedHeight = entity.properties.Population / 50.0;
        } else {
            entity.polygon.extrudedHeight = undefined;
        }
    }
    dataSource.entities.resumeEvents();
    //dataSource.changedEvent.raiseEvent();
    //dataSource.entities.collectionChanged.raiseEvent(dataSource.entities, null, null, dataSource.entities.values);
});

参考
https://github.com/CesiumGS/cesium/issues/5590

var polygon = viewer.entities.add({
            polygon: {
                hierarchy: {
                    positions: [new Cesium.Cartesian3(6378136.282064899, 2045.931221366772, -1942.1627961569236),
                        new Cesium.Cartesian3(6378136.401006819, 2059.9615452982202, -2009.4381889716935),
                        new Cesium.Cartesian3(6378136.323519128, 2120.403271677589, -2010.7963412229758),
                        new Cesium.Cartesian3(6378136.231778225, 2123.366119812282, -1930.1244599529364)
                    ]
                },
                perPositionHeight: true,//对每个位置使用options.positions的height,而不使用options.height来确定高度
                extrudedHeight: 100,
                material: Cesium.Color.BLUE.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.BLACK.withAlpha(1)//黑色轮廓线
            }
        });
viewer.zoomTo(polygon);

var pointArray = new Array();
  for (var j = 0; j < data.geometry.points.length; j++) {
      var x = data.geometry.points[j].x;
      var y = data.geometry.points[j].y;
      pointArray.push(x);
      pointArray.push(y);
      pointArray.push(JMGC + GD);
  }

  viewer.entities.add({
      name:"房间号:" + FJH,
      fjhInfo:FJH,
      colorInfo:colorStr,
      id: FW_HS_INDEX,
      text:BDCDYH,
      polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(pointArray),
          extrudedHeight: JMGC,//多边形的挤出面和椭圆面之间的距离(以米为单位)。
          perPositionHeight: true,//对每个位置使用options.positions的height,而不使用options.height来确定高度
          // material : Cesium.Color.RED.withAlpha(0.5),//颜色及透明度设置
          material: Cesium.Color.fromAlpha(Cesium.Color.fromCssColorString(colorStr), .5),
          outline: true,
          outlineColor: Cesium.Color.BLACK.withAlpha(1)//黑色轮廓线
      }
  });
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Cesium可以通过设置多边形高度属性来绘制带有高度多边形。具体实现步骤如下: 1. 创建多边形的顶点数组,包括经度、纬度和高度信息。 2. 创建多边形实例,并设置其位置、颜色等属性。 3. 创建多边形的属性,设置其高度为一个常量或使用高度数组来指定每个顶点的高度。 4. 将多边形属性绑定到多边形实例上。 5. 将多边形实例添加到场景中,即可看到带有高度多边形。 下面是一个简单的示例代码,展示如何在Cesium中绘制带有高度多边形: ``` // 创建多边形的顶点数组 var positions = Cesium.Cartesian3.fromDegreesArrayHeights([ 0.0, 0.0, 0.0, 10.0, 0.0, 1000.0, 10.0, 10.0, 2000.0, 0.0, 10.0, 3000.0 ]); // 创建多边形实例 var polygon = new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy(positions), vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT }); // 创建多边形的属性 var height = [0, 1000, 2000, 3000]; var polygonInstance = new Cesium.GeometryInstance({ geometry: polygon, attributes: { height: new Cesium.GeometryAttribute({ componentDatatype: Cesium.ComponentDatatype.FLOAT, componentsPerAttribute: 1, values: height }) } }); // 将多边形属性绑定到多边形实例上 var primitive = new Cesium.Primitive({ geometryInstances: polygonInstance, appearance: new Cesium.PerInstanceColorAppearance({ flat: true }) }); // 将多边形实例添加到场景中 viewer.scene.primitives.add(primitive); ``` 在上面的示例中,我们创建了一个四边形,每个顶点的高度都不同,随着位置的变化而有所不同。运行代码后,我们就可以在Cesium中看到带有高度多边形了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值