2016-09-08 13 views
2

リーフレットを使用すると、ロードされたタイルの境界(NorthEast、SouthWest)を取得する方法はありますか?私はロードされている特定のタイルのマーカーのみをロードするようにサーバーに要求したいので、ユーザーが地図をパ​​ン/ドラッグしているときに、新しいエリアの新しいマーカーを簡単に見ることができます。リーフレットの読み込みタイルの境界を取得する

答えて

2

本当にやりたいことは、L.GridLayerのサブクラスです。これにより、ロード/アンロードされたタイルの細かい制御が可能になり、プライベートL.GridLayer._tileCoordsToBounds()メソッドを使用する最善の方法です。ロードされたマーカーのいくつか基本取り扱いに

、それは次のようになります。

L.GridLayer.MarkerLoader = L.GridLayer.extend({ 

    onAdd: function(map){ 
     // Add a LayerGroup to the map, to hold the markers 
     this._markerGroup = L.layerGroup().addTo(map); 
     L.GridLayer.prototype.onAdd.call(this, map); 

     // Create a tilekey index of markers 
     this._markerIndex = {}; 
    }, 

    onRemove: function(map){ 
     this._markergroup.removeFrom(map); 
     L.GridLayer.prototype.onRemove.call(this, map); 
    }; 

    createTile: function(coords, done) { 

     var tileBounds = this._tileCoordsToBounds(coords); 
     var tileKey = this._tileCoordsToKey(coords); 

     var url = ...; // Compute right url using tileBounds & coords.z 

     fetch(url).then(function(res){ 
      if (!key in this._markerIndex) { this._markerIndex[key] = []; } 

      // unpack marker data from result, instantiate markers 
      // Loop as appropiate 
      this._markerGroup.addLayer(marker); 
      this._markerIndex[key] = marker; 

      done(); // Signal that the tile has been loaded successfully 
     }); 
    }, 

    _removeTile: function (key) { 
     for (var i in this._markerIndex[key]) { 
      this._markerGroup.remove(this._markerIndex[key][i]); 
     } 

     L.GridLayer.prototype._removeTile.call(this, key); 
    } 
}); 

前に、タイルがアンロードのでマーカーが削除される(つまりズームがバグやグラフィカルな不具合の原因かもしれませんのでご注意ください新しいズームレベルのマーカーがロードされます)。それに気をつけてください。

関連する問題