これはベクトルタイル Advent Calendar 2017 の記事です。

はじめに

Leaflet で GeoJSON タイルを扱う方法としては L.TileLayer.GeoJSON プラグインが定番で、国土地理院ベクトルタイル提供実験でもこのプラグインを使ったデモを紹介しています。
ただ、このプラグインは一世代前の Leaflet0.7系を対象としていて、現行版である Leaflet1.0系では動作しません。作者も忙しいといっているので今後も対応の見込みは薄そうです。

このエントリではプラグインや自前クラスを使わずにささっと Leaflet1.0系で GeoJSON タイルを表示する TIPS を紹介します。

デモ

https://bl.ocks.org/frogcat/raw/334998cbd13c4875211debf0a9e6f785/#17/35.66171/139.67930

ソース

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
  <title>Leaflet1.2 GeoJSON Tile Tips</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
</head>

<body>
  <div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
  <script>
    // Initalize map
    var map = L.map("map", L.extend({
      minZoom: 17,
      zoom: 18,
      maxZoom: 22,
      center: [35.64430, 139.67124]
    }, L.Hash.parseHash(location.hash)));
    map.zoomControl.setPosition("bottomright");
    L.hash(map);

    // Add background layer
    L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg", {
      attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>GSI</a>",
      maxZoom: 22,
      maxNativeZoom: 18
    }).addTo(map);

    // Create tilelayer with empty image
    L.tileLayer(L.Util.emptyImageUrl, {
      attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>GSI</a>",
      maxZoom: 22,
      maxNativeZoom: 18,
      minNativeZoom: 18
    }).on("tileload", function(event) {
      // Add tileload event handler to load geojson and add geojson layer
      var url = "https://cyberjapandata.gsi.go.jp/xyz/experimental_fgd/{z}/{x}/{y}.geojson";
      fetch(L.Util.template(url, event.coords)).then(a => a.ok ? a.json() : null).then(geojson => {
        if (!geojson || !this._map) return;
        event.tile.geojson = L.geoJSON(geojson, {
          style: function(geojson) {
            return {
              weight: 1.5,
              color: "#ffffff"
            };
          }
        }).addTo(this._map);
      });
    }).on("tileunload", function(event) {
      // Add tileunload event handler to remove geojson layer
      if (event.tile.geojson && this._map)
        this._map.removeLayer(event.tile.geojson);
    }).addTo(map);
  </script>
</body>

</html>

https://gist.github.com/frogcat/334998cbd13c4875211debf0a9e6f785

メモ

こんな仕組みです。

透明な画像を表示する L.TileLayer を作成
L.TileLayer のタイル追加イベントを拾って GeoJSON の取得／L.GeoJSON の追加
L.TileLayer のタイルの削除イベントを拾って L.GeoJSON の削除

L.tileLayer(L.Util.emptyImageUrl,{
  // レイヤーが表示される最大ズームレベル。デフォルトが18なので大きくしておく
  maxZoom: 22, 

  // ベクトルタイルの提供ズームレベル上限を指定
  maxNativeZoom: 18, 

  // ベクトルタイルの提供ズームレベル下限を指定
  minNativeZoom: 18 

}).on("tileload",function(event){

  // タイルをロードするときの処理を記述

}).on("tileunload",function(event){

  // タイルが消去されるときの処理を記述

}).addTo(map);

L.Util.emptyImageUrl はビルトインの透過GIFです
tileload event はタイルを読み込んだときに発行されるイベントです
同様に tileunload event はタイルが不要になったときに発行されるイベントです
maxNativeZoom / minNativeZoom にはベクトルタイルの提供ズームレベルの上下限を指定します

Leaflet1.0は従来の maxNativeZoom に加えて minNativeZoom にも対応しているので、上のような設定で勝手にオーバーズーミングもやってくれます。ただ、minNativeZoom を設定した状態でズームアウトするととてもたくさんのタイルを取得しに行くことになるので注意しましょう。