terriajs
Version:
Geospatial data visualization platform.
100 lines • 4.56 kB
JavaScript
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var RectangleParameterEditor_1;
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } 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";
let RectangleParameterEditor = class RectangleParameterEditor extends Component {
static { RectangleParameterEditor_1 = this; }
static propTypes = {
previewed: PropTypes.object,
parameter: PropTypes.object,
viewState: PropTypes.object,
t: PropTypes.func.isRequired
};
setValueFromText(e) {
RectangleParameterEditor_1.setValueFromText(e, this.props.parameter);
}
selectPolygonOnMap() {
selectOnMap(this.props.previewed.terria, this.props.viewState, this.props.parameter);
}
render() {
const { t } = this.props;
return (_jsxs("div", { children: [_jsx("input", { className: Styles.field, type: "text", onChange: this.setValueFromText.bind(this), value: getDisplayValue(this.props.parameter.value) }), _jsx("button", { type: "button", onClick: this.selectPolygonOnMap.bind(this), className: Styles.btnSelector, children: t("analytics.clickToDrawRectangle") })] }));
}
};
RectangleParameterEditor = RectangleParameterEditor_1 = __decorate([
observer
], RectangleParameterEditor);
/**
* 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);
//# sourceMappingURL=RectangleParameterEditor.js.map