OpenLayers 4 在更改时删除 features.getFeatures() 排序数组

Question

我在自己画的一个地物上添加了拖拽功能，但是OpenLayers 4好像修改一个地物的时候，现在修改的新index是不一样的

如何从核心中删除该功能？或存在防止这种情况的替代方法？

这是我用来添加拖拽功能的

$("#markdrag").click(function(e) {

  e.preventDefault();

  var sel = document.getElementById('tlfeature');
  // get ID of the current marker
  var ids = sel[sel.selectedIndex].id;
  var dragInteraction = new ol.interaction.Modify({
    features: new ol.Collection([Msource.getFeatures()[ids]]),
    style: null
  });
});

这是我的特征标记源和图层。

Msource = new ol.source.Vector();

markLayer = new ol.layer.Vector({
  source: Msource,
  style: new ol.style.Style({
    image: new ol.style.Icon({
      opacity: 0.95,
      src: 'http://www.traffweb.uk/images/mapplot.svg'
    })
  })
});

这是我在填充 select 元素时调用的函数：

function drawingMarker(){

  var id = Msource.getFeatures().length;

  $('<option>', { 'value': id, 'text': 'Marker ' +(id + 1) }).attr('id',
                 id).appendTo('#tlfeature');

  $('<textarea>', { 'name': 'Marker ' +(id + 1), 'rows': '4', 'class': id,
                   'placeholder': "enter text..." }).appendTo('.textDiv');

}

其中 IDS 是特征的索引，但如果我绘制 2 个特征并在交互结束时拖动第一个特征，则索引现在是 1 而不是 0。

我需要处理索引，因为当我绘制标记时，我有一个函数：

用标记填充下拉菜单（名称 = 标记 + 源索引）
添加一个文本区域（绑定到标记 ID（源索引），这样当您更改标记时，您就会有一个相关的文本区域）

我正在处理这个事件以创建所有这些。

mark = new ol.interaction.Draw({
  source: Msource,
  type: Type
});

markLayer.on("change", function(){
  // remove the interaction when you plot one marker 
  // at this point, Msource is populated. This is called also when I use the
  // delete button(I remove the feature).
  map.removeInteraction(mark); 
});

// occurs when you finish to draw the current element
// at this point Msource is still empty
mark.on("drawend", function(){
  // function to create everything
  drawingMarker();
})

这里是它的外观截图

Answer 1

是的，当你改变一个特征时，它的索引总是在getFeatures()的结果的最后。这是openlayers中的运行机制。

参见API：getFeatures().它使用随机顺序！

无论如何，我想出了一个不是最好但可以帮到你的方法。使用 id 来跟踪标记。就像：

var len = vector.getSource().getFeatures().length;
var feature = new ol.Feature({
    geometry: new ol.geom.Point(coordinate),
    image: 'img/mark_b.png',
    id: len
});
vector.getSource().addFeature(feature);

并在vector.getSource().getFeatureById()之前得到它。修改您的代码如下：

$("#markdrag").click(function(e) {

  e.preventDefault();

  var sel = document.getElementById('tlfeature');
  // get ID of the current marker
  var ids = sel[sel.selectedIndex].id;
  var dragInteraction = new ol.interaction.Modify({
    features: new ol.Collection([Msource.getFeatureById(ids)]),
    style: null
  });
});

OpenLayers 4 在更改时删除 features.getFeatures() 排序数组

OpenLayers 4 remove features.getFeatures() sort array on change

openlayers