@vcmap/ui 5.0.0-rc.10 → 5.0.0-rc.13

package/src/featureInfo/balloonFeatureInfoView.js

@@ -0,0 +1,151 @@
+import { Feature } from 'ol';
+import { getCenter } from 'ol/extent.js';
+import { Cartographic, Entity, Math as CesiumMath } from '@vcmap/cesium';
+import { Projection } from '@vcmap/core';
+import { check } from '@vcsuite/check';
+import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+import { getWindowPositionOptions, WindowAlignment, WindowSlot } from '../manager/window/windowManager.js';
+import BalloonComponent from './BalloonComponent.vue';
+import { balloonOffset } from './balloonHelper.js';
+
+/**
+ * derive value from attributes
+ * @param {string} key - key or nested key
+ * @param {Object} attrs
+ * @param {string|null} [defaultValue]
+ * @returns {string|null}
+ */
+export function extractNestedKey(key, attrs, defaultValue = null) {
+  check(key, String);
+  check(attrs, Object);
+
+  const keys = key.split('.');
+  const derivedValue = keys.reduce((obj, prop) => (obj[prop] || {}), attrs);
+  return typeof derivedValue === 'string' ? derivedValue : defaultValue;
+}
+
+/**
+ * @typedef {FeatureInfoViewOptions} BalloonFeatureInfoViewOptions
+ * @property {string} [title] - optional title to overwrite default (layerName). Can be attribute key (nested key using '.'), i18n key or text
+ * @property {string} [subtitle] - optional window title to overwrite default (featureId). Can be attribute key (nested key using '.'), i18n key or text
+ */
+
+/**
+ * @typedef {FeatureInfoProps} BalloonFeatureInfoViewProps
+ * @property {string} title
+ * @property {string} subtitle
+ * @property {import("ol/coordinate").Coordinate} position
+ */
+
+/**
+ * @param {import("@vcmap/core").Cartesian3} cartesian
+ * @returns {import("ol/coordinate").Coordinate}
+ */
+function cartesian3ToCoordinate(cartesian) {
+  const cartographic = Cartographic.fromCartesian(cartesian);
+  const wgs84position = [
+    CesiumMath.toDegrees(cartographic.longitude),
+    CesiumMath.toDegrees(cartographic.latitude),
+    cartographic.height,
+  ];
+  return Projection.wgs84ToMercator(wgs84position);
+}
+
+/**
+ * @param {FeatureType} feature
+ * @returns {import("ol/coordinate").Coordinate|null}
+ */
+function getPositionFromFeature(feature) {
+  if (feature instanceof Feature && feature.getGeometry()) {
+    return getCenter(feature.getGeometry().getExtent());
+  } else if (feature instanceof Entity) {
+    return cartesian3ToCoordinate(feature.position);
+  } else if (feature?.primitive?.boundingSphere?.center) {
+    return cartesian3ToCoordinate(feature.primitive.boundingSphere.center);
+  }
+  return null;
+}
+
+/**
+ * @class
+ * @description An balloon view.
+ * @extends {AbstractFeatureInfoView}
+ */
+class BalloonFeatureInfoView extends AbstractFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() { return 'BalloonFeatureInfoView'; }
+
+  /**
+   * @param {BalloonFeatureInfoViewOptions} options
+   * @param {import("vue").Component} [component=BalloonComponent]
+   */
+  constructor(options, component) {
+    super(options, component || BalloonComponent);
+
+    /**
+     * @type {string}
+     */
+    this.title = options.title;
+
+    /**
+     * @type {string}
+     */
+    this.subtitle = options.subtitle;
+  }
+
+  /**
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {BalloonFeatureInfoViewProps}
+   */
+  getProperties(featureInfo, layer) {
+    const properties = super.getProperties(featureInfo, layer);
+    return {
+      ...properties,
+      position: featureInfo.position ?? getPositionFromFeature(featureInfo.feature),
+      title: this.title ?
+        extractNestedKey(this.title, properties.attributes, this.title) :
+        properties.layerProperties.title,
+      subtitle: this.subtitle ?
+        extractNestedKey(this.subtitle, properties.attributes, this.subtitle) :
+        properties.featureId,
+    };
+  }
+
+  /**
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {WindowComponentOptions}
+   */
+  getWindowComponentOptions(featureInfo, layer) {
+    const options = super.getWindowComponentOptions(featureInfo, layer);
+    options.state.hideHeader = true;
+    options.state.classes = ['balloon'];
+    options.slot = WindowSlot.DETACHED;
+    options.position = getWindowPositionOptions(
+      (featureInfo.windowPosition?.[0] ?? 0) - balloonOffset.x, // if we do not have a windowPosition, let the next render handle it
+      (featureInfo.windowPosition?.[1] ?? 0) - balloonOffset.y,
+      null,
+      WindowAlignment.BOTTOM_LEFT,
+    );
+    return options;
+  }
+
+  /**
+   * @returns {BalloonFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this.title) {
+      config.title = this.title;
+    }
+    if (this.subtitle) {
+      config.subtitle = this.subtitle;
+    }
+    return config;
+  }
+}
+
+export default BalloonFeatureInfoView;

package/src/featureInfo/balloonHelper.js

@@ -0,0 +1,132 @@
+import { Cartesian2, Cartographic, SceneTransforms } from '@vcmap/cesium';
+import { CesiumMap, ObliqueMap, OpenlayersMap, Projection, transformToImage } from '@vcmap/core';
+import { unByKey } from 'ol/Observable.js';
+import {
+  getWindowPositionOptionsFromMapEvent,
+  WindowAlignment,
+} from '../manager/window/windowManager.js';
+
+/**
+ * balloon offset from location or click position in pixel
+ * @type {{x: number, y: number}}
+ */
+export const balloonOffset = { x: 55, y: 25 };
+
+/**
+ * @param {import("@vcmap/cesium").Scene} scene
+ * @param {import("@vcmap/cesium").Cartesian3} cartesian
+ * @returns {undefined|import("@vcmap/cesium").Cartesian2}
+ */
+function getBalloonPositionCesium(scene, cartesian) {
+  return SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
+}
+
+/**
+ * @param {import("@vcmap/core").OpenlayersMap} olMap
+ * @param {import("ol/coordinate").Coordinate} position
+ * @returns {undefined|import("@vcmap/cesium").Cartesian2}
+ */
+function getBalloonPositionOL(olMap, position) {
+  const pixel = olMap.getPixelFromCoordinate(position);
+  if (pixel) {
+    return new Cartesian2(...pixel);
+  }
+  return undefined;
+}
+
+/**
+ * returns the windowPosition of a balloon from a map position
+ * @param {VcsApp} app
+ * @param {import("ol/coordinate").Coordinate} position - position in mercator
+ * @returns {Promise<undefined|Cartesian2>}
+ */
+export async function getBalloonPosition(app, position) {
+  const map = app.maps.activeMap;
+  if (map instanceof CesiumMap) {
+    const wgs84Position = Projection.mercatorToWgs84(position);
+    const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
+    return getBalloonPositionCesium(map.getScene(), cartesian);
+  } else if (map instanceof OpenlayersMap) {
+    return getBalloonPositionOL(map.olMap, position);
+  } else if (map instanceof ObliqueMap) {
+    const { coords } = await transformToImage(
+      map.currentImage,
+      position,
+    );
+    return getBalloonPositionOL(map.olMap, coords);
+  }
+  return undefined;
+}
+
+/**
+ * sets the windowPosition of a balloon
+ * @param {WindowManager} windowManager
+ * @param {string} id - windowId of balloon
+ * @param {import("@vcmap/cesium").Cartesian2|undefined} windowPosition
+ */
+export function setBalloonPosition(windowManager, id, windowPosition) {
+  if (!windowPosition) {
+    return;
+  }
+  windowManager.setWindowPositionOptions(
+    id,
+    getWindowPositionOptionsFromMapEvent(
+      new Cartesian2(windowPosition.x - balloonOffset.x, windowPosition.y - balloonOffset.y),
+      WindowAlignment.BOTTOM_LEFT,
+    ),
+  );
+}
+
+/**
+ * @param {VcsApp} vcsApp
+ * @param {string} windowId
+ * @param {import("ol/coordinate").Coordinate} clickedPosition - position in mercator
+ * @returns {Promise<(() => void)>}
+ */
+export async function setupBalloonPositionListener(vcsApp, windowId, clickedPosition) {
+  const listeners = [];
+
+  const destroy = () => {
+    listeners.forEach(cb => cb());
+  };
+
+  const setup = async (app, id, position) => {
+    destroy();
+
+    listeners.push(app.maps.mapActivated.addEventListener(
+      setup.bind(null, app, id, position),
+    ));
+
+    const map = app.maps.activeMap;
+    if (map instanceof CesiumMap) {
+      const wgs84Position = Projection.mercatorToWgs84(position);
+      const cartesian = Cartographic.toCartesian(Cartographic.fromDegrees(...wgs84Position));
+      listeners.push(map.getScene().postRender.addEventListener((scene) => {
+        setBalloonPosition(app.windowManager, windowId, getBalloonPositionCesium(scene, cartesian));
+      }));
+    } else if (map instanceof OpenlayersMap) {
+      const handler = () => setBalloonPosition(app.windowManager, windowId, getBalloonPositionOL(map.olMap, position));
+      const key = map.olMap.on(
+        'postrender',
+        handler,
+      );
+      listeners.push(() => unByKey(key));
+    } else if (map instanceof ObliqueMap) {
+      const { coords } = await transformToImage(
+        map.currentImage,
+        position,
+      );
+      listeners.push(map.imageChanged.addEventListener(setup.bind(null, app, windowId, position)));
+      const handler = () => setBalloonPosition(app.windowManager, windowId, getBalloonPositionOL(map.olMap, coords));
+      const key = map.olMap.on(
+        'postrender',
+        handler,
+      );
+      listeners.push(() => unByKey(key));
+    }
+  };
+
+  await setup(vcsApp, windowId, clickedPosition);
+
+  return destroy;
+}