@vcmap/core 6.3.0-rc.3 → 6.3.0

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/mapboxStyleLayer.ts

@@ -0,0 +1,244 @@
+import { SplitDirection } from '@vcmap-cesium/engine';
+import { parseInteger } from '@vcsuite/parsers';
+import { is } from '@vcsuite/check';
+import Collection from 'ol/Collection.js';
+import LayerGroup from 'ol/layer/Group.js';
+import type BaseLayer from 'ol/layer/Base.js';
+import { apply } from 'ol-mapbox-style';
+import { layerClassRegistry } from '../classRegistry.js';
+import AbstractAttributeProvider from '../featureProvider/abstractAttributeProvider.js';
+import CompositeFeatureProvider from '../featureProvider/compositeFeatureProvider.js';
+import MapboxFeatureProvider from '../featureProvider/mapboxFeatureProvider.js';
+import type VcsMap from '../map/vcsMap.js';
+import BaseCesiumMap from '../map/baseCesiumMap.js';
+import CesiumMap from '../map/cesiumMap.js';
+import ObliqueMap from '../map/obliqueMap.js';
+import OpenlayersMap from '../map/openlayersMap.js';
+import PanoramaMap from '../map/panoramaMap.js';
+import VcsEvent from '../vcsEvent.js';
+import MapboxVectorRasterTileCesiumImpl, {
+  type MapboxStyleLayerImplementationOptions,
+} from './cesium/mapboxStyleCesiumImpl.js';
+import Layer from './layer.js';
+import type { LayerOptions, SplitLayer } from './layer.js';
+import type LayerImplementation from './layerImplementation.js';
+import MapboxVectorTileOpenlayersImpl from './openlayers/mapboxStyleOpenlayersImpl.js';
+import { allowPicking, vcsLayerName } from './layerSymbols.js';
+
+export type MapboxStyleOptions = LayerOptions & {
+  /** The sources from the Mapbox Style to use. If not provided, all sources from the style will be used. */
+  sources?: string[];
+  /** The Mapbox layers to exclude from picking. */
+  excludeLayerFromPicking?: string[];
+  /** either 'left' or 'right', none if omitted */
+  splitDirection?: string;
+  /** configures the visible level in the rendered map. Maps to Openlayers `minZoom` and Cesium `minimiumTerrainLevel` */
+  minRenderingLevel?: number;
+  /** configures the visible level in the rendered map. Maps to Openlayers `maxZoom` and Cesium `maximumTerrainLevel` */
+  maxRenderingLevel?: number;
+};
+
+export interface MaboxStyleImplementation extends LayerImplementation<VcsMap> {
+  updateSplitDirection(direction: SplitDirection): void;
+}
+
+/**
+ * Layer class for Mapbox Style layers.
+ * @group Layer
+ */
+class MapboxStyleLayer
+  extends Layer<MaboxStyleImplementation>
+  implements SplitLayer
+{
+  static get className(): string {
+    return 'MapboxStyleLayer';
+  }
+
+  static getDefaultOptions(): MapboxStyleOptions {
+    return {
+      ...Layer.getDefaultOptions(),
+      minRenderingLevel: undefined,
+      maxRenderingLevel: undefined,
+    };
+  }
+
+  protected _supportedMaps = [
+    CesiumMap.className,
+    ObliqueMap.className,
+    OpenlayersMap.className,
+    PanoramaMap.className,
+  ];
+  private _mapboxLayerGroup: LayerGroup;
+  private _sources?: string[];
+  private _excludeLayerFromPicking?: string[];
+  private _splitDirection: SplitDirection = SplitDirection.NONE;
+  splitDirectionChanged = new VcsEvent<SplitDirection>();
+  /**
+   * defines the visible level in the rendered map, maps to Openlayers `minZoom` and Cesium `minimiumTerrainLevel`.
+   * Changes requires calling layer.redraw() to take effect.
+   */
+  minRenderingLevel: number | undefined;
+  /**
+   * defines the visible level in the rendered map, maps to Openlayers `minZoom` and Cesium `minimiumTerrainLevel`.
+   * Changes requires calling layer.redraw() to take effect.
+   */
+  maxRenderingLevel: number | undefined;
+
+  constructor(options: MapboxStyleOptions) {
+    const defaultOptions = MapboxStyleLayer.getDefaultOptions();
+    super({ ...defaultOptions, ...options });
+
+    this._sources = options.sources;
+    this._excludeLayerFromPicking = options.excludeLayerFromPicking;
+    if (options.splitDirection) {
+      this._splitDirection =
+        options.splitDirection === 'left'
+          ? SplitDirection.LEFT
+          : SplitDirection.RIGHT;
+    }
+    this.minRenderingLevel = parseInteger(
+      options.minRenderingLevel,
+      defaultOptions.minRenderingLevel,
+    );
+    this.maxRenderingLevel = parseInteger(
+      options.maxRenderingLevel,
+      defaultOptions.maxRenderingLevel,
+    );
+
+    this._mapboxLayerGroup = new LayerGroup({
+      minZoom: this.minRenderingLevel,
+      maxZoom: this.maxRenderingLevel,
+    });
+  }
+
+  async initialize(): Promise<void> {
+    if (!this.initialized) {
+      await apply(this._mapboxLayerGroup, this.url);
+
+      const layers = this._mapboxLayerGroup.getLayersArray();
+      layers.forEach((layer) => {
+        layer[vcsLayerName] = this.name;
+        layer[allowPicking] = super.allowPicking;
+      });
+
+      if (this._sources && this._sources.length > 0) {
+        const filteredCollection = new Collection<BaseLayer>();
+        layers
+          .filter((layer) =>
+            this._sources!.includes(layer.get('mapbox-source') as string),
+          )
+          .forEach((layer) => {
+            filteredCollection.push(layer);
+          });
+
+        this._mapboxLayerGroup.setLayers(filteredCollection);
+      }
+    }
+
+    if (!this.featureProvider) {
+      this.featureProvider = new MapboxFeatureProvider({
+        styledMapboxLayerGroup: this._mapboxLayerGroup,
+        excludeLayerFromPicking: this._excludeLayerFromPicking,
+      });
+    } else if (is(this.featureProvider, AbstractAttributeProvider)) {
+      this.featureProvider = new CompositeFeatureProvider({
+        attributeProviders: [this.featureProvider],
+        featureProviders: [
+          new MapboxFeatureProvider({
+            styledMapboxLayerGroup: this._mapboxLayerGroup,
+            excludeLayerFromPicking: this._excludeLayerFromPicking,
+          }),
+        ],
+      });
+    }
+
+    await super.initialize();
+  }
+
+  get splitDirection(): SplitDirection {
+    return this._splitDirection;
+  }
+
+  set splitDirection(direction: SplitDirection) {
+    if (direction !== this._splitDirection) {
+      this._splitDirection = direction;
+      this.getImplementations().forEach((impl) => {
+        impl.updateSplitDirection(direction);
+      });
+      this.splitDirectionChanged.raiseEvent(this._splitDirection);
+    }
+  }
+
+  getImplementationOptions(): MapboxStyleLayerImplementationOptions {
+    return {
+      ...super.getImplementationOptions(),
+      styledMapboxLayerGroup: this._mapboxLayerGroup,
+      splitDirection: this._splitDirection,
+      minRenderingLevel: this.minRenderingLevel,
+      maxRenderingLevel: this.maxRenderingLevel,
+    };
+  }
+
+  createImplementationsForMap(map: VcsMap): MaboxStyleImplementation[] {
+    if (map instanceof BaseCesiumMap) {
+      return [
+        new MapboxVectorRasterTileCesiumImpl(
+          map,
+          this.getImplementationOptions(),
+        ),
+      ];
+    }
+
+    if (map instanceof OpenlayersMap) {
+      return [
+        new MapboxVectorTileOpenlayersImpl(
+          map,
+          this.getImplementationOptions(),
+        ),
+      ];
+    }
+    return super.createImplementationsForMap(map);
+  }
+
+  toJSON(
+    defaultOptions = MapboxStyleLayer.getDefaultOptions(),
+  ): MapboxStyleOptions {
+    const config: MapboxStyleOptions = { ...super.toJSON() };
+
+    if (this._sources && this._sources.length > 0) {
+      config.sources = this._sources.slice();
+    }
+
+    if (
+      this._excludeLayerFromPicking &&
+      this._excludeLayerFromPicking.length > 0
+    ) {
+      config.excludeLayerFromPicking = this._excludeLayerFromPicking.slice();
+    }
+
+    if (this._splitDirection !== SplitDirection.NONE) {
+      config.splitDirection =
+        this._splitDirection === SplitDirection.LEFT ? 'left' : 'right';
+    }
+
+    if (this.minRenderingLevel !== defaultOptions.minRenderingLevel) {
+      config.minRenderingLevel = this.minRenderingLevel;
+    }
+
+    if (this.maxRenderingLevel !== defaultOptions.maxRenderingLevel) {
+      config.maxRenderingLevel = this.maxRenderingLevel;
+    }
+
+    return config;
+  }
+
+  destroy(): void {
+    this.splitDirectionChanged.destroy();
+    this._mapboxLayerGroup.dispose();
+    this.featureProvider?.destroy();
+    super.destroy();
+  }
+}
+
+layerClassRegistry.registerClass(MapboxStyleLayer.className, MapboxStyleLayer);
+export default MapboxStyleLayer;

