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

【问题标题】：Leaflet clickable grid in polygon多边形中的传单可点击网格
【发布时间】：2019-12-24 20:34:44
【问题描述】：

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

是否有可能创建一个网格图案，其中图案的每个正方形都可以链接到点击事件？
类似于this 的东西。
它需要小方块，它们一起形成一个类似的多边形，如上所示。

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

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

【问题讨论】：

标签： javascript svg leaflet geospatial turfjs

【解决方案1】：

您可能希望create a square grid，然后calculate the intersection 在每个网格单元与每个多边形之间。

由您决定方形网格的详细信息，以及您是否希望所有多边形使用相同的网格，或者每个多边形使用不同的网格。

【讨论】：

很好，我不知道Turf...我下周试试
您也可以使用桌面工具（我猜 QGIS 也可以执行这些操作），但多边形网格化的一般概念应该类似。

【解决方案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);

'''

【讨论】：