Merge pull request #2031 from TerriaJS/rd_wps_linestring

Geojson linestring in known WPS input parameters

CHANGES.md

@@ -12,6 +12,7 @@ Change Log
 * Improved rendering speed when changing the display variable for large lat/lon csv files.
 * Default to moving feature csvs if a time, lat, lon and a column named `id` are present.
 * Fixed a bug so units flow through to charts of moving csv features.
+* Added the ability to pass a LineString to a Web Processing Service.
 
 ### 4.3.2
 

lib/Models/LineParameter.js

@@ -0,0 +1,63 @@
+'use strict';
+
+/*global require*/
+var defineProperties = require('terriajs-cesium/Source/Core/defineProperties');
+var defined = require('terriajs-cesium/Source/Core/defined');
+var FunctionParameter = require('./FunctionParameter');
+var inherit = require('../Core/inherit');
+
+/**
+ * A parameter that specifies a line on the globe.
+ *
+ * @alias LineParameter
+ * @constructor
+ * @extends FunctionParameter
+ *
+ * @param {Object} options Object with the following properties:
+ * @param {Terria} options.terria The Terria instance.
+ * @param {String} options.id The unique ID of this parameter.
+ * @param {String} [options.name] The name of this parameter. If not specified, the ID is used as the name.
+ * @param {String} [options.description] The description of the parameter.
+ * @param {Boolean} [options.defaultValue] The default value.
+ */
+var LineParameter = function(options) {
+    FunctionParameter.call(this, options);
+
+    this.defaultValue = options.defaultValue;
+};
+
+inherit(FunctionParameter, LineParameter);
+
+defineProperties(LineParameter.prototype, {
+    /**
+     * Gets the type of this parameter.
+     * @memberof LineParameter.prototype
+     * @type {String}
+     */
+    type: {
+        get: function() {
+            return 'line';
+        }
+    },
+});
+
+LineParameter.prototype.formatValueAsString = function(value) {
+    if (!defined(value)) {
+        return '-';
+    }
+
+    let line = '';
+    for (let i = 0; i < value.length; i++) {
+        line += '[' + value[i][0].toFixed(3) + ', ' + value[i][1].toFixed(3) + ']';
+        if (i !== value.length - 1) {
+            line += ', ';
+        }
+    }
+    if (line.length > 0) {
+        return line;
+    } else {
+        return '';
+    }
+};
+
+module.exports = LineParameter;

lib/Models/PolygonParameter.js

@@ -46,7 +46,20 @@ PolygonParameter.prototype.formatValueAsString = function(value) {
         return '-';
     }
 
-    return value;
+    const pointsLongLats = value[0];
+
+    let polygon = '';
+    for (let i = 0; i < pointsLongLats.length; i++) {
+        polygon += '[' + pointsLongLats[i][0].toFixed(3) + ', ' + pointsLongLats[i][1].toFixed(3) + ']';
+        if (i !== pointsLongLats.length - 1) {
+            polygon += ', ';
+        }
+    }
+    if (polygon.length > 0) {
+        return '[' + polygon + ']';
+    } else {
+        return '';
+    }
 };
 
 module.exports = PolygonParameter;

lib/Models/WebProcessingServiceCatalogFunction.js

@@ -2,6 +2,7 @@
 
 /*global require*/
 var ResultPendingCatalogItem = require('./ResultPendingCatalogItem');
+var LineParameter = require('./LineParameter');
 var RectangleParameter = require('./RectangleParameter');
 var PolygonParameter = require('./PolygonParameter');
 var CatalogFunction = require('./CatalogFunction');
@@ -224,6 +225,49 @@ WebProcessingServiceCatalogFunction.parameterConverters = [
             });
         }
     },
+    {
+         id: 'LineGeometry',
+         inputToFunctionParameter: function(catalogFunction, input) {
+             if (!defined(input.ComplexData) || !defined(input.ComplexData.Default) || !defined(input.ComplexData.Default.Format) || !defined(input.ComplexData.Default.Format.Schema)) {
+                 return undefined;
+             }
+
+             var schema = input.ComplexData.Default.Format.Schema;
+             if (schema.indexOf('http://geojson.org/geojson-spec.html#') !== 0) {
+                 return undefined;
+             }
+
+             if (schema.substring(schema.lastIndexOf('#') + 1) !== 'linestring') {
+                 return undefined;
+             }
+
+             return new LineParameter({
+                 terria: catalogFunction.terria,
+                 id: input.Identifier,
+                 name: input.Title,
+                 description: input.Abstract,
+                 isRequired: (input.minOccurs | 0) > 0
+             });
+         },
+         functionParameterToInput: function(catalogFunction, parameter, value) {
+             if (!defined(value) || value === '') {
+                 return undefined;
+             }
+
+             return parameter.id + '=' + JSON.stringify({
+                 'type': 'FeatureCollection',
+                 'features': [
+                     {
+                         'type': 'Feature',
+                         'geometry': {
+                             'type': 'LineString',
+                             'coordinates': value
+                         }
+                     }
+                 ]
+             });
+         }
+    },
     {
          id: 'PolygonGeometry',
          inputToFunctionParameter: function(catalogFunction, input) {

lib/Models/WebProcessingServiceCatalogItem.js

@@ -3,6 +3,7 @@
 /*global require*/
 var RectangleParameter = require('./RectangleParameter');
 var PolygonParameter = require('./PolygonParameter');
+var LineParameter = require('./LineParameter');
 var CatalogItem = require('./CatalogItem');
 var CesiumMath = require('terriajs-cesium/Source/Core/Math');
 var defined = require('terriajs-cesium/Source/Core/defined');
@@ -155,6 +156,20 @@ WebProcessingServiceCatalogItem.prototype._load = function() {
                 }
             };
         }
