1

I need to create a layer with meteorological icons on it - about 100 of them. So. I define its source like this:

    mappingAPI.meteoIconLayerSource = new ol.source.Vector({});

I add icons as features like this:

    for(stan in meteo.meteoData)
    {
        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([parseFloat(meteo.meteoData[stan].lon), parseFloat(meteo.meteoData[stan].lat)], 'EPSG:4326',   'EPSG:3857')),
            obj_id: meteo.meteoData[stan].obj_id,
        });

        mappingAPI.meteoIconLayerSource.addFeature(iconFeature);  
    }

Once I have the source, I create the layer like this:

    mappingAPI.meteoIconLayer = new ol.layer.Vector({
        source: mappingAPI.meteoIconLayerSource,
        style: mappingAPI.getMeteoIconStyle            
    });

The style definition looks like this:

return [new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 0.5],
    anchorXUnits: 'fraction',
    anchorYUnits: 'fraction',
    opacity: 0.7,
    src: "data/meteo/icon" + feature.get('obj_id') + ".png"
})];

When the src is defined as stated above (using feature's property pointing to unique number), icons on my map start blinking as the style procedure is call non-stop for all the features on the layer again and again. In case, I replace the definition with reference to one picture like this:

src: "data/meteo/icon3898.png",

or even like this:

src: "data/meteo/icon" + feature.get('dummy') + ".png",

where dummy is same for all features, everything is fine - the style procedure is called once for each features and that's it until map needs redrawing.

Please, could anybody help to with this issue? Or is there any other way, how to place icons on the map without putting src definition in the style?

Marek

1

See this answer and this example.

I hope this helps.

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.