Open Layers: How to display svg icon for a feature with certain offset from the center

Question

I have to display multiple features on the map using OpenLayers. Each feature must be represented by 2 images (2 SVG icons). One of this icons must be anchored at the features coordinates but the second must be shifted with a fixed amount of pixels. The additional problem is that shifted one must be also rotated and the center of rotation must be the center of icon and not a center of feature. As an example I can say: there is an Icon of vehicle that is always oriented to the nord and there is another which shows direction that is rotated. The direction one must be always shown at the top of vehicle

I've tried to use various offsets and anchors but I was not able to precisely position the second icon

The code is done with ExtJS but I hope is readable: So I'm using function fot set a style for a ImageVector:

me.imageVectorSource = new ol.source.ImageVector({
        source: new ol.source.Vector({
            features: me.features
        }),
        style: Ext.bind(me.pointStyleFunction,me)
    });

And the function looks like:

pointStyleFunction: function(feature, resolution) {
var currentStyles = 
    [
        new ol.style.Style({
            //first icon
            image: new ol.style.Icon({
                src: 'resources/img/vehicle.test.svg',
                scale: sc,
            }),
            //text shown below
            text: new ol.style.Text({
                text: textToShow,             
                scale:sc
                fill: new ol.style.Fill({
                     color: 'yellow'
                }),                   
                offsetY: textOffset,
                stroke: new ol.style.Stroke({
                    color: 'black',
                    width: 4
                }),                    
            })
        }),
        //second icon that should be rotated
        var rpIconStyle = new ol.style.Style({
            image: new ol.style.Icon({
                src: 'resources/img/rp.svg',
                scale: sc,
                rotation: rot                                         
            }),
        });
    ];

}

Now if second icon is rotated it is rotated around the center of the feature and not at the center of itself. I thought about adding new geometry to the second style (Point) but in such case I cannot specify offset (in pixels) of the geometry from the original feature's center. I can only use coordinates but have no idea if it is possible to convert them to pixels. In fact the expected solution would be something like in case of text property of style where offsetX and offsetY can be specified.

Could you please suggest me some solution?

score 0 · Answer 1 · answered Jan 23 '19 at 00:57

You could use anchor but you would need to know the size of the scaled image. Using a second geometry as you suggested is easy, resolution is the meters per pixel, just multiply it by the number of pixels you want to offset by.

if (feature.getGeometry().getType() == 'Point') {
    var coordinate = feature.getGeometry().getCoordinates();
    var rpIconStyle = new ol.style.Style({
        geometry: new ol.geom.Point([coordinate[0] + 50*resolution, coordinate[1] + 50*resolution]),
        image: new ol.style.Icon({
            src: 'resources/img/rp.svg',
            scale: sc,
            rotation: rot                                         
        }),
    });
}

Open Layers: How to display svg icon for a feature with certain offset from the center

1 Answers1