Как нарисовать линию, соединяющую метку с ее позицией на OpenLayers3

Question

Мне нужно нарисовать линию, соединяющую точку с ее меткой. Как это:

«Y» имеет координаты, метка находится в другом положении на экране с помощью Offset. Я также могу перетащить ярлык, изменив его смещение, и мне нужно, чтобы линия адаптировалась, когда я делаю это, чтобы они оставались связанными.

Есть ли способ нарисовать линию на карте без предоставления ей координат? Потому что у меня только один набор координат и смещение.

Это, как я создал точку:

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

Спасибо большое!

Answer 1

Я не знаю, как рисовать линии по значениям пикселей, а не по координатам в стилях OpenLayers 3. Однако вы можете использовать style function, который принимает разрешение в качестве аргумента и использует разрешение для создания геометрии из нужных смещений пикселей.

Поскольку разрешение предоставляется как количество единиц карты на пиксель, поиск позиции из заданного пикселя является тривиальным: умножайте смещение пикселей с разрешением.

Обратный пример приведен в нижеприведенном фрагменте.

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>