How to draw a line connecting a label to its position on OpenLayers3

Question

I need to draw a line connecting a point to its label. Like this:

The 'Y' has coordinates, the label is in a different position on the screen by using offSet. I also can drag the label around by changing its offset, and I need the line to adapt when I do that so they remain connected.

Is there any way to draw a line on the map without providing coordinates to it? Because I only have one set of coordinates and an offset.

This is how I created the point:

    configLabel(offsetx,offsety,label){
    labelStyle = new ol.style.Style({
        text: new ol.style.Text({
            font: '12px Calibri,sans-serif',
            fill: new ol.style.Fill({ color: color }),
            stroke: new ol.style.Stroke({
            color: '#fff', width: 2
            }),
            text: label,
            offsetY: offsety,
            offsetX: offsetx
        })
    });
}

pointStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 25],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'img/point.ico'
    })
});

var point = new ol.Feature(new ol.geom.Point(coord));
point.setStyle(pointStyle);
layerSource.addFeature(point);

var label1 = new ol.Feature(new ol.geom.Point(coord));
var style = configLabel(0,15, 'line1');
label1.setStyle(style);
layerSource.addFeature(label1);

var label2 = new ol.Feature(new ol.geom.Point(coord));
var style = configLabel(0,30, 'line2');
label2.setStyle(style);
layerSource.addFeature(label2);

var label3 = new ol.Feature(new ol.geom.Point(coord));
var style = configLabel(0,45, 'line3');
label3.setStyle(style);
layerSource.addFeature(label3);

var label4 = new ol.Feature(new ol.geom.Point(coord));
var style = configLabel(0,60, 'line4');
label4.setStyle(style);
layerSource.addFeature(label4);

Thanks a lot!

Answer 1

I don't know of any way to draw lines in by pixel values rather than coordinate values in OpenLayers 3 styles. You could however use a style function , which takes the resolution as an argument and use the resolution to create a geometry from the desired pixel offsets.

Since the resolution is provided as the number of map units per pixel, finding a position from a given pixel is trivial: You multiply the pixel offset with the resolution.

A runnable example can be found in the snippet below.

 var feature = new ol.Feature(new ol.geom.Point([0, 0])); var source = new ol.source.Vector({ features: [feature] }); var fill = new ol.style.Fill({ color: 'rgba(255,255,255,1)' }); var stroke = new ol.style.Stroke({ color: '#3399CC', width: 1.25 }); var pointStyle = new ol.style.Style({ image: new ol.style.Circle({ fill: fill, stroke: stroke, radius: 5, }) }) var lineLabelStyle = function(pointCoord, offsetX, offsetY, resolution, text) { var labelCoord = [ pointCoord[0] + offsetX * resolution, pointCoord[1] - offsetY * resolution, ]; return [ new ol.style.Style({ stroke: stroke, geometry: new ol.geom.LineString([pointCoord, labelCoord]) }), new ol.style.Style({ text: new ol.style.Text({ text: text, textAlign: "left", offsetY: offsetY, offsetX: offsetX, }) }) ]; }; var styleFunction = function(feature, resolution) { var pointCoord = feature.getGeometry().getCoordinates() return [pointStyle].concat( lineLabelStyle(pointCoord, 50, -10, resolution, "Label 1"), lineLabelStyle(pointCoord, 50, 5, resolution, "Label 2"), lineLabelStyle(pointCoord, 50, 20, resolution, "Label 3") ) } var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Vector({ source: source, style: styleFunction }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); 

 <link href="http://openlayers.org/en/v3.10.1/css/ol.css" rel="stylesheet" /> <script src="http://openlayers.org/en/v3.10.1/build/ol.js"></script> <div id="map" class="map"></div>