@vcmap/core 6.3.0-rc.2 → 6.3.0

package/src/featureProvider/mapboxFeatureProvider.ts

@@ -0,0 +1,74 @@
+import { v4 as uuid } from 'uuid';
+import OLMap from 'ol/Map.js';
+import type Feature from 'ol/Feature.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import type LayerGroup from 'ol/layer/Group.js';
+import type RenderFeature from 'ol/render/Feature.js';
+import { toFeature } from 'ol/render/Feature.js';
+import type Layer from '../layer/layer.js';
+import { vcsLayerName } from '../layer/layerSymbols.js';
+import AbstractFeatureProvider, {
+  type AbstractFeatureProviderOptions,
+} from './abstractFeatureProvider.js';
+import { isProvidedFeature } from './featureProviderSymbols.js';
+
+export type MapboxFeatureProviderOptions = AbstractFeatureProviderOptions & {
+  styledMapboxLayerGroup: LayerGroup;
+  excludeLayerFromPicking?: string[];
+};
+
+export default class MapboxFeatureProvider extends AbstractFeatureProvider {
+  static get className(): string {
+    return 'MapboxFeatureProvider';
+  }
+
+  protected _inRenderingOrder = true;
+
+  private _renderMap = new OLMap({ target: document.createElement('div') });
+  private _excludeLayerFromPicking?: string[];
+
+  constructor(options: MapboxFeatureProviderOptions) {
+    super(options);
+
+    this._renderMap.setSize([256, 256]);
+    this._renderMap.addLayer(options.styledMapboxLayerGroup);
+    this._excludeLayerFromPicking = options.excludeLayerFromPicking;
+  }
+
+  getFeaturesByCoordinate(
+    coordinate: Coordinate,
+    resolution: number,
+    layer: Layer,
+  ): Promise<Feature[]> {
+    const view = this._renderMap.getView();
+    view.setCenter(coordinate);
+    view.setResolution(resolution);
+
+    this._renderMap.renderSync();
+
+    const featuresAtPixel = this._renderMap.getFeaturesAtPixel([
+      128, 128,
+    ]) as RenderFeature[];
+    const features = featuresAtPixel
+      .filter((rf) => {
+        const layerSource = rf.get('mvt:layer') as string;
+        return !this._excludeLayerFromPicking?.includes(layerSource);
+      })
+      .map((f) => toFeature(f));
+
+    features.forEach((f) => {
+      f[vcsLayerName] = layer.name;
+      f[isProvidedFeature] = true;
+      if (!f.getId()) {
+        f.setId(uuid());
+      }
+    });
+    return Promise.resolve(features);
+  }
+
+  destroy(): void {
+    this._renderMap.setTarget(undefined);
+    this._renderMap.dispose();
+    super.destroy();
+  }
+}

package/src/featureProvider/wmsFeatureProvider.ts

@@ -83,6 +83,11 @@ export type WMSFeatureProviderOptions = AbstractFeatureProviderOptions & {
    * Optional headers to include in GetFeatureInfo requests. Overrides layer headers.
    */
   headers?: Record<string, string>;
+
+  /**
+   * Optional RegExp string to evaluate text/html responses. If it matches the response, it will be treated as an empty response with no features.
+   */
+  textHTMLEvaluator?: string;
 };
 
 const gmlFormats = { GML: GML3, GML2, GML3, GML32 };
