I have a function that creates a new layer and display the features. I can call this function some times to create a new layers with own features. Problem is that the features are not visible if I create a two layers immediately:


 drawPointLayer(layer: LayerNode) {
    const { id } = layer;

    if (!this.vectorLayers.has(id)) {
      let { icon, zIndex } = layer;
      const layerConfig = this.getLayerConfig(id);

      this.sourcePolygon = new VectorSource({
        format: new GeoJSONOl(),
        loader: (extent: Extent, resolution: number, projection) => {
          const url =
            this.configService.config.backendurl + `tile?layers=${id}`;
            .get(url, { withCredentials: true })
            .subscribe((response) => {
              for (const [, geojson] of Object.entries(response)) {
                const geoJSONFormat = new GeoJSONOl();
                const features = geoJSONFormat.readFeatures(geojson);
        strategy: bboxStrategy,

      this.sourcePolygon.on('addfeature', (e: VectorSourceEvent) =>
        addfeatureCallback(e.feature, layer, layerConfig)

      const clusterSource = new Cluster({
        distance: this.configService.config.distanceCluster ?? 100,
        source: this.sourcePolygon,

      const clusterVector = new VectorLayer({
        source: clusterSource,
        style: (feature) =>
          styleIconFeatureFunction(feature, icon, {}, this.baseHref),

      if (zIndex) clusterVector.setZIndex(zIndex);
      this.pointLayersSource.set(layer, this.sourcePolygon);
      this.addVectorLayer(id, clusterVector);

But it works if I create the layers one by one. I think problem in zindex, how to fit it?

I have tried to set different zindez for all layers:

1 => 200
2 => 201

if (zIndex) clusterVector.setZIndex(zIndex);

But there is not effect


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.