当前位置：首页 > news >正文

初识cesium----加载不同JSON格式例子

news 来源：原创 2024/5/3 12:35:39

最近研究了几天cesium.js，有些入门级的收获，随手记录下来，方便以后来查阅！

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>