四、Cesium加载geojson数据展示区块、加载kml文件数据-向日葵屋

四、Cesium加载geojson数据展示区块、加载kml文件数据

悠悠 2023-06-05 15:58 27阅读 0赞

一、加载geojson数据

获取geojson，下载路径：https://download.csdn.net/download/weixin_41996632/11839214

在Cesium APP文件夹下创建assets，然后将json文件拷贝到该文件夹下，引用代码如下，

记得修改文件加载路径修改代码，若是从上面路径下载的文件记得打开文件然后删除”china_zz_20191009 “

<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('./assets/china_zz_20191009.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({
                    red: 1,
                    maximumGreen: 1,
                    maximumBlue: 1,
                    alpha : 1.0
                });
                colorHash[name] = color;
            }
            entity.polygon.material = color;
            entity.polygon.outline = false;            
            entity.polygon.extrudedHeight =5000.0;
            }
        });
        viewer.flyTo(promise);
    </script>
</body>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70

高低起伏显示，修改以上代码

entity.polygon.extrudedHeight = entity.properties.adcode._value / 10;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1

以下代码为颜色随机值油0~1

color = Cesium.Color.fromRandom({
                    red: 1,
                    maximumGreen: 1,
                    maximumBlue: 1,
                    alpha : 1.0
                });

二、加载kml文件数据

下载kml文件，地址：待写入

将下载的文件放入到和上面json同级文件夹下，该数据是厦门的kml文件数据，加载kml文件数据代码如下

<body>
    <div id="cesiumContainer"></div>
    <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
      // 加载kml数据，更改description信息，多了黄色的标签里面包含的
     var kmlOptions = {
         camera : viewer.scene.camera,
         canvas : viewer.scene.canvas,
         clampToGround : true
     };
     // Load geocache points of interest from a KML file
     // Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
     var geocachePromise = Cesium.KmlDataSource.load('./assets/doc.kml', kmlOptions);
    // Add geocache billboard entities to scene and style them
    geocachePromise.then(function(dataSource) {
        // Add the new data as entities to the viewer
        viewer.dataSources.add(dataSource);
        // Get the array of entities
        var geocacheEntities = dataSource.entities.values;
        for (var i = 0; i < geocacheEntities.length; i++) {
            var entity = geocacheEntities[i];
            if (Cesium.defined(entity.billboard)) {
                // Adjust the vertical origin so pins sit on terrain
                entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
                // Disable the labels to reduce clutter
                entity.label = undefined;
                // Add distance display condition
                entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
                // Compute latitude and longitude in degrees
                var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
                var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
                var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
                // Modify description(将信息添加到description描述信息中，我们这里只添加经纬度)
                var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
                '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
                '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
                '</tbody></table>';
                entity.description = description;
            }
        }
    });
    </script>
</body>