openlayers 5中矢量层中的交互功能 [英] Interactive features in vector layers in openlayers 5

问题描述

我使用的是openlayers 5.1.3，我对如何创建单击矢量层要素的功能，完全获得单击的要素并获得其属性的功能感到困惑.我正在跟踪此示例，这是我发现的唯一相关示例.

I am using openlayers 5.1.3 and I confused as to how to create the functionality of clicking on a feature of a vector layer, get exactly the one I clicked and then get its properties. I am following this example that is the only relevant I found.

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

I have an empty vector source that gets GeoJSON data after search

初始化地图和矢量

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(不是复数)方法或功能.

The selectClick and addInteraction are the closest I got to what I want. I dont know how to proceed and I dont know if this is the right combination of methods to get the specific feature I clicked, so then I can get its properties. Also, what is weird to me is that I dont see any getFeature (not plular) method or functionality for vector layers.

我该如何进行?

谢谢

推荐答案

e.target(其中e是select回调函数的参数)具有getFeatures()方法. 以下代码将返回(第一个)选定功能:

e.target (where e is the argument of the select callback function) has a getFeatures() method. The code below will return the (first) selected feature:

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

概念证明示例

代码段:

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>

这篇关于openlayers 5中矢量层中的交互功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！