360SDN.COM

首页/GIS/列表

cesium----加载不同JSON格式例子(topojson,GEOjson)

来源:  2018-07-05 17:13:51    评论:0点击:

    最近研究了几天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>

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权