带有 geojson 多边形的鼠标悬停动作

Question

第一次在 Leaflet 中使用 geojson 多边形。我想添加以下操作： 1. 鼠标悬停更改颜色 2. Onclick 超链接到 url

这是代码一多边形层。

/* Overlay Layers */
var boroughs = L.geoJson(null, {
  style: function (feature) {
    return {
      color: "blue",
      fill: false,
      opacity: 1,
      clickable: true
    };
  },

$.getJSON("data/boroughs.geojson", function (data) {
  boroughs.addData(data);
});

带有切换层的当前工作地图。

Answer 1

L.GeoJSON 的选项有一个 onEachFeature 选项，我看到您在源代码中广泛使用了该选项。它接受一个带有两个参数的函数，特征（包含 geojson 特征）和层（包含对实际多边形层的引用）。层支持可以挂钩的鼠标事件。例如：

var layer = new L.GeoJSON(null, {
  onEachFeature: function (feature, layer) {
    layer.on('mouseover', function () {
      this.setStyle({
        'fillColor': '#0000ff'
      });
    });
    layer.on('mouseout', function () {
      this.setStyle({
        'fillColor': '#ff0000'
      });
    });
    layer.on('click', function () {
      // Let's say you've got a property called url in your geojsonfeature:
      window.location = feature.properties.url;
    });
  }
}).addTo(map);