Question

我添加了一个功能，可以在悬停到要素图层时显示弹出窗口，但它不能很好地工作。

这是我的代码：

map.on('pointermove', function(evt) {
  if (evt.dragging) {
    return;
  }

  var info = $('#info');
  info.html("");
  var pixel = map.getEventPixel(evt.originalEvent);
  var feature = map.forEachLayerAtPixel(pixel, function(feature) { return true; }, null, function(layer) { return layer === pmfeatlayer; });
  var viewResolution = map.getView().getResolution();
  var coordinate = evt.coordinate;
  url = pmfeatlayer.getSource().getGetFeatureInfoUrl(coordinate, viewResolution, projection, {'INFO_FORMAT': 'text/html'});

  if (feature && url) {

    info.css({
      left: pixel[0] + 'px',
      top: pixel[1] + 'px'
    });
//    setTimeout(function() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", url, true);
    xhttp.send();
    xhttp.onreadystatechange = function (aEvt) {
      if (xhttp.readyState == 4 && xhttp.status == 200) {

          var parser = new window.DOMParser();
          var res = parser.parseFromString(xhttp.responseText, "text/xml");
          var myitems = res.getElementsByTagName('item');

          if(res.getElementsByTagName('item').length != 0){
            info.html("<div class='hoverPopup'>" + hover(xhttp.responseText) + "</div>").delay( 1000 ).fadeIn( 400 );
          } else {
            info.html("");
          }

       } // end if 4 && 200
     }; // end onreadystatechange
 //}, 1000);
   } // end if (feature && url)
 }); // end pointermove

你可以看到我使用map.on('pointermove'...但它不是确切的事件，我可以使用什么来检测光标位于要素图层之上而它不是移动，例如，.5秒？

我试图添加一个延迟功能但是，它仍然没有正常工作，它产生了很多请求，并且由于延迟而弹出显示错误，并且光标可以在地图的其他部分上时间显示。

Answer 1

感谢@bennos在gis.stackexchange上回答我

var stillMoving = [];
function delayPopup() {
    stillMoving.push(true);          // add my call to array

    setTimeout(function() {
        stillMoving.shift();         // remove my call from array

        // check if more calls are pending
        // if yes stop propagation
        if ( stillMoving[ 0 ] ) {
            return;
        }
        else {
            // load the popup here
            loadPopup();
        }
    }, 500);
}

OpenLayers 4悬停弹出延迟

1 个答案: