<!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('
');
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>
阶段成果：
研究目标：
