0

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);
0

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);
   }

});

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.