@@ -165,7 +170,7 @@ export function getFormat(
  * @param coordinate - Coordinate in geographic projection
  * @returns Meters per degree at the coordinate's latitude
  */
-function getMetersPerDegreeAtCoordinate(coordinate: Coordinate): number {
+export function getMetersPerDegreeAtCoordinate(coordinate: Coordinate): number {
   const latitude = coordinate[1];
   const latitudeRadians = (latitude * Math.PI) / 180;
 
@@ -197,6 +202,7 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
       parameters: {},
       extent: undefined,
       headers: undefined,
+      textHTMLEvaluator: undefined,
     };
   }
 
@@ -244,6 +250,8 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
    */
   headers?: Record<string, string>;
 
+  private _textHTMLEvaluator: string | undefined;
+
   constructor(options: WMSFeatureProviderOptions) {
     const defaultOptions = WMSFeatureProvider.getDefaultOptions();
     super({ ...defaultOptions, ...options });
@@ -285,6 +293,9 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
     this.headers = options.headers
       ? structuredClone(options.headers)
       : undefined;
+    if (options.textHTMLEvaluator) {
+      this._textHTMLEvaluator = options.textHTMLEvaluator;
+    }
   }
 
   get wmsSource(): TileWMS {
@@ -350,13 +361,10 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
       return [];
     }
 
-    const projection = this.wmsSource.getProjection() as OLProjection;
-    let coords = coordinate;
     let res = resolution;
-    if (projection) {
-      const transform = getTransform(mercatorProjection.proj, projection);
-      coords = transform(coordinate.slice());
-    }
+    const projection = this.wmsSource.getProjection() as OLProjection;
+    const transform = getTransform(mercatorProjection.proj, projection);
+    const coords = transform(coordinate.slice());
     if (projection.getUnits() === 'degrees') {
       const metersPerDegree = getMetersPerDegreeAtCoordinate(coords);
       res = resolution / metersPerDegree;
@@ -366,7 +374,10 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
       INFO_FORMAT: this.featureInfoResponseType,
     });
 
