代码之家 › 专栏 › 技术社区 › slevin

openlayers中矢量层的交互特性5

openlayers-5 angular6 openlayers vector

-1

slevin · 技术社区 · 6 年前

我使用的是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 (非复数)矢量层的方法或功能。

我该怎么做?

1 回复 | 直到 6 年前

geocodezip 6 年前

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

代码段:

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>

推荐文章

Edit Axha · 当我点击wkt多边形时,如何获得它的所有信息?

7 年前

Taras RAno · 如何使按钮执行相同的代码,但相应地使用不同的变量?

7 年前

Giuseppe · 将OpenLayers 4与Angular 5配合使用

7 年前

Sergio · 在openlayers 4中使用外部超链接正确显示弹出窗口

7 年前

Amit · OpenLayers-适应当前范围正在缩小

7 年前

Marin Leontenko · 设置OpenLayers地图容器的尺寸

7 年前

Software Engineer · Sencha Architect中的OpenLayers4

7 年前

Miguel Herreros Cejas · 使用OpenLayers在谷歌地图中不绘制圆圈

7 年前

Vikram Eswar · 如何将openlayers作为库添加到我的oracle jet项目中?

7 年前

Mario Petrovic Emmanuel Onah · 如何将地图上的两点线投影为曲线OpenLayers

7 年前