多边形中的传单可点击网格

Question

我正在使用 Leaflet.js 来展示重新造林的努力。

有没有可能创建一个网格模式，其中模式的每个方块都可以链接到一个点击事件？
同样的事情也喜欢这样。
如上所示，它需要小方块共同形成一个类似的多边形。

我尝试了 Leaflet-pattern，但正方形会在缩放时调整大小，并且无法向图案形状添加事件。

我可以为此使用传单矩形吗？ 我如何找到每个正方形的正确纬度和经度？

Answer 1

您可能想要创建一个方形网格，然后计算每个网格单元与每个多边形之间的交集。

由您决定方形网格的详细信息，以及是要为所有多边形使用相同的网格，还是为每个多边形使用不同的网格。

Answer 2

感谢Ivan Sanchez，我找到了解决方案。 对于任何寻找它的人，请参阅此JSFiddle 。

'''

    // initialize the map on the "map" div with a given center and zoom
    var map = L.map(
      'map', {
        layers: [map]
      }
    ).setView([-5.0, 19.40], 11);

    //HexGrid
    var bbox = [19.35, -5, 19.5, -5.15];
    var cellSide = 1;
    var options = {
      units: 'kilometers'
    };
    var hexgrid = turf.hexGrid(bbox, cellSide, options);

    //Polygram that will contain the hexagons
    let poly1 = turf.polygon([
      [
        [19.4, -5],
        [19.5, -5.1],
        [19.4, -5.1],
        [19.4, -5]
      ]
    ]);

    _.each(hexgrid.features, function(hex) {
      var intersection = turf.intersect(poly1, hex.geometry);
      if (intersection) {
        hex.geometry = intersection.geometry;
      } else {
        hex.geometry = {
          type: "Polygon",
          coordinates: []
        }
      }
    })


    L.geoJSON(hexgrid, {
      style: function(feature) {
        return {
          weight: 1
        };
      }
    }).addTo(map);
    L.geoJSON(poly1).addTo(map);

'''