-
Notifications
You must be signed in to change notification settings - Fork 362
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7194 from TerriaJS/wps-bbox
Wps bbox
- Loading branch information
Showing
4 changed files
with
162 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| "use strict"; | ||
|
|
||
| import React from "react"; | ||
|
|
||
| import PropTypes from "prop-types"; | ||
|
|
||
| import defined from "terriajs-cesium/Source/Core/defined"; | ||
|
|
||
| import Styles from "./parameter-editors.scss"; | ||
|
|
||
| import CesiumMath from "terriajs-cesium/Source/Core/Math"; | ||
| import Cartographic from "terriajs-cesium/Source/Core/Cartographic"; | ||
| import Ellipsoid from "terriajs-cesium/Source/Core/Ellipsoid"; | ||
| import UserDrawing from "../../Models/UserDrawing"; | ||
| import { withTranslation } from "react-i18next"; | ||
| import { observer } from "mobx-react"; | ||
| import { runInAction } from "mobx"; | ||
| import CommonStrata from "../../Models/Definition/CommonStrata"; | ||
| import { t } from "i18next"; | ||
|
|
||
| @observer | ||
| class RectangleParameterEditor extends React.Component { | ||
| static propTypes = { | ||
| previewed: PropTypes.object, | ||
| parameter: PropTypes.object, | ||
| viewState: PropTypes.object, | ||
| t: PropTypes.func.isRequired | ||
| }; | ||
|
|
||
| setValueFromText(e) { | ||
| RectangleParameterEditor.setValueFromText(e, this.props.parameter); | ||
| } | ||
|
|
||
| selectPolygonOnMap() { | ||
| selectOnMap( | ||
| this.props.previewed.terria, | ||
| this.props.viewState, | ||
| this.props.parameter | ||
| ); | ||
| } | ||
|
|
||
| render() { | ||
| const { t } = this.props; | ||
| return ( | ||
| <div> | ||
| <input | ||
| className={Styles.field} | ||
| type="text" | ||
| onChange={this.setValueFromText.bind(this)} | ||
| value={getDisplayValue(this.props.parameter.value)} | ||
| /> | ||
| <button | ||
| type="button" | ||
| onClick={this.selectPolygonOnMap.bind(this)} | ||
| className={Styles.btnSelector} | ||
| > | ||
| {t("analytics.clickToDrawRectangle")} | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Triggered when user types value directly into field. | ||
| * @param {String} e Text that user has entered manually. | ||
| * @param {FunctionParameter} parameter Parameter to set value on. | ||
| */ | ||
| RectangleParameterEditor.setValueFromText = function (e, parameter) { | ||
| parameter.setValue(CommonStrata.user, [JSON.parse(e.target.value)]); | ||
| }; | ||
|
|
||
| /** | ||
| * Given a value, return it in human readable form for display. | ||
| * @param {Object} value Native format of parameter value. | ||
| * @return {String} String for display | ||
| */ | ||
| export function getDisplayValue(value) { | ||
| if (!defined(value)) { | ||
| return ""; | ||
| } | ||
| return `${value.east}, ${value.north}, ${value.west}, ${value.south}`; | ||
| } | ||
|
|
||
| /** | ||
| * Prompt user to select/draw on map in order to define parameter. | ||
| * @param {Terria} terria Terria instance. | ||
| * @param {Object} viewState ViewState. | ||
| * @param {FunctionParameter} parameter Parameter. | ||
| */ | ||
| export function selectOnMap(terria, viewState, parameter) { | ||
| const userDrawing = new UserDrawing({ | ||
| terria: terria, | ||
| drawRectangle: true, | ||
| onCleanUp: function () { | ||
| viewState.openAddData(); | ||
| }, | ||
| onDrawingComplete: function (params) { | ||
| if (params.points) { | ||
| const cartographicPoints = params.points.map((point) => { | ||
| const cartographic = Cartographic.fromCartesian( | ||
| point, | ||
| Ellipsoid.WGS84 | ||
| ); | ||
| return { | ||
| latitude: CesiumMath.toDegrees(cartographic.latitude), | ||
| longitude: CesiumMath.toDegrees(cartographic.longitude) | ||
| }; | ||
| }); | ||
| const rectangle = { | ||
| west: cartographicPoints[0].longitude, | ||
| south: cartographicPoints[0].latitude, | ||
| east: cartographicPoints[1].longitude, | ||
| north: cartographicPoints[1].latitude | ||
| }; | ||
| runInAction(() => { | ||
| parameter.setValue(CommonStrata.user, rectangle); | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| userDrawing.enterDrawMode(); | ||
| } | ||
|
|
||
| export default withTranslation()(RectangleParameterEditor); |