Leaflet で GeoJSON タイルを表示するためのシンプルな実装です。このスクリプトのオリジナルは pkorac 氏によって作成されました。

leafletGeoJsonTileLayer.js

/*
# このスクリプトの元ネタはこちらです。
https://gist.github.com/pkorac/5287314

ご自身の責任でご利用ください。

- 普段通り地図画像タイルを設定します
- 'tileload' イベントから JSON をロードする関数を呼び出します
- タイルレイヤーに GeoJSON データを追加します
- ズーム完了時に一度タイルレイヤーをクリアすることで様々なズームレベルの GeoJSON タイルを利用できます
  - map.on の定義場所によっては 'zoomend' より 'zoomstart' の方が良い場合があります
*/

/*
CDN かダウンロードした Leaflet を読み込みます
axios を読み込みます
  - ただし Promise が利用できない環境の場合にはオリジナル通り jQuery を使うか Polyfill を読み込みます
*/

var map = L.map('map');

// 通常通り地図画像タイルを設定
var imageTile = new L.tileLayer(
  'http://Map image Tile URL/{z}/{x}/{y}.png',
  {
    attribution: 'attribution',
    maxZoom: 18
  }
).addTo(map);

// GeoJSON をセットするために空の GeoJSON レイヤーを設定します。
// ここでスタイルを設定することも可能です。
var vectorTile = L.geoJSON().addTo(map);

// 'tileload' イベントが発生する度に GeoJSON を読み込み、レイヤーにセットします。
imageTile.on('tileload', function(event) {
  var tilePath = event.coords;
  var x = tilePath.x;
  var y = tilePath.y;
  var z = tilePath.z;

  var jsonUri = 'URL to GeoJSON tile' + z + '/' + x + '/' + y + '.geojson';

  // ajax リクエストで GeoJSON を読み込み、レイヤーにセットします。
  axios.get(jsonUri).then(function(res) {
    vectorTile.addData(res.data);
  });
  /* Promise が使えない環境では jQuery などを利用します。
  $.geoJSON(jsonUri, function(json) {
    vectorTile.addData(res.data);
  })
  */
});

// ズームが変更されたら GeoJSON レイヤーをクリアします。
map.on('zoomend', function() {
  vectorTile.clearLayers();
});

map.setView([35.857182, 139.650787], 16);