position: relative;
}
#popup {
cursor: pointer;
}
var coord1 = [-5707673.76, -3499420.81];var coord2 = [-6707673.76, -3499420.81];var lineStyle = newol.style.Style({
stroke:newol.style.Stroke({
color:'#ffcc33',
width:3,
lineDash:[10,10]
})
});var styleMarker = newol.style.Style({
image:newol.style.Icon({
scale: .7, anchor: [0.5, 1],
src:'marker.png'})
});var marker1 = newol.geom.Point(coord1);var featureMarker1 = newol.Feature(marker1);var marker2 = newol.geom.Point(coord2);var featureMarker2 = newol.Feature(marker2);var line = newol.geom.LineString([coord1, coord2]);var lineFeature = newol.Feature(line);var vector = newol.layer.Vector({
source:newol.source.Vector({
features: [lineFeature, featureMarker1, featureMarker2]
}),
style: [lineStyle, styleMarker]
});var map = newol.Map({
target:'map',
layers: [new ol.layer.Tile({ source: newol.source.OSM() }), vector],
view:new ol.View({ center: coord1, zoom: 5})
});var translate1 = newol.interaction.Translate({
features:newol.Collection([featureMarker1])
});var translate2 = newol.interaction.Translate({
features:newol.Collection([featureMarker2])
});
map.addInteraction(translate1);
map.addInteraction(translate2);varcoordMarker1, coordMarker2;
translate1.on('translatestart', function(evt) {
coordMarker2=marker2.getCoordinates();
});
translate1.on('translating', function(evt) {
line.setCoordinates([coordMarker2, evt.coordinate]);
});
translate2.on('translatestart', function(evt) {
coordMarker1=marker1.getCoordinates();
});
translate2.on('translating', function(evt) {
line.setCoordinates([coordMarker1, evt.coordinate]);
});
map.on('pointermove', function(e) {if (e.dragging) return;var hit =map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
map.getTargetElement().style.cursor= hit ? 'pointer' : '';
});