在地图制作者上创建事件 [英] 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));
});

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

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

但是现在我想要当我单击一个标记时，创建一个函数，该函数在我的JSON文件中找到与该标记相对应的机场的名称，并在外部字段类型:input中显示它.

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.

我已经尝试在标记上创建一个click事件(一个开放层交互)，并尝试取回我的Json File中的一些数据.但似乎我缺少了一些东西，我的所有小部分都无法完全融合在一起.

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.

我不知道从哪里可以开始:s

I don't know where i can start :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
}
    });     

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

推荐答案

只需添加这两个侦听器(并删除所有planningAppsSource.addEventListener内容):

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

这篇关于在地图制作者上创建事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！