Cesium中对geojson的处理

最新推荐文章于 2024-10-12 13:57:44 发布

black2222

最新推荐文章于 2024-10-12 13:57:44 发布

阅读量8.3k

点赞数 4

分类专栏： Cesium 文章标签： WebGL Cesium geoJson

本文链接：https://blog.csdn.net/black2Girl/article/details/83895427

版权

Cesium 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

最近关注到cesium对json处理，有点小收获，记录下来，有不对的请指正。

Cesium读取geojson

cesium支持topojson,GEOjson和普通的json格式，方法可以共用

一.topojson

<body>
    <div id="cesiumContainer"></div>
    <script>
    //加载topojson
    var viewer = new Cesium.Viewer('cesiumContainer');
//整体读取
    var promise= viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../../Apps/china.topojson', {
    stroke: Cesium.Color.BLACK,
    fill: Cesium.Color.RED,
    strokeWidth: 3,
    markerSymbol: '?'
    }));
    viewer.flyTo(promise);
    </script>
</body>

二.geojson

<body>
    <div id="cesiumContainer"></div>
    <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
 //Seed the random number generator for repeatable results.
    Cesium.Math.setRandomNumberSeed(0);
    var promise=Cesium.GeoJsonDataSource.load('../../Apps/testone.json');
    promise.then(function(dataSource) {
        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.name;
            var color = colorHash[name];
            if (!color) {
                color = Cesium.Color.fromRandom({
                    alpha : 1.0
                });
                colorHash[name] = color;
            }
            entity.polygon.material = color;
            entity.polygon.outline = false;            
            entity.polygon.extrudedHeight =5000.0;
            }
        });
        viewer.flyTo(promise);
    </script>
</body>

三.普通json

<body>
  <div id="cesiumContainer"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
    Cesium.Math.setRandomNumberSeed(0);
    Cesium.loadJson('/../Apps/Points.json').then(function(jsonData) {
      for (var i =0 ;i<=jsonData.features.length-10; i++) {
              var ifeature=jsonData.features[i]; 
         for (var k = 0;k<ifeature.geometry.paths[0].length-10; k++) {
               if (ifeature.geometry.paths[0][k].length==2) {
                    viewer.entities.add({
                    position : Cesium.Cartesian3.fromDegrees(ifeature.geometry.paths[0][k]        
                               [0],ifeature.geometry.paths[0][k][1]),
                    point : {
                        pixelSize : 10,
                        color :Cesium.Color.YELLOW
                     }
               });
             }           
           }
      }           
   }).otherwise(function(error) {
});
 </script>
</body>

给geojson设置颜色与拉伸高度

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

    var promise = Cesium.GeoJsonDataSource.load('../../SampleData/test.json');
    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.Shape_Area / 100000.0;
          
            }
        }
        viewer.zoomTo(promise);

geojson按时间显示

Cesium.GeoJsonDataSource.load('data/earthquake.geojson').then(function(dataSource) {
        viewer.dataSources.add(dataSource);

        var entities = dataSource.entities.values; 

        for (var i = 0; i < entities.length; i++) {
            var entity = entities[i];
            entity.billboard = undefined;
            entity.point = new Cesium.PointGraphics({
                color: Cesium.Color.RED,
                pixelSize: 10
            });
            entity.availability = new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                start: Cesium.JulianDate.fromIso8601(entity.properties.date),
                stop: addDay(Cesium.JulianDate.fromIso8601(entity.properties.date))
            })]);
        }
    });
});

可以看到只是多加了 entity.availability = ... 一项，这样就能够按照时间显示，主要是其中的 start 和 stop 属性，控制显示的时间范围。date 是 GeoJSON 中数据的一个字段，格式为 '2008-01-01'，当然你也可以使用其他格式，在此处进行自定义处理即可，addDay 用于控制显示一天，此处不用多考虑。

Cesium移除geojson数据

//移除全部 
var len = viewer.dataSources.length;
 if(len > 0){
     console.log(len)
     for(var n = 0; n < len; n++){
        //每删除一条viewer.dataSources，len就会减少1
         viewer.dataSources.remove(viewer.dataSources.get(0));
     }
 }

//移除某一条
var dataSources = viewer.dataSources;
for (var i = 0; i < viewer.dataSources.length; i++) {
    if (viewer.dataSources.get(i).name.indexOf("dz")!= -1) {
        viewer.dataSources.remove(viewer.dataSources.get(i));
        i--;
    }
}



//看看viewer.dataSources.get(i)获取到数据源没有