leafletjs:在鼠标悬停时突出显示折线

时间:2014-10-22 09:48:17

标签: leaflet highlight polyline

似乎标题是不言自明的,但要详细说明,这是我遇到的问题,我有一系列折线,我在地图上显示,现在我的目标是当我将鼠标悬停在列表中的某条折线上时,只有该折线突出显示(或更改颜色)。我现在所拥有的是这样的(这段代码在一个循环内部,最后用polyline数据填充polyLineArray,

var pointList = [];

// pointList is an array and lat/lngs

var polyLineProperties = {
    color: 'red',
    opacity: 1,
    weight: 5,
    clickable: true
}

var polyLine = new L.polyline(pointList, polyLineProperties);
polyLine.on('mouseover', function() {
    // WHAT TO DO HERE to HIGHLIGHT that specific polyline.
});

polyLineArray.push(polyLine);

希望有人可以帮助我,它会很好,如果有人甚至可以建议如何改变折线的任何属性而不仅仅是颜色。

谢谢你,等待你的回复:)

1 个答案:

答案 0 :(得分:9)

好的,

很抱歉,但是由于以下链接上的教程,我已经设法解决了这个问题,

Interactive Choropleth Map

这就是所需要的,

polyLine.on('mouseover', function(e) {
    var layer = e.target;

    layer.setStyle({
        color: 'blue',
        opacity: 1,
        weight: 5
    });
});

谢谢大家阅读。