how to draw line between two cliked points using Open Layer 3? - openlayers-3

Question

i can display json lat and lon in map but i want draw lines between two selected points.
like this Here
here i can click all place in Map but i want enable click only displayed points only.
i used this link to display my points Link2 now i want draw lines between two points
<script>
var flickrSource = new ol.source.Vector();
function flickrStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
}),
}),
text: new ol.style.Text({
text: feature.getGeometryName(),
fill: new ol.style.Fill({color: 'blue'}),
stroke: new ol.style.Stroke({color: 'white', width: 1}),
offsetX: 0,
offsetY: 15
}),
});
return [style];
}
var flickrLayer = new ol.layer.Vector({
source: flickrSource,
style: flickrStyle
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 3
});
var source = new ol.source.Vector({wrapX: false});
var map = new ol.Map({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
function successHandler(data) {
var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
data.items.forEach(function(item) {
var feature = new ol.Feature(item);
feature.setGeometryName(item.name);
var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);
flickrSource.addFeature(feature);
});
}
</script>

Answer 1

Get the co-ordinates of this two points and draw LineString
var thing = new ol.geom.LineString(points);
var featurething = new ol.Feature({
name: "Thing",
geometry: thing
});
flickrSource.addFeature(featurething);
var flickrSource = new ol.source.Vector();
var data = {
"items": [{
name: 'geo1',
longitude: "0.0",
latitude: "0.0"
}, {
name: 'geo1',
longitude: "5.0",
latitude: "5.0"
}]
};
function flickrStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
}),
}),
text: new ol.style.Text({
text: feature.getGeometryName(),
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: 'white',
width: 1
}),
offsetX: 0,
offsetY: 15
}),
});
return [style];
}
var flickrLayer = new ol.layer.Vector({
source: flickrSource
//style: flickrStyle
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = ol.proj.transform([0.0, 0.0], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 5
});
var source = new ol.source.Vector({
wrapX: false
});
var map = new ol.Map({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
function successHandler(data) {
var points = [];
data.items.forEach(function(item) {
var point = ol.proj.transform([parseFloat(item.longitude), parseFloat(item.latitude)], 'EPSG:4326', 'EPSG:3857');
points.push(point);
var geometry = new ol.geom.Point(point);
var feature = new ol.Feature({
name: item.name,
geometry: geometry
});
flickrSource.addFeature(feature);
var thing = new ol.geom.LineString(points);
var featurething = new ol.Feature({
name: "Thing",
geometry: thing
});
flickrSource.addFeature(featurething);
});
}
successHandler(data);
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js"></script>
<div id="map"></div>

Answer 2

Here is the code...
Here is the vector source, layers and map:
// Vector source of data points
var flickrSource = new ol.source.Vector();
// Style function for the data points
function flickrStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
})
}),
text: new ol.style.Text({
text: feature.getGeometryName(),
fill: new ol.style.Fill({color: 'blue'}),
stroke: new ol.style.Stroke({color: 'white', width: 1}),
offsetX: 0,
offsetY: 15
})
});
return [style];
}
// Layers
var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
var flickrLayer = new ol.layer.Vector({
source: flickrSource,
style: flickrStyle
});
// MAP
var map = new ol.Map({
target: 'map',
layers: [osmLayer, flickrLayer],
view: new ol.View({
center: ol.proj.transform([0, 20], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
Then here is the data points and placing them on the map:
// Data points
var data = {
"items": [{
name: 'p1',
longitude: "0.0",
latitude: "0.0"
}, {
name: 'p2',
longitude: "50.0",
latitude: "50.0"
}, {
name: 'p3',
longitude: "50.0",
latitude: "-50.0"
}]
};
// Placing data points on the map
function placePoints(data) {
var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
data.items.forEach( function(item) {
// for each item of data points we create feature geometry
// with coords contained in data and add them to the source
var feature = new ol.Feature(item);
feature.setGeometryName(item.name);
var coordinate = transform(
[parseFloat(item.longitude), parseFloat(item.latitude)]
);
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);
flickrSource.addFeature(feature);
} );
}
placePoints(data); // do the stuff of placing points
And then the interaction for drawing the lines between points:
// select interaction working on "click"
var mySelectInteraction = new ol.interaction.Select({
condition: ol.events.condition.click,
multi: false
});
// init coords of line to draw between points
var pointA = null;
var pointB = null;
// Interaction on points for drawing lines between
mySelectInteraction.on('select', function(e) {
if (e.selected.length === 0) {
// clicking nothing, so reset points coords
pointA = null;
pointB = null;
}
else {
// Feature clicked and its coords
var feature = e.target.getFeatures().item(0);
var coords = feature.getGeometry().getCoordinates();
// Definition of coords points
if (pointA === null) { pointA = coords; }
else { pointB = coords; }
if ( pointA !== null && pointB !== null) {
var LinesSource = new ol.source.Vector();
var LinesLayer = new ol.layer.Vector({ source : LinesSource });
map.addLayer( LinesLayer );
// Line construction
LinesSource.addFeature( new ol.Feature({
geometry : new ol.geom.LineString( [pointA, pointB] )
}) );
// Reset points for next drawing
pointA = null;
pointB = null;
}
}
});
map.addInteraction(mySelectInteraction);
Works great for me!