qwc2 2025.12.18 → 2025.12.24

package/plugins/ObliqueView.js

@@ -1,4 +1,6 @@
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -26,15 +28,16 @@ import axios from 'axios';
 import isEqual from 'lodash.isequal';
 import ol from 'openlayers';
 import PropTypes from 'prop-types';
+import { setViewMode, ViewMode } from '../actions/display';
 import { zoomToExtent } from '../actions/map';
 import { setCurrentTask } from '../actions/task';
 import Icon from '../components/Icon';
+import OlLayer from '../components/map/OlLayer';
+import OverviewMapButton from '../components/OverviewMapButton';
 import ResizeableWindow from '../components/ResizeableWindow';
-import LayerRegistry from '../components/map/layers/index';
 import InputContainer from '../components/widgets/InputContainer';
 import ConfigUtils from '../utils/ConfigUtils';
 import CoordinatesUtils from '../utils/CoordinatesUtils';
-import LayerUtils from '../utils/LayerUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import MapUtils from '../utils/MapUtils';
 import MiscUtils from '../utils/MiscUtils';
@@ -42,6 +45,27 @@ import './style/ObliqueView.css';
 
 /**
  * Display oblique satellite imagery.
+ *
+ * Requires `obliqueImageryServiceUrl` in `config.json` to point to a `qwc-oblique-imagery-service`.
+ *
+ * You can configure oblique imagery datasets in the `obliqueDatasets` entry in a QWC theme configuration as follows:
+ * ```
+ * {
+ *   ...
+ *   "obliqueDatasets": [{
+ *     {
+ *       "name": "<dataset_name>",
+ *       "default": <false|true>,
+ *       "backgroundLayer": "<background_layer_name>",
+ *       "backgroundOpacity": <0-255>,
+ *       "title": "<dataset_title>",
+ *       "titleMsgId": "<dataset_title_msgid>"
+ *     },
+ *     ...
+ *   ]
+ * }
+ * ```
+ * where `dataset_name` is the the name of a dataset configured in the `qwc-oblique-imagery-service`.
  */
 var ObliqueView = /*#__PURE__*/function (_React$Component) {
   function ObliqueView(props) {
@@ -49,6 +73,7 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, ObliqueView);
     _this = _callSuper(this, ObliqueView, [props]);
     _defineProperty(_this, "onClose", function () {
+      _this.props.setViewMode(ViewMode._2D);
       _this.setState(ObliqueView.defaultState);
     });
     _defineProperty(_this, "renderScaleChooser", function () {
@@ -93,6 +118,9 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
           /* eslint-disable-next-line */
           console.warn("Failed to load dataset config");
         });
+      } else {
+        _this.obliqueImageryLayer.setSource(null);
+        _this.closestImage = null;
       }
     });
     _defineProperty(_this, "setupLayer", function () {
@@ -108,7 +136,6 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
       }, 0);
       _this.map.setView(new ol.View({
         projection: projection,
-        // extent: datasetConfig.extent,
         center: ol.extent.getCenter(datasetConfig.extent),
         rotation: _this.getRotation() / 180 * Math.PI,
         zoom: zoom,
@@ -119,42 +146,25 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         currentZoom: zoom
       });
-      var layers = [];
-      var themeConfig = _this.props.theme.obliqueDatasets.find(function (entry) {
-        return entry.name === _this.state.selectedDataset;
-      });
-      if (themeConfig.backgroundLayer) {
-        var _themeConfig$backgrou;
-        var layerConfig = LayerUtils.splitLayerUrlParam(themeConfig.backgroundLayer);
-        layerConfig.version = _this.props.themes.defaultWMSVersion || "1.3.0";
-        layerConfig.opacity = (_themeConfig$backgrou = themeConfig.backgroundOpacity) !== null && _themeConfig$backgrou !== void 0 ? _themeConfig$backgrou : 127;
-        var layerCreator = LayerRegistry[layerConfig.type];
-        if (layerCreator) {
-          layers.push(layerCreator.create(layerConfig, _this.map));
-        }
-      }
-      _this.obliqueImageryLayer = new ol.layer.Tile({
-        source: new ol.source.XYZ({
-          projection: projection,
-          tileGrid: new ol.tilegrid.TileGrid({
-            extent: datasetConfig.extent,
-            resolutions: datasetConfig.resolutions,
-            tileSize: datasetConfig.tileSize,
-            origin: datasetConfig.origin
-          }),
-          url: datasetConfig.url,
-          crossOrigin: "anonymous",
-          tileLoadFunction: function tileLoadFunction(tile, src) {
-            var _this$closestImage;
-            if (((_this$closestImage = _this.closestImage) !== null && _this$closestImage !== void 0 ? _this$closestImage : null) !== null) {
-              src += "?img=" + _this.closestImage;
-            }
-            tile.getImage().src = src.replace('{direction}', _this.state.currentDirection);
+      _this.obliqueImageryLayer.setSource(new ol.source.XYZ({
+        projection: projection,
+        tileGrid: new ol.tilegrid.TileGrid({
+          extent: datasetConfig.extent,
+          resolutions: datasetConfig.resolutions,
+          tileSize: datasetConfig.tileSize,
+          origin: datasetConfig.origin
+        }),
+        url: datasetConfig.url,
+        crossOrigin: "anonymous",
+        tileLoadFunction: function tileLoadFunction(tile, src) {
+          var _this$closestImage;
+          if (((_this$closestImage = _this.closestImage) !== null && _this$closestImage !== void 0 ? _this$closestImage : null) !== null) {
+            src += "?img=" + _this.closestImage;
           }
-        })
-      });
-      layers.push(_this.obliqueImageryLayer);
-      _this.map.setLayers(layers);
+          tile.getImage().src = src.replace('{direction}', _this.state.currentDirection);
+        }
+      }));
+      _this.searchClosestImage();
     });
     _defineProperty(_this, "searchClosestImage", function () {
       var _this$state$datasetCo;
@@ -244,8 +254,9 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
         return null;
       });
     });
