how to draw line between two cliked points using Open Layer 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

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!

Answer 2

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>