CODEWITHSUNDEEP
javascriptopenlayers-3
Mahmood Kohansal
Mahmood Kohansal

Reputation: 1041

Set two styles on a single point in OpenLayers 3

I'm new to Openlayer. How can I set two styles on a single point? for example an icon and a square together

x.setStyle(new ol.style.Style({
    image: new ol.style.RegularShape({
        fill: new ol.style.Fill({color: 'red'}),
        stroke: new ol.style.Stroke({color: 'black', width: 2}),
        points: 4,
        radius: 10,
        angle: Math.PI / 4
    })
}));
x.setStyle(new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        // color: '#8959A8',
        src: '{!! url('/img/sensor_blue.png') !!}',
        scale: 0.3,
        opacity: 0.2
    }))
}));

In this code only the last style is set, but I want two styles together. Thanks for your help.

Upvotes: 1

Views: 2049

Answers (1)

Alexandre Dubé
Alexandre Dubé

Reputation: 2829

You can send an array of style object to the ol.Feature#setStyle method. See in the documentation: http://openlayers.org/en/v3.13.1/apidoc/ol.Feature.html#setStyle

x.setStyle([
    new ol.style.Style({
        image: new ol.style.RegularShape({
            fill: new ol.style.Fill({color: 'red'}),
            stroke: new ol.style.Stroke({color: 'black', width: 2}),
            points: 4,
            radius: 10,
            angle: Math.PI / 4
        })
    }),
    new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            // color: '#8959A8',
            src: '{!! url('/img/sensor_blue.png') !!}',
            scale: 0.3,
            opacity: 0.2
        }))
    })
]);

Upvotes: 4

Related Questions