如何在mouseover和超链接上的leaflet.js中显示突出显示的轮廓？

当用户将鼠标hover在传单中的对象上时，我需要在对象周围显示轮廓。 现在，我可以让对象一直突出显示或根本不突出显示。 以下是我的代码示例：

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. 发生鼠标hover时，显示突出显示以及弹出标签。 当鼠标离开物体时，高光将消失。

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

创建一个变量来存储突出显示的图层和设置和取消设置突出显示的function：

 // 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