+        var firstLineParameter = this.parameters.filter(function(parameter) { return parameter instanceof LineParameter; })[0];
+        if (defined(firstLineParameter)) {
+            var lineCoords = this.parameterValues[firstLineParameter.id];
+            geojson = {
+                type: 'Feature',
+                geometry: {
+                    type: 'LineString',
+                    coordinates: lineCoords
+                },
+                properties: {
+                    title: firstLineParameter.name,
+                }
+            };
+        }
     }
 
     var wpsResponsePromise;

lib/ReactViews/Analytics/LineParameterEditor.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+
+import CesiumMath from 'terriajs-cesium/Source/Core/Math';
+import defined from 'terriajs-cesium/Source/Core/defined';
+import Ellipsoid from 'terriajs-cesium/Source/Core/Ellipsoid';
+
+import UserDrawing from '../../Models/UserDrawing';
+import ObserveModelMixin from '../ObserveModelMixin';
+import Styles from './parameter-editors.scss';
+
+const LineParameterEditor = React.createClass({
+    mixins: [ObserveModelMixin],
+
+    propTypes: {
+        previewed: React.PropTypes.object,
+        parameter: React.PropTypes.object,
+        viewState: React.PropTypes.object
+    },
+
+    getInitialState() {
+        return {
+            value: this.getValue(),
+            userDrawing: new UserDrawing(
+                {
+                    terria: this.props.previewed.terria,
+                    onPointClicked: this.onPointClicked,
+                    onCleanUp: this.onCleanUp,
+                    allowPolygon: false
+                })
+        };
+    },
+
+    onTextChange(e) {
+        this.setValue(e.target.value);
+        this.setState({
+            value: e.target.value
+        });
+    },
+
+    getValue() {
+        const pointsLongLats = this.props.previewed.parameterValues[this.props.parameter.id];
+        if (!defined(pointsLongLats) || pointsLongLats.length < 1) {
+            return '';
+        }
+
+        let line = '';
+        for (let i = 0; i < pointsLongLats.length; i++) {
+            line += '[' + pointsLongLats[i][0].toFixed(3) + ', ' + pointsLongLats[i][1].toFixed(3) + ']';
+            if (i !== pointsLongLats.length - 1) {
+                line += ', ';
+            }
+        }
+        if (line.length > 0) {
+            return line;
+        } else {
+            return '';
+        }
+    },
+
+    setValue(value) {
+        this.setState({
+            value: value
+        });
+    },
+
+    onCleanUp() {
+        this.props.viewState.openAddData();
+    },
+
+    onPointClicked(pointEntities) {
+        const pointEnts = pointEntities.entities.values;
+        const pointsLongLats = [];
+        for (let i=0; i < pointEnts.length; i++) {
+            const currentPoint = pointEnts[i];
+            const currentPointPos = currentPoint.position.getValue(this.props.previewed.terria.clock.currentTime);
+            const cartographic = Ellipsoid.WGS84.cartesianToCartographic(currentPointPos);
+            const points = [];
+            points.push(CesiumMath.toDegrees(cartographic.longitude));
+            points.push(CesiumMath.toDegrees(cartographic.latitude));
+            pointsLongLats.push(points);
+        }
+        this.props.previewed.setParameterValue(this.props.parameter.id, pointsLongLats);
+    },
+
+    selectLineOnMap() {
+        this.state.userDrawing.enterDrawMode();
+        this.props.viewState.explorerPanelIsVisible = false;
+    },
+
+    render() {
+        return (
+            <div>
+                <input className={Styles.parameterEditor}
+                       type="text"
+                       onChange={this.onTextChange}
+                       value={this.state.value}/>
+                <button type="button"
+                        onClick={this.selectLineOnMap}
+                        className={Styles.btnSelector}>
+                    Click to draw line
+                </button>
+            </div>
+        );
+    }
+});
+
+module.exports = LineParameterEditor;

lib/ReactViews/Analytics/ParameterEditor.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import ObserveModelMixin from '../ObserveModelMixin';
 import PointParameterEditor from './PointParameterEditor';
+import LineParameterEditor from './LineParameterEditor';
 import RectangleParameterEditor from './RectangleParameterEditor';
 import PolygonParameterEditor from './PolygonParameterEditor';
 import RegionParameterEditor from './RegionParameterEditor';
@@ -33,6 +34,12 @@ const ParameterEditor = React.createClass({
                     viewState={this.props.viewState}
                     parameter={this.props.parameter}
                 />);
+            case 'line':
+                return <LineParameterEditor
+                    previewed={this.props.previewed}
+                    viewState={this.props.viewState}
+                    parameter={this.props.parameter}
+                />;
             case 'rectangle':
                 return <RectangleParameterEditor
                     previewed={this.props.previewed}