Optional vtkjs

examples/vtkjs/main.js

@@ -0,0 +1,69 @@
+var exampleDebug = {};
+
+// Run after the DOM loads
+$(function () {
+  'use strict';
+
+  var capitals;
+  $.when(
+    /* Fetch capitals */
+    $.ajax({url: 'capitals.json'}).done(function (resp) {
+      capitals = resp;
+    })
+  ).then(function () {
+
+    // Set map defaults to a reasonable center and zoom level
+    var mapParams = {
+      node: '#map',
+      center: {x: 0, y: 0},
+      zoom: 2.5,
+      clampBoundsX: false,
+      clampBoundsY: false,
+      clampZoom: false,
+      discreteZoom: false
+    };
+    // Set the tile layer defaults
+    var layerParams = {
+      zIndex: 0,
+      minLevel: 4,
+      keepLower: true,
+      wrapX: false,
+      wrapY: false
+    };
+    // Create a map object
+    var map = geo.map(mapParams);
+    // Add the tile layer with the specified parameters
+    var osmLayer = map.createLayer('osm', layerParams);
+    // Set the vtk feature layer params
+    var vtkLayerParams = {
+      renderer: 'vtkjs'
+    };
+    // Create a vtk point feature layer
+    var vtkLayer = map.createLayer('feature', vtkLayerParams);
+    var pointFeature = vtkLayer
+      .createFeature('point', {
+        selectionAPI: true,
+        style: {
+          radius: 100,                            // sphere radius (~0.1km)
+          fillColor: 'red',
+          fillOpacity: function () {
+            return Math.random();
+          }
+        }
+      })
+    .data(capitals)                                               // bind data
+    .position(function (d) {
+      return {x: d.longitude, y: d.latitude};           // position accessor
+    })
+    .draw();
+
+    // Make variables available as a global for easier debug
+    exampleDebug.map = map;
+    exampleDebug.mapParams = mapParams;
+    exampleDebug.layerParams = layerParams;
+    exampleDebug.osmLayer = osmLayer;
+    exampleDebug.vtkLayerParams = vtkLayerParams;
+    exampleDebug.vtkLayer = vtkLayer;
+    exampleDebug.pointFeature = pointFeature;
+  });
+});

package.json

