vtk.js cell data + graticules + continents

by Patrick Brockmann

HTML

<script src="https://unpkg.com/vtk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<button type="button" id="data1">data1</button>
<button type="button" id="data2">data2</button>
<button type="button" id="edges">Edges</button>

CSS

button {
  z-index: 1000;
  position: relative;
}

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)
  ];
}

//==============================================================================================
function createLineSegments(multilinestring) {

  var polydata = vtk.Common.DataModel.vtkPolyData.newInstance();

  var vertexArray = [];
  var lineArray = [];
  var n = 0;
  for (var p = 0; p < multilinestring.coordinates.length; p++) {
    var line = multilinestring.coordinates[p];
    lineArray.push(line.length);
    for (var i = 0; i < line.length; i++) {
      var xyz = vertex(line[i], 1.001);
      vertexArray.push(xyz[0], xyz[1], xyz[2]);
      lineArray.push(n++);
    }
    polydata.getPoints().setData(Float32Array.from(vertexArray), 3);
    polydata.getLines().setData(Uint16Array.from(lineArray));
  }
  return polydata;
}

//==============================================================================================
// See https://github.com/d3/d3-geo/issues/95
function graticule10() {
  var epsilon = 1e-6,
    x1 = 180,
    x0 = -x1,
    y1 = 80,
    y0 = -y1,
    dx = 10,
    dy = 10,
    X1 = 180,
    X0 = -X1,
    Y1 = 90,
    Y0 = -Y1,
    DX = 90,
    DY = 360,
    x = graticuleX(y0, y1, 2.5),
    y = graticuleY(x0, x1, 2.5),
    X = graticuleX(Y0, Y1, 2.5),
    Y = graticuleY(X0, X1, 2.5);

  function graticuleX(y0, y1, dy) {
    var y = d3.range(y0, y1 - epsilon, dy).concat(y1);
    return function(x) {
      return y.map(function(y) {
        return [x, y];
      });
    };
  }

  function graticuleY(x0, x1, dx) {
    var x =...