+    _this.obliqueImageryLayer = new ol.layer.Tile();
+    _this.map.addLayer(_this.obliqueImageryLayer);
     _this.closestImage = null;
-    _this.obliqueImageryLayer = null;
     _this.state = ObliqueView.defaultState;
     _this.focusedMap = null;
     return _this;
@@ -255,6 +266,9 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       window.addEventListener('focus', this.trackFocus, true);
+      if (this.props.startupParams.v === "oblique") {
+        this.props.setViewMode(ViewMode._Oblique);
+      }
     }
   }, {
     key: "componentWillUnmount",
@@ -265,12 +279,14 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       if (this.props.active && !prevProps.active) {
-        this.setState({
-          active: true
-        });
+        this.props.setViewMode(ViewMode._Oblique);
         this.props.setCurrentTask(null);
       }
-      if (this.props.active && this.props.theme && this.props.theme !== prevProps.theme || this.props.active && !prevProps.active) {
+      // Honour theme startupView on theme change unless first loaded theme and startupParams.v is set
+      if (this.props.theme !== prevProps.theme && this.props.theme.startupView === "oblique" && (prevProps.theme !== null || !this.props.startupParams.v)) {
+        this.props.setViewMode(ViewMode._Oblique);
+      }
+      if (this.props.viewMode === ViewMode._Oblique && this.props.theme && (this.props.theme !== prevProps.theme || prevProps.viewMode !== ViewMode._Oblique)) {
         var _datasets$find$name, _datasets$find, _datasets$;
         var datasets = this.props.theme.obliqueDatasets || [];
         var defaultDataset = (_datasets$find$name = (_datasets$find = datasets.find(function (entry) {
@@ -283,8 +299,6 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
         });
       }
       if (this.state.selectedDataset !== prevState.selectedDataset) {
-        this.closestImage = null;
-        this.obliqueImageryLayer = null;
         this.queryDatasetConfig();
       }
       if (this.state.datasetConfig && this.state.datasetConfig !== prevState.datasetConfig) {
@@ -310,8 +324,15 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-      if (!this.state.active) {
+      var _this2 = this,
+        _this$props$theme,
+        _this$props$theme$fin,
+        _this$props$themes,
+        _this$props$themes$fi,
+        _obliqueConfig$backgr,
+        _this$state$selectedD,
+        _this$props$theme2;
+      if (this.props.viewMode !== ViewMode._Oblique || !this.props.themes) {
         return null;
       }
       var rot = this.getRotation();
@@ -331,6 +352,12 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
         title: LocaleUtils.tr("common.lock2dview"),
         active: this.state.viewsLocked
       }];
+      var obliqueConfig = (_this$props$theme = this.props.theme) === null || _this$props$theme === void 0 || (_this$props$theme = _this$props$theme.obliqueDatasets) === null || _this$props$theme === void 0 || (_this$props$theme$fin = _this$props$theme.find) === null || _this$props$theme$fin === void 0 ? void 0 : _this$props$theme$fin.call(_this$props$theme, function (entry) {
+        return entry.name === _this2.state.selectedDataset;
+      });
+      var basemap = (_this$props$themes = this.props.themes) === null || _this$props$themes === void 0 || (_this$props$themes = _this$props$themes.backgroundLayers) === null || _this$props$themes === void 0 || (_this$props$themes$fi = _this$props$themes.find) === null || _this$props$themes$fi === void 0 ? void 0 : _this$props$themes$fi.call(_this$props$themes, function (entry) {
+        return entry.name === (obliqueConfig === null || obliqueConfig === void 0 ? void 0 : obliqueConfig.backgroundLayer);
+      });
       return /*#__PURE__*/React.createElement(ResizeableWindow, {
         dockable: this.props.geometry.side,
         extraControls: extraControls,
@@ -407,7 +434,9 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
           transform: "rotate(".concat(-rot, "deg)")
         },
         tabIndex: 0
-      }, "S"), /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement("div", {
+      }, "S"), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-nav-circle"
+      })), /*#__PURE__*/React.createElement("div", {
         className: "obliqueview-nav-zoom"
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: "plus",
@@ -419,9 +448,39 @@ var ObliqueView = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick() {
           return _this2.changeZoom(-1);
         }
-      })), /*#__PURE__*/React.createElement("div", {
+      })), basemap && this.state.datasetConfig ? /*#__PURE__*/React.createElement(OlLayer, {
+        map: this.map,
+        options: _objectSpread(_objectSpread({}, basemap), {}, {
+          opacity: (_obliqueConfig$backgr = obliqueConfig.backgroundOpacity) !== null && _obliqueConfig$backgr !== void 0 ? _obliqueConfig$backgr : 127
+        }),
+        projection: this.state.datasetConfig.crs,
+        zIndex: -1
+      }) : null, /*#__PURE__*/React.createElement("div", {
         className: "obliqueview-bottombar"
-      }, this.renderScaleChooser())));
+      }, /*#__PURE__*/React.createElement("select", {
+        onChange: function onChange(ev) {
+          return _this2.setState({
+            selectedDataset: ev.target.value
+          });
+        },
+        value: (_this$state$selectedD = this.state.selectedDataset) !== null && _this$state$selectedD !== void 0 ? _this$state$selectedD : ""
+      }, (((_this$props$theme2 = this.props.theme) === null || _this$props$theme2 === void 0 ? void 0 : _this$props$theme2.obliqueDatasets) || []).map(function (entry) {
+        var _entry$title;
+        return /*#__PURE__*/React.createElement("option", {
+          key: entry.name,
+          value: entry.name
+        }, LocaleUtils.trWithFallback(entry.titleMsgId, (_entry$title = entry.title) !== null && _entry$title !== void 0 ? _entry$title : entry.name));
+      })), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-bottombar-spacer"
+      }), this.renderScaleChooser(), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-bottombar-spacer"
+      }), basemap && this.state.datasetConfig ? /*#__PURE__*/React.createElement(OverviewMapButton, {
+        center: this.state.currentCenter,
+        coneRotation: this.getRotation() / 180 * Math.PI,
+        layer: basemap,
+        projection: this.state.datasetConfig.crs,
+        resolution: MapUtils.computeForZoom(this.state.datasetConfig.resolutions, this.state.currentZoom) * 0.25
+      }) : null)));
     }
   }]);
 }(React.Component);
