Cesium中对geojson的处理

最近关注到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;
        
### 实现 CesiumGeoJSON 数据加载与交互 #### 加载 GeoJSON 文件并显示图形 为了在 Cesium 中加载 GeoJSON 文件,首先要确保已安装 Cesium 库及其必要依赖项[^2]。下面是一个简单的例子展示如何加载 GeoJSON 并将其作为实体添加到场景中: ```javascript // 假设已有初始化好的 viewer 对象 const geoJsonUrl = 'path/to/your.geojson'; Cesium.GeoJsonDataSource.load(geoJsonUrl).then(function(dataSource) { viewer.dataSources.add(dataSource); // 自动缩放至数据范围 viewer.zoomTo(dataSource); }); ``` 此代码片段会异步获取指定路径下的 GeoJSON 文件,并创建一个新的 `GeoJsonDataSource` 来解析该文件的内容。 #### 添加基本交互功能 对于希望增强用户体验的情况来说,可以为这些地理要素增加一些基础的鼠标事件监听器,比如点击、悬停等效果。这里提供了一个关于设置弹窗提示信息的例子: ```javascript viewer.entities.removeAll(); // 清除现有实体以防冲突 let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); handler.setInputAction(function(click) { let pickedObject = viewer.scene.pick(click.position); if (Cesium.defined(pickedObject)) { console.log('Clicked:', pickedObject.id.properties.name._value); // 输出被选中的对象名称 alert(`You clicked on ${pickedObject.id.properties.name._value}`); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); ``` 上述脚本实现了当用户单击某个特定位置时触发相应操作的功能;如果检测到了有效的拾取目标,则会在控制台打印其名字属性并通过警告框告知用户所点击的是哪个特征点。 另外值得注意的一点是在不同的 zoom level 下采用不同精细度的数据有助于提高性能表现[^1]。这意味着可以根据当前视图级别动态切换要渲染的数据集版本——远处使用低分辨率模型而近处则呈现高细节版本。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值