每张单张都有自动触发鼠标悬停功能

Leaflet foreach feature auto trigger mouseover function

本文关键字：鼠标 悬停 功能 张单张      更新时间：2023-09-26

我遇到了一个情况，我必须创建一个类似于choropletheexample的仪表板应用程序。但唯一的问题是我必须在所有状态(geoJSON中的功能)之间进行迭代，并在每次迭代中暂停3秒。

我发现这个主题，鼠标悬停触发的例子给出。但是我们如何在这种情况下使用它呢?

下面是需要在每次迭代中触发的函数:LeafletExample 

function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
    weight: 5,
    color: '#666',
    dashArray: '',
    fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
    layer.bringToFront();
  }
}

您可以使用L.GeoJSON的eachLayer方法迭代各层，然后在当前层使用highlightFeature方法，在前一层(如果有的话)使用resetHighlight方法。

删除当前交互:

function onEachFeature(feature, layer) {
    layer.on({
        //mouseover: highlightFeature,
        //mouseout: resetHighlight,
        //click: zoomToFeature
    });
}

添加迭代器:

// Variables for storing currently highlighted feature and delay amount
var highlight, delay = 0;
// Iterate over each layer in the geojsonlayer
geojson.eachLayer(function (layer) {
    // Mimick event object because highlightFeature and resetHighlight
    // expect an object with the layer as target property
    layer = {'target': layer};
    // Up the delay amount
    delay = delay + 3000;
    setTimeout(function() {
        // Check if there is a highlight, if so reset
        if (highlight) {
            resetHighlight(highlight);
        }
        // Highlight current and store
        highlightFeature(layer);
        highlight = layer;
    }, delay);
});

示例:http://plnkr.co/edit/QD2uHv?p=preview

相关文章：