qwc2
Version:
QGIS Web Client
308 lines (306 loc) • 16.3 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* Copyright 2018-2024 Sourcepole AG
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import axios from 'axios';
import PropTypes from 'prop-types';
import { setCurrentTask } from '../actions/task';
import Icon from '../components/Icon';
import { MapContainerPortalContext } from '../components/PluginsContainer';
import CopyButton from '../components/widgets/CopyButton';
import ConfigUtils from '../utils/ConfigUtils';
import CoordinatesUtils from '../utils/CoordinatesUtils';
import { getElevationInterface } from '../utils/ElevationInterface';
import LocaleUtils from '../utils/LocaleUtils';
import MapUtils from '../utils/MapUtils';
import './style/MapInfoTooltip.css';
/**
* Provides map context information when right-clicking on the map.
*
* Displays the coordinates at the picked position by default.
*
* If `elevationServiceUrl` in `config.json` to points to a `qwc-elevation-service`,
* or a custom elevation interface is exposed in `window.QWC2ElevationInterface` (see
* [ElevationInterface.js](https://github.com/qgis/qwc2/blob/master/utils/ElevationInterface.js)), the
* height at the picked position is also displayed.
*
* If `mapInfoService` in `config.json` points to a `qwc-mapinfo-service`, additional
* custom information according to the `qwc-mapinfo-service` configuration is returned.
*
* You can pass additional plugin components to the `MapInfoTooltip` in `appConfig.js`:
* ```json
* MapInfoTooltipPlugin: MapInfoTooltipPlugin([FirstPlugin, SecondPlugin])
* ```
* where a Plugin is a React component of the form
* ```jsx
* class MapInfoTooltipPlugin extends React.Component {
* static propTypes = {
* point: PropTypes.object,
* closePopup: PropTypes.func
* }
* render() { return ...; }
* };
* ```
*/
var MapInfoTooltip = /*#__PURE__*/function (_React$Component) {
function MapInfoTooltip() {
var _this;
_classCallCheck(this, MapInfoTooltip);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, MapInfoTooltip, [].concat(args));
_defineProperty(_this, "state", {
point: null,
elevation: null,
extraInfo: null
});
_defineProperty(_this, "clear", function () {
_this.setState({
point: null,
elevation: null,
extraInfo: null
});
});
return _this;
}
_inherits(MapInfoTooltip, _React$Component);
return _createClass(MapInfoTooltip, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this2 = this;
if (!this.props.enabled && this.state.point) {
this.clear();
return;
}
var newPoint = this.props.map.click;
if (!newPoint || newPoint.button !== 2) {
if (this.state.point) {
this.clear();
}
} else {
var oldPoint = prevProps.map.click;
if (!oldPoint || oldPoint.pixel[0] !== newPoint.pixel[0] || oldPoint.pixel[1] !== newPoint.pixel[1]) {
this.setState({
point: newPoint,
elevation: null,
extraInfo: null
});
var pos = newPoint.coordinate;
var crs = this.props.map.projection;
getElevationInterface().getElevation(pos, crs).then(function (elevation) {
_this2.setState({
elevation: elevation
});
})["catch"](function () {});
var mapInfoService = ConfigUtils.getConfigProp("mapInfoService");
if (mapInfoService) {
axios.get(mapInfoService, {
params: {
pos: pos.join(","),
crs: crs
}
}).then(function (response) {
_this2.setState({
extraInfo: response.data.results
});
})["catch"](function () {});
}
}
}
}
}, {
key: "render",
value: function render() {
var _this3 = this;
if (!this.state.point) {
return null;
}
var info = [];
var projections = [this.props.map.displayCrs];
if (!projections.includes(this.props.map.projection)) {
projections.push(this.props.map.projection);
}
if (this.props.includeWGS84 && !projections.includes("EPSG:4326")) {
projections.push("EPSG:4326");
}
projections.map(function (crs) {
var coo = CoordinatesUtils.getFormattedCoordinate(_this3.state.point.coordinate, _this3.props.map.projection, crs);
info.push([(CoordinatesUtils.getAvailableCRS()[crs] || {
label: crs
}).label, coo]);
});
if (this.state.elevation !== undefined && this.state.elevation !== null) {
var elevs = this.state.elevation.list;
if (!elevs) {
elevs = [{
elevation: this.state.elevation,
dataset: null
}];
}
var _iterator = _createForOfIteratorHelper(elevs),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var data = _step.value;
info.push([LocaleUtils.tr("mapinfotooltip.elevation") + (data.dataset ? " (" + data.dataset + ")" : ""), data.elevation.toFixed(this.props.elevationPrecision) + " m"]);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
if (this.state.extraInfo) {
info.push.apply(info, _toConsumableArray(this.state.extraInfo));
}
var title = LocaleUtils.tr("mapinfotooltip.title");
var pixel = MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK)(this.state.point.coordinate);
var style = {
left: pixel[0] + "px",
top: pixel[1] + "px"
};
var text = info.map(function (entry) {
return entry.join(": ");
}).join("\n");
var routingButtons = null;
if (ConfigUtils.havePlugin("Routing")) {
var prec = CoordinatesUtils.getPrecision(this.props.map.displayCrs);
var pos = CoordinatesUtils.reproject(this.state.point.coordinate, this.props.map.projection, this.props.map.displayCrs);
var point = {
text: pos.map(function (x) {
return x.toFixed(prec);
}).join(", ") + " (" + this.props.map.displayCrs + ")",
pos: _toConsumableArray(pos),
crs: this.props.map.displayCrs
};
routingButtons = /*#__PURE__*/React.createElement("table", {
className: "mapinfotooltip-body-routing"
}, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("b", null, LocaleUtils.tr("routing.route"), ":")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
className: "controlgroup"
}, /*#__PURE__*/React.createElement("button", {
className: "button",
onClick: function onClick() {
return _this3.props.setCurrentTask("Routing", null, null, {
from: point
});
}
}, LocaleUtils.tr("routing.fromhere")), /*#__PURE__*/React.createElement("button", {
className: "button",
onClick: function onClick() {
return _this3.props.setCurrentTask("Routing", null, null, {
to: point
});
}
}, LocaleUtils.tr("routing.tohere")), /*#__PURE__*/React.createElement("button", {
className: "button",
onClick: function onClick() {
return _this3.props.setCurrentTask("Routing", null, null, {
via: point
});
}
}, LocaleUtils.tr("routing.addviapoint"))))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("b", null, LocaleUtils.tr("routing.reachability"), ":")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
className: "controlgroup"
}, /*#__PURE__*/React.createElement("button", {
className: "button",
onClick: function onClick() {
return _this3.props.setCurrentTask("Routing", null, null, {
isocenter: point
});
}
}, LocaleUtils.tr("routing.isocenter")), /*#__PURE__*/React.createElement("button", {
className: "button",
onClick: function onClick() {
return _this3.props.setCurrentTask("Routing", null, null, {
isoextracenter: point
});
}
}, LocaleUtils.tr("routing.isoextracenter")))))));
}
return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
className: "mapinfotooltip",
style: style
}, /*#__PURE__*/React.createElement("div", {
className: "mapinfotooltip-window"
}, /*#__PURE__*/React.createElement("div", {
className: "mapinfotooltip-titlebar"
}, /*#__PURE__*/React.createElement("span", {
className: "mapinfotooltip-title"
}, title), /*#__PURE__*/React.createElement(CopyButton, {
buttonClass: "mapinfotooltip-button",
text: text
}), /*#__PURE__*/React.createElement(Icon, {
className: "mapinfotooltip-button",
icon: "remove",
onClick: this.clear
})), /*#__PURE__*/React.createElement("div", {
className: "mapinfotooltip-body"
}, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, info.map(function (entry, index) {
return /*#__PURE__*/React.createElement("tr", {
key: "row" + index
}, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("b", null, entry[0], ":")), /*#__PURE__*/React.createElement("td", null, entry[1]));
}))), routingButtons, this.props.plugins.map(function (Plugin, idx) {
return /*#__PURE__*/React.createElement(Plugin, {
closePopup: _this3.clear,
key: idx,
point: _this3.state.point,
projection: _this3.props.map.projection
});
})))), this.context);
}
}]);
}(React.Component);
_defineProperty(MapInfoTooltip, "contextType", MapContainerPortalContext);
_defineProperty(MapInfoTooltip, "propTypes", {
/** The number of decimal places to display for elevation values. */
elevationPrecision: PropTypes.number,
enabled: PropTypes.bool,
includeWGS84: PropTypes.bool,
map: PropTypes.object,
/** Additional plugin components for the map info tooltip. */
plugins: PropTypes.array,
setCurrentTask: PropTypes.func
});
_defineProperty(MapInfoTooltip, "defaultProps", {
elevationPrecision: 0,
includeWGS84: true,
plugins: []
});
export default (function (plugins) {
return connect(function (state) {
return {
enabled: state.task.identifyEnabled,
map: state.map,
plugins: plugins
};
}, {
setCurrentTask: setCurrentTask
})(MapInfoTooltip);
});