調査に丸一日かかったが、以下の組み合わせでうまく行くことがわかった。
1. タイルサーバにはtileserver-glを使用する
2. ローカルに準備するタイルはMaptiler Dataのサイトから.mbtiles形式のものをダウンロードする
3. LeafletのtleLayer()関数でxyzタイルサーバを呼ぶ
1. tileserver-glのインストール
$ npm i -g tileserver-gl
2. タイルデータのダウンロード
Maptiler DataからDatasetsを選択
OpenStreetMap vector tilesを選択。
ナイロビのデータで31MBくらい。拡張子は.mbtiles。
3. タイルサーバを起動
$ tileserver-gl osm-2020-02-10-v3.11_kenya_nairobi.mbtiles
4. leafletのtileLayerを使って地図をレンダリング。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script> <script> function init() { var mymap = L.map('mapcontainer'); mymap.setView([-1.091176, 37.011073], 15,); L.tileLayer("http://localhost:8080/styles/basic-preview/{z}/{x}/{y}.png").addTo(mymap); } </script> </head> <body onload="init()"> <div id="mapcontainer" style="width:600px;height:600px"></div> </body> </html>
できた。
