@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/src/featureInfo/addressBalloonFeatureInfoView.js

@@ -0,0 +1,130 @@
+import BalloonFeatureInfoView, {
+  extractNestedKey,
+} from './balloonFeatureInfoView.js';
+import AddressBalloonComponent from './AddressBalloonComponent.vue';
+
+/**
+ * @typedef {FeatureInfoViewOptions} AddressBalloonFeatureInfoViewOptions
+ * @property {string|null} [addressName='gml:name'] key to evaluate for name. Use null to suppress
+ * @property {string|null} [street='Address.Street'] key to evaluate for street. Use null to suppress
+ * @property {string|null} [number='Address.HouseNumber'] key to evaluate for house number. Use null to suppress
+ * @property {string|null} [city='Address.City'] key to evaluate for city. Use null to suppress
+ * @property {string|null} [zip='Address.ZipCode'] key to evaluate for zip code. Use null to suppress
+ * @property {string|null} [country='Address.Country'] key to evaluate for country. Use null to suppress
+ */
+
+/**
+ * @class
+ * @description An balloon view.
+ * @extends {BalloonFeatureInfoView}
+ */
+class AddressBalloonFeatureInfoView extends BalloonFeatureInfoView {
+  /**
+   * @type {string}
+   */
+  static get className() {
+    return 'AddressBalloonFeatureInfoView';
+  }
+
+  /** @returns {AddressBalloonFeatureInfoViewOptions} */
+  static getDefaultOptions() {
+    return {
+      addressName: 'gml:name',
+      street: 'Address.Street',
+      number: 'Address.HouseNumber',
+      city: 'Address.City',
+      zip: 'Address.ZipCode',
+      country: 'Address.Country',
+    };
+  }
+
+  /**
+   * @param {AddressBalloonFeatureInfoViewOptions} options
+   */
+  constructor(options) {
+    super(options, AddressBalloonComponent);
+    const defaultOptions = AddressBalloonFeatureInfoView.getDefaultOptions();
+
+    /**
+     * @type {string|null}
+     */
+    this.addressName =
+      options.addressName !== undefined
+        ? options.addressName
+        : defaultOptions.addressName;
+    /**
+     * @type {string|null}
+     */
+    this.street =
+      options.street !== undefined ? options.street : defaultOptions.street;
+    /**
+     * @type {string|null}
+     */
+    this.number =
+      options.number !== undefined ? options.number : defaultOptions.number;
+    /**
+     * @type {string|null}
+     */
+    this.city = options.city !== undefined ? options.city : defaultOptions.city;
+    /**
+     * @type {string|null}
+     */
+    this.zip = options.zip !== undefined ? options.zip : defaultOptions.zip;
+    /**
+     * @type {string|null}
+     */
+    this.country =
+      options.country !== undefined ? options.country : defaultOptions.country;
+  }
+
+  /**
+   * derives address attributes from addressKeys
+   * @param {undefined|import("ol").Feature<import("ol/geom/Geometry").default>|import("@vcmap-cesium/engine").Cesium3DTileFeature|import("@vcmap-cesium/engine").Cesium3DTilePointFeature} feature
+   * @returns {Object}
+   */
+  getAttributes(feature) {
+    const attributes = super.getAttributes(feature);
+    const obj = {};
+    const applyAddressKeys = (key) => {
+      if (this[key]) {
+        const derivedValue = extractNestedKey(this[key], attributes);
+        if (derivedValue) {
+          obj[key] = derivedValue;
+        }
+      }
+    };
+    Object.keys(AddressBalloonFeatureInfoView.getDefaultOptions()).forEach(
+      (key) => applyAddressKeys(key),
+    );
+    return obj;
+  }
+
+  /**
+   * @returns {AddressBalloonFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    const defaultOptions = AddressBalloonFeatureInfoView.getDefaultOptions();
+    if (this.addressName !== defaultOptions.addressName) {
+      config.addressName = this.addressName;
+    }
+    if (this.street !== defaultOptions.street) {
+      config.street = this.street;
+    }
+    if (this.number !== defaultOptions.number) {
+      config.number = this.number;
+    }
+    if (this.city !== defaultOptions.city) {
+      config.city = this.city;
+    }
+    if (this.zip !== defaultOptions.zip) {
+      config.zip = this.zip;
+    }
+    if (this.country !== defaultOptions.country) {
+      config.country = this.country;
+    }
+    return config;
+  }
+}
+
+export default AddressBalloonFeatureInfoView;

package/src/featureInfo/balloonFeatureInfoView.js

@@ -0,0 +1,159 @@
+import { Feature } from 'ol';
+import { getCenter } from 'ol/extent.js';
+import { Cartographic, Entity, Math as CesiumMath } from '@vcmap-cesium/engine';
+import { Projection } from '@vcmap/core';
+import { check } from '@vcsuite/check';
+import AbstractFeatureInfoView from './abstractFeatureInfoView.js';
+import { WindowSlot } from '../manager/window/windowManager.js';
+import BalloonComponent from './BalloonComponent.vue';
+
+/**
+ * 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} [balloonTitle] - optional title to overwrite default (layerName). Can be attribute key (nested key using '.'), i18n key or text
+ * @property {string} [balloonSubtitle] - optional window title to overwrite default (featureId). Can be attribute key (nested key using '.'), i18n key or text
+ */
+
+/**
+ * @typedef {FeatureInfoProps} BalloonFeatureInfoViewProps
+ * @property {string} balloonTitle
+ * @property {string} balloonSubtitle
+ * @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.balloonTitle = options.balloonTitle;
+
+    /**
+     * @type {string}
+     */
+    this.balloonSubtitle = options.balloonSubtitle;
+  }
+
+  /**
+   * @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),
+      balloonTitle:
+        this.balloonTitle != null
+          ? extractNestedKey(
+              this.balloonTitle,
+              properties.attributes,
+              this.balloonTitle,
+            )
+          : properties.layerProperties.title,
+      balloonSubtitle:
+        this.balloonSubtitle != null
+          ? extractNestedKey(
+              this.balloonSubtitle,
+              properties.attributes,
+              this.balloonSubtitle,
+            )
+          : properties.featureId,
+    };
+  }
+
+  /**
+   * @param {VcsUiApp} app
+   * @param {FeatureInfoEvent} featureInfo
+   * @param {import("@vcmap/core").Layer} layer
+   * @returns {WindowComponentOptions}
+   */
+  getWindowComponentOptions(app, featureInfo, layer) {
+    const options = super.getWindowComponentOptions(app, featureInfo, layer);
+    options.state.hideHeader = true;
+    options.state.classes = ['balloon'];
+    options.slot = WindowSlot.DETACHED;
+    // windowPosition is handled by next render
+    return options;
+  }
+
+  /**
+   * @returns {BalloonFeatureInfoViewOptions}
+   */
+  toJSON() {
+    const config = super.toJSON();
+    if (this.balloonTitle) {
+      config.balloonTitle = this.balloonTitle;
+    }
+    if (this.balloonSubtitle) {
+      config.balloonSubtitle = this.balloonSubtitle;
+    }
+    return config;
+  }
+}
+
+export default BalloonFeatureInfoView;

package/src/featureInfo/balloonHelper.js

@@ -0,0 +1,172 @@
+import {
+  Cartesian2,
+  Cartographic,
+  SceneTransforms,
+} from '@vcmap-cesium/engine';
+import {
+  CesiumMap,
+  ObliqueMap,
+  OpenlayersMap,
+  Projection,
+  transformToImage,
+} from '@vcmap/core';
+import { unByKey } from 'ol/Observable.js';
+import {
+  getWindowPositionOptionsFromMapEvent,
+  WindowAlignment,
+} from '../manager/window/windowHelper.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/engine").Scene} scene
+ * @param {import("@vcmap-cesium/engine").Cartesian3} cartesian
+ * @returns {undefined|import("@vcmap-cesium/engine").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/engine").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/engine").Cartesian2|undefined} windowPosition
+ * @param {HTMLElement} target - the map's target { @link @import("@vcmap/core").MapCollection }
+ */
+export function setBalloonPosition(windowManager, id, windowPosition, target) {
+  if (!windowPosition) {
+    return;
+  }
+  windowManager.setWindowPositionOptions(
+    id,
+    getWindowPositionOptionsFromMapEvent(
+      new Cartesian2(
+        windowPosition.x - balloonOffset.x,
+        windowPosition.y - balloonOffset.y,
+      ),
+      target,
+      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) {
+      if (!position[2]) {
+        const [position3D] = await map.getHeightFromTerrain([position]);
+        position[2] = position3D[2];
+      }
+      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),
+            app.maps.target,
+          );
+        }),
+      );
+    } else if (map instanceof OpenlayersMap) {
+      const handler = () =>
+        setBalloonPosition(
+          app.windowManager,
+          windowId,
+          getBalloonPositionOL(map.olMap, position),
+          app.maps.target,
+        );
+      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),
+          app.maps.target,
+        );
+      const key = map.olMap.on('postrender', handler);
+      listeners.push(() => unByKey(key));
+    }
+  };
+
+  await setup(vcsApp, windowId, clickedPosition);
+
+  return destroy;
+}