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

我需要在两种情况下为对象制作一个事件。

发生鼠标悬停时，显示突出显示以及弹出标签。当鼠标离开物体时，高光将消失。
当用户点击页面上的链接（建筑物列表）时，会勾勒出该对象，以向用户显示该建筑物在地图上的位置。

当用户点击另一个建筑时，第二个案例也必须有一个禁用事件。

非常感谢你的帮助！

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

如何使鼠标悬停和超链接在leaflet.js中显示突出显示的轮廓？

1 个答案: