地图标记上的多个事件

Question

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: small;
}

#map {
  width: 100%;
  height: 60%;
}


#selection-map {
    height: 40%;
    width: 100%;
    background-color: whitesmoke;
}

.selection-title {
    height: 15%;
    width: 15%;
    margin: auto;
    position: relative;
    border-bottom: 3px solid #DA1A21;
    font-size: 30px;
    top: 30px;
    color: #DA1A21;
}

.selection-form {
    height: 20%;
    width: 100%;
    text-align: center;
    top: 100px;
    position: relative;
}

.selection-form input {
    height: 20px;
    width: 300px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SouthWest Airport Map</title>
     <link rel="stylesheet" href="lib/ol3/ol.css" />
     <link rel="stylesheet" href="ol3.css" />
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="selection-map" class="map">
      <h2 class="selection-title">Airports Selected</h2>
      <form class="selection-form" method="post" action="traitement.php">
        <p><input type="text" id="input-airports" placeholder="Click a marker" /></p>
        <p>For Selecting Multiple Airpots, please press Shift and select all the markers that you need</p>
      </form>
    </div>
    <script src="../common/lib/reqwest.min.js"></script>
    <script src="lib/proj4.js"></script>
    <script src="lib/ol3/ol.js"></script>
    <script src="ol3.js"></script>

  </body>
</html>

我实现了一个带有指向机场的标记的地图，当我点击一个标记时，机场的名称会出现在一个字段中。（所有数据都包含在 GEOJson 外部文件中）。我只有最后一个问题无法解决:

我一次只能select一个标记，我希望能够select多个标记，并使所有名称都出现在该字段中。我认为我的问题是我需要更改调用我的功能，但我不知道该写什么。我已经尝试将我的功能从“forEachFeatureAtPixel”更改为“forFeatureAtPixel”或类似的东西，但每次我都会破坏我的地图。

我是 Javascript 的初学者 :/ 这是我的 JS 代码

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: '//localhost/osgis-ol3-leaflet-master/ol3/data.geojson'
  }),
  style: new ol.style.Style({
    image: new ol.style.Circle({
      radius: 10,
      fill: new ol.style.Fill({
        color: 'green'
      })
    })
  })
});
var rasterLayer = new ol.layer.Tile({
  source: new ol.source.TileJSON({
    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
    crossOrigin: ''
  })
});
var map = new ol.Map({
  layers: [rasterLayer, vectorLayer],
  target: document.getElementById('map'),
 view: new ol.View({
        center: [0, 0],
          zoom: 3
    })
});

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

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

select_interaction.on('select', function(evt) {
  var features = select_interaction.getFeatures();
  var value = '';
  features.forEach(function(feature){
    // change this to your own needs
    value += feature.get('name') + ', ';
  });
  
  input.value = value;
});

map.on('pointermove', function(e) {
  if (e.dragging) return;
  var hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
  map.getTarget().style.cursor = hit ? 'pointer' : '';
});

Answer 1

更新：

(fiddle) — 要 select 多次使用 Shift + 单击

您将删除另一种方法：

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(
        evt.pixel, function(ft, l) { return ft; });
  if (feature) ...
});

并使用 ol.interaction.Select，见下文。

有一个 select 交互可以添加到您的地图中，有很多选项，请参阅 ol.interaction.Select。你可以设置，比如一些条件：

// only select with Mouse Hover
var select_interaction = new ol.interaction.Select({
   condition: ol.events.condition.pointerMove
});

另一种情况：

// only select with Alt key + Click
var select_interaction = new ol.interaction.Select({
  condition: function(mapBrowserEvent) {
    return ol.events.condition.click(mapBrowserEvent) &&
      ol.events.condition.altKeyOnly(mapBrowserEvent);
    }
});

在你的情况下，将所有内容放在一起就像：

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

// add a listener to know when features are selected
select_interaction.on('select', function(evt) {
  var features = select_interaction.getFeatures();
  features.forEach(function(feature){
    // change this to your own needs
    input.value += feature.get('name') + ', ';
  });
});

地图标记上的多个事件

Multiple Event on a map Marker

javascript

markers

dom-events

openlayers-3