在 Leaflet 中，如何仅在单击每个图块时才加载图块？

Question

我有一张传单地图，其中包含带有经纬度元数据的卫星图像。我的目标是在鼠标点击时显示一个矩形突出显示选定的图块并获取相应的图块。 L.rectangle 方法需要边界来显示矩形。为了计算 SE 和 NW 角，我使用了在 https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_numbers_to_lon..2Flat 找到的以下函数。

这是针对 SE 的，如上链接所示，为获取 NW 更改了相同的功能。这些用作矩形的边界。

//I have a fixed zoom level for my problem :4

function(xtile,ytile,zoom) //here i am giving the tile location coordinates as the input
{ 
n=2.0**zoom;
lon= (xtile+1)/n*360-180;
lat_rad=Math.atan(Math.Sinh(Math.PI*(1-2*(ytile+1)/n)));
lat=lat_rad(180/Math.PI);
return[-lat,lon] 
}

输出如下：

NW -782.67,-112.4
SE -79.163,-89.9
with(suppose) xtile=5 and ytile=14

然而实际输出应该是：

NW -66.51,-45
SE -74.01,-22.5
and the corresponding(again,suppose) xtile=5 and ytile=1 

所以基本上，对于某些瓷砖，矩形显示得很好。但对于其他人来说，它会跳转到其他一些图块。我有一个选定图块的显示窗口，当矩形跳转时，既不会获取选定图块，也不会提取突出显示的图块。如果有人可以帮助我，我将非常感激。

Answer 1

我的目标是在鼠标点击时显示一个矩形突出显示选定的图块并获取相应的图块。

那么解决根本问题的一个好方法是使用自定义L.GridLayer，因为它提供了创建空图块、将事件附加到它们并处理图块坐标的功能，而无需显式处理边界框。

会是这样的：

L.GridLayer.ClickyLoad = L.GridLayer.extend({

  // By default, the container for a whole zoom level worth of visible tiles
  // has a "pointer-events: none" CSS property. Override this whenever a new
  // level container is created. This is needed for pointer (mouse) interaction.
  _onCreateLevel: function(level) {
    level.el.style.pointerEvents = 'inherit';
  },

  // The tiles shall be empty <div>s with some DOM events attached.
  createTile: function(coords){

        var tile = L.DomUtil.create('div');

    tile.style.border = '1px solid black';

    // Highlighting the tile on mouse hover is just swag.    
    L.DomEvent.on(tile, 'mouseover', function(){
      tile.style.border = '2px solid red';
    });
    L.DomEvent.on(tile, 'mouseout', function(){
      tile.style.border = '1px solid black';
    });

    // When a tile is clicked, calculate the URL of the tile (using the same 
    // logic as L.TileLayer.getTileUrl() ), create a <img> element, and put
    // the newly created image inside the empty <div> tile.
    L.DomEvent.on(tile, 'click', function(){
      var img = L.DomUtil.create('img');
      img.src = L.Util.template('https://tile.openstreetmap.org/{z}/{x}/{y}.png', coords);
      tile.appendChild(img);
    });

    return tile;
  }
});

// Create instance and add to map
(new L.GridLayer.ClickyLoad()).addTo(map);

查看fully working example here。

像往常一样，这种看起来不平凡的例子，建议阅读Leaflet documentation、tutorial about extending classes，以及Leaflet源代码本身。