你如何使一個突出顯示的輪廓顯示在leaflet.js上的鼠標懸停和超鏈接？

Question

當用戶將鼠標放在傳單中的對象上時，我需要在對象周圍出現輪廓。現在，我可以始終使對象突出顯示或完全不顯示。這裏是我的代碼示例：

var polygon1 = L.polygon([ 
    [83.34425, -19.51172], 
    [83.2571, -15.86426], 
    [83.07408, -16.04004], 
    [82.78192, -17.31445], 
    [82.62569, -11.42578], 
    [82.36164, -11.29395], 
    [82.11236, -12.48047], 
    [82.37332, -22.71973], 
    [82.64822, -22.93945], 
    [83.34425, -19.51172] 
], { 
    color: 'yellow', 
    opacity: 0.0, 
    fillColor: '#fff', 
    fillOpacity: 0.0 
}); 
polygon1.bindLabel(popup_csb); 
polygon1.bindPopup(content_csb); 
polygon1.addTo(map); 

我需要在兩種情況下爲要描述的對象生成一個事件。

1. 當鼠標懸停發生時，顯示突出顯示以及彈出標籤。當鼠標離開物體時，高光會消失。

2. 當用戶點擊頁面上的鏈接（建築物列表）並勾勒出該對象以向用戶顯示建築物在地圖上的位置時。

當用戶點擊另一個建築物時，第二種情況也必須有禁用事件。

非常感謝您的幫助！

Answer 1

首先你需要有你的默認，突出風格得心應手：

var style = { 
    'default': { 
     'color': 'yellow' 
    }, 
    'highlight': { 
     'color': 'red' 
    } 
}; 

創建一些多邊形和他們組，使他們方便：

var group = new L.LayerGroup([ 
    new L.Polygon([ 
     [-50, -50], [50, -50], [50, -10], [-50, -10] 
    ], { 
     'label': 'Polygon 1', 
     'popup': 'Polygon 1' 
    }), 
    new L.Polygon([ 
     [-50, 10], [50, 10], [50, 50], [-50, 50] 
    ], { 
     'label': 'Polygon 2', 
     'popup': 'Polygon 2' 
    }) 
]).addTo(map); 

創建一個變量來存儲突出顯示圖層和功能，用於設置和取消突出顯示：

// Variable for storing highlighted layer 
var highlight; 

function setHighlight (layer) { 
    // Check if something's highlighted, if so unset highlight 
    if (highlight) { 
    unsetHighlight(highlight); 
    } 
    // Set highlight style on layer and store to variable 
    layer.setStyle(style.highlight); 
    highlight = layer; 
} 

function unsetHighlight (layer) { 
    // Set default style and clear variable 
    layer.setStyle(style.default); 
    highlight = null; 
} 

遍歷層，設置樣式，綁定標籤和彈出，並添加處理程序：

// Iterate 
group.eachLayer(function (layer) { 

    // Set default style 
    layer.setStyle(style.default); 
    // Bind label with polygon option variable 
    layer.bindLabel(layer.options.label); 
    // Bind popup with polygon option variable 
    layer.bindPopup(layer.options.popup); 

    // Mouseover handler 
    layer.on('mouseover', function (e) { 
     // Set highlight 
     setHighlight(layer); 
    }); 

    // Mouseout handler 
    layer.on('mouseout', function (e) { 
     // Unset highlight 
     unsetHighlight(layer); 
    }); 

    // Fetch list from DOM 
    var list = L.DomUtil.get('list'), 
     // Add list item 
     item = L.DomUtil.create('li', 'item', list), 
     // Add link 
     link = L.DomUtil.create('a', 'link', item); 

    // Set link text 
    link.textContent = layer.options.label; 
    // Set link href 
    link.href = '#'; 

    // Add clickhandler to link 
    L.DomEvent.addListener(link, 'click', function (e) { 
     // Set highlight 
     setHighlight(layer); 
    }); 
}); 

實施例：http://plnkr.co/edit/LjzFbI?p=preview