Openlayers 5 change kml style for icon only

Question

I'm importing KML into my map where it has some point placemarks with images that are WAY too big. What is the best way to import KML in the map, and just change 1 aspect of the style ( https://openlayers.org/en/latest/apidoc/module-ol_style_Icon-Icon.html , change the 'size' to a different value), but keep everything else? For example, i'm adding the KML to the map in a very simple way:

        const kmlSource = new VectorSource({
          url: kmlURL,
          format: new KML()
        });
        const kmlVector = new VectorLayer({
          source: kmlSource
        });
        map.AddLayer(kmlVector);

Answer 1

Size relates the the original image, so you would need to change the scale, not the size.

Here's some code in OpenLayers 4 syntax which increases the scale (from a very small 0.2 to very large 2) of the icons used in one of the OpenLayers examples (from the console log it seems that in this case all features used the same single element style array returned by a function, so changing it for the first had already changed it for the others). You could try something similar, although it might not work with more complex sources.

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'https://openlayers.org/en/v4.6.5/examples/data/kml/2012-02-10.kml',
        format: new ol.format.KML()
    })
});

var map = new ol.Map({
    view: new ol.View({
        center: ol.proj.fromLonLat([8,46.5]),
        zoom: 9
    }),
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vector
    ]
});

vector.getSource().on('addfeature', function(evt) {

   var feature = evt.feature;
   var styleFunction = feature.getStyleFunction();
   if (styleFunction) {
       styleFunction = styleFunction.bind(feature);
       var style = styleFunction();
   } else {
       var style = feature.getStyle();
   }
   if (!Array.isArray(style)) {
       style = [style];
   }
   console.log(style.length);
   var image = style[0].getImage();
   if (image) {
      console.log(image.getScale());
      image.setScale(2);
   }

});