基于INT实现三维空间下属性数据的绘制和颜色控制的设计开发

         最近继去年的一篇文章进行了拓展研究开发，大家知道基于INT或GeoToolkit默认自带的Contour或PillarSurfaceData的三维曲面绘制方法，对于很多复杂情况是无法实现的，比如三维空间存在不单调的断棱（有时叫断柱），实际数据是三维空间中的随机散点数据等等，同时，用户需求一般在三维空间中除去显示三维空间格架以外，更重要的是在此格架显示不同研究属性的三维分布和变化情况等等，目前已有的做法是无法满足需求。因此，本文主要在之前文章的基础上，拓展了三维曲面显示交互功能。本文主要基于GeoToolKit/INT的Surface和SurfaceData组件，拓展其数据结构和交互显示功能，基于用户自定义的散点数据，为用户实现了在三维空间下，不同地层属性的灵活显示和切换，有关自定义颜色栏请参考另一篇文章。具体如下。

一、演示效果

1.三维曲面格架+z值控制深度+属性控制颜色栏效果图

2.三维曲面格架+属性控制深度和颜色栏效果图

二、主体核心代码

主要采用VUE+JavaScript+GeotoolKit.JS，充分利用VUE的组件化设计思想，结合elementui的el-dialog组件，以及GeotoolKit.JS的ColorProvider，Surface和SurfaceData组件。具体前端核心代码如下。实现了任意类型曲面数据的三维显示和交互操作等，后续加入性能优化方式，提升散点数据的解析和显示效率。

// 基于散点绘制三维曲面，解析四列数据，地层框架是xyz，value和颜色值用属性A
function createScene3 (divElement,xyzaData,yName) {  
    const camera = new Vector3(1000, 1000, 45000);  
    const position = new Vector3(0, 0, 0);  
    plot = createPlot(divElement, camera, position);  
    // 获取散点数据  
    data = getPoints(xyzaData);  
    createSurface3();  
    plot.setOptions({'scale': new Vector3(1, 1, 6)});  
}
function createSurface3 () {  
    const surfaceData = new SurfaceData({  
        'data': {  
            'x': data['x'],  
            'y': data['y'],  
            'z': data['z'],  
            'values': data['A']  
        },  
        'unorderedtriangulation': {  
            'enable': true,  
            'enablefiltergaps': filterGaps,  
            'filtergapsthreshold': filterThreshold  
        }  
    });  
    // 颜色栏的色标用属性数据。  
    const midValue = data['amin'] + (data['amax'] - data['amin']) / 2;  
    colorProvider=new DefaultColorProvider({// Set colormap  
        'values': [data['amin'], midValue, data['amax']],  
        'colors': ['blue','LightBlue','pink' ]  
    })  
    surface = new Surface({  
        'data': {  
            'surface': surfaceData  
        },  
        'smoothshadingfactor': smoothFactor,  
        'wireframe': wireFrameMode,  
        // 'colorprovider':'pink'  
        'colorprovider': colorProvider,  
        // 'colorprovider': 'darkred',  
        'opacity': 0.6  
    });  
  
    console.log('colorprovider=',colorProvider);  
    plot.getRoot().add(surface);  
}
// 根据XYZA数据，设计新的数据结构组织数据，详见result
function getPoints(tableData){  
    // 获取x/y/z的最大最小值  
    let xmin=0,xmax=0,ymin=0,ymax=0,zmin=0,zmax=0,amin=0,amax=0;  
    // 获取xyza数据  
    let xx=[],yy=[],zz=[],AA=[];  
    for (let i = 0; i < tableData.length; i++) {  
        // 传过来的是4列数据组成的字符串，中间用逗号(,)分隔，需要进行拆分。  
        const temp = tableData[i];  
        let row = temp.split(',')  
        xx.push(Math.floor(row[0]));  
        yy.push(Math.floor(row[1]));  
        zz.push(Math.floor(row[2])*-1);  
        AA.push(Math.floor(row[3])*-1);  
    }  
    // 获取最大最小值，为了后续的网格化处理用 
    // ...
    // 定义返回数据结构  
    const result = {  
        'nullvalue': -9999.25,  
        'xmin': xmin,  
        'xmax': xmax,  
        'ymin': ymin,  
        'ymax': ymax,  
        'zmin': zmin,  
        'zmax': zmax,  
        'amin': amin,//属性最小值,  
        'amax': amax//属性最大值  
    };  
    let stepx=1500;// 网格大小-x  
    let stepy=1000;// 网格大小-y  
    result['x'] = [];  
    result['y'] = [];  
    result['z'] = [];  
    result['A'] = [];  
    const nbXvalue = result['xmax'] - result['xmin'] + 1;  
    const nbYvalue = result['ymax'] - result['ymin'] + 1;  
    for (let y = 0; y < (nbYvalue); y+=stepy) {  
        for (let x = 0; x < (nbXvalue); x+=stepx) {  
            let x1=result['xmin'] + x;  
            let y1=result['ymin'] + y;  
            let z1=result['nullvalue'];  
            let A1=result['nullvalue'];  
            for (let k = 0; k < xx.length; k++) {  
                // 以网格大小为中心点，用实际散点的z值数据进行赋值填充  
                ...
            }  
            // 只保留有效值，并将其填充到result。  
            if(z1!=result['nullvalue']){  
                result['x'].push(x1);  
                result['y'].push(y1);  
                result['z'].push(z1);  
                result['A'].push(A1);  
            }
        }  
    }  
    return result;  
}