@vcmap/core 5.0.0-rc.9 → 5.0.1

package/src/layer/cesium/vectorTileImageryProvider.ts

@@ -0,0 +1,222 @@
+import {
+  Event as CesiumEvent,
+  Rectangle,
+  Math as CesiumMath,
+  type Cartographic,
+  type TilingScheme,
+} from '@vcmap-cesium/engine';
+import {
+  compose,
+  create as createTransform,
+  scale as scaleTransform,
+} from 'ol/transform.js';
+import type { Extent } from 'ol/extent.js';
+import type { Coordinate } from 'ol/coordinate.js';
+import type { Size } from 'ol/size.js';
+import type { Feature } from 'ol/index.js';
+// eslint-disable-next-line import/no-named-default
+import type { default as Style, StyleFunction } from 'ol/style/Style.js';
+import TileProvider, {
+  rectangleToExtent,
+} from '../tileProvider/tileProvider.js';
+import { wgs84ToMercatorTransformer } from '../../util/projection.js';
+import CanvasTileRenderer from '../../ol/render/canvas/canvasTileRenderer.js';
+
+export function toContext(
+  extent: Extent,
+  center: Coordinate,
+  context: CanvasRenderingContext2D,
+  tileSize: Size,
+): CanvasTileRenderer {
+  const { canvas } = context;
+  canvas.width = tileSize[0];
+  canvas.height = tileSize[1];
+  canvas.style.width = `${tileSize[0]}px`;
+  canvas.style.height = `${tileSize[1]}px`;
+  const scaleY = (extent[2] - extent[0]) / (extent[3] - extent[1]);
+  const sx = 1 / ((extent[2] - extent[0]) / 256);
+  const sy = -1 / ((extent[3] - extent[1]) / 256);
+  const transform = scaleTransform(createTransform(), 1, 1);
+  const newTransform = compose(
+    transform,
+    128,
+    128,
+    sx,
+    sy,
+    0,
+    -center[0],
+    -center[1],
+  );
+
+  return new CanvasTileRenderer(
+    context,
+    1,
+    extent,
+    newTransform,
+    0,
+    undefined,
+    undefined,
+    scaleY,
+  );
+}
+
+/**
+ * creates a canvas and draws the features on the canvas;
+ */
+export function getCanvasFromFeatures(
+  features: Feature[],
+  extent: Extent,
+  center: Cartographic,
+  tileSize: Size,
+): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = tileSize[0];
+  canvas.height = tileSize[0];
+  const centerMercator = wgs84ToMercatorTransformer([
+    CesiumMath.toDegrees(center.longitude),
+    CesiumMath.toDegrees(center.latitude),
+  ]);
+  const vectorContext = toContext(
+    extent,
+    centerMercator,
+    canvas.getContext('2d') as CanvasRenderingContext2D,
+    tileSize,
+  );
+
+  features.forEach((feature) => {
+    const styleFunction = feature.getStyleFunction() as StyleFunction;
+    const featureStyles = styleFunction(feature, 1) as Style[];
+    featureStyles.forEach((styleToUse) => {
+      vectorContext.drawFeature(feature, styleToUse);
+    });
+  });
+  return canvas;
+}
+
+export type VectorTileImageryProviderOptions = {
+  tileProvider: TileProvider;
+  tileSize: Size;
+};
+
+/**
+ * implementation of Cesium ImageryProvider Interface
+ */
+class VectorTileImageryProvider {
+  tileProvider: TileProvider;
+
+  private _tilingScheme: TilingScheme;
+
+  private _tileSize: Size;
+
+  private _errorEvent = new CesiumEvent();
+
+  emptyCanvas: HTMLCanvasElement;
+
+  minLevel = 0;
+
+  maxLevel = 26;
+
+  _reload: undefined | (() => void) = undefined;
+
+  constructor(options: VectorTileImageryProviderOptions) {
+    this.tileProvider = options.tileProvider;
+    this._tilingScheme = this.tileProvider.tilingScheme;
+    this._tileSize = options.tileSize;
+    this._errorEvent = new CesiumEvent();
+
+    this.emptyCanvas = document.createElement('canvas');
+    this.emptyCanvas.width = this.tileWidth;
+    this.emptyCanvas.height = this.tileHeight;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get _ready(): boolean {
+    return true;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get ready(): boolean {
+    return true;
+  }
+
+  get rectangle(): Rectangle {
+    return this._tilingScheme.rectangle;
+  }
+
+  get tileWidth(): number {
+    return this._tileSize[0];
+  }
+
+  get tileHeight(): number {
+    return this._tileSize[1];
+  }
+
+  get maximumLevel(): number {
+    return this.maxLevel;
+  }
+
+  get minimumLevel(): number {
+    return this.minLevel;
+  }
+
+  get tilingScheme(): TilingScheme {
+    return this._tilingScheme;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get tileDiscardPolicy(): undefined {
+    return undefined;
+  }
+
+  get errorEvent(): CesiumEvent {
+    return this._errorEvent;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get credit(): undefined {
+    return undefined;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get proxy(): undefined {
+    return undefined;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  get hasAlphaChannel(): boolean {
+    return true;
+  }
+
+  /**
+   * Requests the image for a given tile.  This function should
+   * not be called before  returns true.
+   *
+   * @param  x The tile X coordinate.
+   * @param  y The tile Y coordinate.
+   * @param  level The tile level.
+   * @returns  A promise for the image that will resolve when the image is available, or
+   *          undefined if there are too many active requests to the server, and the request
+   *          should be retried later.  The resolved image may be either an
+   *          Image or a Canvas DOM object.
+   */
+  async requestImage(
+    x: number,
+    y: number,
+    level: number,
+  ): Promise<HTMLImageElement | HTMLCanvasElement> {
+    const features = await this.tileProvider.getFeaturesForTile(x, y, level);
+    if (features.length === 0) {
+      return this.emptyCanvas;
+    }
+    const rectangle = this.tileProvider.tilingScheme.tileXYToRectangle(
+      x,
+      y,
+      level,
+    );
+    const extent = rectangleToExtent(rectangle);
+    const center = Rectangle.center(rectangle);
+    return getCanvasFromFeatures(features, extent, center, this._tileSize);
+  }
+}
+
+export default VectorTileImageryProvider;

package/src/layer/cesium/{wmsCesiumImpl.js → wmsCesiumImpl.ts}

@@ -1,49 +1,48 @@
-import { ImageryLayer as CesiumImageryLayer, Rectangle, WebMercatorTilingScheme, WebMapServiceImageryProvider } from '@vcmap/cesium';
+import {
+  ImageryLayer as CesiumImageryLayer,
+  Rectangle,
+  WebMercatorTilingScheme,
+  WebMapServiceImageryProvider,
+} from '@vcmap-cesium/engine';
+import type { Size } from 'ol/size.js';
 
 import RasterLayerCesiumImpl from './rasterLayerCesiumImpl.js';
 import { wgs84Projection } from '../../util/projection.js';
+import type { WMSImplementationOptions } from '../wmsLayer.js';
+import type CesiumMap from '../../map/cesiumMap.js';
 
 /**
  * represents a specific Cesium WmsCesiumImpl Layer class.
- * @class
- * @export
- * @extends {RasterLayerCesiumImpl}
  */
 class WmsCesiumImpl extends RasterLayerCesiumImpl {
-  static get className() { return 'WmsCesiumImpl'; }
+  static get className(): string {
+    return 'WmsCesiumImpl';
+  }
+
+  parameters: Record<string, string>;
+
+  highResolution: boolean;
+
+  tileSize: Size;
 
-  /**
-   * @param {import("@vcmap/core").CesiumMap} map
-   * @param {WMSImplementationOptions} options
-   */
-  constructor(map, options) {
+  constructor(map: CesiumMap, options: WMSImplementationOptions) {
     super(map, options);
-    /**
-     * @type {Object<string, *>}
-     */
     this.parameters = options.parameters;
-    /**
-     * @type {boolean}
-     */
     this.highResolution = options.highResolution;
-    /**
-     * @type {import("ol/size").Size}
-     */
     this.tileSize = options.tileSize;
   }
 
-  getCesiumLayer() {
+  getCesiumLayer(): Promise<CesiumImageryLayer> {
     const parameters = { ...this.parameters };
     if (this.highResolution) {
-      parameters.width = this.tileSize[0] * 2;
-      parameters.height = this.tileSize[1] * 2;
+      parameters.width = String(this.tileSize[0] * 2);
+      parameters.height = String(this.tileSize[1] * 2);
     }
-    const options = {
-      url: this.url,
+    const options: WebMapServiceImageryProvider.ConstructorOptions = {
+      url: this.url as string,
       layers: parameters.LAYERS,
       minimumLevel: this.minLevel,
       maximumLevel: this.maxLevel,
-      show: false,
       parameters,
       tileWidth: this.tileSize[0],
       tileHeight: this.tileSize[1],
@@ -52,7 +51,12 @@ class WmsCesiumImpl extends RasterLayerCesiumImpl {
     if (this.extent && this.extent.isValid()) {
       const extent = this.extent.getCoordinatesInProjection(wgs84Projection);
       if (extent) {
-        options.rectangle = Rectangle.fromDegrees(extent[0], extent[1], extent[2], extent[3]);
+        options.rectangle = Rectangle.fromDegrees(
+          extent[0],
+          extent[1],
+          extent[2],
+          extent[3],
+        );
       }
     }
     if (this.tilingSchema === 'mercator') {
@@ -64,7 +68,9 @@ class WmsCesiumImpl extends RasterLayerCesiumImpl {
       alpha: this.opacity,
       splitDirection: this.splitDirection,
     };
-    return new CesiumImageryLayer(imageryProvider, layerOptions);
+    return Promise.resolve(
+      new CesiumImageryLayer(imageryProvider, layerOptions),
+    );
   }
 }
 

package/src/layer/cesium/{wmtsCesiumImpl.js → wmtsCesiumImpl.ts}

@@ -1,86 +1,77 @@
-import { Rectangle, WebMapTileServiceImageryProvider, ImageryLayer as CesiumImageryLayer } from '@vcmap/cesium';
+import {
+  Rectangle,
+  WebMapTileServiceImageryProvider,
+  ImageryLayer as CesiumImageryLayer,
+} from '@vcmap-cesium/engine';
+import type { Size } from 'ol/size.js';
 import RasterLayerCesiumImpl from './rasterLayerCesiumImpl.js';
 import { wgs84Projection } from '../../util/projection.js';
 import { getTilingScheme } from '../rasterLayer.js';
+import type { WMTSImplementationOptions } from '../wmtsLayer.js';
+import type CesiumMap from '../../map/cesiumMap.js';
 
 /**
  * represents a specific WmtsLayer Implementation for {@link CesiumMap}.
- * @class
- * @export
- * @extends {RasterLayerCesiumImpl}
  */
 class WmtsCesiumImpl extends RasterLayerCesiumImpl {
-  static get className() { return 'WmtsCesiumImpl'; }
+  static get className(): string {
+    return 'WmtsCesiumImpl';
+  }
+
+  layer: string;
+
+  style: string;
+
+  format: string;
+
+  tileMatrixSetID: string;
+
+  tileSize: Size;
+
+  numberOfLevelZeroTilesX: number;
+
+  numberOfLevelZeroTilesY: number;
+
+  matrixIds: Array<string>;
 
-  /**
-   * @param {import("@vcmap/core").CesiumMap} map
-   * @param {WMTSImplementationOptions} options
-   */
-  constructor(map, options) {
+  constructor(map: CesiumMap, options: WMTSImplementationOptions) {
     super(map, options);
 
-    /**
-     * @type {string}
-     */
     this.layer = options.layer;
-
-    /**
-     * @type {string}
-     */
     this.style = options.style;
-
-    /**
-     * @type {string}
-     */
     this.format = options.format;
-
-    /**
-     * @type {string}
-     */
     this.tileMatrixSetID = options.tileMatrixSetID;
-
-    /**
-     * @type {import("ol/size").Size}
-     */
     this.tileSize = options.tileSize;
-
-    /**
-     * @type {number}
-     */
     this.numberOfLevelZeroTilesX = options.numberOfLevelZeroTilesX;
-
-    /**
-     * @type {number}
-     */
     this.numberOfLevelZeroTilesY = options.numberOfLevelZeroTilesY;
-
-    /**
-     * @type {Array<string>}
-     */
     this.matrixIds = options.matrixIds;
   }
 
-
-  /**
-   * @returns {import("@vcmap/cesium").ImageryLayer}
-   */
-  getCesiumLayer() {
+  getCesiumLayer(): Promise<CesiumImageryLayer> {
+    const currentUrl = this.url as string;
     // This is a bug in Cesium, they cant cope with {Layer} placeholder..
-    const url = this.url.indexOf('{Layer}') !== -1 ? this.url.replace('{Layer}', this.layer) : this.url;
-    const extent = this.extent.getCoordinatesInProjection(wgs84Projection);
-    const options = {
+    const url =
+      currentUrl.indexOf('{Layer}') !== -1
+        ? currentUrl.replace('{Layer}', this.layer)
+        : currentUrl;
+    const extent = this.extent!.getCoordinatesInProjection(wgs84Projection);
+    const options: WebMapTileServiceImageryProvider.ConstructorOptions = {
       url,
       layer: this.layer,
       style: this.style,
       format: this.format,
       tileMatrixSetID: this.tileMatrixSetID,
       maximumLevel: this.maxLevel,
-      rectangle: Rectangle.fromDegrees(extent[0], extent[1], extent[2], extent[3]),
+      rectangle: Rectangle.fromDegrees(
+        extent[0],
+        extent[1],
+        extent[2],
+        extent[3],
+      ),
       tileWidth: this.tileSize[0],
       tileHeight: this.tileSize[1],
     };
 
-
     options.tilingScheme = getTilingScheme({
       tilingSchema: this.tilingSchema,
       numberOfLevelZeroTilesX: this.numberOfLevelZeroTilesX,
@@ -94,7 +85,9 @@ class WmtsCesiumImpl extends RasterLayerCesiumImpl {
       alpha: this.opacity,
       splitDirection: this.splitDirection,
     };
-    return new CesiumImageryLayer(imageryProvider, layerOptions);
+    return Promise.resolve(
+      new CesiumImageryLayer(imageryProvider, layerOptions),
+    );
   }
 }