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

西北码农

已于 2023-08-09 15:53:30 修改

阅读量4.4k

点赞数 1

分类专栏： Cesium专栏文章标签： javascript cesium

于 2023-07-27 17:21:48 首次发布

本文链接：https://blog.youkuaiyun.com/bitree1/article/details/131964219

版权

Cesium专栏专栏收录该内容

9 篇文章

订阅专栏

文章介绍了在Cesium中加载geojson面数据时遇到的问题，即部分数据在地形下显示不全，以及设置clampToGround属性后边界的消失。通过创建额外的polyline实体作为边界线解决了边界显示问题。此外，文章还展示了如何为不同geojson面设置不同的颜色和随机高度，以及调整用户交互如禁用相机旋转、平移和缩放等。

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

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;