vtk.js

json to polydata lines

by Patrick Brockmann

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://unpkg.com/vtk.js@8.9.1/dist/vtk.js"></script>

JavaScript

//==============================================================================================
const radius = 100;

function vertex(point, scaleFactor) {
  var radius1 = radius * scaleFactor;
  var lambda = point[0] * Math.PI / 180,
    phi = point[1] * Math.PI / 180,
    cosPhi = Math.cos(phi);
  return [
    radius1 * cosPhi * Math.cos(lambda),
    radius1 * cosPhi * Math.sin(lambda),
    radius1 * Math.sin(phi)
  ];
}

//==============================================================================================
var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
var renderer = fullScreenRenderer.getRenderer();
var renderWindow = fullScreenRenderer.getRenderWindow();

d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, data) {
  if (error) {
    throw error;
  }

  var multilinestring = topojson.mesh(data, data.objects.land);

  var polydata = vtk.Common.DataModel.vtkPolyData.newInstance();
  var vertexCount = 0;
  var vertexArray = [];
  var cellArray = [];

  for (var p = 0; p < multilinestring.coordinates.length; p++) {
    line = multilinestring.coordinates[p];
    console.log(line.length);
    cellArray.push(line.length);
    for (var i = 0; i < line.length; i++) {
      var xyz = vertex(line[i], 1.001); // calculate a projection (return xyz)
      cellArray.push(vertexCount++);
      vertexArray.push(xyz[0], xyz[1], xyz[2]);
    }
  }

  polydata.getPoints().setData(Float32Array.from(vertexArray), 3);
  polydata.getLines().setData(Uint16Array.from(cellArray));

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

  actor.setMapper(mapper);
  actor.getProperty().setColor(1.0, 1.0, 1.0);
  actor.getProperty().setAmbient(1);
  actor.getProperty().setDiffuse(0);
  mapper.setInputData(polydata);

  renderer.addActor(actor);
  renderer.resetCamera();
  renderWindow.render();
});