Leaflet

Question

这是我的工作示例http://members.upcpoczta.pl/w.racek/mapa.html

我想实现的是：

像现在一样在鼠标悬停时保持突出显示，
当我点击突出显示的自行车路线时，我想保持缩放功能，但当它放大到一条路线时，我想继续突出显示，直到我在所选路线外单击或移动地图.

现在它可以很好地放大，但是当您移动鼠标时突出显示会消失并且您真的不知道您点击了哪条路线。

Answer 1

好吧，有点老套，但将其视为如何完成类似任务的演示。创建一个变量 selected，并在触发 click 处理程序时将突出显示的功能存储在其中。现在，在您的 mouseout 处理程序中，您需要检查是否进行了选择，查看它是否与触发 mouseout 的图层相对应，如果是，请不要删除突出显示的样式。此外，您还需要在 click 处理程序中编写一些逻辑，如果已经做出选择，它会从中删除突出显示。

代码示例：

    function highlight (layer) {
        layer.setStyle({
            weight: 5,
            dashArray: ''
        });
        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }
    }

    function dehighlight (layer) {
        if (selected === null || selected._leaflet_id !== layer._leaflet_id) {
            geojson.resetStyle(layer);
        }
    }

    // Variable to store selection
    var selected = null;

    function select (layer) {
        // See if there is already a selection
        if (selected !== null) {
            // Store for now
            var previous = selected;
        }
        map.fitBounds(layer.getBounds());
        // Set new selection
        selected = layer;
        // If there was a previous selection
        if (previous) {
            // Dehighlight previous
            dehighlight(previous);
        }
    }

    var geojson = L.geoJson(rower, {
        style: function (feature) {
            return {
                weight: 2,
                opacity: 1,
                color: feature.properties.colour,
                dashArray: 3,
            };
        },
        onEachFeature: function (feature, layer) {
        layer.on({
            'mouseover': function (e) {
                highlight(e.target);
            },
            'mouseout': function (e) {
                dehighlight(e.target);
            },
            'click': function (e) {
              select(e.target);
            }
        });
    }
}).addTo(map);

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/fdTnA9CyJdJejiPq2q8M?p=preview

您还需要为地图 click 或 moveend 或您要完成的任何用户体验编写处理程序，并在其中检查是否有选择，然后删除它的突出显示，但是一旦你掌握了这个概念，这就相当简单了。

Leaflet - 鼠标悬停、点击和取消点击

Leaflet - Mouseover, Click and unclick

javascript

mouseover

highlight