Question

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

我一次只能选择一个标记，我希望能够选择多个标记，并使所有名称出现在字段中。我认为我的问题是我需要更改调用我的功能，但我不知道该写什么。我已经尝试从＆＃34; forEachFeatureAtPixel＆＃34;更改我的功能。 to＆＃34; forFeatureAtPixel＆＃34;或类似的事情，但每次我打破我的地图。

谢谢，

我是javascript的初学者：/这是我的JS代码

＆＃13;

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

＆＃13;

Answer 1

更新：

（fiddle） - 要选择多次使用 Shift +点击

您将删除另一种方法：

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

并使用ol.interaction.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') + ', ';
  });
});

地图标记上的多个事件

1 个答案: