在地图制作器上创建事件

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

我成功地使用 OL3 创建了一个简单的地图，其中静态标记指向机场，这些机场将它们的数据保存在外部 JSON 文件中。

但现在我希望当我点击一个标记时，创建一个函数来找到与标记对应的机场名称，在我的 JSON 文件中并在外部字段中显示它 type:input.

我已经尝试在我的标记上创建一个点击事件，一个开放层交互，尝试取回我的 Json 文件中的一些数据。但似乎我遗漏了一些东西，我所有的小零件都不适合。

我不知道从哪里开始:s

谢谢大家的回答。

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

地理位置JSON:

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

只需添加这两个侦听器（并删除所有 planningAppsSource.addEventListener 内容）：

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

在地图制作器上创建事件

Creating an event on a map maker

javascript

maps

json

openlayers-3