Change layer color on zoom in OpenLayers

Question

I had a problem with changing the color of a layer in Openlayers on zoom. During initialization, I draw a heat map with data on atmospheric pressure. And at first everything is fine.

But after zooming or moving around the map, the color of the layer becomes more transparent.

The layer is a LayerGroup in which the background layer is first added, and then the layer itself with the heat map is added.

class HeatMapLayer extends WeatherLayer {
  #style;
  #colorRange;
  #layer;
  #substrateLayer;

  constructor(ol_map, options = {}) {
    super(ol_map);
    const {
      colorRange, style,
    } = options;
    this.#colorRange = colorRange;
    this.#style = style;
    this.#substrateLayer = new SubstrateLayer(ol_map);
  }

  #createGeoJSONSource = features => new VectorSource({
    features: this.readGeoJSONFeatures(features),
  });

  #createLayer = features => new VectorImage({
    source: this.#createGeoJSONSource(features),
    style: this.#style,
  });

  loadData = ({ features }) => {
    this.isLoaded = true;
    const layers = this.layer.getLayers();
    if (!layers.values_?.length) {
      this.#layer = this.#createLayer(features);
      this.#layer.on("prerender", function (evt) {
        evt.context.globalCompositeOperation = "multiply";
      });
      this.#layer.on("postrender", function (evt) {
        evt.context.globalCompositeOperation = "source-over";
      });
      const substrateLayer = this.#substrateLayer.getLayer(this.#layer.getSource().getFeatures());
      layers.push(substrateLayer);
      layers.push(this.#layer);
    } else {
      const [substrateLayer, layer] = layers.array_;
      substrateLayer.setSource(null);
      const source = this.#createGeoJSONSource(features);
      substrateLayer.setSource(this.#substrateLayer.getSource(source.getFeatures()))
      layer.setSource(null);
      layer.setSource(source);
    }
  }

  create = ({ intervals, opacity }) => {
    this.colorScale = scaleLinear()
      .domain(intervals)
      .range(this.#colorRange)
    return super.create(this.layerTypes.vectorGroup, { opacity });
  };

  destroy = () => {
    this.#substrateLayer.destroy();
  };
}

export default HeatMapLayer;

class SubstrateLayer {
  #layer;

  #layerPrerenderHandler = ({ context }) => {
    context.globalCompositeOperation = "color";
    context.fillStyle = "white";
    context.globalCompositeOperation = "source-over";
  }

  #layerPostrenderHandler = ({ context }) => {
    context.globalCompositeOperation = "color";
    context.fillStyle = "white";
    context.globalCompositeOperation = "source-over";
  };

  #createSubstrateLayer = features => new VectorLayer({
    source: new VectorSource({
      features,
    }),
    style: new Style({
      fill: new Fill({
        color: '#888',
      })
    }),
  });

  #setListeners = () => {
    // this.#layer.on('prerender', this.#layerPrerenderHandler)
    this.#layer.on('postrender', this.#layerPostrenderHandler);
  };

  #removeListeners = () => {
    // this.#layer.un('prerender', this.#layerPrerenderHandler)
    this.#layer.un('postrender', this.#layerPostrenderHandler);
  };

  setVisible = value => this.#layer.setVisible(value)

  getSource = features => new VectorSource({
    features,
  });

  getLayer = features => {
    if (!this.#layer) {
      if (features) {
        this.#layer = this.#createSubstrateLayer(features);
        this.#setListeners();
        return this.#layer;
      }
    }
  };

  destroy = () => {
    this.#removeListeners();
  }
}

export default SubstrateLayer;