Как сделать созданный Draw видимым до того, как мышь начнет двигаться - PullRequest
Новая
       23

Как сделать созданный Draw видимым до того, как мышь начнет двигаться

0 голосов
/ 06 апреля 2019

Есть ли способ представить только что созданное взаимодействие Draw, чтобы визуализировать себя перед первым событием мышиной мыши?

Я использую openlayers 4.6.5.Приложение создает ol.interaction.Draw в ответ на событие клавиатуры.Тип является LineString.После первого перемещения мыши ожидаемый круг отображается в позиции мыши.Моя проблема заключается в том, что взаимодействие с Draw не отображает ничего, пока пользователь не сделает первое движение мыши.

1 Ответ

0 голосов
/ 07 апреля 2019

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

Добавить прослушиватель для pointermove событий на карту и сохранить последнее 

var lastEvent;
map.on('pointermove', function(event){ lastEvent = event; });

тогда, когда вы добавляете взаимодействие, получите его для обработки последнего события 

map.addInteraction(draw);
draw.handleEvent(lastEvent);

Версия 4.6.4 работает для меня.Через 5 секунд добавляется взаимодействие, затем удаляется и добавляется новое взаимодействие с интервалами 5 и 10 секунд: 

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var source = new ol.source.Vector();

  var vector = new ol.layer.Vector({
    source: source
  });

  var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });

  var draw; // global so we can remove it later
  function addInteraction() {
      draw = new ol.interaction.Draw({
        source: source,
        type: 'LineString'
      });
      map.addInteraction(draw);
  }

  var lastEvent;
  map.on('pointermove', function(event){ lastEvent = event; });

  var add = false;
  setInterval(function(){
    add = !add;
    if (add) {
      addInteraction();
      draw.handleEvent(lastEvent);
    } else {
      map.removeInteraction(draw);
    }
  }, 5000);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js"></script>
<div id="map" class="map"></div>
...