@@ -443,8 +502,11 @@ _defineProperty(ObliqueView, "propTypes", {
   /** A list of allowed map scales, in decreasing order. */
   scales: PropTypes.arrayOf(PropTypes.number),
   setCurrentTask: PropTypes.func,
+  setViewMode: PropTypes.func,
+  startupParams: PropTypes.object,
   theme: PropTypes.object,
   themes: PropTypes.object,
+  viewMode: PropTypes.number,
   zoomToExtent: PropTypes.func
 });
 _defineProperty(ObliqueView, "defaultProps", {
@@ -460,7 +522,6 @@ _defineProperty(ObliqueView, "defaultProps", {
   scales: [20000, 10000, 5000, 2500, 1000, 500, 250]
 });
 _defineProperty(ObliqueView, "defaultState", {
-  active: false,
   selectedDataset: null,
   datasetConfig: null,
   currentDirection: null,
@@ -472,10 +533,13 @@ export default connect(function (state) {
   return {
     active: state.task.id === "ObliqueView",
     map: state.map,
+    startupParams: state.localConfig.startupParams,
+    viewMode: state.display.viewMode,
     theme: state.theme.current,
     themes: state.theme.themes
   };
 }, {
   setCurrentTask: setCurrentTask,
+  setViewMode: setViewMode,
   zoomToExtent: zoomToExtent
 })(ObliqueView);