【问题标题】: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);
    

    '''

    【讨论】:

      猜你喜欢
      • 2017-08-05
      • 2021-04-05
      • 2015-04-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-11-25
      • 2016-09-23
      • 1970-01-01
      相关资源
      最近更新 更多