Leaflet foreach 具有自动触发鼠标悬停功能

Question

我遇到了这样一种情况，我必须创建一个类似于 ChoroplethExample. But the only problem is I have to iterate between all states(Features in geoJSON) 的仪表板应用程序，并在每次迭代中暂停大约 3 秒。

我发现这个 topic 给出了鼠标悬停触发示例。但是我们如何在这种情况下使用它。

下面是每次迭代都需要触发的函数： 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();
  }
}

Answer 1

可以使用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

Leaflet foreach 具有自动触发鼠标悬停功能

Leaflet foreach feature auto trigger mouseover function

javascript

jquery

geojson

leaflet