openlayers 5中矢量图层的交互功能答案

【问题标题】：Interactive features in vector layers in openlayers 5openlayers 5中矢量图层的交互功能
【发布时间】：2018-08-01 17:53:01
【问题描述】：

我正在使用 openlayers 5.1.3，我对如何创建单击矢量图层特征的功能感到困惑，准确地获取我单击的那个，然后获取它的属性。我正在关注this 示例，这是我发现的唯一相关示例。

我有一个空向量源，搜索后获取 GeoJSON 数据

初始化地图和向量

this.vectorsource = new VectorSource({});

this.vectorlayer = new VectorLayer({
  source: this.vectorsource
});

var selectClick = new Select({
  condition: click
});

this.olmap.addInteraction(selectClick);
selectClick.on('select', function(e) {
  console.log(e.target);
});

搜索后

this.vectorsource.clear();
const fff = (new GeoJSON()).readFeatures(data.data);
this.vectorsource.addFeatures(fff);

selectClick 和 addInteraction 是我最接近我想要的。我不知道如何继续，我不知道这是否是获取我单击的特定功能的正确方法组合，所以我可以获取它的属性。另外，对我来说奇怪的是，我没有看到任何用于矢量图层的getFeature（不是复数）方法或功能。

我该如何继续？

谢谢

【问题讨论】：

标签： vector openlayers angular6 openlayers-5

【解决方案1】：

e.target（其中e 是选择回调函数的参数）有一个getFeatures() 方法。下面的代码将返回（第一个）选择的特征：

var selectClick = new ol.interaction.Select({
  condition: ol.events.condition.click
});
this.olmap.addInteraction(selectClick);
selectClick.on('select', function(e) {
   var selectedFeatures = e.target.getFeatures().getArray();
   var featuresStr = selectedFeatures[0].get('name');
   console.log(featuresStr);
});

proof of concept example

代码 sn-p：

var raster = new ol.layer.Tile({ // TileLayer({
  source: new ol.source.OSM()
});

var vector = new ol.layer.Vector({ // VectorLayer({
  source: new ol.source.Vector({ // VectorSource({
    url: 'https://cdn.rawgit.com/johan/world.geo.json/master/countries.geo.json',
    format: new ol.format.GeoJSON()
  })
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

var selectClick = new ol.interaction.Select({
  condition: ol.events.condition.click
});

map.addInteraction(selectClick);
selectClick.on('select', function(e) {
  var selectedFeatures = e.target.getFeatures().getArray();
  var featureStr = "none";
  if (!!selectedFeatures && selectedFeatures.length > 0) {
    featureStr = selectedFeatures[0].get('name');
  }
  console.log(featureStr);
  document.getElementById('status').innerHTML = featureStr;
});

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 95%;
  width: 100%;
}

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<div id="status"></div>
<div id="map" class="map"></div>

【讨论】：