3

I created a GeoJSON vector layer using OpenLayers 3 API, the vector layer is a county map. My goal is by clicking, I will be able to select the county and extract the coordinates. (like shown below) enter image description here

My current method of extracting the coordinates is once on.select, goes to the DOM and find the coordinates. Something like this:

var coords;
var select = new ol.interaction.Select();
    map.addInteraction(select);

// var selectedFeature = select.getFeatures();
selectclick = select;
selectclick.on('select', function(e)
{
  if (e!== null)
  {
  console.log(e),
  coords = e.selected[0].c.target.s;
  console.log(coords);
  }
});

This way works find, but I had to manually go the DOM and find the coordinates myself, then write the location in variable "coords". This probably not a good solution when face dynamic environments. Is there a better way to find coordinates in my case?

2 Answers 2

3
+50

You can access source of your layer then access features of the source and coordinates of features with getCoordinates() method of ol.geom.Polygon. Try like this:

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '/your_counties.geojson',
        format: new ol.format.GeoJSON()
    })
});

//call this whereever you want from
function getCoordinatesOfCounties() {
    var features = vectorLayer.getSource().getFeatures();
    features.forEach((feature) => {
        console.log(feature.getCoordinates());
    });
}
5
  • So, for my understanding, 'vectorLayer.getSource().getFeatures().getCoordinates()' would help me find the coordinates from the GeoJSON? I tried it, doesn't seem to work though.
    – MaxG
    Aug 14, 2017 at 13:50
  • 1
    vectorLayer.getSource().getFeatures() returns Array.<ol.Feature>. getCoordinates() is a method of ol.Feature not Array.<ol.Feature>. You have to call getCoordinates feaure by feature.
    – himyata
    Aug 14, 2017 at 13:57
  • Thanks @himyata, I have a better understanding now! What if you want to find a specific coordinates of a single feature out of the the Array.<ol.Feature>, using jQuery method on.('select') ? Any idea?
    – MaxG
    Aug 14, 2017 at 14:29
  • I did some investigation, and finally solved my problem.. Thanks for get me on the right track, bounty is yours :)
    – MaxG
    Aug 14, 2017 at 17:06
  • Not working on V 3.0.0. Always returns blank array.
    – Saroj
    Dec 13, 2018 at 10:32
0

In addition to the answer from @himyata, if you'd like to find coordinates during event, you will need to use .selected[0].somemethod to do so, an example is shown below:

var selectClick = new ol.interaction.Select();
map.addInteraction(selectClick);

selectClick.on('select', function(e)
{
  if(e!== null)
{
coords = e.selected[0].getGeometry
console.log(coords);
}
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.