Question

首次在Leaflet中使用geojson多边形。我想添加以下操作： 1.鼠标悬停改变颜色 2.点击指向网址的超链接

这是代码一个多边形图层。

/* 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);
});

Current working map with toggle layers.

Answer 1

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

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

Answer 2

以下是显示geojson多边形的工作代码，使用鼠标悬停和onclick超链接使用＆＃39; URL＆＃39; geojson中的字段。

   var districts = L.geoJson(null, {
  style: function (feature) {
    return {
      color: "green",
      fill: true,
      opacity: 0.8
    };
  },


onEachFeature(feature, layer) {
    layer.on('mouseover', function () {
      this.setStyle({
        'fillColor': '#0000ff'
      });
    });
    layer.on('mouseout', function () {
      this.setStyle({
        'fillColor': '#ff0000'
      });
    });
    layer.on('click', function () {
    window.location = feature.properties.URL;
    });
}

});

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

使用geojson多边形进行鼠标悬停操作

2 个答案: