@vcmap/core 5.0.0-rc.0

package/src/vcs/vcm/util/style/declarativeStyleItem.js

@@ -0,0 +1,631 @@
+import { Color, ConditionsExpression, Expression, Cesium3DTileStyle } from '@vcmap/cesium';
+import Style from 'ol/style/Style.js';
+import Stroke from 'ol/style/Stroke.js';
+import Icon from 'ol/style/Icon.js';
+import Circle from 'ol/style/Circle.js';
+import OLText from 'ol/style/Text.js';
+import Fill from 'ol/style/Fill.js';
+
+import StyleItem, { StyleType } from './styleItem.js';
+import {
+  cesiumColorToColor,
+  emptyStyle,
+  getDefaultCondition,
+  whiteColor,
+} from './styleHelpers.js';
+import { originalFeatureSymbol } from '../../layer/vectorSymbols.js';
+
+/**
+ * @typedef {Object} DeclarativeStyleItemConditions
+ * @property {Array<Array<string>|string>} conditions
+ * @api
+ */
+
+/**
+ * @typedef {Object} DeclarativeStyleOptions
+ * @property {Object|undefined} defines
+ * @property {DeclarativeStyleItemConditions|string|boolean|undefined} show
+ * @property {DeclarativeStyleItemConditions|string|undefined} color
+ * @property {DeclarativeStyleItemConditions|string|undefined} strokeColor - custom 2D ol condition
+ * @property {DeclarativeStyleItemConditions|string|undefined} strokeWidth - custom 2D ol condition
+ * @property {DeclarativeStyleItemConditions|string|undefined} scale
+ * @property {DeclarativeStyleItemConditions|string|undefined} pointOutlineWidth
+ * @property {DeclarativeStyleItemConditions|string|undefined} pointOutlineColor
+ * @property {DeclarativeStyleItemConditions|string|undefined} pointSize
+ * @property {DeclarativeStyleItemConditions|string|undefined} image - this should be an icon url
+ * @property {DeclarativeStyleItemConditions|string|undefined} font - a css font string
+ * @property {DeclarativeStyleItemConditions|string|undefined} labelStyle
+ * @property {DeclarativeStyleItemConditions|string|undefined} labelText
+ * @property {DeclarativeStyleItemConditions|string|undefined} labelColor
+ * @property {DeclarativeStyleItemConditions|string|undefined} labelOutlineWidth
+ * @property {DeclarativeStyleItemConditions|string|undefined} labelOutlineColor
+ * @property {DeclarativeStyleItemConditions|string|undefined} anchorLineEnabled
+ * @property {DeclarativeStyleItemConditions|string|undefined} anchorLineColor
+ * @property {DeclarativeStyleItemConditions|string|undefined} heightOffset
+ * @property {DeclarativeStyleItemConditions|string|undefined} verticalOrigin
+ * @property {DeclarativeStyleItemConditions|string|undefined} horizontalOrigin
+ * @property {DeclarativeStyleItemConditions|string|undefined} labelHorizontalOrigin
+ * @property {DeclarativeStyleItemConditions|string|undefined} labelVerticalOrigin
+ * @api
+ */
+
+/**
+ * @typedef {StyleItemOptions} DeclarativeStyleItemOptions
+ * @property {DeclarativeStyleOptions|undefined} declarativeStyle
+ * @api
+ */
+
+/**
+ * @typedef {StyleItemSections} DeclarativeStyleItemSections
+ * @property {boolean|undefined} defaults
+ * @property {boolean|undefined} declarativeStyle
+ * @api
+ */
+
+/** @type {import("@vcmap/cesium").Color} */
+const scratchColor = new Color();
+
+const defaultText = new OLText({
+  font: '30px sans-serif',
+  fill: new Fill({ color: whiteColor }),
+  textAlign: 'left',
+  offsetY: -15,
+});
+
+/**
+ * @param {import("@vcmap/cesium").Cesium3DTileStyle} style
+ * @param {string} key
+ * @param {DeclarativeStyleOptions} options
+ */
+function addCustomProperty(style, key, options) {
+  if (options[key].conditions) {
+    style[key] = new ConditionsExpression(
+      options[key],
+      options.defines,
+    );
+  } else {
+    style[key] = new Expression(options[key], options.defines);
+  }
+}
+
+/**
+ * Style Object {@see https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/Styling}
+ * @class
+ * @export
+ * @extends {StyleItem}
+ * @api stable
+ */
+class DeclarativeStyleItem extends StyleItem {
+  static get className() { return 'vcs.vcm.util.style.DeclarativeStyleItem'; }
+
+  /**
+   * @param {DeclarativeStyleItemOptions} options
+   */
+  constructor(options) {
+    super(options);
+
+    const declarativeStyle = options.declarativeStyle || {};
+    declarativeStyle.show = declarativeStyle.show != null ? declarativeStyle.show : true;
+
+    /** @type {import("@vcmap/cesium").Cesium3DTileStyle} */
+    this.cesiumStyle = new Cesium3DTileStyle(declarativeStyle);
+
+    this._style = this._styleFunction.bind(this);
+
+    if (declarativeStyle.strokeColor) {
+      addCustomProperty(this.cesiumStyle, 'strokeColor', declarativeStyle);
+    }
+    if (declarativeStyle.strokeWidth) {
+      addCustomProperty(this.cesiumStyle, 'strokeWidth', declarativeStyle);
+    }
+    /** @type {DeclarativeStyleOptions} */
+    this._styleOptions = declarativeStyle;
+
+    /** @type {Map<string,import("ol/style/Circle").default>} */
+    this._circleCache = new Map();
+  }
+
+  /**
+   * @param {DeclarativeStyleItemSections=} sections
+   * @returns {DeclarativeStyleItemOptions}
+   * @api
+   */
+  getOptions(sections) {
+    const options = /** @type {DeclarativeStyleItemOptions} */ (super.getOptions(sections));
+    options.type = StyleType.DECLARATIVE;
+    const usedSections = sections || {
+      declarativeStyle: true,
+      defaults: true,
+    };
+    if (usedSections.declarativeStyle) {
+      options.declarativeStyle = this.cesiumStyle.style;
+    }
+
+    return options;
+  }
+
+  /**
+   * @param {DeclarativeStyleItem=} result
+   * @returns {DeclarativeStyleItem}
+   * @api
+   */
+  clone(result) {
+    if (result) {
+      return result.assign(this);
+    }
+    return new DeclarativeStyleItem(this.getOptions());
+  }
+
+  /**
+   * @param {DeclarativeStyleItem} styleItem
+   * @returns {DeclarativeStyleItem}
+   * @api
+   */
+  assign(styleItem) {
+    this.cesiumStyle = styleItem.cesiumStyle;
+    this._styleOptions = this.cesiumStyle.style;
+    return this;
+  }
+
+  /**
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @returns {import("ol/style/Style").default}
+   * @private
+   */
+  _styleFunction(feature) {
+    const actualFeature = feature[originalFeatureSymbol] || feature;
+    if (!this.cesiumStyle.show.evaluate(actualFeature)) {
+      return emptyStyle;
+    }
+
+    const geometryType = actualFeature.getGeometry().getType();
+
+    if (geometryType === 'Point') {
+      return this._stylePoint(actualFeature);
+    }
+    if (geometryType === 'Polygon') {
+      return this._stylePolygon(actualFeature);
+    }
+    if (geometryType === 'LineString') {
+      return this._styleLineString(actualFeature);
+    }
+    if (geometryType === 'Circle') {
+      return this._stylePolygon(actualFeature);
+    }
+    if (geometryType === 'MultiPoint') {
+      return this._stylePoint(actualFeature);
+    }
+    if (geometryType === 'MultiPolygon') {
+      return this._stylePolygon(actualFeature);
+    }
+    if (geometryType === 'MultiLineString') {
+      return this._styleLineString(actualFeature);
+    }
+
+    this.getLogger().warning(`could not style geometry type: ${geometryType}`);
+    return emptyStyle;
+  }
+
+  /**
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @returns {import("ol/style/Style").default}
+   * @private
+   */
+  _stylePolygon(feature) {
+    const style = new Style({});
+    const color = this.cesiumStyle.color ?
+      // @ts-ignore
+      this.cesiumStyle.color.evaluate(feature, scratchColor) :
+      Color.WHITE;
+    if (color) {
+      style.setFill(new Fill({ color: cesiumColorToColor(/** @type {import("@vcmap/cesium").Color} */ (color)) }));
+    }
+
+    this._evaluateStroke(feature, style);
+    return style;
+  }
+
+  /**
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @returns {import("ol/style/Style").default}
+   * @private
+   */
+  _styleLineString(feature) {
+    const style = new Style({});
+    const isExtruded = feature.get('olcs_extrudedHeight') ||
+      (feature.get('olcs_storeyHeight') && feature.get('olcs_storeyNumber'));
+    const color = this.cesiumStyle.color ?
+      // @ts-ignore
+      this.cesiumStyle.color.evaluate(feature, scratchColor) :
+      Color.WHITE;
+    if (color) {
+      if (isExtruded) {
+        style.setFill(new Fill({ color: cesiumColorToColor(/** @type {import("@vcmap/cesium").Color} */(color)) }));
+      } else {
+        const strokeWidth = this.cesiumStyle.strokeWidth ?
+          this.cesiumStyle.strokeWidth.evaluate(feature) :
+          1;
+        style.setStroke(new Stroke({
+          width: Number.isFinite(strokeWidth) ? strokeWidth : 1,
+          color: cesiumColorToColor(/** @type {import("@vcmap/cesium").Color} */ (color)),
+        }));
+      }
+    }
+
+    if (isExtruded) {
+      this._evaluateStroke(feature, style);
+    }
+
+    return style;
+  }
+
+  /**
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @returns {import("ol/style/Style").default}
+   * @private
+   */
+  _stylePoint(feature) {
+    const style = new Style({});
+
+    if (this.cesiumStyle.labelText) {
+      // @ts-ignore
+      const text = this.cesiumStyle.labelText.evaluate(feature);
+      if (text) {
+        const textStyle = defaultText.clone();
+        textStyle.setText(text.toString());
+        if (this.cesiumStyle.font) {
+          // @ts-ignore
+          const font = this.cesiumStyle.font.evaluate(feature);
+          if (font) {
+            textStyle.setFont(font);
+          }
+        }
+        if (this.cesiumStyle.labelColor) {
+          // @ts-ignore
+          const textColor = this.cesiumStyle.labelColor.evaluateColor(feature, scratchColor);
+          if (textColor) {
+            textStyle.getFill().setColor(cesiumColorToColor(textColor));
+          }
+        }
+        if (this.cesiumStyle.labelOutlineColor) {
+          // @ts-ignore
+          const outlineColor = this.cesiumStyle.labelOutlineColor.evaluate(feature, scratchColor);
+          if (outlineColor) {
+            const outlineWidth = this.cesiumStyle.labelOutlineWidth ?
+              // @ts-ignore
+              this.cesiumStyle.labelOutlineWidth.evaluate(feature) :
+              1;
+            textStyle.setStroke(new Stroke({
+              color: cesiumColorToColor(/** @type {import("@vcmap/cesium").Color} */ (outlineColor)),
+              width: outlineWidth,
+            }));
+          }
+        }
+        style.setText(textStyle);
+      }
+    }
+
+    if (this.cesiumStyle.image) {
+      // @ts-ignore
+      const src = this.cesiumStyle.image.evaluate(feature);
+      if (src) {
+        style.setImage(new Icon({ src }));
+      }
+    } else {
+      const color = this.cesiumStyle.color ?
+        // @ts-ignore
+        this.cesiumStyle.color.evaluate(feature, scratchColor) :
+        Color.WHITE;
+
+      let radius = 4;
+      if (this.cesiumStyle.pointSize) {
+        // @ts-ignore
+        const size = this.cesiumStyle.pointSize.evaluate(feature);
+        radius = size / 2;
+      }
+      const width = this.cesiumStyle.pointOutlineWidth ?
+        // @ts-ignore
+        this.cesiumStyle.pointOutlineWidth.evaluate(feature) :
+        0;
+
+      let pointOutlineColor = Color.BLACK;
+      if (width) {
+        if (this.cesiumStyle.pointOutlineColor) {
+          // @ts-ignore
+          pointOutlineColor = this.cesiumStyle.pointOutlineColor.evaluateColor(feature, scratchColor);
+        }
+        radius += width / 2;
+      }
+
+      const circleCacheKey = `${radius}${color}${width}${pointOutlineColor}`;
+      if (!this._circleCache.has(circleCacheKey)) {
+        const circleOptions = {
+          radius,
+          fill: new Fill({ color: cesiumColorToColor(/** @type {import("@vcmap/cesium").Color} */ (color)) }),
+        };
+        if (width) {
+          circleOptions.stroke = new Stroke({
+            color: cesiumColorToColor(pointOutlineColor),
+            width,
+          });
+        }
+        this._circleCache.set(circleCacheKey, new Circle(circleOptions));
+      }
+      style.setImage(this._circleCache.get(circleCacheKey));
+    }
+
+    if (this.cesiumStyle.scale && style.getImage()) {
+      const scale = this.cesiumStyle.scale.evaluate(feature);
+      if (Number.isFinite(scale)) {
+        style.getImage().setScale(scale);
+      }
+    }
+
+    this._evaluateStroke(feature, style);
+    return style;
+  }
+
+  /**
+   * @param {import("ol").Feature<import("ol/geom/Geometry").default>} feature
+   * @param {import("ol/style/Style").default} style
+   * @private
+   */
+  _evaluateStroke(feature, style) {
+    if (this.cesiumStyle.strokeColor) {
+      // @ts-ignore
+      const strokeColor = this.cesiumStyle.strokeColor.evaluateColor(feature, scratchColor);
+      if (strokeColor) {
+        const strokeWidth = this.cesiumStyle.strokeWidth ?
+          this.cesiumStyle.strokeWidth.evaluate(feature) :
+          1;
+        style.setStroke(new Stroke({
+          width: Number.isFinite(strokeWidth) ? strokeWidth : 1,
+          color: cesiumColorToColor(strokeColor),
+        }));
+      }
+    }
+  }
+
+  /**
+   * @type {DeclarativeStyleItemConditions|string|boolean|undefined}
+   * @api
+   */
+  get show() {
+    return this._styleOptions.show;
+  }
+
+  /**
+   * @param {DeclarativeStyleItemConditions|string|boolean|undefined} show
+   */
+  set show(show) {
+    this._styleOptions.show = show;
+    // @ts-ignore setter != getter
+    this.cesiumStyle.show = show;
+    this._styleChanged();
+  }
+
+  /**
+   * @type {DeclarativeStyleItemConditions|string|undefined}
+   * @api
+   */
+  get color() {
+    return this._styleOptions.color;
+  }
+
+  /**
+   * @param {DeclarativeStyleItemConditions|string|undefined} color
+   */
+  set color(color) {
+    this._styleOptions.color = color;
+    // @ts-ignore setter != getter
+    this.cesiumStyle.color = color;
+    this._styleChanged();
+  }
+
+  /**
+   * @type {DeclarativeStyleItemConditions|string|undefined}
+   * @api
+   */
+  get strokeColor() {
+    return this._styleOptions.strokeColor;
+  }
+
+  /**
+   * @param {DeclarativeStyleItemConditions|string|undefined} color
+   */
+  set strokeColor(color) {
+    this._styleOptions.strokeColor = color;
+    // @ts-ignore setter != getter
+    this.cesiumStyle.strokeColor = color;
+    this._styleChanged();
+  }
+
+  /**
+   * @type {DeclarativeStyleItemConditions|string|undefined}
+   * @api
+   */
+  get strokeWidth() {
+    return this._styleOptions.strokeWidth;
+  }
+
+  /**
+   * @param {DeclarativeStyleItemConditions|string|undefined} width
+   */
+  set strokeWidth(width) {
+    this._styleOptions.strokeWidth = width;
+    // @ts-ignore setter != getter
+    this.cesiumStyle.strokeWidth = width;
+    this._styleChanged();
+  }
+
+  /**
+   * @type {DeclarativeStyleItemConditions|string|undefined}
+   * @api
+   */
+  get image() {
+    return this._styleOptions.image;
+  }
+
+  /**
+   * @param {DeclarativeStyleItemConditions|string|undefined} src
+   */
+  set image(src) {
+    this._styleOptions.image = src;
+    // @ts-ignore setter != getter
+    this.cesiumStyle.image = src;
+    this._styleChanged();
+  }
+
+  /**
+   * @type {DeclarativeStyleItemConditions|string|undefined}
+   * @api
+   */
+  get labelText() {
+    return this._styleOptions.labelText;
+  }
+
+  /**
+   * @param {DeclarativeStyleItemConditions|string|undefined} text
+   */
+  set labelText(text) {
+    this._styleOptions.labelText = text;
+    // @ts-ignore setter != getter
+    this.cesiumStyle.labelText = text;
+    this._styleChanged();
+  }
+
+  /**
+   * @type {DeclarativeStyleItemConditions|string|undefined}
+   * @api
+   */
+  get labelColor() {
+    return this._styleOptions.labelColor;
+  }
+
+  /**
+   * @param {DeclarativeStyleItemConditions|string|undefined} color
+   */
+  set labelColor(color) {
+    this._styleOptions.labelColor = color;
+    // @ts-ignore setter != getter
+    this.cesiumStyle.labelColor = color;
+    this._styleChanged();
+  }
+
+  /**
+   * @type {DeclarativeStyleItemConditions|string|undefined}
+   * @api
+   */
+  get font() {
+    return this._styleOptions.font;
+  }
+
+  /**
+   * @param {DeclarativeStyleItemConditions|string|undefined} font
+   */
+  set font(font) {
+    this._styleOptions.font = font;
+    // @ts-ignore setter != getter
+    this.cesiumStyle.font = font;
+    this._styleChanged();
+  }
+
+  /**
+   * @type {DeclarativeStyleItemConditions|string|undefined}
+   * @api
+   */
+  get pointSize() {
+    return this._styleOptions.pointSize;
+  }
+
+  /**
+   * @param {DeclarativeStyleItemConditions|string|undefined} pointSize
+   */
+  set pointSize(pointSize) {
+    this._styleOptions.pointSize = pointSize;
+    // @ts-ignore setter != getter
+    this.cesiumStyle.pointSize = pointSize;
+    this._styleChanged();
+  }
+
+  /**
+   * @inheritDoc
+   */
+  destroy() {
+    this._circleCache.clear();
+    super.destroy();
+  }
+}
+
+export default DeclarativeStyleItem;
+
+/**
+ * @type {DeclarativeStyleItem}
+ */
+export const defaultDeclarativeStyle = new DeclarativeStyleItem({
+  declarativeStyle: {
+    show: true,
+    color: {
+      conditions: getDefaultCondition('olcs_color', true),
+    },
+    scale: {
+      conditions: getDefaultCondition('olcs_scale'),
+    },
+    pointOutlineWidth: {
+      conditions: getDefaultCondition('olcs_outlineWidth'),
+    },
+    pointOutlineColor: {
+      conditions: getDefaultCondition('olcs_outlineColor', true),
+    },
+    pointSize: {
+      conditions: getDefaultCondition('olcs_pointSize'),
+    },
+    image: {
+      conditions: getDefaultCondition('olcs_image'),
+    },
+    font: {
+      conditions: getDefaultCondition('olcs_font'),
+    },
+    labelStyle: '2',
+    labelText: {
+      conditions: getDefaultCondition('olcs_labelText'),
+    },
+    labelColor: {
+      conditions: getDefaultCondition('olcs_fontColor', true),
+    },
+    labelOutlineWidth: {
+      conditions: getDefaultCondition('olcs_fontOutlineWidth'),
+    },
+    labelOutlineColor: {
+      conditions: getDefaultCondition('olcs_fontOutlineColor', true),
+    },
+    /*
+    anchorLineEnabled: {
+      conditions: [
+        [
+          defaultExtrudedHeightCondition,
+          'true',
+        ],
+        ['true', 'false'],
+      ],
+    },
+    anchorLineColor: {
+      conditions: getDefaultCondition('olcs_anchorLineColor', true),
+    },
+    heightOffset: {
+      conditions: [
+        [
+          defaultExtrudedHeightCondition,
+          // eslint-disable-next-line no-template-curly-in-string
+          '${attributes.olcs_extrudedHeight}',
+        ],
+        ['true', '0'],
+      ],
+    },
+    */
+    verticalOrigin: '1',
+    horizontalOrigin: '0',
+    labelHorizontalOrigin: '0',
+    labelVerticalOrigin: '1',
+  },
+});

package/src/vcs/vcm/util/style/shapesCategory.js

@@ -0,0 +1,67 @@
+import Fill from 'ol/style/Fill.js';
+import Stroke from 'ol/style/Stroke.js';
+import RegularShape from 'ol/style/RegularShape.js';
+import Circle from 'ol/style/Circle.js';
+
+/**
+ * @param {VectorStyleItemImage} options
+ * @returns {import("ol/style/RegularShape").default|import("ol/style/Circle").default}
+ * @export
+ */
+
+export function getShapeFromOptions(options) {
+  if (options.fill && !(options.fill instanceof Fill)) {
+    options.fill = new Fill(options.fill);
+  }
+  if (options.stroke && !(options.stroke instanceof Stroke)) {
+    options.stroke = new Stroke(options.stroke);
+  }
+  return options.points ?
+    new RegularShape(/** @type {import("ol/style/RegularShape").Options} */ (options)) :
+    new Circle(/** @type {import("ol/style/Circle").Options} */ (options));
+}
+
+/**
+ * @class
+ */
+class ShapeCategory {
+  constructor() {
+    /** @type {Array<VectorStyleItemImage>} */
+    this.shapes = [];
+  }
+
+  /**
+   * @param {VectorStyleItemImage} options
+   */
+  addImage(options) {
+    const shape = getShapeFromOptions({ ...options });
+
+    const canvas = /** @type {HTMLCanvasElement} */ (shape.getImage(1));
+    options.src = canvas.toDataURL();
+    this.shapes.push(options);
+  }
+}
+
+/**
+ * @export
+ * TODO refactor to getdefaultShapeCategory...
+ */
+export const shapeCategory = new ShapeCategory();
+const defaultShapeOptions = {
+  fill: new Fill({ color: [255, 255, 255, 1] }),
+  stroke: new Stroke({ color: [0, 0, 0, 1], width: 1 }),
+  radius: 16,
+};
+[
+  null,
+  { points: 3 },
+  { points: 3, angle: Math.PI },
+  { points: 4, angle: Math.PI / 4 },
+  { points: 6 },
+].forEach((additionalOptions) => {
+  const shapeOptions = additionalOptions ?
+    Object.assign(additionalOptions, defaultShapeOptions) :
+    defaultShapeOptions;
+
+  shapeCategory.addImage(shapeOptions);
+});