mbtilesでタイルを表示するメモ。
Leaflet.TileLayer.MBTilesプラグインでmbtilesでタイルを表示できる。
動作させるためにはプラグインの他に、sql.jsも必要。
事前に、MBUtil等を利用してラスタタイルを格納したmbtilesを作成しておく。
正常に動作させるには、webサーバーで表示する必要あり。
IE11で表示する場合は、Polyfillも必要。
npmでインストール。
npm install Leaflet.TileLayer.MBTiles
sql.jsを読み込み。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Starter</title>
<script src="https://unpkg.com/sql.js@0.3.2/js/sql.js"></script>
</head>
<body>
<div id="map"></div>
<script src="./app.js"></script>
</body>
</html>
プラグインのJSとCSSを読み込み。
main.js
// CSS一式を読み込んでパッケージ
import "leaflet/dist/leaflet.css";
import "./css/style.css";
// JS一式を読み込んでパッケージ
import 'Leaflet.TileLayer.MBTiles';
import './js/script.js';
mbtilesを読み込む設定。
script.js
//mbtiles読み込み
var mb = new L.tileLayer.mbTiles('./tiles/tiles.mbtiles', {
attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});
Leafletを手軽に始めるビルド環境公開しています。
leaflet-starter