package/src/layer/openlayers/layerOpenlayersImpl.ts

@@ -1,10 +1,11 @@
 import { SplitDirection } from '@vcmap-cesium/engine';
 import { unByKey } from 'ol/Observable.js';
 import type { EventsKey } from 'ol/events.js';
-import type OLLayer from 'ol/layer/Layer.js';
+import OLLayer from 'ol/layer/Layer.js';
 import type RenderEvent from 'ol/render/Event.js';
 import { vcsLayerName } from '../layerSymbols.js';
 import LayerImplementation from '../layerImplementation.js';
+import type { OLLayerLike } from '../../map/baseOLMap.js';
 import type OpenlayersMap from '../../map/openlayersMap.js';
 import type { LayerImplementationOptions } from '../layer.js';
 
@@ -22,7 +23,7 @@ class LayerOpenlayersImpl extends LayerImplementation<OpenlayersMap> {
     return 'LayerOpenlayersImpl';
   }
 
-  olLayer: OLLayer | null = null;
+  olLayer: OLLayerLike | null = null;
 
   splitDirection: SplitDirection;
 
@@ -62,10 +63,9 @@ class LayerOpenlayersImpl extends LayerImplementation<OpenlayersMap> {
 
   /**
    * returns the ol Layer
-   * @returns {import("ol/layer").Layer<import("ol/source/Source").default>}
    */
   // eslint-disable-next-line class-methods-use-this
-  getOLLayer(): OLLayer {
+  getOLLayer(): OLLayerLike {
     throw new Error();
   }
 
@@ -84,12 +84,23 @@ class LayerOpenlayersImpl extends LayerImplementation<OpenlayersMap> {
         !this._splitDirectionRenderListeners
       ) {
         this._splitDirectionRenderListeners = [];
-        this._splitDirectionRenderListeners.push(
-          this.olLayer!.on('prerender', this._splitPreRender.bind(this)),
-        );
-        this._splitDirectionRenderListeners.push(
-          this.olLayer!.on('postrender', this._splitPostReder.bind(this)),
-        );
+        if (this.olLayer instanceof OLLayer) {
+          this._splitDirectionRenderListeners.push(
+            this.olLayer.on('prerender', this._splitPreRender.bind(this)),
+          );
+          this._splitDirectionRenderListeners.push(
+            this.olLayer.on('postrender', this._splitPostReder.bind(this)),
+          );
+        } else {
+          this.olLayer!.getLayersArray().forEach((layer) => {
+            this._splitDirectionRenderListeners!.push(
+              layer.on('prerender', this._splitPreRender.bind(this)),
+            );
+            this._splitDirectionRenderListeners!.push(
+              layer.on('postrender', this._splitPostReder.bind(this)),
+            );
+          });
+        }
         this.olLayer!.changed();
       }
     }