@@ -26,7 +26,8 @@
   },
   "optionalDependencies": {
     "d3": "^3.5.16",
-    "hammerjs": "^2.0.8"
+    "hammerjs": "^2.0.8",
+    "vtk.js": "^5.15.6"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
@@ -89,7 +90,8 @@
     "raw-body": "^2.1.6",
     "resemblejs": "^2.9.0",
     "serve-index": "^1.9.1",
-    "sinon": "^1.17.3",
+    "sinon": "^1.17.7",
+    "string-replace-loader": "1.0.5",
     "string-replace-webpack-plugin": "^0.1.3",
     "style-loader": "^0.21.0",
     "stylus": "^0.54.5",

src/index.js

@@ -86,6 +86,7 @@ module.exports = $.extend({
   d3: require('./d3'),
   gl: require('./gl'),
   canvas: require('./canvas'),
+  vtkjs: require('./vtkjs'),
   gui: require('./ui')
 }, require('./registry'));
 

src/ui/legendWidget.js

@@ -71,7 +71,7 @@ var legendWidget = function (arg) {
 
   /**
    * Get the widget's size
-   * @return {{width: number, height: number}} The size in pixels
+   * @returns {{width: number, height: number}} The size in pixels
    */
   this.size = function () {
     var width = 1, height;

src/ui/sliderWidget.js

@@ -51,11 +51,11 @@ var sliderWidget = function (arg) {
    * Add an icon from a path string.  Returns a d3 group element.
    *
    * @function
-   * @argument {String} icon svg path string
+   * @argument {string} icon svg path string
    * @argument {Array} base where to append the element (d3 selection)
-   * @argument {Number} cx Center x-coordinate
-   * @argument {Number} cy Center y-coordinate
-   * @argument {Number} size Icon size in pixels
+   * @argument {number} cx Center x-coordinate
+   * @argument {number} cy Center y-coordinate
+   * @argument {number} size Icon size in pixels
    * @returns {object}
    * @private
    */

src/vtkjs/index.js

@@ -0,0 +1,7 @@
+/**
+ * @namespace geo.vtkjs
+ */
+module.exports = {
+  pointFeature: require('./pointFeature'),
+  vtkjsRenderer: require('./vtkjsRenderer')
+};

src/vtkjs/pointFeature.js

@@ -0,0 +1,146 @@
+var inherit = require('../inherit');
+var registerFeature = require('../registry').registerFeature;
+var pointFeature = require('../pointFeature');
+
+/**
+ * Create a new instance of pointFeature
+ *
+ * @class geo.vtkjs.pointFeature
+ * @extends geo.pointFeature
+ * @returns {geo.vtkjs.pointFeature}
+ */
+var vtkjs_pointFeature = function (arg) {
+  'use strict';
+  if (!(this instanceof vtkjs_pointFeature)) {
+    return new vtkjs_pointFeature(arg);
+  }
+  arg = arg || {};
+  pointFeature.call(this, arg);
+
+  var transform = require('../transform');
+  var object = require('../object');
+  var vtk = require('./vtkjsRenderer').vtkjs;
+  var vtkActor = vtk.Rendering.Core.vtkActor;
+  var vtkMapper = vtk.Rendering.Core.vtkGlyph3DMapper;
+  var vtkPointSet = vtk.Common.DataModel.vtkPointSet;
+  var vtkSphereSource = vtk.Filters.Sources.vtkSphereSource;
+
+  object.call(this);
+
+  /**
+   * Member variables
+   *
+   * @private
+   */
+  var m_this = this,
+      s_exit = this._exit,
+      m_actor = null,
+      m_pointSet = null,
+      m_source = null,
+      s_update = this._update;
+
+  /**
+   * Create pipeline
+   */
+  this._createPipeline = function () {
+    m_pointSet = vtkPointSet.newInstance();
+    m_source = vtkSphereSource.newInstance();
+    m_source.setThetaResolution(30);
+    m_source.setPhiResolution(30);
+    var mapper = vtkMapper.newInstance();
+    mapper.setInputData(m_pointSet, 0);
+    mapper.setInputConnection(m_source.getOutputPort(), 1);
+    m_actor = vtkActor.newInstance();
+    m_actor.setMapper(mapper);
+    this.renderer().contextRenderer().addActor(m_actor);
+  };
+
+  /**
+   * Initialize
+   */
+  this._init = function () {
+    m_this.renderer().contextRenderer().setLayer(1);
+    this._createPipeline();
+  };
+
+  /**
+   * Build this feature
+   */
+  this._build = function () {
+    var i, i3, posVal,
+        nonzeroZ,
+        numPts = m_this.data().length,
+        position = new Array(numPts * 3),
+        data = m_this.data(),
+        posFunc = m_this.position(),
+        radFunc = m_this.style.get('radius'),
+        colorFunc = m_this.style.get('fillColor'),
+        opacityFunc = m_this.style.get('fillOpacity');
+
+    /* It is more efficient to do a transform on a single array rather than on
+      * an array of arrays or an array of objects. */
+    for (i = i3 = 0; i < numPts; i += 1, i3 += 3) {
+      posVal = posFunc(data[i]);
+      position[i3] = posVal.x;
+      position[i3 + 1] = posVal.y;
+      position[i3 + 2] = posVal.z || 0;
+      nonzeroZ = nonzeroZ || position[i3 + 2];
+      m_actor.getProperty().setOpacity(opacityFunc(data[i]));
+    }
+    position = transform.transformCoordinates(
+      m_this.gcs(), m_this.layer().map().gcs(),
+      position, 3);
+
+    if (!nonzeroZ && m_this.gcs() !== m_this.layer().map().gcs()) {
+      for (i = i3 = 0; i < numPts; i += 1, i3 += 3) {
+        position[i3 + 2] = 0;
+      }
+    }
+
+    /* Some transforms modify the z-coordinate.  If we started with all zero z
+     * coordinates, don't modify them.  This could be changed if the
+     * z-coordinate space of the gl cube is scaled appropriately. */
+    m_pointSet.getPoints().setData(position, 3);
+    m_source.setRadius(radFunc());
+    m_actor.getProperty().setColor(colorFunc()['r'],
+                                   colorFunc()['g'],
+                                   colorFunc()['b']);
+    m_this.buildTime().modified();
+
+    console.debug('built vtkjs point feature');
+  };
+
+  /**
+   * Update
+   *
+   */
+  this._update = function () {
+
+    s_update.call(m_this);
+
+    if (m_this.dataTime().getMTime() >= m_this.buildTime().getMTime() ||
+        m_this.updateTime().getMTime() < m_this.getMTime()) {
+      m_this._build();
+    }
+
+    m_this.updateTime().modified();
+  };
+
+  /**
+   * Destroy
+   */
+  this._exit = function () {
+    m_this.renderer().contextRenderer().removeActor(m_actor);
+    s_exit();
+  };
+
+  m_this._init();
+  return this;
+};
+
+inherit(vtkjs_pointFeature, pointFeature);
+
+// Now register it
+registerFeature('vtkjs', 'point', vtkjs_pointFeature);
+
+module.exports = vtkjs_pointFeature;