Cesium11:加载geojson面贴地和显示边界问题

1.背景

cesium加载geojson面数据后,有部分数据在地形下面显示不全, 加了clampToGround: true,设置贴地后,边界又不见了

this.viewer.dataSources.add(GeoJsonDataSource.load('http://xx/xzbj.geojson', {
            stroke: Color.BLACK.withAlpha(0.5),
            strokeWidth: 2.3,
            fill: Color.CORAL.withAlpha(0.4),
            //clampToGround: true
        })).then(data => {
            this.perLayer = data;
            //this.viewer.zoomTo(this.perLayer)
        });

2.解决

添加polygon实体后,设置outline属性。但是当height属性不设置时,会发现边界线不显示了。这边可以通过再绘制一个polyline实体来作为边界线,代码如下:

 var positions = entity.polygon.hierarchy._value.positions;
    this.viewer.entities.add({
        name: 'boderLine',
        polyline: {
            positions: positions,
            width: 2,
            material: Color.BLACK.withAlpha(0.5),
            clampToGround: true
        }
    })

3.其他

(1)加载geojson 设置不同面颜色和高度

var m =this;
CesiumMath.setRandomNumberSeed(0);  //设置随机数种子
var promise =GeoJsonDataSource.load('http://xxx/g_xzbj.geojson'); //geojson面数据
promise.then(function(dataSource) {
  m.viewer.dataSources.add(dataSource);
  var entities = dataSource.entities.values;
  var colorHash = {};
  for (var i = 0; i < entities.length; i++) {
       var entity = entities[i];
       var name = entity.id;  //geojson里面必须得有一个name属性,entity.name对应
       var color = colorHash[name]; //可以使两个同名要素使用同一种颜色。。。
       if (!color) {
            color = Color.fromRandom({
               alpha : 1.0
            });
            colorHash[name] = color;
       }
       entity.polygon.material =  color;
       entity.polygon.outline = false;
       entity.polygon.extrudedHeight = Math.floor(Math.random()*500+1000) 
       //1000~500的随机数,单位是米
       m.viewer.zoomTo(promise);
  }
});

(2)常用设置

// 如果为真,则允许用户旋转相机。如果为假,相机将锁定到当前标题。此标志仅适用于2D和3D。
 viewer.scene.screenSpaceCameraController.enableRotate = false;
 如果为true,则允许用户平移地图。如果为假,相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
viewer.scene.screenSpaceCameraController.enableTranslate = false;
// 如果为真,允许用户放大和缩小。如果为假,相机将锁定到距离椭圆体的当前距离
viewer.scene.screenSpaceCameraController.enableZoom = false;
// 如果为真,则允许用户倾斜相机。如果为假,相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。
viewer.scene.screenSpaceCameraController.enableTilt = false;

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Cesium中使用GroundPrimitive加载GeoJSON线数据,可以按照以下步骤进行操作: 1. 准备数据:将GeoJSON线数据准备好,并确保其符合GeoJSON规范。 2. 创建GroundPrimitive:使用Cesium的GroundPrimitive类创建一个实例。GroundPrimitive类可以用于在地面上呈现几何图形,例如线、面等。 3. 加载数据:使用CesiumGeoJsonDataSource类将GeoJSON数据加载到GroundPrimitive中。 4. 显示数据:将GroundPrimitive添加到Cesium的场景中即可显示数据。 以下是一个示例代码,演示如何加载GeoJSON线数据: ```javascript // 准备数据 var geojsonData = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-74.0059, 40.7128], [-77.0369, 38.9072] ] }, "properties": { "name": "New York to Washington DC" } } ] }; // 创建GroundPrimitive var groundPrimitive = new Cesium.GroundPrimitive({ geometryInstances: [] }); // 加载数据 var dataSource = Cesium.GeoJsonDataSource.load(geojsonData); dataSource.then(function(dataSource) { var entities = dataSource.entities.values; for (var i = 0; i < entities.length; i++) { var entity = entities[i]; var geometryInstance = new Cesium.GeometryInstance({ geometry: new Cesium.PolylineGeometry({ positions: entity.polyline.positions.getValue(), width: 5.0 }) }); groundPrimitive.geometryInstances.push(geometryInstance); } }); // 添加到场景中 viewer.scene.primitives.add(groundPrimitive); ``` 在该示例代码中,我们首先准备了一个包含一条线的GeoJSON数据。然后创建了一个GroundPrimitive实例,并使用GeoJsonDataSource类将数据加载到其中。最后,将GroundPrimitive添加到场景中即可显示数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值