不止一张“oneachfeature”传单答案

【问题标题】：More than one "oneachfeature" leaflet不止一张“oneachfeature”传单
【发布时间】：2014-01-10 08:23:00
【问题描述】：

我正在尝试将两个功能组合在一个层上，但不能同时使它们发挥作用。一个是突出显示光标悬停在上面，另一个是在弹出窗口中获取信息。我已使用此指南突出显示：http://leafletjs.com/examples/choropleth.html（添加交互部分，试图将其合并到工作信息弹出层）。此外，目前它在悬停时突出显示，但如果它在点击时突出显示会很好。代码：

    function style(feature) {
    return {
        fillColor: 'blue',
        weight: 2,
        opacity: 1,
        color: 'grey',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

    L.geoJson(piirid, {style: style});

    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();
        }
    }

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
    }

    var geojson;
    // ... our listeners
    geojson = L.geoJson(piirid);

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }

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

    geojson = L.geoJson(piirid, {
        style: style,
        onEachFeature: onEachFeature,
        onEachFeature: onEachFeature3
    });

    function onEachFeature(feature, layer) {
        if (feature.properties) {
            layer.bindPopup("<br><b><big><u>Aadresss: " + feature.properties.L_AADRESS + "</br></b></big></u><br> <b>Maakond:&nbsp;</b>" + feature.properties.MK_NIMI
            + " <br><br>", {"offset":  [200, -50]});
        }

}

谢谢，克里斯蒂安

【问题讨论】：

为什么不直接使用 css 选择器 :hover 而不是 javascript？
你能说得更具体些吗？
当鼠标悬停事件发生时，您可以使用 css :hover 选择器，而不是在 javascript 中手动设置样式。像这样的东西：.layer:hover{color:grey; background-color:blue; ...}
我实际上是在点击时使用它，我更喜欢它，但无论如何感谢您的回答，仍然需要让突出显示和弹出窗口一起工作

标签： javascript gis leaflet

【解决方案1】：

将两个函数结合起来，它们使用相同的参数还不如集成为一个函数。

 function style(feature) {
        return {
            fillColor: 'blue',
            weight: 2,
            opacity: 1,
            color: 'grey',
            dashArray: '3',
            fillOpacity: 0.7
        };
    }

    L.geoJson(piirid, {style: style});

    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();
        }
    }

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
    }

    var geojson;
    // ... our listeners
    geojson = L.geoJson(piirid);

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }

    function onEachFeature3(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            //click: zoomToFeature
        });
        if (feature.properties) {
            layer.bindPopup("<br><b><big><u>Aadresss: " + feature.properties.L_AADRESS + "</br></b></big></u><br> <b>Maakond:&nbsp;</b>" + feature.properties.MK_NIMI
            + " <br><br>", {"offset":  [200, -50]});
        }
    }

    geojson = L.geoJson(piirid, {
        style: style,
        onEachFeature: onEachFeature3
    });

【讨论】：