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

Question

我正在使用 leaflet.js 来展示重新造林工作。

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

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

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

Answer 1

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

由您决定正方形网格的细节，以及您是希望所有多边形使用相同的网格，还是每个多边形使用不同的网格。

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

'''

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

Leaflet clickable grid in polygon

javascript

svg

geospatial

leaflet

turfjs