ein Ereignis auf einem Kartographen

Question

//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)); 
 
});

ich eine einfache Karte mit OL3 mit statischen Markierungen zeigen Flughäfen Erstellen gelingen zu schaffen, die sie Daten in einer externen JSON-Datei übernehmen.

Aber jetzt möchte ich, dass, wenn ich auf eine Markierung klicke, eine Funktion, die den Namen des Flughafens entsprechend der Markierung finden, in meiner JSON-Datei und zeige es in einem externen Feld ein: Eingabe.

Ich habe bereits versucht, ein Klick-Ereignis auf meinem Marker, eine offene Schichten Interaktion, versuchen, einige Daten in meiner Json-Datei zurückzunehmen. aber es scheint, als würde ich etwas vermissen, alle meine kleinen Teile passen nicht alle zusammen.

Ich weiß nicht, wo ich anfangen kann: s

Danke allen für Ihre Antworten.

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" 
     } 
    } 

Answer 1

Fügen Sie einfach diese beiden Hörer (und entfernen Sie alle, dass planningAppsSource.addEventListener Sachen):

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' : ''; 
});