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

问题描述

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

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 是选择回调函数的参数)有一个 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屋！