使用任何瀏覽器在OpenLayers 3中進行非常緩慢的懸停交互除了Chrome

Question

我有兩種交互風格，一種突出顯示此功能，另一種突出顯示此功能，第二種顯示特徵名稱爲tooltop。評論都出來了，它們非常快，離開，地圖應用程序在IE和Firefox（但不是Chrome）中變慢。

map.addInteraction(new ol.interaction.Select({ 
    condition: ol.events.condition.pointerMove, 
    layers: [stationLayer], 
    style: null // this is actually a style function but even as null it slows 
})); 

$(map.getViewport()).on('mousemove', function(evt) { 
    if(!dragging) { 
     var pixel = map.getEventPixel(evt.originalEvent); 
     var feature = null; 
     // this block directly below is the offending function, comment it out and it works fine 
     map.forEachFeatureAtPixel(pixel, function(f, l) { 
      if(f.get("type") === "station") { 
       feature = f; 
      } 
     }); 
     // commenting out just below (getting the feature but doing nothing with it, still slow 
     if(feature) { 
      target.css("cursor", "pointer"); 
      $("#FeatureTooltip").html(feature.get("name")) 
       .css({ 
       top: pixel[1]-10, 
       left: pixel[0]+15 
       }).show(); 
     } else { 
      target.css("cursor", ""); 
      $("#FeatureTooltip").hide(); 
     } 
    } 
}); 

我的意思是，這似乎像的OpenLayers-3的問題，但我只是想確定我是不是忽視的東西人在這裏。

噢，大概有600+點。這是很多，但不是不合理的，所以我會想。放大以限制視圖中的功能絕對有幫助。所以我想這是一個功能問題。

Answer 1

這是一個已知的錯誤，需要更多的調查。您可以在此跟蹤進度：https://github.com/openlayers/ol3/issues/4232。

然而，有一兩件事可以做，以使事情更快：從map.forEachFeatureAtPixel返回truthy值停止檢查功能，一旦一個發現：

var feature = map.forEachFeatureAtPixel(pixel, function(f) { 
    if (f.get('type') == 'station') { 
    return feature; 
    } 
}); 

Answer 2

除了@ ahocevar的答案，可能爲您優化的是利用選擇interaction's select event。

看來，選擇交互和你的mousemove監聽器都檢查在同一層上的命中，做雙重工作。只要所選功能組發生更改，選擇交互就會觸發select事件。您可以聽它，並在選擇某個功能時顯示彈出窗口，如果沒有，則將其隱藏。

這應該減少一半的工作，假設forEachFeatureAtPixel是什麼佔用系統。

Answer 3

我有同樣的問題，通過setInterval解決了一個問題，關於這個稍後 1）每一個鼠標移動到1個像素觸發事件，並且你將有一個事件，直到你停止移動，並且quee將運行在calback功能，並凍結 2）如果你有困難的風格的對象，在畫布上顯示的所有元素都需要時間來計算，如果他們打光標

決心： 1.使用的setInterval 2.檢查像素移動如果小於N，則返回 3.對於多個樣式的圖層，嘗試通過分成多個樣式來簡化它們，並且只允許通過交互爲光標移動一個圖層

function mouseMove(evt) { 
    clearTimeout(mm.sheduled); 
    function squareDist(coord1, coord2) { 
    var dx = coord1[0] - coord2[0]; 
    var dy = coord1[1] - coord2[1]; 
    return dx * dx + dy * dy; 
    } 

    if (mm.isActive === false) { 
    map.unByKey(mm.listener); 
    return; 
    } 

    //shedules FIFO, last pixel processed after 200msec last process 
    const elapsed = (performance.now() - mm.finishTime); 

    const pixel = evt.pixel; 
    const distance = squareDist(mm.lastP, pixel); 
    if (distance > 0) { 
    mm.lastP = pixel; 
    mm.finishTime = performance.now(); 
    mm.sheduled = setTimeout(function() { 
     mouseMove(evt); 
    }, MIN_ELAPSE_MSEC); 
    return; 
    } else if (elapsed < MIN_ELAPSE_MSEC || mm.working === true) { 
    // console.log(`distance = ${distance} and elapsed = ${elapsed} mesc , it never should happen`); 
    mm.sheduled = setTimeout(function() { 
     mouseMove(evt); 
    }, MIN_ELAPSE_MSEC); 
    return; 
    } 

    //while multithreading is not working on browsers, this flag is unusable 
    mm.working = true; 
    let t = performance.now(); 
    //region drag map 
    const vStyle = map.getViewport().style; 
    vStyle.cursor = 'default'; 

    if (evt.dragging) { 
    vStyle.cursor = 'grabbing'; 
    }//endregion 
    else { 
    //todo replace calback with cursor=wait,cursor=busy 
    UtGeo.doInCallback(function() { 
     checkPixel(pixel); 
    }); 
    } 
    mm.finishTime = performance.now(); 

    mm.working = false; 
    console.log('mm finished', performance.now() - t); 
}