其他分享
首页 > 其他分享> > 【VTK】使用vtkjs绘制地质油藏数据之二-数据展示

【VTK】使用vtkjs绘制地质油藏数据之二-数据展示

作者:互联网

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="vtk.js"></script>
    <script type="text/javascript" src="libs/jquery-3.4.1.min.js"></script>
    <title>ZMap</title>
    <style>
    </style>
</head>

<body>
    <div class="content"></div>
    <script>
        var dataUrl = 'data/elevation/base_zmap_convert.csv';
        var imgUrl = 'data/elevation/dem.jpg';

        // ----------------------------------------------------------------------------
        // Standard rendering code setup
        // ----------------------------------------------------------------------------

        const fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
            background: [0, 0, 0],
        });
        const renderer = fullScreenRenderer.getRenderer();
        const renderWindow = fullScreenRenderer.getRenderWindow();

        // ----------------------------------------------------------------------------
        // Example code
        // ----------------------------------------------------------------------------
        var model = {
            origin: [0, 0, 0],
            xSpacing: 0.01568,
            ySpacing: 0.01568,
            zScaling: 0.08888,
            xDirection: 1,
            yDirection: -1,
            requestCount: 0,
        }


        $.ajax({
                // 后端程序的url地址
                url: dataUrl,
                // 也可以使用method,提交数据的方式,默认是'GET',常用的还有'POST'
                type: 'get',
                //dataType: 'json',  // 返回的数据格式,常用的有是'json','html',"jsonp"
                data: { // 设置发送给服务器的数据,如果是get请求,也可以写在url地址的?后面
                    "id": '100001'
                }
            })
            .done(function (resp) { // 请求成功以后的操作
                console.log(resp);
                model.csv = resp;
                model.elevation = [];

                // Parse data
                const lines = model.csv.split('\n');
                lines.forEach((line, lineIdx) => {
                    model.elevation.push(line.split(',').map((str) => Number(str)));
                });

                const polydata = vtk.Common.DataModel.vtkPolyData.newInstance();
                polydata.getPoints().setData(new Float32Array(0, 0, 0, 1, 1, 1), 3);

                if (model.elevation) {
                    const jSize = model.elevation.length;
                    const iSize = model.elevation[0].length;

                    // Handle points and polys
                    const points = polydata.getPoints();
                    points.setNumberOfPoints(iSize * jSize, 3);
                    const pointValues = points.getData();

                    const polys = vtk.Common.Core.vtkCellArray.newInstance({
                        size: 5 * (iSize - 1) * (jSize - 1),
                    });
                    polydata.setPolys(polys);
                    const polysValues = polys.getData();
                    let cellOffset = 0;

                    // Texture coords
                    const tcData = new Float32Array(iSize * jSize * 2);
                    const tcoords = vtk.Common.Core.vtkDataArray.newInstance({
                        numberOfComponents: 2,
                        values: tcData,
                        name: 'TextureCoordinates',
                    });
                    polydata.getPointData().setTCoords(tcoords);

                    for (let j = 0; j < jSize; j++) {
                        for (let i = 0; i < iSize; i++) {
                            const offsetIdx = j * iSize + i;
                            const offsetPt = 3 * offsetIdx;

                            // Fill points coordinates
                            pointValues[offsetPt + 0] =
                                model.origin[0] + i * model.xSpacing * model.xDirection;
                            pointValues[offsetPt + 1] =
                                model.origin[1] + j * model.ySpacing * model.yDirection;
                            pointValues[offsetPt + 2] =
                                model.origin[2] + model.elevation[j][i] * model.zScaling;

                            // fill in tcoords
                            tcData[offsetIdx * 2] = i / (iSize - 1.0);
                            tcData[offsetIdx * 2 + 1] = 1.0 - j / (jSize - 1.0);

                            // Fill polys
                            if (i > 0 && j > 0) {
                                polysValues[cellOffset++] = 4;
                                polysValues[cellOffset++] = offsetIdx;
                                polysValues[cellOffset++] = offsetIdx - 1;
                                polysValues[cellOffset++] = offsetIdx - 1 - iSize;
                                polysValues[cellOffset++] = offsetIdx - iSize;
                            }
                        }
                    }
                }

                const mapper = vtk.Rendering.Core.vtkMapper.newInstance();
                const actor = vtk.Rendering.Core.vtkActor.newInstance();

                mapper.setInputData(polydata);
                actor.setMapper(mapper);

                renderer.addActor(actor);
                renderer.resetCamera();
                renderWindow.render();
            })
            .fail(function (error) { // 请求失败以后的操作
                console.log(error);
            });
    </script>
    <script>
        const head = document.querySelector('head');

        if (head) {
            [16, 32, 96, 160, 196].forEach((resolution) => {
                const link = document.createElement('link');
                link.setAttribute('rel', 'icon');
                link.setAttribute(
                    'href',
                    `favicon-${resolution}x${resolution}.png`
                );
                link.setAttribute('sizes', `${resolution}x${resolution}`);
                link.setAttribute('type', 'image/png');
                head.appendChild(link);
            });
        }
    </script>
</body>

</html>

阶段成果:

 

 

 

 

 

 研究目标:

 

 

 

标签:const,vtkjs,油藏,++,VTK,offsetIdx,elevation,model,iSize
来源: https://www.cnblogs.com/defineconst/p/12467305.html