Openlayers 5: изменить взаимодействие, как получить указанную вершину - PullRequest
Новая
       11

Openlayers 5: изменить взаимодействие, как получить указанную вершину

0 голосов
/ 06 июня 2018

При изменении объекта есть возможность удалить одну вершину.В соответствии с документами написано:

removePoint () {логический}: удаляет вершину, на которую в данный момент указывает.

(https://openlayers.org/en/latest/apidoc/ol.interaction.Modify.html)

СЯ работаю на мобильных устройствах, я хотел бы представить всплывающее окно с кнопкой удаления рядом с вершиной, если пользователь щелкает или наводит курсор на нее. Поэтому мне нужны координаты этой вершины. Я могу видеть вершину, указанную на карте с помощьюдругой стиль, но как я могу получить его или его координаты? Он должен быть где-то в некотором выделении, потому что автоматический метод "наведения на стиль" и метод removePoint работают сами по себе.

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Вот решение, которое использует кнопку для удаления вершины.Кнопка отображается или скрывается, если есть удаляемая вершина (это может быть всплывающее окно).

Используется:

  • опция условия, чтобы показать кнопку, если есть точкарядом с кнопкой
  • параметр insertVertexCondition, чтобы скрыть кнопку (здесь нет вершины)
  • событие modifystart и modifyend, чтобы скрыть кнопку (мы перемещаемся и не хотим, чтобы кнопка былавидимый)
  • функция removePoint при нажатии на кнопку

Кнопка не отображается, если вы двигаетесь или нет смысла удалять.Он не полагается на функции, которые не документированы или являются закрытыми.

Вы можете увидеть его в действии здесь . 

var btElt = document.getElementById("delete");

// Modify interaction
var mod = new ol.interaction.Modify({
  source: vector.getSource(),
  // Show on select
  condition: function(e){
    // Check if there is a feature to select
    var f = this.getMap().getFeaturesAtPixel(e.pixel,{
      hitTolerance:5
    });
    if (f) {
      var p0 = e.pixel;
      var p1 = f[0].getGeometry().getClosestPoint(e.coordinate);
      p1 = this.getMap().getPixelFromCoordinate(p1);
      var dx = p0[0]-p1[0];
      var dy = p0[1]-p1[1];
      if (Math.sqrt(dx*dx+dy*dy) > 8) {
        f = null;
      }
    }
    if (f) btElt.style.display = "inline-block";
    else btElt.style.display = "none";

    return true;
  },
  // Hide on insert
  insertVertexCondition: function(e) {
    btElt.style.display = "none";
    return true;
  }
});
// Hide on modifying
mod.on(['modifystart','modifyend'], function(){
  btElt.style.display = "none";
});
map.addInteraction (mod);

// Delete vertex when click the button
function deleteVertex() {
  mod.removePoint();
  btElt.style.display = "none";
}
0 голосов
/ 06 июня 2018

Хорошо, копаясь в исходном коде, я нашел довольно уродливое, но пока работающее решение.Для справки, это код. 

this.modify = new Modify({
    features: new Collection([this.selectedFeature]),
    pixelTolerance:30,
    condition: (event)=>{
        if(this.modify["lastPointerEvent_"] && this.modify["vertexFeature_"])
            this.removePointPopup.setPosition(this.modify["lastPointerEvent_"].coordinate);
        else
            this.removePointPopup.setPosition(undefined);
        return true;
    }
});
this.modify.on("modifyend",ev=>{
   this.removePointPopup.setPosition(ev.target["lastPointerEvent_"].coordinate);
})

[...]

removePoint(){
     this.modify.removePoint()
     this.removePointPopup.setPosition(undefined);
}

Если кто-то знает о более хорошем решении, не стесняйтесь опубликовать его.

...