-    if (this.featureInfoResponseType === 'text/html') {
+    if (
+      this.featureInfoResponseType === 'text/html' &&
+      !this._textHTMLEvaluator
+    ) {
       return this.featureResponseCallback(null, coordinate).map((f) =>
         this.getProviderFeature(f, layer),
       );
@@ -380,6 +391,13 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
         this.getLogger().error(`Failed fetching WMS FeatureInfo ${url}`);
         return [];
       }
+      if (
+        this.featureInfoResponseType === 'text/html' &&
+        this._textHTMLEvaluator &&
+        RegExp(this._textHTMLEvaluator).test(data)
+      ) {
+        return [];
+      }
       return this.featureResponseCallback(data, coordinate).map((f) =>
         this.getProviderFeature(f, layer),
       );
@@ -444,6 +462,9 @@ class WMSFeatureProvider extends AbstractFeatureProvider {
     if (this.headers) {
       config.headers = structuredClone(this.headers);
     }
+    if (this._textHTMLEvaluator) {
+      config.textHTMLEvaluator = this._textHTMLEvaluator;
+    }
 
     return config as WMSFeatureProviderOptions;
   }

package/src/interaction/eventHandler.ts

@@ -76,7 +76,9 @@ class EventHandler {
     this._positionInteraction = new CoordinateAtPixel();
     this._featureInteraction = new FeatureAtPixelInteraction();
     this._ensurePositionInteraction = new EnsurePositionInteraction();
-    this._featureProviderInteraction = new FeatureProviderInteraction();
+    this._featureProviderInteraction = new FeatureProviderInteraction({
+      respectRenderingOrder: true,
+    });
     this._interactionChain = new InteractionChain([
       this._positionInteraction,
       this._featureInteraction,

package/src/interaction/featureAtPixelInteraction.ts

@@ -15,6 +15,7 @@ import {
 } from '@vcmap-cesium/engine';
 import type OLMap from 'ol/Map.js';
 import Feature from 'ol/Feature.js';
+import RenderFeature from 'ol/render/Feature.js';
 import { Point } from 'ol/geom.js';
 import { v4 as uuid } from 'uuid';
 import AbstractInteraction, {
@@ -67,6 +68,10 @@ function getFeatureFromOlMap(
     pixel,
     (feat) => {
       let candidateFeature = feat;
+      if (candidateFeature instanceof RenderFeature) {
+        // Mapbox Feature, need to go through FeatureProvider
+        return true;
+      }
       if (
         candidateFeature &&
         (candidateFeature.get('olcs_allowPicking') == null ||

package/src/interaction/featureProviderInteraction.ts

@@ -1,3 +1,4 @@
+import { parseBoolean } from '@vcsuite/parsers';
 import type { Coordinate } from 'ol/coordinate.js';
 import Point from 'ol/geom/Point.js';
 import Feature from 'ol/Feature.js';
@@ -19,17 +20,38 @@ import { vcsLayerName } from '../layer/layerSymbols.js';
 import CompositeFeatureProvider from '../featureProvider/compositeFeatureProvider.js';
 import AbstractAttributeProvider from '../featureProvider/abstractAttributeProvider.js';
 
+type FeatureProviderInteractionOptions = {
+  /**
+   * Whether to respect the rendering order of features. Defaults to false, but when set to true and `inRenderingOrder` is set to true on the FeatureProvider as well, only the first feature will be returned.
+   * Used for MapboxFeatureProvider, to return only the top most feature on picking (respectRenderingOrder set to true in EventHandler), but return all the features for deep picking (respectRenderingOrder set to false in DeepPicking action)
+   */
+  respectRenderingOrder?: boolean;
+};
+
 /**
  * @group Interaction
  */
 class FeatureProviderInteraction extends AbstractInteraction {
-  constructor() {
+  static getDefaultOptions(): FeatureProviderInteractionOptions {
+    return {
+      respectRenderingOrder: false,
+    };
+  }
+
+  private _respectRenderingOrder: boolean;
+  constructor(options?: FeatureProviderInteractionOptions) {
     super(EventType.CLICK, ModificationKeyType.ALL, PointerKeyType.ALL);
 
+    const defaultOptions = FeatureProviderInteraction.getDefaultOptions();
+
+    this._respectRenderingOrder = parseBoolean(
+      options?.respectRenderingOrder,
+      defaultOptions.respectRenderingOrder,
+    );
+
     this.setActive();
   }
 
-  // eslint-disable-next-line class-methods-use-this
   async pipe(event: InteractionEvent): Promise<InteractionEvent> {
     if (!event.feature) {
       const layersWithProvider = [...event.map.layerCollection]
@@ -50,15 +72,22 @@ class FeatureProviderInteraction extends AbstractInteraction {
         // TODO make sure the layers are rendered, check min/max RenderingResolution
         const features = (
           await Promise.all(
-            layersWithProvider.map((l) =>
-              (
-                l.featureProvider as AbstractFeatureProvider
-              ).getFeaturesByCoordinate?.(
+            layersWithProvider.map(async (l) => {
+              const featureProvider =
+                l.featureProvider as AbstractFeatureProvider;
+              const f = await featureProvider.getFeaturesByCoordinate?.(
                 event.position as Coordinate,
                 resolution,
                 l,
-              ),
-            ),
+              );
+              if (
+                this._respectRenderingOrder &&
+                featureProvider.inRenderingOrder
+              ) {
+                return f.slice(0, 1);
+              }
+              return f;
+            }),
           )
         )
           .filter((f) => !!f)

package/src/layer/cesium/mapboxStyleCesiumImpl.ts

@@ -0,0 +1,95 @@
+import {
+  ImageryLayer as CesiumImageryLayer,
+  Rectangle,
+} from '@vcmap-cesium/engine';
+import type { SplitDirection } from '@vcmap-cesium/engine';
+import type LayerGroup from 'ol/layer/Group.js';
+import type BaseCesiumMap from '../../map/baseCesiumMap.js';
+import { wgs84Projection } from '../../util/projection.js';
+import { TilingScheme } from '../rasterLayer.js';
+import type { LayerImplementationOptions } from '../layer.js';
+import TileProvider from '../tileProvider/tileProvider.js';
+import MapboxStyleImageryProvider, {
+  type MapboxStyleImageryProviderOptions,
+} from './mapboxStyleImageryProvider.js';
+import RasterLayerCesiumImpl from './rasterLayerCesiumImpl.js';
+
+export type MapboxStyleLayerImplementationOptions =
+  LayerImplementationOptions & {
+    styledMapboxLayerGroup: LayerGroup;
+    splitDirection: SplitDirection;
+    minRenderingLevel?: number;
+    maxRenderingLevel?: number;
+  };
+
+class MapboxStyleCesiumImpl extends RasterLayerCesiumImpl {
+  static get className(): string {
+    return 'MapboxStyleCesiumImpl';
+  }
+
+  private _styledMapboxLayerGroup: LayerGroup;
+
+  minRenderingLevel: number | undefined;
+
+  maxRenderingLevel: number | undefined;
+
+  imageryProvider: MapboxStyleImageryProvider | undefined = undefined;
+
+  constructor(
+    map: BaseCesiumMap,
+    options: MapboxStyleLayerImplementationOptions,
+  ) {
+    super(map, {
+      ...options,
+      minLevel: 0,
+      maxLevel: 25,
+      tilingSchema: TilingScheme.MERCATOR,
+      opacity: 1,
+    });
+    this._styledMapboxLayerGroup = options.styledMapboxLayerGroup;
+    this.minRenderingLevel = options.minRenderingLevel;
+    this.maxRenderingLevel = options.maxRenderingLevel;
+  }
+
+  async activate(): Promise<void> {
+    await super.activate();
+    if (this.active) {
+      this._styledMapboxLayerGroup.setVisible(true);
+    }
+  }
+
+  getCesiumLayer(): Promise<CesiumImageryLayer> {
+    const options: MapboxStyleImageryProviderOptions = {
+      headers: this.headers,
+      styledMapboxLayerGroup: this._styledMapboxLayerGroup,
+      minimumTerrainLevel: this.minRenderingLevel,
+      maximumTerrainLevel: this.maxRenderingLevel,
+      tileProvider: new TileProvider({}),
+      tileSize: [256, 256],
+    };
+
+    this.imageryProvider = new MapboxStyleImageryProvider(options);
+
+    const layerOptions = this.getCesiumLayerOptions();
+    if (this.extent && this.extent.isValid()) {
+      const extent = this.extent.getCoordinatesInProjection(wgs84Projection);
+      layerOptions.rectangle = Rectangle.fromDegrees(
+        extent[0],
+        extent[1],
+        extent[2],
+        extent[3],
+      );
+    }
+    return Promise.resolve(
+      // @ts-expect-error mistyped
+      new CesiumImageryLayer(this.imageryProvider, layerOptions),
+    );
+  }
+
+  destroy(): void {
+    this.imageryProvider?.destroy();
+    super.destroy();
+  }
+}
+
+export default MapboxStyleCesiumImpl;

package/src/layer/cesium/mapboxStyleImageryProvider.ts

@@ -0,0 +1,214 @@
+import { parseInteger } from '@vcsuite/parsers';
+import { getLogger } from '@vcsuite/logger';
+import type LayerGroup from 'ol/layer/Group.js';
+import { getCenter, buffer } from 'ol/extent.js';
+import LRUCache from 'ol/structs/LRUCache.js';
+import OLMap from 'ol/Map.js';
+import { rectangleToMercatorExtent } from '../../util/math.js';
+import VectorTileImageryProvider from './vectorTileImageryProvider.js';
+import type { VectorTileImageryProviderOptions } from './vectorTileImageryProvider.js';
+
+export type MapboxStyleImageryProviderOptions =
+  VectorTileImageryProviderOptions & {
+    styledMapboxLayerGroup: LayerGroup;
+    minimumTerrainLevel?: number;
+    maximumTerrainLevel?: number;
+    tileCacheSize?: number;
+  };
+
+function getTileCacheKey(x: number, y: number, level: number): string {
+  return `${x}-${y}-${level}`;
+}
+
+function getGutterSize(level: number): number {
+  if (level < 12) {
+    return 32;
+  }
+  if (level < 15) {
+    return 48;
+  }
+  return 64;
+}
+
+/**
+ * Implementation of Cesium ImageryProvider Interface for Mapbox Style Tiles
+ */
+class MapboxStyleImageryProvider extends VectorTileImageryProvider {
+  static get className(): string {
+    return 'MapboxStyleImageryProvider';
+  }
+
+  private _tileCacheByLevel: Map<number, LRUCache<HTMLCanvasElement>>;
+
+  private _maxCacheSize: number;
+
+  private _isRendering = false;
+
+  private _renderMap = new OLMap({
+    target: document.createElement('div'),
+  });
+
+  constructor(options: MapboxStyleImageryProviderOptions) {
+    super(options);
+
+    this._tileCacheByLevel = new Map();
+    this._maxCacheSize = parseInteger(options.tileCacheSize, 100);
+    this._renderMap.addLayer(options.styledMapboxLayerGroup);
+  }
+
+  requestImage(
+    x: number,
+    y: number,
+    level: number,
+  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
+    const cacheKey = getTileCacheKey(x, y, level);
+    const levelCache = this._getLevelCache(level);
+    if (levelCache.containsKey(cacheKey)) {
+      return Promise.resolve(levelCache.get(cacheKey));
+    }
+    if (this._isRendering) {
+      return undefined;
+    }
+    return this._doRequestImage(x, y, level, cacheKey);
+  }
+
+  private async _doRequestImage(
+    x: number,
+    y: number,
+    level: number,
+    cacheKey: string,
+  ): Promise<HTMLImageElement | HTMLCanvasElement> {
+    const { tilingScheme } = this.tileProvider;
+    const rectangle = tilingScheme.tileXYToRectangle(x, y, level);
+    const extent = rectangleToMercatorExtent(rectangle);
+
+    // Add gutters to prevent labels from being cut off
+    const gutterSize = getGutterSize(level);
+    const gutter = ((extent[2] - extent[0]) / this.tileWidth) * gutterSize;
+    const expandedExtent = buffer(extent, gutter);
+
+    const renderedTile = await this._renderTile(
+      level,
+      expandedExtent,
+      gutterSize,
+    );
+    const levelCache = this._getLevelCache(level);
+    levelCache.set(cacheKey, renderedTile);
+    levelCache.expireCache();
+    return renderedTile;
+  }
+
+  private _getLevelCache(level: number): LRUCache<HTMLCanvasElement> {
+    const existing = this._tileCacheByLevel.get(level);
+    if (existing) {
+      return existing;
+    }
+    const cache = new LRUCache<HTMLCanvasElement>(this._maxCacheSize);
+    this._tileCacheByLevel.set(level, cache);
+    return cache;
+  }
+
+  private _renderTile(
+    level: number,
+    extent: number[],
+    gutterSize: number,
+  ): Promise<HTMLCanvasElement> {
+    const TIMEOUT_MS = 2500;
+    return new Promise((resolve) => {
+      this._isRendering = true;
+      let isFinished = false;
+      const finish = (canvas: HTMLCanvasElement): void => {
+        if (isFinished) {
+          return;
+        }
+        isFinished = true;
+        this._isRendering = false;
+        resolve(canvas);
+      };
+
+      try {
+        if (!this._renderMap) {
+          finish(this.emptyCanvas);
+          return;
+        }
+
+        const renderWidth = this.tileWidth + 2 * gutterSize;
+        const renderHeight = this.tileHeight + 2 * gutterSize;
+
+        const view = this._renderMap.getView();
+        view.setCenter(getCenter(extent));
+        view.setZoom(level);
+        this._renderMap.setSize([renderWidth, renderHeight]);
+
+        const handleRenderComplete = (): void => {
+          this._renderMap?.un('rendercomplete', handleRenderComplete);
+
+          const renderedCanvas = this._renderMap
+            ?.getViewport()
+            .querySelector('canvas');
+
+          if (!renderedCanvas) {
+            finish(this.emptyCanvas);
+            return;
+          }
+
+          // Crop the canvas to extract the center portion (original tile size)
+          const tileCanvas = document.createElement('canvas');
+          tileCanvas.width = this.tileWidth;
+          tileCanvas.height = this.tileHeight;
+          const ctx = tileCanvas.getContext('2d');
+          if (ctx) {
+            const scaleX = renderedCanvas.width / renderWidth;
+            const scaleY = renderedCanvas.height / renderHeight;
+            ctx.drawImage(
+              renderedCanvas,
+              gutterSize * scaleX,
+              gutterSize * scaleY,
+              this.tileWidth * scaleX,
+              this.tileHeight * scaleY,
+              0,
+              0,
+              this.tileWidth,
+              this.tileHeight,
+            );
+          }
+
+          finish(tileCanvas);
+        };
+
+        const timeoutId = window.setTimeout(() => {
+          this._renderMap?.un('rendercomplete', handleRenderComplete);
+          getLogger('MapboxVectorTileImageryProvider').warning(
+            'Tile render timed out; returning empty tile.',
+          );
+          finish(this.emptyCanvas);
+        }, TIMEOUT_MS);
+
+        const wrappedHandleRenderComplete = (): void => {
+          window.clearTimeout(timeoutId);
+          handleRenderComplete();
+        };
+
+        this._renderMap.once('rendercomplete', wrappedHandleRenderComplete);
+        this._renderMap.render();
+      } catch (e: unknown) {
+        getLogger('MapboxVectorTileImageryProvider').error(
+          `Error rendering tile: ${(e as Error).message}`,
+        );
+        finish(this.emptyCanvas);
+      }
+    });
+  }
+
+  destroy(): void {
+    for (const cache of this._tileCacheByLevel.values()) {
+      cache.clear();
+    }
+    this._tileCacheByLevel.clear();
+    this._isRendering = false;
+    this._renderMap?.setTarget(undefined);
+    this._renderMap?.dispose();
+  }
+}
+
+export default MapboxStyleImageryProvider;

package/src/layer/cesium/vectorTileImageryProvider.ts

@@ -207,7 +207,8 @@ class VectorTileImageryProvider {
     x: number,
     y: number,
     level: number,
-  ): Promise<HTMLImageElement | HTMLCanvasElement> {
+    // @ts-expect-error returns undefined if there are too many active requests
+  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
     const features = await this.tileProvider.getFeaturesForTile(
       x,
       y,

package/src/layer/i3sLayer.ts

@@ -33,7 +33,7 @@ export type I3SOptions = LayerOptions & {
   calculateNormals?: boolean;
   showFeatures?: boolean;
   cesium3dTilesetOptions?: Cesium3DTileset.ConstructorOptions;
-  lightColor?: { x: number; y: number; z: number };
+  lightColor?: string;
   outlineColor?: string;
   screenSpaceError?: number;
   screenSpaceErrorMobile?: number;
@@ -85,7 +85,7 @@ class I3SLayer extends FeatureLayer<I3SCesiumImpl> {
   cesium3dTilesetOptions:
     | Partial<Cesium3DTileset.ConstructorOptions>
     | undefined;
-  lightColor: { x: number; y: number; z: number } | undefined;
+  lightColor: string | undefined;
   outlineColor: string | undefined;
   screenSpaceError: number;
   screenSpaceErrorMobile: number;
@@ -135,18 +135,18 @@ class I3SLayer extends FeatureLayer<I3SCesiumImpl> {
     const cesium3dTilesetOptions =
       options.cesium3dTilesetOptions || defaultOptions.cesium3dTilesetOptions;
 
+    let lightColor: Cartesian3 | undefined;
+    if (options.lightColor) {
+      const color = Color.fromCssColorString(options.lightColor);
+      lightColor = new Cartesian3(...color.toBytes());
+    }
+
     this.cesium3dTilesetOptions = {
       maximumScreenSpaceError: isMobile()
         ? this.screenSpaceErrorMobile
         : this.screenSpaceError,
       ...cesium3dTilesetOptions,
-      ...(options.lightColor && {
-        lightColor: new Cartesian3(
-          options.lightColor.x,
-          options.lightColor.y,
-          options.lightColor.z,
-        ),
-      }),
+      lightColor,
       ...(options.outlineColor && {
         outlineColor: Color.fromCssColorString(options.outlineColor),
       }),
@@ -290,11 +290,9 @@ class I3SLayer extends FeatureLayer<I3SCesiumImpl> {
     delete tilesetOptions.outlineColor;
 
     if (tilesetOptions.lightColor) {
-      config.lightColor = {
-        x: tilesetOptions.lightColor.x,
-        y: tilesetOptions.lightColor.y,
-        z: tilesetOptions.lightColor.z,
-      };
+      const { x, y, z } = tilesetOptions.lightColor;
+      const color = Color.fromBytes(x, y, z);
+      config.lightColor = color.toCssHexString();
     }
     delete tilesetOptions.lightColor;