基于Cesium的钻孔数据三维可视化实战：从数据处理到性能优化

1次阅读

没有评论

共计 3433 个字符，预计需要花费 9 分钟才能阅读完成。

地质勘探中的钻孔数据可视化一直是个技术难题，主要原因有：

非结构化数据：钻孔数据通常以 CSV 或 Excel 表格形式存储，包含深度、岩性、含水量等多维信息，难以直接用于三维渲染
Z 轴比例失真：地表以下的数据在常规三维坐标系中容易被压缩，导致细节无法清晰展示
大规模数据渲染：一个勘探区域可能有数百个钻孔，每个钻孔包含数十层岩性数据，传统 WebGL 方案很容易出现性能瓶颈

对比主流 WebGL 引擎：

Three.js：
优点：灵活性强，社区资源丰富
缺点：需要手动处理地理坐标系转换，地形集成复杂
Babylon.js：
优点：物理引擎集成好，适合交互场景
缺点：地理空间数据支持较弱
Cesium：
内置 WGS84 坐标系支持，完美匹配地质数据
成熟的地形和影像服务集成
专为大规模地理数据优化的渲染管线

典型钻孔 CSV 格式示例：

hole_id,longitude,latitude,depth_from,depth_to,lithology
BH-01,116.3912,39.9078,0,5,clay
BH-01,116.3912,39.9078,5,15,sandstone

转换为 CZML 的 Python 脚本：

import pandas as pd
import json

df = pd.read_csv('boreholes.csv')
czml = [{
    "id": "document",
    "version": "1.0"
}]

for _, row in df.iterrows():
    czml.append({"id": f"{row['hole_id']}-{row['depth_from']}",
        "position": {"cartographicDegrees": [row['longitude'], row['latitude'], -row['depth_to']]
        },
        "cylinder": {"length": row['depth_to'] - row['depth_from'],
            "topRadius": 0.5,
            "bottomRadius": 0.5,
            "material": {
                "solidColor": {
                    "color": {"rgba": get_color_by_lithology(row['lithology'])
                    }
                }
            }
        }
    })

with open('boreholes.czml', 'w') as f:
    json.dump(czml, f)

关键 JavaScript 代码：

const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain()
});

const dataSource = new Cesium.CustomDataSource('boreholes');
viewer.dataSources.add(dataSource);

Cesium.CzmlDataSource.load('boreholes.czml').then(ds => {
    // 应用高度夸张系数解决 Z 轴压缩问题
    ds.entities.values.forEach(entity => {
        entity.position = new Cesium.CallbackProperty(time => {
            const pos = Cesium.Cartographic.fromDegrees(entity.position.getValue(time).longitude,
                entity.position.getValue(time).latitude,
                entity.position.getValue(time).height * 20 // 垂直 exaggeration
            );
            return Cesium.Cartesian3.fromRadians(pos.longitude, pos.latitude, pos.height);
        }, false);
    });
    dataSource.entities.add(ds.entities);
});

viewer.scene.preUpdate.addEventListener(() => {
    const cameraHeight = viewer.camera.positionCartographic.height;
    dataSource.entities.values.forEach(entity => {
        const distance = Cesium.Cartesian3.distance(
            viewer.camera.position,
            entity.position.getValue(viewer.clock.currentTime)
        );
        entity.show = distance < cameraHeight * 0.5; // 动态显示范围

        // 根据距离调整钻孔半径
        if (entity.cylinder) {
            entity.cylinder.topRadius = Cesium.Math.lerp(
                0.2, 2.0, 
                Cesium.Math.clamp(1 - distance / 10000, 0, 1)
            );
            entity.cylinder.bottomRadius = entity.cylinder.topRadius;
        }
    });
});

主线程：

const worker = new Worker('dataProcessor.js');
worker.postMessage({command: 'load', url: 'boreholes.csv'});

worker.onmessage = (e) => {if (e.data.type === 'czml') {Cesium.CzmlDataSource.load(e.data.payload).then(/*...*/);
    }
};

Worker 脚本：

self.importScripts('https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js');

self.onmessage = (e) => {if (e.data.command === 'load') {
        Papa.parse(e.data.url, {
            download: true,
            complete: (results) => processData(results.data)
        });
    }
};

function processData(rows) {/* 转换逻辑 */}

使用 Cesium.Math.toRadians 替代直接使用经纬度值
对于高精度需求，启用Cesium.VertexFormat.POSITION_AND_HEIGHT

// 在开发者工具中定期执行
function checkMemory() {
    const entities = viewer.entities.values;
    console.log(`Entity count: ${entities.length}`);
    console.log(`Buffer memory: ${viewer.scene.context._gl.getParameter(viewer.scene.context._gl.GPU_MEMORY_INFO_CURRENT_AVAILABLE_VIDMEM_MB)}MB`);
}

在初始化时检测设备：

const isMobile = /Mobi|Android/i.test(navigator.userAgent);
if (isMobile) {
    viewer.resolutionScale = 0.5;
    viewer.scene.highDynamicRange = false;
}