Creating an event on a map maker

问题:

//Final Code 

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: [0, 0],
          zoom: 3
    })
});
// -- GeoJSON layer --

// Define a GeoJSON source that will load features via a http call. By
// specifying the projection of the map's view OL3 will transform the coordinates
// for display
var planningAppsSource = new ol.source.GeoJSON({
    'projection': map.getView().getProjection(),
    'url': 'http://localhost/osgis-ol3-leaflet-master/ol3/data.geojson'
});

// Create a vector layer to display the features within the GeoJSON source and
// applies a simple icon style to all features
var planningAppsLayer = new ol.layer.Vector({
    source: planningAppsSource,
    style: new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0.5, 40],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: 'marker-icon.png'
        }))
    })
});

// Add the layer to the map
map.addLayer(planningAppsLayer);

var input = document.getElementById('input-airports');

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(
        evt.pixel, function(ft, l) { return ft; });
  if (feature) {
    console.log(feature.getProperties());
    
    input.value = feature.get('desc');
  }
});
map.on('pointermove', function(e) {
  if (e.dragging) return;
  var hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
});

I succeed creating a simple map with OL3 with static markers pointing airports which take them data in an external JSON file.

But now i would like that when i click on a marker, create a function which find the name of the airport corresponding to the marker, in my JSON file and show it in an external field type:input.

I already tried to create a click event on my marker, an open layers interaction, try to take back some data in my Json File. but it seems like i'm missing something, all my little parts doesn't fit all together.

I don't know where i can start :s

Thank you all for your answers.

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: [0, 0],
          zoom: 3
    })
});
// -- GeoJSON layer --

// Define a GeoJSON source that will load features via a http call. By
// specifying the projection of the map's view OL3 will transform the coordinates
// for display
var planningAppsSource = new ol.source.GeoJSON({
    'projection': map.getView().getProjection(),
    'url': 'http://localhost/osgis-ol3-leaflet-master/ol3/data.geojson'
});

// Create a vector layer to display the features within the GeoJSON source and
// applies a simple icon style to all features
var planningAppsLayer = new ol.layer.Vector({
    source: planningAppsSource,
    style: new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0.5, 40],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: 'marker-icon.png'
        }))
    })
});

// Add the layer to the map
map.addLayer(planningAppsLayer);


// Map Click event 
planningAppsSource.addEventListener(map, 'click', function(event){
  var getHttpRequest = function () {
  var httpRequest = false;

  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    httpRequest = new XMLHttpRequest();
    if (httpRequest.overrideMimeType) {
      httpRequest.overrideMimeType('text/xml');
    }
  }
  else if (window.ActiveXObject) { // IE
    try {
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      try {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) {}
    }
  }

  if (!httpRequest) {
    alert('Abandon :( Impossible de créer une instance XMLHTTP');
    return false;
  }

  return httpRequest
}
    });     

GeoJSON:

{
  "type": "FeatureCollection",
  "features": [
    {
      "geometry": {
        "type": "Point",
        "coordinates": [
          -145.494,
         -17.3595


        ]
      },
    "type": "Feature",
      "properties": {
        "code": "AAA",
    "lon": "-17.3595",
    "lat": "-145.494",
    "name": "Anaa Airport",
    "city": "Anaa",
    "state": "Tuamotu-Gambier",
    "country": "French Polynesia", 
    "woeid": "12512819",
    "tz": "Pacific\/Midway",
    "phone": "",
    "type": "Airports",
    "email": "",
    "url": "",
    "runway_length": "4921",
    "elev": "7",
    "icao": "NTGA",
    "direct_flights": "2",
    "carriers": "1"
      }
    }

回答1:

Just add these two listeners (and remove all that planningAppsSource.addEventListener stuff):

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(
        evt.pixel, function(ft, l) { return ft; });
  if (feature) {
    // just to show all your feature's properties
    console.log(feature.getProperties());

    // to get a specific property
    var name = feature.get('name');
    var city = feature.get('city');
  }
});

// you don't actually need this
// this is only to change the cursor to a pointer when is over a feature
map.on('pointermove', function(e) {
  if (e.dragging) return;
  var hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});